Sorry, just can't get this'
Here: http://www.crownoilfield.com/ it looks as I want, except that for a browser window below 1040px, where the top logo floats below the company name.
<div id="top_wide">
<div id="crownlogo"><img name="crown_logo6p32" src="images/crown_logo6p32.gif" >
</div>
<div id="top">
<div id="logo"> <img src="images/crown_oilfield_svc_4.png" ></div>
#top_wide {
color:#474327;
font-size:36px;
}
#crownlogo {
float:left;
padding:0px;
padding-left:5px;
display: table-cell;
}
#crownlogo img {
margin:0;
}
#top {
position:relative;
height:82px;
width:1040px;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
display: table-cell;
vertical-align:middle;
display: inline-block;
display: table;
}
#logo {
width:620px;
float:left;
color:#474327;
display: table-cell;
vertical-align:middle;
font-size:xx-large;
margin-top:20px;
margin-left:-77px;
}
Thanks,
ed
try this:
#top {
position: relative;
height: 82px;
width: 1040px;
background-repeat: no-repeat;
display: block;
margin-left: 165px;
clear: right;
}
#logo {
width: 620px;
float: left;
color: #474327;
vertical-align: middle;
font-size: xx-large;
margin-top: 20px;
}
Related
I can't seem to change the width of my checklist. I'm trying to reduce the width and have some margin around the checklist item but it doesn't work. Here's what I have so far: https://jsfiddle.net/h64f1otw/1/
Snippet of my checklist:
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
columns: 2 4em;
}
.checkList li{
color: #fff;
}
I'm trying to achieve something like below:
what i did is adding display:flex for ul element and applying margin on li element with width:50% for each
to center your div you need to add margin:0 auto on heroInner class and remove padding on content class
.hero {
position: relative;
height: 44vh;
max-height: 64rem;
min-height: 28rem;
}
.background {
background-image: url('https://images.unsplash.com/photo-1531845116688-48819b3b68d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2851&q=80');
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
}
.overlay {
background: linear-gradient(to right, #1d1d1d, rgba(0, 0, 0, 0));
position: absolute;
top: 0;
left: 0;
display: table;
height: 100%;
width: 100%;
}
.inner {
display: table-cell;
width: 100%;
padding-top: 6rem;
padding-bottom: 6rem;
vertical-align: middle;
text-align: center;
}
.content {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media (min-width: 62.25rem)
{
.content {
padding-left: 3rem;
padding-right: 3rem;
}
}
.heroInner {
text-align: left;
max-width: 31rem;
margin:0 auto;
}
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.checkList li{
color: #fff;
margin-top: 30px;
}
.checkList li:nth-child(odd){
width:30%;
}
.checkList li:nth-child(even){
width:60%;
}
<div class="hero">
<div class="background"></div>
<div class="overlay">
<div class="inner">
<div class="content">
<div class="heroInner">
<div class="checkListContainer">
<ul class="checkList">
<li>Long term leases</li>
<li>Bespoke solutions</li>
<li>Multi city campaigns</li>
<li>Measuring success with data</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I have a large div at 100% width, with a smaller div inside at 1086px;
I am trying to get the small div to be centered horizontally and it's content vertically centered.
Where am I going wrong?
<html>
<head>
<title>test</title>
<style>
body {
margin:0; padding:0;
}
.wrapper {
width:100%;
height:446px;
background:red;
margin:0;
padding:0;
}
.inner {
width:1086px;
height: 446px;
background: yellow;
margin: 0px auto;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">asd</div>
</div>
</body>
</html>
vertical-centered is just working for table-cells. If you want to horizontally align, you should use display:table-cell;
Try this code;
http://codepen.io/ogzhncrt/pen/rVRONG
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 446px;
background: red;
margin: 0;
padding: 0;
}
.inner {
display: table;
width: 1086px;
height: 446px;
background: yellow;
margin: 0px auto;
}
.center {
vertical-align: middle;
display: table-cell;
}
.inner {
margin: auto;
width: 1086px;
height: 100%;
background: yellow;
/* margin: 0px auto;
vertical-align:middle; */
/* If you can use flexbox
display: flex;
justify-content: center;
align-items: center;
*/
}
/* If you can't */
.inner > p {
margin: 0;
height: 50%;
transform: translateY(100%);
text-align: center;
}
You can use flex box like this:
body {
margin:0;
padding:0;
}
.wrapper {
width:100%;
height:446px;
background:red;
margin:0;
padding:0;
}
.inner {
width:1086px;
height: 446px;
background: yellow;
margin: 0px auto;
vertical-align:middle;
display: flex; /*added*/
align-items: center; /*added*/
}
<div class="wrapper">
<div class="inner">
<div>here the content</div>
</div>
</div>
See the snippet in Full Page.
Check this out for full information
I'm simply trying to modify the navigation bar of my site for smaller devices. The site should be remaining with a fixed design for iPads+ resolutions, and then become responsive for smaller resolutions. While the mobile-size specific codes are applying to some classes (container, main, etc.), they don't seem to apply to the navigation div. You can see how it's currently functioning here: http://moore.whiterabbitstudio.us/
Here is a fiddle for permanence: http://jsfiddle.net/ursalarose/xAp72/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<body>
<div class="container">
<div class="main-hold">
<div class="main">
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Process</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS:
body
{
display: table;
margin: 0 auto;
letter-spacing: .1em;
text-align: center;
font-size: 16px;
}
*
{
margin:0;padding:0;
}
html,body
{
height:100%;
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.main-hold {
height:600px;
width:1000px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.main {
height:540px;
width:900px;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
/* MOBILE DEVICES */
#media screen and (max-width: 950px){
.main-hold {
width:500px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px auto;
}
.main {
width:100%;
background-repeat:no-repeat;
background-position:center top;
margin-top: 0px auto;
}
#nav {
margin: 20px auto 0 auto;
float:none;
width: 100%;
}
#nav ul {
list-style:none;
}
#nav li {
width: 100%;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align:center;
width: 100%;
height: 22px;
display: inline;
background-color:#CCC;
background-image: none;
padding-right: 0px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#FFF;
}
}
/* NAVIGATION */
#nav {
float: left;
height: 250px;
width: 168px;
margin-top: 60px;
}
#nav ul {
list-style:none;
}
#nav li {
width: 168px;
height: 28px;
display: block;
margin-bottom: 8px;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align: right;
width: 148px;
height: 22px;
display: block;
padding-right: 20px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#fff;
}
Thank you for any help! I've never tried designing for mobile devices before.
Try placing the mobile CSS below the desktop CSS, as the desktop CSS is now overwriting the mobile css.
I'm having trouble putting a sticky footer onto a site I'm working on.
I've tried everything and can't think of what the problem could be.If someone could take a look at the coding id appreciate it.
As some content on the site is only going to be small paragraphs i need a sticky footer to stick to the bottom to stop it floating in the middle of the site.
I have the content in a div that over laps a image and id like the footer to float on the bottom. however when i close the divs i can't get the footer to stay at the bottom, it starts floating under the image banner. Ive tried position:fixed; but i don't want that as it overlaps the content. Thanks
HTML
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Linear Partners</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="initial-scale=1, maximum-scale=2" />
<link href="style1.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script type='text/javascript' src='js/main.js'></script>
<script>
$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="mainpage">
<div id="header">
<img src="images/Linear.Partners.Logo.png" width ="173" height="65" alt="logo">
<nav class="nav clearfix">
<a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" height="25"></a>
<ul class="simple-toggle" id="menu">
<li>Home</li>
<li>About
<ul>
<li>Team</li>
</ul>
</li>
<li>Expertise</li>
<li>Research</li>
<li>Best Practice</li>
<li>Join Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="bg-image"style="background-image:url(images/slide1.jpg); background-position:50% 50%;">
<div id="main" class="wrapper clearfix">
<left>
<h1>Privacy Policy</h1>
<p>Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</p>
</left>
<right>
<h1>Privacy Policy</h1>
Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</right>
</div>
</div>
<div class="clear"></div>
<footer>
<div id="footer-wrapper">
<div id="footer-content">
<div class="Copyright">
Copyright © 2014 Linear Partners. All rights reserved.
</div>
<div class="footer-nav">
Home Privacy Diversity Policy
</div>
</div>
</div>
</footer>
<!-- #end footer area -->
</body>
</html>
CSS
html, body {
height: 100%; margin: 0; padding: 0;
}
body
{
margin:0;
padding:0;
background: #fff;
font: 13px'helvetica', ariel, sans-serif;
color: #000;
}
/*Header*/
#header
{
position:relative;
width:autopx;
max-width:950px;
height:65px;
margin: 0 auto;
z-index:10000;
background: #fff;
padding:20px;
}
#wrap {min-height: 100%;}
#mainpage {
padding-bottom: 85px;} /* must be same height as the footer */
.footer {position: relative;
margin-top: -85px; /* negative value of footer height */
height: 85px;
clear:both;}
/* nav */
.nav
{
width:autopx;
float:right;
padding-top:22px;
}
ul.simple-toggle
{
list-style:none;
padding: 0px;
margin: 0px;
text-align: center;
}
ul.simple-toggle li {
display: inline-block;
text-align: center;
border-right: 1px solid #cfcfcf;
}
ul.simple-toggle li:last-child
{
border-right: none;
}
ul.simple-toggle li a
{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color:#000;
text-decoration:none;
}
.anchor-link
{
display: none;
background-color: #16447b;
margin-top: -10px;
float: right;
height:40px;
width:40px;
}
.anchor-link img
{
margin:9px 6px 0px 4px ;
}
#mobile-nav
{
display:none;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
nav ul
{
list-style: none;
position: relative;
display: inline-table;
}
nav ul li:hover
{
background: #16447b;
color: #fff;
}
nav ul li:hover a
{
color: #fff;
}
nav ul ul
{
background: #092a55; padding:0px; margin:0px;
position: inherit; top: 100%;
}
nav ul ul:hover a
{
background: #6689b3;
}
/*wrapper*/
#bg-image {
z-index:-5780000;
float: left;
width: 100%;
height:250px;
background-size:cover;
margin-top:2px;
border: 2px solid #16447b;
border-width: 2px 0;
border-color: #fff;
box-shadow: 0 2px 0px #16447b, 0 -2px 0px #16447b;
}
.wrapper
{
width:90%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:150px;
}
#main left{
background-color: #fff;
width: 62.5%;
float: left;
}
#main right
{
background-color:#fff;
width: 35%;
float: right;
}
/*Footer*/
#footer-wrapper
{
height:65px;
margin: 0 auto;
background: #000;
padding:20px;
}
#footer-content
{
height:65px;
max-height:120px;
position:relative;
width:100%;
max-width:950px;
margin: 0 auto;
margin-top:20px;
color: #fff;
}
.Copyright
{
margin-top:5px;
float:left;
color: #fff;
text-decoration:none;
}
.footer-nav
{
margin-top:5px;
float:right;
color: #fff;
text-decoration:none;
margin-right:-6px;
}
.footer-nav a
{
color: #fff;
padding-left:6px;
padding-right:5px;
border-right: 1px solid #fff;
text-decoration:none;
float: left;
}
.footer-nav a:last-child
{
border:none;
}
.footer-nav a:hover
{
text-decoration:underline;
}
.clear {
clear:both;
}
/*media*/
#media (max-width:750px){
ul.simple-toggle
{
display: none;
}
.anchor-link, #mobile-nav
{
display: block;
}
ul.open
{
background-color: #16447b;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 20px;
top: 100%;
width: 175px;
z-index: 50000;
opacity:0.90;
}
ul.open ul
{
background-color: #092a55;
display: none;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 100%;
width: 175px;
z-index: 50000;
}
ul.open li
{
display: block;
list-style: none;
text-align: center;
border: none;
}
ul.open li a
{
display: block;
padding: 10px 5px;
border-bottom: 0px solid #5578a4;
color: #fff;
}
ul.open li a:hover
{
background-color: #375d8f;
color: #fff;
}
.wrapper
{
width:85%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:250px;
}
#main left{
background:#fff;
width: 62.5%;
float: left;
}
#main right
{
background:#fff;
width: 35%;
float: right;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
#media (max-width:480px){
img[src*="images/Linear.Partners.Logo.png"]
{
margin-top:13px;
height:40px;
width:106px;
}
.bg-image {
float: left;
width: 100%;
height:150px;
background-size:cover;
}
.wrapper{
width:80%;
height:200px;
margin-top:75px;
}
#main right
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
#main left
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
To avoid the footer to overlap the content add a margin to the content corresponding to the footer's height
.footer-nav{
//...
position:fixed;
bottom;0;
height:50px; // just an example
//...
}
.wrap{
margin-bottom:50px;// same as .footer-nav height
}
FIDDLE
Try this for footer div:-
#footer-wrapper {
background: none repeat scroll 0 0 #000000;
height: 65px;
margin: 0 auto;
padding: 20px;
bottom: 0;/*add from here*/
left: 0;
position: fixed;
width: 100%;/*to here*/
}
Check out this code
it may help youjust wirte the footer tag inside the wrap div
<div id="wrap"> <footer></footer> </div>
It seems that everything alright but you missed somewhere 2 closing DIVs.
Try to add them before
<div class="clear"></div>
http://jsfiddle.net/wF9UL/
I am trying to achieve something like this: http://i.minus.com/ibxOaBw7BW8b5g.png
This is what I have so far: http://jsfiddle.net/QAPub/2/
How can I center the wrapper/container? I really don't care if the container exists or not, my main goal is the center the three black divs but this is as far as I have gotten.
HTML:
<div class="clearfix">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.clearfix {
background-color: orange;
display: inline-block;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
There are a couple of different ways you can accomplish this.
Here's the one I would use, put the container in the body and give it margin and position it wherever you want to.
http://jsfiddle.net/QAPub/3/
body{
width:500px;
height:500px;
}
.clearfix {
position:relative;
background-color: orange;
display: block;
width:370px;
height:120px;
margin:auto;
top:20px;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
use the following css for ".clearfix "
.clearfix {
background-color: orange;
display:table;
margin:0 auto;
}
here is the jsFiddle file.