Page 1 of 2
Need help on CSS horizontal menu
Posted: Thu Jun 15, 2006 9:50 pm
by alex.barylski
Points to make:
1) I have read numerous articles but am unable to replicate the results I want...
2) I need this to work on all browsers or as many as possible anyways...flawlessly in IE and FF
HTML
Code: Select all
<div id="body_container">
<ul id="user_menu">
<li id="user_menu"><a href="#">Ads</a></li>
<li id="user_menu"><a href="#">Ads</a></li>
<li id="user_menu"><a href="#">Ads</a></li>
<li id="user_menu"><a href="#">Ads</a></li>
<li id="user_menu"><a href="#">Ads</a></li>
</ul>
</div>
CSS
Code: Select all
#user_menu li {
float: left;
list-style-type: none;
}
#user_menu ul {
margin: 0;
padding: 0;
}
I have trimmed the CSS down to the basics and tried to work up, but I cannot figure out the following:
1) Make the list items display horizontally
2) Make the menubar flush against the container DIV
I imagine the first is done by:
float - instead of inline so block styles can be applied, such as background-image, etc???
I also figure the the second has to do with the margin, padding of the UL element...
I cannot figure out which styles to apply, etc...
If someone could show me how it would be done to JUST display a simple horizontal menu (as I can figure out hover in my ANCHOR for image flipping, etc...
I would be greatful thank you
Cheers

Posted: Thu Jun 15, 2006 11:33 pm
by alex.barylski
So I all but scrapped the idea of using CSS to design the layout...
I've tried a few times now...I hate it so much...it seems to cause so much more cross browser issues...reuiring javascript for fluidity, etc...
All for what? I still get my code to validate against W3C...but using tables...
So i'll absorb the extra costs of bandwidth I guess until CSS smartens up
Anyways, question...
I get validation errors when using IMG tag and not specifying ALT
Make sense...seeing how screen readers would that that detail...but what sense does it make when the image is for layout???
When using CSS to design, is one expected to use a DIV instead of IMG???
Should I use a DIV, specifiy the Width/Height and use a background-image attribute? Or can I just leave ALT empty???
Cheers

Posted: Thu Jun 15, 2006 11:48 pm
by daedalus__
Hockey, bro. I beg of you to use CSS!
daedalus@camicus.net
I'll help as much as I can!
Posted: Fri Jun 16, 2006 12:54 am
by RobertGonzalez
Hockey wrote:So I all but scrapped the idea of using CSS to design the layout...
I've tried a few times now...I hate it so much...it seems to cause so much more cross browser issues...reuiring javascript for fluidity, etc...
All for what? I still get my code to validate against W3C...but using tables...
So i'll absorb the extra costs of bandwidth I guess until CSS smartens up
Anyways, question...
I get validation errors when using IMG tag and not specifying ALT
Make sense...seeing how screen readers would that that detail...but what sense does it make when the image is for layout???
When using CSS to design, is one expected to use a DIV instead of IMG???
Should I use a DIV, specifiy the Width/Height and use a background-image attribute? Or can I just leave ALT empty???
Cheers

Dude, don't scrap the CSS that fast! Horizontal UL menus are a snap. As for images for layout, you are better off using the image in the CSS for the HTML element so that way you don't have to specify and alt.
Back to menus...
Code: Select all
<div id="globalNav">
<ul>
<li class="first"><a href="#" title="some link 1">Link 1</a></li>
<li><a href="#" title="some link 2">Link 2</a></li>
<li><a href="#" title="some link 3">Link 3</a></li>
<li><a href="#" title="some link 4">Link 4</a></li>
<li><a href="#" title="some link 5">Link 5</a></li>
</ul>
</div>
Code: Select all
#globalNav ul {
position: relative;
right: 0px;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
div#globalNav ul li {
display: inline;
padding: 0 0.5em 0 0.75em;
border-left: 1px solid #cccccc;
}
div#globalNav ul li.first {
border-left: 0px none;
padding-left: 0;
}
div#globalNav ul li a {
font-size: 0.7em;
line-height: 1em;
font-family: verdana, sans-serif;
}
Play around with the colors and right borders (I have it set to mimic a ' | ' separator). See if that works. This little method validates for me and shows exactly the same in IE, FF, Opera and Safari.
Posted: Fri Jun 16, 2006 11:12 am
by alex.barylski
Wicked Everah...
You da' man
That worked...and nicely
One question though, how do I get bullets in between items? Should I put the bullets in another LI or is there some CSS like you've done where I can change the border to something like an image???
Cheers

Posted: Fri Jun 16, 2006 11:45 am
by alex.barylski
Another question:
Code: Select all
div#globalNav ul li.first {
border-left: 0px none;
padding-left: 0;
}
What is the purpose of div#globalNav ul li.first
I know hash # is meant for defining a ID which may only be used once, whereas class is as many times as need...ID therefore uniquely identifies any given elemnt...
I've never seen, or rather learned what the div prefix was for when preceeding a # hash mark???
Is that saying: Anything inside of the DIV with the ID of globalNav and/or the following elements should be applied these CSS attributes???
Posted: Fri Jun 16, 2006 11:47 am
by RobertGonzalez
Bullets are controlled by the list-style-type attribute of the ul element. Let me see if I can find a good explanation somewhere about that. I'll post back when I do.
Posted: Fri Jun 16, 2006 11:49 am
by RobertGonzalez
Hockey wrote:Another question:
Code: Select all
div#globalNav ul li.first {
border-left: 0px none;
padding-left: 0;
}
What is the purpose of div#globalNav ul li.first
I know hash # is meant for defining a ID which may only be used once, whereas class is as many times as need...ID therefore uniquely identifies any given elemnt...
I've never seen, or rather learned what the div prefix was for when preceeding a # hash mark???
Is that saying: Anything inside of the DIV with the ID of globalNav and/or the following elements should be applied these CSS attributes???
That element/attribute set could have been written without the div prepend is I wanted to make it globally available to any block-level element with the id of globalNav. By prepending the div to it it becomes only available to <div id="globalNav">.
The 'first' designation is meant to remove the left hand border of the li a combo, so it will look like this...
Instead of this...
Code: Select all
| Link 1 | link 2 | link 3 | link 4
When it is displayed.
Posted: Fri Jun 16, 2006 11:58 am
by alex.barylski
I have another question...
The menu code works awesome, but sometimes when I resize the window to something smaller...
The menu breaks onto a new line???
I thought display: inline would prevent this, but I guess not...
How can this menu be preveted from breaking onto new lines???
Edit: Another quarrel I have with CSS is that width: 100% doesn't appear to resize an element to it's actual container but rather only visible screen space...
This makes for some ugly awkward designs when resizing a window smaller than say half it's size (depends on design of course)...
Can this be circumvented? Do I have to use Javascript to resize certain containers on resize events???
Cheers

Posted: Fri Jun 16, 2006 12:02 pm
by RobertGonzalez
There is a way to force the width. I'm looking for it.
EDIT | Check out
this tutorial from A List Apart. It is a good one for lists.
Posted: Fri Jun 16, 2006 3:20 pm
by Oren
No one has mentioned yet that what you were doing was wrong:
Code: Select all
<div id="body_container">
<ul id="user_menu">
<li id="user_menu"><a href="#">Ads</a></li>
<li id="user_menu"><a href="#">Ads</a></li>
<li id="user_menu"><a href="#">Ads</a></li>
<li id="user_menu"><a href="#">Ads</a></li>
<li id="user_menu"><a href="#">Ads</a></li>
</ul>
</div>
You can't use the same id with more than 1 element.
See:
http://www.w3.org/TR/REC-CSS2/selector. ... -selectors
Posted: Fri Jun 16, 2006 3:36 pm
by RobertGonzalez
I corrected that with my code. But thanks for the posting.
Posted: Fri Jun 16, 2006 4:33 pm
by Oren
Yes, you did

But someone who doesn't know it's wrong wouldn't even notice, that's why you always need to mention this kind of things clearly

Posted: Fri Jun 16, 2006 8:19 pm
by Benjamin
Hockey, you should use CSS like I should use PHP Classes.
Seriously though, CSS is awesome. I'm amazed your not convinced yet.
Posted: Sat Jun 17, 2006 4:46 am
by RobertGonzalez
agtlewis wrote:Hockey, you should use CSS like I should use PHP Classes.
Seriously though, CSS is awesome. I'm amazed your not convinced yet.
Funny, in a sinister sort of way...
