I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.
I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).
I have this:
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
and my CSS looks like this:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}
li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}
ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}
ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
margin:0;
}
I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Basically, it emulates a table. Works in Gecko, Webkit, IE8+.
For IE7 and downwards you should use some inline-block hackery :)
JSFiddle
Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.
var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");
You will probably have to play with the width depending on padding and what not.
As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.
If you want to fill the width of the <ul> with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the <li> count, so the total width of the <ul> content will be more than 100% wide. I'd suggest removing the display:inline-block and giving them float:left.
Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
margin:0 auto;
}
.main{
width:650px;
border:1px solid red;
padding:5px;
}
ul {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</body>
</html>
#menu {
padding: 0;
margin: 0;
border: 1px solid red;
position: absolute;
}
#menu li {
list-style-type: none;
float: left;
position: relative;
padding-right: 10px;
}
#menu li a {
text-decoration: none;
}
<ul id="menu">
<li>1A1CASĂ </li>
<li>H1TML-CSS </li>
<li>J1VASCRIPT </li>
<li>PHP </li>
<li>TESTE </li>
<li>CONTACT </li>
</ul>
Wow stumbled upon a very old question here.
For anyone also seeing this and scrolling down here, in 2022 this is easily doable via flexbox.
#menu {
display: flex;
gap: 1rem;
}
li {
list-style-type: none;
}
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
try below css:
style.css (line 87)
ul#menu li {
float: left;
margin: 0;
padding: 6px 0;
width: 11.1%;
}
style.css (line 113)
ul#menu li a.current {
background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
height: 22px;
margin: 0;
}
style.css (line 95)
ul#menu li a {
color: #999999;
font-weight: bold;
padding: 8px 20px 0;
text-decoration: none;
width: auto;
}
see screen shot:
Related
I've tryed to implement a simple dropdownmenu without using links ( ).
It's list based. My list elements-width are with procentual values that all together comes to 100%. My last element breaks out in a new line thats what I dont understand. Maybe it has something to do with my margin..
Thanks in advance.
Here is a link to my code:
Fiddle
HTML
<div class="dropDown-menu-container">
<ul class="dropDownMenu">
<li style="width: 20%;">
Initiating
<ul>
<li>punkt</li>
<li>punkt</li>
</ul>
</li>
<li style="width: 20%;">
Planning
<ul></ul>
</li>
<li style="width: 40%;">
Monitoring and Controlling
<ul></ul>
</li>
<li style="width: 20%;">
Closing
<ul></ul>
</li>
</ul>
CSS
.dropDown-menu-container {
position:relative;
width:100%;
float:none;
clear:both;
display:inline;
text-align:center;
}
ul {
position:relative;
float:left;
width:100%;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
text-align:center;
height:50px;
margin:4px;
box-shadow:0px 0px 2px 2px grey;
background-color:grey;
position: relative;
float: left;
}
ul li:hover {
background-color:lightgrey;
}
li ul {
display: none;
}
li {
position: absolute;
height:50px;
margin-bottom:5px;
top:0px;
}
li:hover ul {
display: block;
top:32px;
}
li:hover li {
float: none;
font-size: 11px;
}
Kind regards!
You're not including your margins in your calculations
Set your width to calc(20% - 8px)
Fiddle: http://jsfiddle.net/bjPrK/16/
The total of your element area is the sum of margin, padding and border.
See http://www.w3.org/TR/CSS2/box.html
You must include the four pixels of each margin in your calculation.
Just a forewarning, I am new to HTML and CSS. Please be patient with my inquiry here.
I am attempting to center the navigation bar while overlapping it on the bottom side of the banner. I have a banner image at the top and a background image for the main content which is positioned just below the nav bar. I've attempted to add the following:
ul.navbar li {
float: left}
This floated the nav bar directly underneath the main body background instead of above everything. In order to get the list in a horizontal format i used
ul.navbar li {
display: inline-table}
This was the only variation that would give me the correct horizontal format I was looking for. Now I just need it centered and overlaid on the bottom end of my banner image. Any suggestions? My HTML and CSS is as follows:
CSS:
body {
padding-left: 9em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #6699FF;
background-color: white
}
div#contentareamain1 {
background: url(contentareamain1.png) no-repeat;
background-color: white;
color: white;
height: 634px;
position: relative;
}
div#contentareamain1text {
position: relative;
height: auto;
width: 700px;
left: 5em;
top: 4em;
}
#header {
float:left;
width:100%;
height:87px;
}
.wrap {
position:relative;
margin:0 ;
}
ul.navbar {
list-style-type: none;
padding: 0.3em;
margin: 0;
top: 2em;
left: 5em;
width: 15em;
}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
ul.navbar li {
background: rgb(157,193,255);
margin: 0.5em ;
padding: 0.3em;
border-bottom: 1em solid black;
text-align: center;
display: inline-table;
}
ul.navbar a:hover {
color: blue;
background-color: #00FFFF;
}
ul.navbar a {
text-decoration: none;
}
HTML:
<body>
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div><ul class="navbar">
<p> <li>Home </p>
<p> <li>Services </p>
<p> <li>Training </p>
</ul>
<div id="contentareamain1" no-repeat>
<div id="contentareamain1text"><p>
</p></div>
</div>
Thank you so much in advance!
First you should check your HTML structure – it seems there is a missing closing DIV tag and you should delete the wrapping P elements around the list elements.
Try this:
<div id="header">
<div class="wrap">
<img src="banner.png"/>
</div>
<ul class="navbar">
<li>Home</li>
<li>Services</li>
<li>Training</li>
</ul>
</div>
After you just need to give your header image this CSS:
display:block; margin:0 auto; position:relative;
and the ul.navbar needs something like this:
margin:0 auto; float:none; position:relative; top:-35px; width:500px;
and you should delete the relative position of your div#contentareamain1 to get this code work.
div#contentareamain1 { (…) /*position: relative;*/ }
You should really visit W3C and learn your HTML :)
The HTML
<div id="header">
<img src="" />
<ul class="navbar">
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</div>
<div id="content-area>
</div>
Your HTML contains some <p>-tags who don't belong there. Also I guess you would like your content outside of the header?
The CSS
(I only give you an example how to place your navbar centered in your header, the rest is up to you)
#header {
position:relative;
z-index:1;
text-align:center;
}
#header img {
position:inherit;
z-index:inherit;
}
#header ul.navbar {
position:relative;
z-index:2;
margin:0 auto;
top:-35px;
list-style-type:none;
}
#header ul.navbar li {
display:inline-block;
}
#header ul.navbar li a {
display:block;
padding:4px 8px;
background-color:blue;
color:white;
text-decoration:none;
}
You can see the code in action at jsFiddle and play around with it.
Hope it helped you a bit.
I am creating a center, nested navigation menu, and am trying to use pure CSS. See a working demo HERE: http://jsfiddle.net/jenstechs/MKtTN/2/
HTML:
<nav>
<ul id="primary">
<li>Link One</li>
<li>Link Two</li>
<li>Link Threee
<ul class="secondary">
<li>Services One</li>
<li>Services Two</li>
</ul>
</li>
<li>Link Four</li>
<li>Link Fiiiiive</li>
</ul>
</nav>
CSS:
nav {
margin:15px auto 10px auto;
width:100%;
}
nav ul#primary {
width: 100%;
padding: 10px 0;
margin: 0;
background-color: #FFF;
text-align: center;
}
nav ul#primary>li {
display: inline;
padding:5px 0;
margin-left:0;
}
nav ul#primary>li>a {
padding: 0px 30px;
margin-right:-6px;
color: #000;
text-decoration: none;
border-right:2px solid #999;
}
nav ul#primary>li>a:hover,
nav ul#primary>li.active>a {
background-color: #900;
color:#FFF;
padding-top:10px;
padding-bottom:25px;
}
nav ul#primary>li:first-child a {
border-left:2px solid #999;
}
ul.secondary {
padding-top:0;
position:absolute;
display:none;
}
ul.secondary li {
}
nav ul#primary li:hover ul.secondary {
display:block;
}
nav ul#primary li:hover ul.secondary li {
}
ul.secondary li a {
display:block;
width:7em;
color:#FFF;
background-color:#900;
font-size:0.8em;
text-decoration:none;
text-align:left;
line-height:1.4em;
border-bottom:1px solid #FFF;
}
ul.secondary li:last-child a {
border-bottom:0;
}
ul.secondary li a:hover {
color:#DDD;
}
I also have a minimal reset, the only styles it has on lists is a few default margins.
Since this is a centered navigation bar, the CSS I'm using is inline, not floated. So I have no idea what to put in the CSS to position the sub-menu actually underneath its parent element. Most examples I've seen have position:absolute but that seems to keep it at the left. I've tried various methods of hiding and showing (display:, left:) but can't seem to find that magic combination.
Here I only have the one sub-list, actually, but what if I had sublists for all of them?
Thanks for any tips or links to examples...
To make position: absolute elements position relative to their parent, make the parent position: relative.
In your case:
nav ul#primary>li {
display: inline;
padding:5px 0;
margin-left:0;
position: relative;
}
Demo: http://jsfiddle.net/MKtTN/3/
I have two problems with my dropdown menu, one involving links, the other involving IE7 issues. Code follows after questions, and in both instances, I'm trying to avoid javascript (a key part of the project)
I am successfully highlighting the text of the link when I hover, including some pixels above, below and left & right. However, the only part of the highlight that is clickable (i.e. where I can access a hyperlink) is where the text is, and I want to be able to have the entire highlight, padding and text, to be clickable. I've done it before, but I'm confused with the current code on how to fix it. Can anybody help me out?
Using the same dropdown, everything is working fine, except in IE7. Some IE7 users complained that once they highlighted the menu item and the dropdown occurs, they only get down to about the 2nd item before the dropdown disappears, and it does it for every dropdown. I know it's an issue with IE7, but I need to get a work around for it. Any help at all?
My CSS code:
ul { list-style: none; }
p { margin: 8px 0; }
ul.dropdown { list-style-type:none;height:24px; top:2px; padding:0px 0px 0px 0px;;margin:0px 0px 0 1px;vertical-align:bottom; color:#000000; position: relative; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
ul.dropdown li { float: left; position:relative; vertical-align:middle; background-position:0 -40px; padding: 2px 4px 5px 2px; margin-right:6px;}
ul.dropdown li a { display: block; padding: 0px 0px; color: #222; text-decoration:none; vertical-align:middle; width:100%;}
ul.dropdown li:last-child a { border-right: none; }
ul.dropdown li.hover,
ul.dropdown li:hover { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a { color: black; }
ul.dropdown ul { width: 152px; visibility: hidden; position: absolute; top: 100%; left: -40px; z-index:60;}
ul.dropdown ul li { font-weight: normal; background: #ECEAD8; color: #000; width:100%;/*border-bottom: 1px solid #ccc;*/ float: none; }
ul.dropdown ul li.nohover { color: black; background: #ECEAD8; position:relative; }
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; min-height:1.4em;}
ul.dropdown ul ul { left:72.7%;top: 0px; width:158px; z-index:50; display:inline-block;}
ul.dropdown li:hover > ul { visibility: visible; display:block; }
#arrowRight { float:right; margin-top:-11px;}
a.moreItems {background: url(/images/menu/arrow_r.gif) no-repeat right;}
Here is the HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel=stylesheet type="text/css" href="menustylesheet.css">
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" class="topmenu" bgcolor="##ECEAD8" nowrap>
<ul class="dropdown">
<li><b>Item 1</b> <img src="/images/menu/arrow_d.gif" border="0" height="7" width="7">
<ul>
<li><a class="moreItems" href="">Item 1-1</a>
<ul>
<li>Item 1-1-1</li>
</ul>
</li>
<li><a class="moreItems" href="">Item 1-2</a>
<ul>
<li>Item 1-2-1</li>
</ul>
</li>
<li>Item 1-3 <div style="vertical-align:middle;"><img src="/images/menu/arrow_r.gif" id="arrowRight" border="0"></div>
<ul>
<li>Item 1-3-1</li>
<li>Item 1-3-2</li>
</ul>
</li>
<li>Item 1-4</li>
<li>Item 1-5</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr><td bgcolor="##c0c0c0" style="height:1px;"></td></tr>
</table>
</body>
</html>
I apologize if this has been answered before, but I hope someone can pinpoint where in the code I need to change or modify to make it work.
I have an answer to your first problem. When doing this kind of menu. I stay as far away from padding as I can. I find it easier just to use margins, but for starters lets look at a page I built for you:
http://www.albatrossfonts.com/stack/ulbuttons.html
I'll explain this code below.
Here is my HTML:
<div id="wrapper">
<ul class="dropdown">
<li>Button 1</li>
<li>Button 1</li>
<li>Button 1</li>
</ul>
</div>
And the CSS:
.dropdown
{
width: 200px;
display:block;
margin: 200px auto 0 auto;
list-style-type: none;
padding: 0;
}
.dropdown li
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 1px 0 0 0;
list-style-type: none;
padding: 0;
}
.dropdown li a:link, .dropdown li a:visited
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 0;
color: #ffffff;
background-color: #666666;
text-decoration: none;
text-indent: 12px;
line-height: 44px;
}
.dropdown li a:hover
{
background-color: #333333;
}
Notice that I declared a:link, instead of just a. I also declared a:visited since I want the visited state to be the same as the original state.
In the .dropdown entry, I simply defined a width for the list (ul) and made it display properly.
In the .dropdown li entry, I set the width and height of each list item, removed bullets, and set the display and float to make them display as a box. No padding. Just a box.
In the .dropdown li a:link, .dropdown li a:visited entry, what we are essentially doing is "filling" our list item boxes with a link, and it just so happens that we can define a link as a box as well. So I set the dimensions of the link to the exact same size as our li's (this is what makes the entire box clickable). Then set the display and float, and a background color, as well as a text color, or simply "color."
In order to get your text in the center, you should not use vertical-align. Use line-height, and set it to the same height as your li element. This will center your text in the box vertically.
To control where your text appears horizontally, set a text-indent property, use text-align. In this example, I used text-indent.
Finally, we define our a:hover state. It's important to remember that the only things you truly need to define here are any properties that actually change. In this case, the background color.
If you wanted to ad a state for the mouse down event, you could do something like:
.dropdown li a:active
{
background-color: #000000;
text-indent: 20px;
}
/////////// Edit////////////
Here's how you would use a single css styles for multiple menus or child menus.
html for 2 separate ul's:
<ul class="dropdown">
<li>Button 1</li>
<li>Button 1</li>
<li>Button 1</li>
</ul>
<ul class="dropdown">
<li>Button 1</li>
<li>Button 1</li>
<li>Button 1</li>
</ul>
CSS: (stays the same, because you assign both of them to the class "dropdown."
.dropdown
{
width: 200px;
display:block;
margin: 200px auto 0 auto;
list-style-type: none;
padding: 0;
}
.dropdown li
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 1px 0 0 0;
list-style-type: none;
padding: 0;
}
.dropdown li a:link, .dropdown li a:visited
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 0;
color: #ffffff;
background-color: #666666;
text-decoration: none;
text-indent: 12px;
line-height: 44px;
}
.dropdown li a:hover
{
background-color: #333333;
}
If you want to apply your styles for a child ul, like this:
<ul class="dropdown">
<li>Button 1
<ul>
<li><a href="#">subButton 1</li>
<li><a href="#">subButton 2</li>
<li><a href="#">subButton 3</li>
</ul>
</li>
<li>Button 1</li>
<li>Button 1</li>
</ul>
You simply append your styles to include the child ul and child ui li, as follows; where .dropdown actually represents your first ul. So .dropdown(ul) --> li (list item in "dropdown" unordered list) --> ul (ul inside dropdown li) --> li (li inside dropdown ul li ul)
Sorry if that sounds confusing, but in other words, if you didn't assign a class to your parent ul at all, it would be ul li ul li to access a list item inside a child list.
.dropdown, dropdown li ul
{
width: 200px;
display:block;
margin: 200px auto 0 auto;
list-style-type: none;
padding: 0;
}
.dropdown li, .dropdown li ul li
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 1px 0 0 0;
list-style-type: none;
padding: 0;
}
.dropdown li a:link, .dropdown li a:visited, .dropdown li ul li a:link, .dropdown li ul li a:visited
{
width: 200px;
height: 44px;
display: block;
float: left;
margin: 0;
color: #ffffff;
background-color: #666666;
text-decoration: none;
text-indent: 12px;
line-height: 44px;
}
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
^This has helped me on many occasions to find work-arounds for IE.
i was able to make the dropdown menu already but when i tried to view it on other pc the secondlevel ul was misplaced and not below on it's li. So i tried to recode but i got lost. Please help.
Here is my html markup:
<div id="main-nav" class="menufont">
<ul id="nav">
<li>ONE</li>
<li class="sec">TWO
<ul id="twosecond" class="leveltwo">
<li>TWO A</li>
<li>TWO B</li>
</ul>
</li>
<li class="sec1">THREE
<ul id="threesecond" class="leveltwo">
<li>THREE A</li>
<li>THREE B</li>
<li>THREE C</li>
<li>THREE D</li>
</ul>
</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
</div>
And here is my messed up css:
ul.leveltwo {
background: #c7000d;
border: 1px solid black;
padding: 7px;
font: 16px Helvetica, Arial;
}
ul.leveltwo li {
color: #fff;
}
#twosecond li, #threesecond li {
font: 16px Arial;
display:block;
padding: 3px;
border-bottom: 1px dashed #fff;
}
#twosecond, #threesecond {
display: none;
position: absolute;
}
#nav li.sec:hover ul, #nav li.sec1:hover ul {
display: block;
}
The ul with class .leveltwo shows when i hover on it's main li but the ul of "TWO" is not aligned with it. Thanks alot in advance.
Just add display:none to your .leveltwo class and take out the #twosecond #threesecond tags. The `position:absolute is making the sub menus look like they're showing up under THREE.
Example: http://jsfiddle.net/r4gAQ/3/
Though I will say, I'd look into a jQuery solution, maybe a premade one like MLDDM. They have nice solutions that allow for vertical and horizontal menus. Also, hovering using pure CSS breaks in IE6... not that anyone should use that anymore.
Rechecked my post. This might be the CSS that would help you out. Try it out!
#nav li{
width:200px;
position:relative;
border: 1px solid black;
}
#nav li ul.leveltwo li{
border:none;
}
#nav li ul{
background: #c7000d;
border: 1px solid black;
padding: 7px;
font: 16px Helvetica, Arial;
color:white;
position:absolute;
left:200px;
top:0;
display:none;
}
#nav .sec:hover ul, #nav .sec1:hover ul{
display:block;
}