I am trying to create a horizontal top header with a main nav stacked on top of a sub nav. Both navs are created using <ul> with floated <li> items. The sub nav has extra horizontal space to the left whose cause I cannot discern (see the circled red area in the picture below):
Here's a fiddle: http://jsfiddle.net/W3qqh/
Questions
What's causing the space?
How can I eliminate the space?
Also feel free to suggest other alternatives for achieving the desired menu, if you believe my approach could be improved.
HTML
<div class="header">
<div class="home-logo">HOME</div>
<div class="main-nav">
<ul>
<li><a>Explore</a></li>
<li><a>Earn</a></li>
<li><a class="selected">Merchants</a></li>
</ul>
</div>
<div class="sub-nav">
<ul>
<li><a>Be Secure</a></li>
<li><a>Get Help</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
CSS
* { box-sizing: border-box; }
.header { height:99px; width: 100%; position:fixed;}
.header.glass {opacity: 0.8; filter: alpha(opacity=80);}
.home-logo { background: pink; height:99px; width: 239px; position: fixed; }
.main-nav { color: white; position: relative; left:239px; background: #25c0df; height: 66px; line-height:66px; padding: 2px; width: 100%; text-transform: uppercase; font-size: 14px;}
.main-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.main-nav li { float:left; margin-left: 40px;}
.main-nav li a.selected { border-top: 2px solid white; }
.main-nav li a:hover { border-top: 2px solid white; }
.sub-nav { font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; width: 100%; text-transform:uppercase; }
.sub-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.sub-nav li { float:left; margin-left: 40px;}
In .sub-nav, add:
float:left;
position:relative;
left:239px;
In .main-nav, add:
float:left;
Solution: You had to add float:left; in both .main-nav and .sub-nav and you had to add position:relative; and left:239px; because of the logo on the left.
Your problem would have been solved with just having float:left; but you needed to added position and left. Otherwise, your text would be behind the logo.
JSFiddle Demo
UPDATE
In .main-nav, you have:
padding: 2px;
If you remove that and add position and left in .sub-nav, you wouldn't need float property.
JSFiddle Demo
Is this more what you were looking for: http://jsfiddle.net/W3qqh/2/?
First, set the outermost container to 100% width. Then float the three inner container divs and assign a width. Then apply a float to all <li> items (or use display: inline-block).
.header { width: 100%; }
.home-logo { width: 33.333%; float: left; background: pink; height:99px; }
.main-nav { width: 66.666%; float: left; color: white; background: #25c0df; height: 66px; line-height:66px; padding: 2px; text-transform: uppercase; font-size: 14px;}
.sub-nav { width: 66.666%; float: left; font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; text-transform:uppercase; }
Related
When I increase or decrease margin-top of #nav it affects #header, but when increasing margin-top of #header it doesn't affect #nav.
How to correct this to when I change whether nav or header it shouldnt affect other?
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
You are facing a margin-collapsing issue. Since you made the header to be a float element, the #nav become the first in-flow element thus its margin will collapse with body margin.
top margin of a box and top margin of its first in-flow child
So when you increase the margin of the nav you increase the collapsed margin which is the margin of the body and you push all the content down including the #header.
To fix this you need to avoid the margin collapsing by adding (for example) a padding-top to the body.
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
padding-top: 1px;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
animation: ani1 2s;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
I am learning CSS while writing CSS I got some issue.
I need to remove this space from my displaying web page.
.grouping:before,
.grouping:after {
content: " ";
display: table;
}
.grouping:after {
clear: both;
}
nav {
background-color: white;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
nav figure {
position: absolute;
}
img {
width: 100px;
}
.primary-nav {
float: right;
}
.primary-nav>li {
display: block;
float: left;
}
.primary-nav>li>a {
float: left;
padding: 25px 0;
width: 100px;
border-left: 1px solid;
}
nav li a {
font-family: Arial, Helvetica, sans-serif;
color: black;
text-transform: uppercase;
font-size: 15px;
text-align: center;
}
nav li:first-child a {
border-left: none;
}
nav li a:focus,
nav li a:hover {
background: red;
background-color: red;
}
body {
background-color: grey;
}
<nav class="grouping">
<figure>
<img src="images/logo.png" alt="LOGO">
<ul class="primary-nav">
<li>Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</figure>
</nav>
Using this code resultant output must be like this:
Expected Result Image
But getting this result with spaces at corner indicated as an arrow in next image:
Generated Result Image
1) There is some margin on ul element rendered by the browser defaults in general, to fix this do:
ul {
margin: 0
}
2) Also figure element has default margins
figure {
margin: 0
}
Try to inspect the output of the browser to see exactly how the browser defaults renders that margin to see it better.
https://jsfiddle.net/t8netg8j/4/
I would use display: inline-block for the image and the li elements, erase some of the floats and reset some of the margins to 0 as shown below:
(note: I reduced the width of the elements from 100 to 80 px to fit them into the narrow snippet window, but of course you don't have to do that for a wider viewport)
(note #2: i added empty HTML comments at line ends and beginnings for all li elements to avoid the whitespace resulting from the use of inline-blocks which would cause the hover background not to fill the full space between two vertical borders)
html, body {
margin: 0;
}
nav figure {
position: absolute;
width: 100%;
margin: 0;
}
img {
width: 80px;
display: inline-block;
}
.primary-nav {
float: right;
margin: 0;
}
.primary-nav>li {
display: inline-block;
}
.primary-nav>li>a {
float: left;
padding: 25px 0;
width: 80px;
border-left: 1px solid;
}
nav li a {
font-family: Arial, Helvetica, sans-serif;
color: black;
text-transform: uppercase;
font-size: 15px;
text-align: center;
}
nav li:first-child a {
border-left: none;
}
nav li a:focus,
nav li a:hover {
background: red;
background-color: red;
}
body {
background-color: grey;
}
<nav class="grouping">
<figure>
<img src="images/logo.png" alt="LOGO">
<ul class="primary-nav">
<li>Home</li><!--
--><li>Home2</li><!--
--><li>Home3</li><!--
--><li>Home4</li><!--
--><li>Home5</li><!--
--></ul>
</figure>
</nav>
I have a NavBar with my name left aligned(green background color), and then links to other pages which are right aligned(no background color). When re-sizing to less than 640px I need to move the right aligned links to a new line, and center all NavBar content. I cannot get the links to move to a second line.
HTML:
/* menu bar */
header{
background-color: #ffffff;
height: 60px;
margin: 0;
padding:0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
display:block;
}
/* align right */
li{
float:right;
}
/*link formatting*/
li a{
display:block;
padding: 8px;
color:black;
text-align: center;
padding:10px 16px;
text-decoration: none;
font-weight: bold;
}
/* name with background color*/
li:last-child{
font-size: 34px;
background-color: #4aaaa5;
position:absolute;
float:left;
}
#media screen and (max-width: 640px) {
li:last-child{
font-size: 34px;
background-color: #4aaaa5;
position:absolute;
width: 100%;
text-align: center;
top: 0px;
}
}
<ul>
<li><a id="bottomlinks"href="index.html">About</a></li>
<li><a id="bottomlinks"href="portfolio.html">Portfolio</a></li>
<li><a id="bottomlinks"href="contact.html">Contact</a></li>
<li> Mark Ring</li>
</ul>
Here is a basic demo of what it looks like you're attempting to achieve. As you can see I've simplified the HTML and CSS a bit.
Hope it helps!
body {
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
header {
text-align: center;
overflow: hidden; /* clearfix */
}
.brand {
display: block;
background-color: #4AAAA5;
line-height: 60px;
}
#media ( min-width: 640px ) {
header {
text-align: left;
height: 60px;
}
.nav {
float: right;
}
.nav li {
float: left;
line-height: 60px;
}
.brand {
display: inline-block;
padding: 0 1rem;
}
}
<header>
<a class="brand" href="#">Brand</a>
<ul class="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
In your code you were absolute positioning the brand element on top of the other links (couldn't see them) and didn't undo the float (which kept them from stacking vertically).
I have an HTML code that can be simplified as:
<body>
<div class='header'>
</div>
<div class='main'>
<nav class='menu'>
<a>a</a><a>b</a>
</nav>
<div class='content'>Here be dragons!</div>
</div>
</body>
It uses the following CSS:
html, body
{
margin: 0;
padding: 0;
background-color: #7effad;
}
.header
{
background-color: black;
position: relative;
height: 20px;
}
.main
{
position: relative;
}
.main .menu
{
background-color: white;
}
.main .menu a,
.main .menu a:visited,
.main .menu a:active
{
display: block;
float: left;
background-color: blue;
border-radius: 2px;
margin: 5px;
}
.main .menu:after
{
display: block;
content: "";
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.main .content
{
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin-left: 21px;
margin-right: 21px;
margin-top: 15px;
margin-bottom: 0;
min-height: 1500px;
background-color: #d4b074;
}
As you can see here this generates some sort of a margin between the header and the menu. However, if i remove the content tag all together this margin magically disappears.
I don't understand how it can alter the appearance, since it is a normal block that follows the menu.
Edit: The problem only occurs in Firefox, Chromium does everything just fine.
The problem goes away if i set margin-top for .main .content to 0; however if margin-bottom of .main .menu is non-zero the problem returns.
I'm working on a new responsive design and I'm having an issue with my menu that I cannot figure out. Basically I want the background of the menu item to turn white when you hover over it and the text to turn blue. Right now, the text turns blue but the background will not turn white.
HTML Code:
<div class="header">
<div class="header_content">
<div class="logo">
<img src="images/new_logo.png" class="hdr_logo">
</div>
<div class="main_menu">
<ul>
<li>ABOUT US</li>
<li>OPERATIONS BRANCH</li>
<li>LOGISTICS BRANCH</li>
<li style="border-right:0;">COMMUNITY</li>
</ul>
</div>
</div>
</div>
CSS:
.header {
background: url('images/header2.png') repeat-x top left;
width: 100%;
height: 150px;
color: #FFF;
margin: 0;
padding: 0;
}
.header_content {
width: 960px;
margin: 0 auto;
height: 150px;
padding: 0;
}
.logo {
float:left;
width:120px;
}
.main_menu {
float:left;
height: 30px;
margin-top: 120px;
line-height: 30px;
padding: 0;
width: 830px;
}
.main_menu ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
overflow: hidden;
height: 30px;
}
.main_menu li {
float: left;
border-right: 1px solid #FFF;
text-align: center;
padding: 0;
margin: 0;
padding-left: 2%;
padding-right: 2%;
overflow: hidden;
height: 30px;
cursor: pointer;
}
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: rgb(33,47,57);
}
EDIT: Problem Resolved
The floated li was not a block element so you could not change it's background color. As soon as I added display:block; to the li it resolved this issue.
Seems to work fine for me: http://jsfiddle.net/s3JT9/
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: red;
}
I changed the color to red to illustrate.