Help withs <ul>'s

[Pádraig]

This is kind of a stupid question, but could someone tell me how I can get a <ul> to sperate on to two different lines like in the image attached.

Thanks,
Pádraig.

[pa007]

You could give it a class or id and then apply clear:both; in the css should work as long as nothing is conflicting with it. There may be another way though I can't think of it at the minute. You would give the 'Contact me' li the class. I forgot to mention.

Pete.

[pa007]

I just thought, you would be best giving it a class of "clear" or something similiar. That way if anything else on the site needed clearing you could just use that class again.

Pete.

[Pádraig]

So some thing like...

HTML

Code: Select all

    <div id="nav">
        <ul>
            <div class="top">
            <li>Home</li>
            <li>Skins</li>
            <li>Bebo Page</li>
            <li>Other Links</li>
            </div>
            
            <div class="bottom">
            <li>Conact Me</li>
            <li>Other Skinners</li>
            </div>
        </ul>
    </div>

CSS:

Code: Select all

.top {
     clear: both;
}

Would that be right?

[pa007]

Give me a minute, this should be easy but it's not.

Pete.

[Pádraig]

Thanks alot! Something wrong again?

[pa007]

I think I've got it now.

Use the following code and it will give you the required effect. there may be a better way, I've never done this before so I'm not sure, but this works.

HTML:

Code: Select all

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<span><li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li></span>

CSS:

Code: Select all

ul {
    list-style: none;
}

ul li {
   display:inline;
}

span {
   display: block;
}

Try that. You can just style the anchors as normal after this. Add margin/padding to the span to position the bottom set of links properly.

Pete.

[Pádraig]

Thanks alot, Pete!

[pa007]

It had me stumped for a minute but it should be ok now. Just make sure you use display: inline; rather than float: left; to give the horizontal nav.

Let me know if it works or not.

Pete.

[Pádraig]

Yep, its working!

[pa007]

Excellent. If that hadn't have worked I would never have coded another site. I would have closed BBedit for the last time. The pressure was unbearable. Luckily it's all ok. Phew!

Pete.

[Pádraig]

Hahahahaha...lol. The alternative was to use two <ul>'s, but I prefer your way!

[pa007]

I was thinking that but it just wasn't right. It's one list so to put in two ul's is like saying it's 2 lists. Me being a stickler for semantics and all I just couldn't bring myself to say that was the best way. It was a lucky escape, for both of us. Who'd have thought a bit of innocent html and css could push us so close to the edge?

I think I need a lie down.

Pete.

[Pádraig]

I think now would be a bad time to say that I have another 50 questions I would like answered.

[pa007]

Fire away, I like life on the edge.

Pete.

[Lchad]

I would have taken the easy route and put in a <br/>
* hahahahahaha

*hands Pete an ice pack for head!

[pa007]

It wasn't really too difficult to be honest but I couldn't for the life of me figure out how to do it. Then it clicked. It's like when you can't remember a word and it really gets on your nerves. Kind of.

Pete.

[Ronnybob]

Would a much simpler method not have been to just give the ul a suitable width? Anything going over that width would span onto a new line by itself.

[pa007]

Yeah, I never thought of that. But if the text was resized it could mess that up. I tried for a bulletproof method though I don't know how bulletproof it is.

Pete.