In the following css code the bottom and top borders appear to overlap which causes a thick line and I can't seem to figure out how to remove it. Any advice is appreciated! Thank you.
html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<link href="navCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
</ul> <!--inner UL-->
</li> <!--main LI-->
</ul> <!--main UL-->
<br class="clearFloat">
</div> <!--navMenu->
</div> <!-- wrapper -->
</body>
</html>
css code:
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
/*removes the bullet point*/
list-style:none;
float:left;
position:relative;
background: #fff;
}
/*for top level */
#navMenu ul li a{
text-align:center;
font-family:"calibri";
text-decoration:none; /*remove underline*/
/*height width for all links*/
height:30px;
width:150px;
display:block;
border: 1px solid #ccc;
color: #777;
}
/* hiding inner ul*/
#navMenu ul ul{
position:absolute;
visibility:hidden;
/*must match height of ul li a*/
top:32px;
}
/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover{
background-color: #F9F9F9;
}
#navMenu ul li:hover ul li a:hover{
color: E2144A;
}
#navMenu ul li a:hover{
color: E2144A;
}
You should take out the top border i.e.
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
instead of
border: 1px solid #ccc;
margin-top 0 px; apple below class.
#navMenu ul li a{
text-align:center;
font-family:"calibri";
text-decoration:none; /*remove underline*/
/*height width for all links*/
height:30px;
width:150px;
display:block;
border: 1px solid #ccc;
border-top:0px;
color: #777;
}
I added a selector to remove the bottom border on all items except the last.
http://jsfiddle.net/GWcnK/5/
#navMenu ul li:not(:last-child) a {
border-bottom-style: none;
}
Add this to your list items in the drop down:
li {
margin-bottom: -1px;
}
You can also do margin-top: -1px - but this should give you an idea of how to go about it.
Related
here is my problem.
Everything is working except on ie7 (of course).
The dropdown menu don't display.
Do someone know a workaround?
FYI, the doctype is set. (If anybody ask)
Here is my code at the end...
Thanks for your help
<ul class="menu">
<li class="subMenu">
<a style='clear: left;' id='jiraMenu' href="#">JIRA</a>
<ul>
<li>Make a request</li>
<li><a href="#" >View the version</a></li> <!--"https://caedsh03.caecorp.cae.com/secure/StructureBoard.jspa?s=173" !-->
</ul>
</li>
<li>
<a href="#" name="language" >En</a>
</li>
</ul>
CSS
.menu {
margin:0;
padding:0;
border-collapse:collapse;
}
.menu li {
list-style:none;
float: left;
}
.menu li a:link, .menu li a:visited {
display:block;
text-decoration:none;
background-color:#10509e;
padding: 0.5em 2em;
margin:0;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
color:white;
}
.menu li a:hover {
background-color:white;
color: #10509e;
outline:1px solid black;
}
/*style the sub menu*/
.menu li ul {
position:absolute;
display: none;
border-top:1px solid #fff;
margin:0;
padding:0;
z-index: 999;
}
.menu li ul li {
display:inline;
float:none;
width: 100%;
}
.menu li ul li a:link, .menu li ul li a:visited {
background-color:#10509e;
color: white;
width:auto;
}
.menu > li:hover ul {
display: block;
display: table-cell;
}
.menu li ul li a:hover {
background-color:white;
color: #10509e;
}
display: table-cell is not supported in IE7. Removing it should solve the problem.
http://jsbin.com/ugIfAJi/1
Made this menu this afternoon. Tab number 1 has a drop down that consists of two divs that should each be floated left so there are two divs next to each other, however, it does not work and the second lines up underneath the first.
This is the line which I thought would do the floating :
/*sub container div*/
.container ul li .drop div{
float:left;
}
Fiddle
HTML
<!-- start menu -->
<div id="top_menu">
<nav>
<div class="container">
<ul>
<li><img class="home" alt="" height="20" src="/images/trans.gif" width="20"> </li>
<li>number 1
<div class="drop">
<div>
category 1
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
category 2
<ul>
<li>test1</li>
</ul>
</div>
<div>
category 3
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
category 4
<ul>
<li>test1</li>
</ul>
category 5
<ul>
<li>test1</li>
</ul>
</div>
<div>
</div>
</li>
<li>number 2</li>
<li>number 3</li>
<li>number 4</li>
<li>number 5</li>
</ul>
</div>
</nav>
</div>
<!-- end menu -->
CSS
#top_menu{
background:#cccccc url('/images/top_menu_bg.png') repeat;
}
.container{
position:relative;
z-index:1000;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
}
.container ul{
white-space:nowrap;
/*display:table;*/
}
.container ul, .container li{
padding:0;
margin:0;
list-style:none;
}
/*top level link*/
.container ul a{
display:block;
color:#666666;
text-decoration:none;
padding:0 25px;
line-height:40px;
border-right:1px #b2b2b2 solid;
}
/*sub container*/
.container ul li .drop{
position:absolute;
background:#fdfdfd;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
display:none;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
border-bottom:1px #b2b2b2 solid;
}
/*sub container div*/
.container ul li .drop div{
float:left;
}
.container ul li .drop li{
display:block;
border:0;
}
.container > ul > li{
float:left;
display:block;
position:relative;
}
.container ul li:hover > .drop{
top:auto;
display:block;
}
/*sub level top link*/
.container ul li .drop a{
line-height:25px;
border:0;
padding:0 30px 0 10px;
color:#000000;
}
/*sub level top link hover*/
.container ul li .drop a:hover{
color:#00396d;
background:#c4dcec;
}
/*sub level link normal*/
.container ul li .drop li > a{
color:#666666;
}
/*sub level link hover*/
.container ul li .drop li:hover > a{
background:#c4dcec;
color:#00396d;
}
/*top level link hover*/
.container li:hover > a{
color: #000000;
}
/*home button*/
.container ul li img.home{
background:url('/images/top_menu_home.png') 0 0;
width:20px;
height:20px;
}
/*home button hover*/
.container ul li:hover > a img.home{
background:url('/images/top_menu_home.png') -20px 0;
}
Sorry for the late reply =) Still, if you want to stack several elements of variable width horizontally, I'd suggest using display:inline-block.
/*sub container div*/
.container ul li .drop div{
display:inline-block;
vertical-align:top;
}
The fiddle (works in fFF 8, Chrome 12, IE 9).
The drawback is spaces between elements, which can be successfully eliminated
.container ul li .drop{
position:absolute;
background:#fdfdfd;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
display:none;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
border-bottom:1px #b2b2b2 solid;
width: 300px; //set width
}
/*sub container div*/
.container ul li .drop div{
float:left;
width:50%; //optional
}
I have a horizontal menu based on this that is pure CSS and HTML and am trying to center align the dropdown divs under each top level menu item but am having some difficulty getting it to work. It currently aligns to the right, and any changes I make when changing to "relative" positioning of the child elements correct alignment of the parent/child but then throw off the top level items because the children take up the space between items.
Below is the code for an item, followed by the associated CSS.
Html:
<ul id="menu">
<li>Home
<div class="dropdown_2columns">
<div class="col_1">
<p class="black_box">Download stuff here<br><img src="img/menu-button.png"></a></p>
</div>
<div class="col_1">
<ul>
<li><a href="#">Item 1</li>
<li><a href="#">Item 2</li>
<li><a href="#">Item 3</li>
</ul>
</div>
</div>
</li>
CSS
#menu {
text-align:center;
color: #2262a0;
list-style:none;
width:690px;
margin:30px auto 0px auto;
height:28px;
padding:0px 20px 10px 20px;
background: #fff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:0px;
margin-top:7px;
border:none;
}
#menu li:hover {
padding: 4px 9px 4px 9px;*/
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
{
background:url("img/blue-arrow.png") no-repeat center 0px z-index;
margin:10px auto;
float:left;
display: inline-block;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:center;
padding:10px 5px 10px 5px;
border-left:1px solid #e5edf4;
border-right:1px solid #e5edf4;
border-top:3px solid #004b91;
border-bottom:3px solid #e5edf4;
}
.dropdown_1column {width: 260px;}
.dropdown_2columns {width: 520px;}
.dropdown_3columns {width: 780px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
{
left:-1px;
top:auto;
}
.col_1,
.col_2,
.col_3,
{
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:250px;}
.col_2 {width:500px;}
.col_3 {width:750px;}
Any CSS guru's out there care to send some advise?
In the example posted you can move the boxes by changing
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns
{
left: -212px; /*for column 4*/
}
Of course you would have to have a static width for each box and style them accordingly.
I have a demo here to illustrate my problem
http://www.ttmt.org.uk/
It's just a simple nav floated to the right and there is a drop down menu under 'Two'.
The drop down menu contain large buttons and I want the menu to stretch the with of the red bar above.
I got it working by giving the ul of the drop down menu a set with a negative left margin to pull it across.
#nav #topNav ul#fontSubMenu{
background:#e1e1e1;
left:-999em;
position:absolute;
padding:25px 0px 10px 22px;
margin:0 0 0 -784px;
z-index:120;
1width:100%;
width:1028px;
}
In Safari,Chrome (Mac) this seems to work but in Firefox it's a few pixels out.
Can anyone tell me why it's out in Firefox and is this the best way to do this.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
body{
font:1em Helvetica, sans-serif;
color:#555;
}
#wrap{
background:red;
margin:0 auto;
position:relative;
width:1050px;
}
#nav{
overflow:auto;
}
#nav #topNav{
float:right;
}
#nav #topNav li{
float:left;
margin:0 0 0 6px;
}
#nav #topNav li:hover,
#nav #topNav li a:hover{
background:#e1e1e1;
color:#555;
}
#nav #topNav li:hover .subNav{
border-bottom:6px solid #e1e1e1;
z-index:21;
}
#nav #topNav li a{
border-top:6px solid red;
border-bottom:6px solid red;
display:block;
padding:13px 13px;
color:white;
font-size:.98em;
font-weight:bold;
text-decoration:none;
}
#nav #topNav ul#fontSubMenu{
background:#e1e1e1;
left:-999em;
position:absolute;
padding:25px 0px 10px 22px;
margin:0 0 0 -784px;
z-index:120;
1width:100%;
width:1028px;
}
#nav #topNav li:hover ul#fontSubMenu{
left:auto;
}
#nav #topNav li ul#fontSubMenu li{
margin:0 14px 14px 0;
}
#nav #topNav li ul#fontSubMenu li a{
border: 1px solid #f7f7f7;
display:block;
color:#555;
position:relative;
font-size:.98em;
line-height:1.3em;
font-weight:normal;
width:162px;
height:45px;
}
#nav #topNav li ul#fontSubMenu li a em{
position:absolute;
left:75px;
bottom:13px;
width:100px;
font-style:normal;
}
#nav #topNav li ul#fontSubMenu li a:hover{
background:#aaa;
}
</style>
</head>
<body>
<div id="wrap">
<div id="nav">
<ul id="topNav">
<li>One</li>
<li >Two
<ul id="fontSubMenu">
<li><em>Two One</em></li>
<li><em>Two Two</em></li>
<li><em>Two Three</em></li>
<li><em>Two Four</em></li>
<li><em>Two Five</em></li>
<li><em>Two Six</em></li>
<li><em>Two Seven</em></li>
<li><em>Two Eight</em></li>
<li><em>Two Nine</em></li>
<li><em>Two Ten</em></li>
<li><em>Two Eeleven</em></li>
</ul>
</li>
<li >Three</li>
<li >Four</li>
<li >Five</li>
</ul>
</div><!--nav-->
</div><!--wrap-->
</body>
</html>
Why not use absolute positioning? The menu will always be on the same place, right?
ul#fontSubMenu{
left: 0;
top: 58px;
margin: 0;
}
(And remove the left: auto you set on the hover).
Your demo is also off by about 1-2px on Chrome Windows btw.
First posted working code gets awarded the answer...
Here's a simple web-page with a CSS drop-down menu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Center menu test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css_menu.css">
</head>
<body>
<div class="menu">
<ul><li>Home</li></ul>
<ul>
<li>Menu with items
<ul>
<li>one</li>
<li>two</li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
and here is the corresponding CSS :
.menu {margin-left:auto; margin-right: auto; padding:0; margin:8px; color: #000000; width:100%; border:1px; clear:both;}
/*Color navigation bar normal mode*/
.menu a,
.menu a:visited {font-family:Arial, Helvetica, sans-serif;font-style:normal;font-weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}
.menu ul {list-style-type:none;padding:0; margin:0;}
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}
.menu ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
Why isn't the menu centered on the page?
Its width is 100%, so it is centered, but not centred visibly (how can you center something that takes up 100% of the width?).
It may be easier to understand by looking at this fiddle.
Thirtydot also points out that margin: 8px is clobbering your previous setting of margin-left and margin-right.
Update
Here it is, working.
I would recommend changing your markup - having each in a separate ul is confusing.
Set margin:auto to center an element.
IE is a bit picky with centering elements, so do some tests. If it doesn't work in IE, set text-align:center to center the element's contents. Beware though, text-align is inherited as it cascades.
Try this.
body{
text-align:center;
}
.menu{
margin: 0 auto;
text-align:left;
width:750px; /*change width as needed*/
}
use display:inline for li & margin:auto and text-align:center for Ul
.header {
background: none repeat scroll 0 0 #231F20;
clear: both;
height: 20px;
}
.header ul {
clear: both;
height: 20px;
margin: auto;
text-align: center;
}
.header ul li {
display: inline;
list-style-type: none;
padding: 0 20px;
}
Here header is the div containing the menu ul & li