I want to create a space above and below my header div, and so I gave it a margin-top and margin-bottom. The margin-bottom isn't adding a space on the bottom though. Instead, it's adding the margin-bottom to the top, and the content below is right against it.
This is literally all the code i have so far in my body:
<body>
<div class="header">
<img class="logo" src="Images/logo.png"/>
<ul class="navigation">
<li class="Twitter">
<a href="http://twitter.com/AccountLink">
<img src="Images/twitter.png"/>
</a>
</li>
</ul>
</div>
<div class="banner"><img src="Images/banner.jpg"/></div>
</body>
And my css:
ul {
list-style-type: none;
}
.header {
width: 800px;
margin: 0px auto;
margin-top: 25px;
margin-bottom: 25px;
}
.header .logo {
padding-top: 10px;
float: left;
}
.header .navigation {
float: right;
}
.header {
width: 800px;
margin: 25px auto;
overflow: hidden;
}
.banner {
display: inline-block;
margin: 25px auto;
width: 100%;
}
Compatibility table for browsers: http://caniuse.com/#feat=inline-block
You have floated navigation, yet your header does not have specified height. Use some element to clear after your navigation or apply overflow: hidden; to your header.
For example:
.header {
width: 800px;
margin: 25px auto;
overflow: hidden;
}
try using padding instead of margin
padding-top: 25px;
padding-bottom: 25px;
also add
.banner{ padding-top:10px;}
or adjust to your needs
Related
I've a div container which is named headline. In this div there are two elements, a menu bar of type unordered list and a div container. I'll centering horizontally the menu bar, the other div container should dock on the right display side with a margin of 5%. How I can do this, has someone an idea?
Okay here is my litte example from jsfiddle: http://jsfiddle.net/nchm3gyj/
HTML
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="" />
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
float: left;
height: 60px;
width: auto;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
width: 60px;
height: 60px;
margin-right: 5%;
float: right;
}
#clear {
clear: both;
}
If you want your navigation bar centered in the parent block, here is one way of doing it.
Apply display: inline-block to the .navbar and text-align: center to .headline.
Assuming that you want the navigation bar centered with respect to the full
width of the parent block, you need to take the image out of the content flow.
You can do this by applying position: absolute to the .facebook element.
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
text-align: center;
position: relative;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
height: 60px;
width: auto;
display: inline-block;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
position: absolute;
top: 0;
right: 5%;
width: 60px;
height: 60px;
}
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="http://placehold.it/60x60" />
</div>
I think you might need to position: absolute the facebook image and display: inline-block your menu bar (being centered by the .headline):
http://jsfiddle.net/nchm3gyj/32/
I'm a bit unsure of what you're trying to do, is this it? Applied text-align: center to .headline and display: inline-block to .navbar then position: absolute to .facebook?
http://jsfiddle.net/nchm3gyj/42/
My current page is leaving small blank area near footer. Not sure what causing the problem. Below is my code:
<link rel="stylesheet" type="text/css" href="style/test_style.css">
<body>
<div id="header">
</div>
<div id="navigation">
<ul>
<li>test</li>
</ul>
</div>
<div id="main">
<div id="sidebar">
this is a test
</div>
</div>
<div id="footer"></div>
</body>
test_style.css:
body {
margin: 0; }
#header {
text-align: left;
margin: 0 auto;
height: 50px;
background: #ccccff; }
#header h1 {
margin: 0;
padding: 1em; }
#main {
margin: 0;
padding: 0;
float: top;
height: 700px;
width: 100%;
background: #009999; }
#sidebar {
float: left;
height: 100%;
width: 150px;
background: #999900;
}
#footer {
clear: left;
margin: 0 auto;
height: 50px;
background-color: #666600;
padding: 20px; }
#navigation {
float: left;
width: 100%;
background: #333; }
#navigation ul {
margin: auto;
padding: 0; }
#navigation ul li {
list-style-type: none;
display: inline; }
#navigation li a {
display: block;
float: right;
color: #ffff99;
text-decoration: none;
border-left: 1px solid #fff;
padding: 5px; }
#navigation li a:hover {background: #383}
There are two options:
1) Change float: top; to float: left; for #main:
#main {
margin: 0;
padding: 0;
float: left;
height: 700px;
width: 100%;
background: #009999;
}
2) Add clear: both; to #main:
#main {
clear: both;
}
The reason it isn't working as you have it, is that you've floated the element within #main (the #sidebar) to the left, which sort of messes up the structure of the #main div. That means that #sidebar is placed just below the element above (#navigation) while #main is placed at the very top of the page (behind #navigation, so the top is not visible) causing it to not come down as far as the #sidebar div.
Just to exemplify: Another way to do it would be to add the height of #navigation (which in my browser is 28px) to the padding of #main, so:
#main {
padding-bottom: 28px;
}
Add float:left; to your #main
#main {
float:left;
margin: 0;
padding: 0;
float: top;
height: 700px;
width: 100%;
background: #009999; }
Please see: http://jsfiddle.net/cNZ46/1/
Here (link) is a fixed code with both HTML and CSS changes.
Notice that I moved #sidebar out from the #main so that they're apart from each other. Also I changed footer's clear to both which fixed the whitespace above it.
<div id="main">
<p>Main content here!</p>
</div>
<div id="sidebar">
<p>Sidebar here!</p>
</div>
I've set up a min-height to both, sidebar and main area, just to show you it works.
The navigation breaks into a second line as soon as I add "margin-right: 4%" in "nav li" - if I use px instead of % the problem won't occur, eg.: "margin-right: 10px" . I am not sure why this is happening
jsfiddle: http://jsfiddle.net/k93K2/
<header>
<div id="container">
<div id="logo">
<img src="http://placehold.it/220x80"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Gallery</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</div><!--container-->
</header>
--
.container {
max-width: 1070px;
margin: 0 auto;
}
header {
overflow: hidden;
}
#logo {
float: left;
}
nav {
float: right;
}
nav li {
display: inline;
text-align: center;
margin-right: 4%;
}
What about this ?
header{
width: 100%; /* initialization */
min-width: 590px; /* some min width */
}
.container {
max-width: 1070px;
margin: 0 auto;
}
header {
overflow: hidden;
}
#logo {
float: left;
}
nav {
width: calc(190px + 20%); /* width of nav is (4x5)% + size of "HomeServicesGalleryTeamContact" */
min-width: 370px; /* set some min width */
float: right;
}
nav li {
display: inline;
text-align: center;
margin-left: 4%;
}
For the problem with your code is margin and padding <ul> tag. So you need to remove margin and padding in <ul> like below:
nav {
float: left;
width: 220px;
}
ul {
margin: 0;
padding: 0;
}
Please try!
% takes value relative to it's container width....
so when you given 4% margin, then it applies to all li and pushes right margin to 4% according to container width!
To prevent content breaking into new line, i would suggest to apply white-space:nowrap to
example demo
header {
overflow: hidden;
white-space:nowrap; /*added*/
}
nav ul {
display:inline-block;
white-space:nowrap;/*added*/
border:1px solid red;
}
I have HTML
<div class="mainwraper" style="width:100%;">
<div class="header1">
div logo left <img src="logo"> // - it sends it pasted to the left sidebar
div class right // it send it pasted to the right sidebar
</div> // need to center them in the page and keep the repeative effect
<div class="header2" style="width:100%;">
<div class="headbar">
<ul class="menu" style="background:#0099CC;"> … </ul>
</div>
</div>
</div>
CSS
.mainwraper {
margin:0 auto;
}
.header1 {
float:left; width:100%; height:78px; margin-top: 10px;
}
.header2 {
float:left;
width:100%;
position:relative;
z-index:auto;
height:52px;
margin-top:20px;
background: #000;
opacity: 0.65;
border-radius: 10px;
}
.headbar {
background-color: inherit;
float: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
border-radius: 10px;
}
.menu {
background-color: inherit;
background-image:url(images/menugradient.png);
float: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}
I want it to look like this [1]: http://postimg.org/image/hi7knv1tp/ "tooltip"
but it looks something like this [2]: http://postimg.org/image/ptqdhlfyv/ |tooltip".
I also want to mention that after i have another Div class main wrapper of 972px that is centered correctly.
you can use margin:0 auto; to center your navigation
I'm working on the header of a website. I've looked around stackoverflow for instructions on how to center the header (includes logo & navigation bar).
I'm using Dreamweaver CC and when I click the preview button, it shows up on the browser centered, but the right has more white space than the left.
My current CSS:
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.header_left {
float: left;
width: 300px;
}
.navi {
float: right;
width: 600px;
}
.navi li {
list-style: none;
display: inline;
}
My Current HTML:
<body id="home">
<div id="header">
<div class="container">
<div class="header_left">
<img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/>
</div>
<div class="header_right">
<ul class="navi">
<li><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></li>
<li><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></li>
</ul>
<div style="clear: both"></div>
</div>
</div>
EDIT: Sample of what it looks like
Trying to understand the problem. The header as a whole is centered. The elements inside have margin issues due to specifying width on the images and then giving the class a different width as well. You can remove the width in the class and it will push each floated element flush to the their specified sides. Then add margin to push them the distance you would like:
body, html {
width: 100%;
height: auto;
margin: 0;
}
.container {
background: #333;
width: 1000px;
margin: auto;
text-align: center;
}
.header_left {
float: left;
margin-left: 70px;
margin-top: 12px;
}
.navi {
float: right;
margin-right: 60px;
}
.navi li {
list-style: none;
display: inline;
}
http://jsfiddle.net/derekstory/zz2Dy/3/
text-align:center and float don't make good friends :)
test this : setting ul as inline-block element and not floatting: http://jsfiddle.net/zz2Dy/2/
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
background:#333;
}
.header_left {
float: left;
}
.navi {
display:inline-block;
padding:0;
margin:0;
}
.navi li {
list-style: none;
display: inline;
}
The right header element has the property text-align: center, and it doesn't occupy the entire width of the element, so it ends up with more white space on the right. If you add to your fiddle the class:
.header_right {
text-align: right;
}
That should remove the white space on the right.
(if I understood your issue properly)
I believe this is what you are looking for:
.container {
margin: 0 auto;
text-align: center;
}
.header_left {
display: inline-block;
}
.header_right {
display: inline-block;
}
.navi {
display: inline-block;
padding: 0;
}
.navi li {
list-style: none;
display: inline;
}
Demo
Basically, I've removed floats and widths and padding, used display: inline-block;.
<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>