Need help on CSS horizontal menu

JavaScript and client side scripting.

Moderator: General Moderators

alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Need help on CSS horizontal menu

Post 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 :)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

So I all but scrapped the idea of using CSS to design the layout... :P

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 :P

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 :)
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

Hockey, bro. I beg of you to use CSS!

daedalus@camicus.net

I'll help as much as I can!
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Hockey wrote:So I all but scrapped the idea of using CSS to design the layout... :P

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 :P

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.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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 :)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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???
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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...

Code: Select all

Link 1 | link 2 | link 3 | link 4
Instead of this...

Code: Select all

| Link 1 | link 2 | link 3 | link 4
When it is displayed.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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 :)
Last edited by alex.barylski on Fri Jun 16, 2006 12:09 pm, edited 1 time in total.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I corrected that with my code. But thanks for the posting.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Yes, you did :P 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 :wink:
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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... :lol:
Post Reply