what makes a hoizontal li menu horizontal

i was looking at the CSS at opensourcematters.com. i note here horizontal menu at the top. now they have float: left on almost every tag for the list and they have their dispaly at block. now i have see it done with dispaly as inline. and i have seen it done with less floats.

so what is the most elegant way.

also i copied there css and html and played withit. however in my IE the menu was vertical even though i copied directly. must be a joomla setting.

 

I know that in the admin you can set whether you want your menu do display vertically or horizontal. I don't know how that gets played out in the css/html though. I've assumed it sets a different style or class to call...sorry not so profficient w/css.

 

when u pick horizontal it puts in in a table. as with vertical. u can choose flat list which is just the li items. and then depending on the module position you assign in template it also tells it whether to make it a table or not.

 

The most elegant way afaik is to float the list and list items turning off the default bullets like so:
ul { float:left; list-style:none; } li { float:left; margin:0; padding:0; }

Then give the links in the list whatever padding and any margin you want between items so the list behaves like a series of buttons:
li a { margin:0 2px; padding 5px; }

Don't forget you'll have to clear the next element below your navigation or it will try and flow on after the last item in your list:

div { clear:left; }

HTML would look like this:

<ul>
<li><a href="/1">Link 1</a></li>
<li><a href="/2">Link 2</a></li>
</ul>
<div>
<p>Here is my content...</p>
</div>

hth

 

so when do you use display-style: block or inline? also is the above menu easily wrapped in a div u can style. i not that IE wraps to the height of the list items but FF does not.

 

Yeah I normally use display: inline; too.

I did not know you could do it the other way that has been talked about.

Cool I will have to give it a try.

Thanx John

 

No need for display:inline using the technique I posted.

You can wrap a <ul> in a <div> but why bother? An <ul> is a block level element that can accept the same styling cues as a <div>.

If you think you may have other lists on the page, rather than wrap the <ul> in a <div>, give it a unique name and style that:

<ul id="nav">
<li>...</li>
</ul>

In your CSS file, style like this:

#nav { ...whatever... }

#nav li {...}

#nav li a {...}

#nav li a:hover {...}

It's not finished yet, but you can see an example menu like you're asking about at one of my current projects: http://new.openchoicemortgages.co.uk/

 

Float and inline each have their advantages and disadvantages according to the effect you're going for. Neither is inherently better or worse than the other. It is important that a designer/coder learn about each and its effects.

Do keep in mind that wysiwyg code generators like Dreamweaver turn out crap for code. It is certainly better to learn to code html and css yourself; especially if you want to do non-trivial designs that will hold up to whatever the user will inflict on them while maintaining accessibility and usability.

You just must buckle down and study the nitty gritty parts of markup if you expect to join the ranks of the professional web designer.

cheers,

gary

 

CCD, where did you get the nice models at the top of your http://new.openchoicemortgages.co.uk/. I fail miserably when it come to graphics.

 

i looks as thought inline gives you some auto margins or padding. there is space between items but floating leaves no space.

 

so i have tried both simple examples above and they both work. i see the subtle differences. now with the menu that is done with float. how can i center this menu in the center of the page?

 

Hi,

Block display will always give you more control, and floating block elements allows them to behave more or less like inlines.

The most elegant option would be "inline-block". But that is not completely supported in IE and not supported at all in Firefox.

To center a block element set its left and right margins to auto.

- P

 

<ul> is a block level right. well when is set both margins to auto then it doesn't center. i have put three styles i am playing with up at bj.dreamhosters.com


btw in FF there is a margin between list elements and no so in IE, any ideas?

 

I carnt remember exactly when but sometimes you do need to set the margin and padding of an element as they are diffrent in diffrent browsers.

You will also come accross the problem of IE interprates margins and padding diffrently to other browsers too, but there is a way around that too.

 

digs out old thread to help him with new problem...

Hi everyone, how do YOU make a list go horizontal?

 

Sorry for the late reply bjraines, those nice models (the young couple) cost £75 at one of the expensive stock photo libraries - but the quality does shine through. I'm also pretty pleased with the older couple on the right to buy page, and they came from a $1 stock photo site (dreamstime).

I generally use cheap stock sites or my own photography (the money on the loans page and the castle on the about page are my own shots), but sometimes spending a little is worth it - depends on the $$$ in the project and whether the client is prepared to pay for quality photography.

@halotree, float the list and its items like so:

ul {float:left;}
li {float:left;}

Basically the same way I wrote above, menu or list, no difference.