I am trying to build a simple CSS only navigation bar for my site. This is it working fine in modern browsers:
And this is my CSS:
#nav{
width:496px;
height:45px;
float:right;
background-color:#bee199;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin-top:5px;
border:1px solid #a09f9f;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#nav ul{
list-style:none;
text-align:center;
}
#nav ul .last{
padding-right:0px;
border-right:none;
}
#nav ul li.navsep{
width:1px;
height:44px;
background-color:#a09f9f;
padding:0;
margin-right:10px;
}
#nav ul li{
width:auto;
height:44px;
display: -moz-inline-stack;
display:inline-block;
padding-right:10px;
margin-bottom:-16px;
}
#nav ul li a{
font-family:Helvetica, Arial, sans-serif;
font-size:20px;
font-weight:400;
text-decoration:none;
color:#434342;
}
HTML:
<div id="nav">
<ul>
<li>Principles</li>
<li class="navsep"><span></span></li>
<li>Our services</li>
<li class="navsep"><span></span></li>
<li>Recent work</li>
<li class="navsep"><span></span></li>
<li class="last">Contact</li>
</ul>
</div>
One of my problems is using negative margins, I really don't want to be using them. But every time I try to use conventional methods the text will not center vertically and it looks like this:
This also happens on older browsers.
Thanks for your time! If you need more information just ask! :)
Omit the <li class="navsep"> and use borders instead.
use lineheight on the li elements.
Instead of using negative margin use line-height, in your case #nav ul li {height: 44px; line-height: 44px;} this will vertical center your text
Related
hi i am working on a site layout , because of my problem and for some other reasons like that it doesn't matter to me if i just can use the layout on my own as well cause i made it.
but the problem is that the pulldown menu isn't working as it is mend to be.
i share with you the code:
<html>
<head>
<style>
body{
background:linear-gradient(to bottom right,#013,#c0c);
color:#930;
}
#nav{
margin-left:auto;
margin-right:auto;
margin-top:40px;
maring-bottom:10px;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:40px;
}
#main{
margin-left:auto;
margin-right:auto;
margin-top:auto;
maring-bottom:auto;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:500px;
}
#nav ul{
list-style:none;
margin:0 auto;
}
#nav li{
position:relative;
float:left;
display:inline;
}
#nav a{
text-decoration:none;
color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#nav a:hover{
text-decoration:none;
color:#fff;
background-color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#pull li ul{
display:none;
color:#930;
text-align:center;
position:absolute;
}
#pull li:hover ul{
display:block;
color:#930;
text-align:center;
position:absolute;
}
#pull li ul a{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #930;
background-color:#cb6;
}
#pull li ul a:hover{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #fff;
background-color:#930;
}
</style>
</head>
<body>
<div id="nav">
<ul id="pull">
<li><b>home</b></li>  
<li><b>page 1 ▼</b>
<ul>
<li><b>page 2</b><li>
<li><b>page 3</b><li>
</ul>
</li>
</ul>
</div>
<br><br>
<div id="main">
de content komt nog
</div>
</body>
</html>
also the online lay-out is see-able for eyes at www.elderpact.tk
the menu bar and everything need to stay like they are
but the drop down menu has to lower the content box if it is opened.
now it goes right trough the content.
also i would like to display the drop down menu direct under the drop down menu opener
(page 1).
could someone please help me?
the risk with create you own dropdown is not work in all browsers. The best solution for this problem is use Bootstrap Twitter. Bootstrap DropDown
Here's a fiddle with the menu the way I think you want it: http://jsfiddle.net/TPLJ8/1/
You basically need to remove the margin and padding from the ul and li elements at the top of your CSS (resets), like this:
ul, li {margin:0; padding:0;}
This will help you start with a clean slate. I also cleaned up your CSS as you don't need to declare the same styling on hovers if that style stays the same.
Your HTML also needed some work. You were missing closing </li> tags and had a bunch of unnecessary <br /> tags.
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
I know this IE problem comes up time and time again but I have spent all morning searching for answers and none seem to help me.
My horizontal navigation menu seems to render perfectly in all browsers except for IE7. I am thinking the problem could possibly be to do with my lists having no widths (but I do not want widths, I want it to be automatic depending on the length of the text), either that or the li's seem to be sitting within each other and keep applying the 14px padding-top. I do not know why they are sitting inside each other though as my li's all have closing tags and a float:left;
Here is my code..
<div id="navig">
<ul>
<li class="navig-left"></li>
<li class="home"><b>Home</b></li>
<li><a class="tabs" href="about.html">About Us</a></li>
<li><a class="tabs" href="services.html">Services</a></li>
<li><a class="tabs" href="personal-injury-panel.html">Personal Injury Panel</a></li>
<li><a class="tabs" href="client-testimonials.html">Client Testimonials</a></li>
<li><a class="tabs" href="contact.html">Contact Us</a></li>
<li><a class="tabs" href="careers.html">Careers</a></li>
<li><a class="tabs" href="affiliates.html">Affiliates</a></li>
<li class="navig-right"></li>
</ul>
</div>
<div class="clr"></div>
#navig { width:960px; height:46px; background:url(images/navig_bkgrnd.png); }
#navig ul { list-style-type:none; height:46px; width:960px; }
#navig ul li.active { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; background:url(images/navig_hover.gif) repeat-x; color:#000000; font-weight:200; font-size:14px; font-style:normal; }
#navig ul li.home { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; color:#ffffff; font-weight:200; font-size:14px; }
#navig ul li a.tabs { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; text-decoration:none; color:#FFFFFF; font-weight:200; font-size:14px; font-style:normal; }
#navig ul li a:hover { display:block; text-decoration:none; height:32px; font-family:Arial, Helvetica, sans-serif; color:#000000; font-weight:200; font-size:14px; font-style:normal; background:url(images/navig_hover.gif) repeat-x; }
.navig-left { float:left; width:23px; height:46px; background:url(images/navig_left.png); }
.navig-right { float:left; width:23px; height:46px; background:url(images/navig_right.png); }
Try adding the following CSS rule so that all li items float (since you're using a float approach):
#navig ul li {float:left;}
Looking at your stylesheet, you don't actually apply float:left to all of the list items in the menu, only li.activeand li.home. Other browsers seem to deal with it but IE doesn't like it.
jsFiddle (note I had to modify some colors to get it working since you are using white text over background images we don't have access to - causing white on white for testing purposes.)
I tested this fiddle in IE 7/8/9, FF and Chrome. Works consistently now.
You can force IE7 to render as ie8 adding this in head of your page.
<meta http-equiv="X-UA-Compatible" content="EDGE" />
I tried to do a dropdown menu, but I have a lot of questions and it seems I am doing all wrong. Some of the major question that are perturbing my dreams are:
Should I use list-style:none; on ULs or LIs (or both)?
Is it better to put background-color and border on As or LIs?
Should the LIs that are inside the absolute floating UL have
float:left; or position:relative;?
The code I am using seems of work, but my biggest fear is that I am writing unnecessary lines or even bad coding.
Please help.
The CSS I am using:
*{
padding:0;
margin:0;
}
#menu{
margin:0 auto;
width:800px;
background:#999;
border:1px solid #777;
}
#menu ul{
list-style:none;
border-right:1px solid #aeaeae;
/*Not sure about this V*/
position:relative;
float:left;
}
#menu li ul{
font-weight:normal;
display:none;
position:absolute;
border:1px solid #777;
width:200px;
/*Not sure about this V*/
float:none;
margin-left:-2px;
}
#menu li{
display:block;
position:relative;
float:left;
background:#999;
border-right:1px solid #777;
border-left:1px solid #aeaeae;
}
#menu li li{
float:none;
background:#eaeaea;
border:0;
border-top:1px solid #666;
}
#menu li:hover{
background:#a6a6a6;
}
#menu li li:hover{
background:#f5f5f5;
}
#menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 15px;
}
#menu li ul a{
color:#333;
}
#menu a:hover{
color:#fff;
}
#menu li ul a:hover{
color:red;
}
#menu li li:first-child{
border-top:0;
}
.clear{
clear:both;
font-size:0;
line-height:0;
}
The HTML structure is:
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<li>Drop Down
<ul>
<li>DD Item</li>
<li>Another One</li>
<li>Last DD Item</li>
</ul><div class="clear"></div>
</li>
</ul><div class="clear"></div>
</div>
I am using JQuery to show/hide the menu with:
$('#menu ul li').hover(function(){$('ul',this).slideDown(100);},
function(){$('ul',this).slideUp(100);});
The code I used is strongly modified, but taken from here
Your dreams are probably safe. That is, your CSS looks pretty good overall. You may want to consider using Twitter Bootstrap for some of what you're doing (awesome drop-downs), but you can certainly roll-your-own.
To answer your questions:
Should I use list-style:none; on ULs or LIs (or both)?
Just on ul's.
Is it better to put background-color and border on As or LIs?
Put them on the li elements.
Should the LIs that are inside the absolute floating UL have float:left; or position:relative;?
These accomplish entirely different things. Floating left should be sufficient, but you may want to do both.
You should also refactor your jQuery code, despite the fact that it works:
$("#menu ul li").hover(
function () {
$(this).children("ul").slideDown(100);
},
function () {
$(this).children("ul").slideUp(100);
}
);
I m having trouble with some code and the ie7 browser, its a vertical CATEGORY menu made with the ul tag, and css properties. Works fine with safari, ie8, firefox 3.5 and 3.6 but with ie7 A BIG LEFT MARGIN IS BEING CREATED This is the code that is being generated by the server:
<div id="menu">
<ul><li><a class="level1" href="catalog.html?category=21">PRODUCTOS</a></li>
<li><a class="level1" href="catalog.html?category=21">Daniela Kosan</a></li>
<li><a class="level2" href="catalog.html?category=21">Lo Nuevo</a></li>
<li><a class="level2" href="catalog.html?category=22">Fragancias</a></li>
<li><a class="level2" href="catalog.html?category=23">Rostro</a></li>
<li><a class="level2" href="catalog.html?category=24">Accesorios</a></li></ul>
</div>
and this is the css i'm using:
*{
margin-top:0;
padding:0;
}
#menu{
background:#fff;
width:205px;
padding-left:9px;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
}
#menu li a{
list-style:none;
font-family: arial, sans-serif;
background:#F0CFD6;
color:#944862;
text-transform:none;
font-size:14px;
font-weight:normal;
text-decoration:none;
display:block;
}
#menu li a:hover{
color:#fff;
text-decoration:none;
}
#menu li a.level1{
padding-left:10px;
padding-top:10px;
width:205px;
height:20px;
color:#fff;
background:#DA8298;
}
#menu li a:hover.level1{
color:#000;
}
#menu li a.level2{
padding-left:20px;
padding-top:12px;
width:205px;
height:20px;
color:#8B5169;
border-width:0 0px 0px 0px;
background:#F0CFD6;
border-bottom:1px dashed #CEABB2;
}
#menu li a:hover.level2{
color:#000;
}
Here is the bad render, NOTE THE BIG LEFT MARGIN BESIDES THE CATEGORY MENU
This is how it renders on the other browsers... good! Thank you guys!
Try setting the margin and padding on the ul. Different browser will automatically set it to different things. I suggest using a CSS reset in the future.
#menu ul {
margin-left: 0px;
padding-left: 0px;
}
Try the above and let me know if it works. I don't have IE, so I can't test it. I'd test the margin and padding one at a time to see if only one of them is the culprit.