Forum Moderators: not2easy
#nav ul{
margin:0px;
padding:0px;
list-style:none;
float: left;
}
#nav li{
float:left;
height: 29px;
display: block;
margin: 0;
}
#nav a{
text-decoration: none;
float: left;
display: block;
}
li.help{
width: 107px;
background: url(Nav-Help-0.gif);
}
li.help a{
background: url(Nav-Help-1.gif);
width: 107px;
}
li.help a:hover{
background: url(Nav-Help-0.gif);
}
Cheers.
#nav ul{
margin:0px;
padding:0px;
list-style:none;
float: left;
}
Give it a width and viola, happy navigation for you!
Opera shrinkwraps when a floated container contains floats (maybe better to say that Opera shrinkwraps floats?). It will shrinkwrap the container to the width of the widest floated child element, I believe.
You can often get away with not declaring widths on the floated li and li a elements, ala 'Sliding Doors' method, cause they just get shrinkwrapped, so no harm done...
[edited by: DrDoc at 9:39 pm (utc) on July 8, 2004]
float:left
from the #nav li and the #nav a
and add it to each li. element
And also add a width to the <ul> (which i can't do as it changes sizes depending on the li elements which change from page to page.
Is there a solution?
cheers
Play with it and see what you can do. You could set widths for the UL depending on the page you are on:
<body class="home">
<ul id="nav">
Gets:
body.home ul#nav {width:**** px}
While
<body class="FarAwayFromHome">
<ul id="nav">
Gets
body.FarAwayFromHome ul#nav {width:yyy px}
That would be one solution that comes to mind, though it could get messy if you have a lot of pages.
You shouldn't have to remove the 'float' from the other elements.
But creates a new one. I want a img to float to the right at the end of menu bar. The img now appears below the <ul> bar. If I change the img to being a LI element and float it to the right, it is dependant on the width of the <ul>. So this will not do.
I suppose my only option is to absolute position the img to the right, but I am hoping there is an easier solution.
(I don't think i would need to keep on changing the width of the <UL> as I could just set it the largest possible size.)
I have just realised that the container background that iam using is now limited to the size of the <UL> which botches everything up.
You would have to leave enough room in the width of the UL for the image...
But in Opera (and only opera) the img wraps around and appears on the left under the <UL> stuff.
The solution that I found was to make the li float:right, then reverse the order of the list. Somewhat of a hack, but Opera for whatever reason expands the box for the float:right without a width specified, so I'm happy.
I figure it's an unordered list anyway, so it really doesn't matter if the order in the html is different from how it's actually displayed.
Anybody else think of a solution without having to specify a width?
You only need that if you want an inline list. If you want the list to be horizontal, you need an inline list-item.
ul {
display:block;
}
li {
display:inline;
}
Makes a horizontal list. No floats or widths needed.
Perhaps my ignorance - I don't know of a horizontal list that isn't inline. Is there another? Does simply float; left; on the li make it horizontal and not inline?
And, although it shouldn't be necessary (and I'm open about being personally uncertain), I've seen display: inline; used on both uk and li - most notably in 'taming lists' at ALA (http://www.****.com/articles/taminglists/).
Here's the CSS I use:
#nav{
margin:0;
padding:0;
position:absolute;
right:97px;
top:51px;
}#nav li{
float:right;
list-style-type:none;
}
#nav a:link, #nav a:visited{
border-top:1px solid #1a1a1a;
float:left;
margin:0 7px;
padding:2px 0;
}
where "nav" is the id given the ul tag for my navigation bar.
Ok. Now understood.
And, perhaps someone the url to be clipped.
