Help withs <ul>'s

Pádraig · #1 Jun 30th, 2007, 22:13

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 · #2 Jun 30th, 2007, 22:15

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 · #3 Jun 30th, 2007, 22:17

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 · #4 Jun 30th, 2007, 22:25

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 · #5 Jun 30th, 2007, 22:53

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

Pete.

Pádraig · #6 Jun 30th, 2007, 22:54

Thanks alot!

Something wrong again?

pa007 · #7 Jun 30th, 2007, 23:23

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 · #8 Jun 30th, 2007, 23:24

Thanks alot, Pete!

pa007 · #9 Jun 30th, 2007, 23:25

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 · #10 Jun 30th, 2007, 23:57

Yep, its working!

pa007 · #11 Jul 1st, 2007, 00:06

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 · #12 Jul 1st, 2007, 00:13

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

pa007 · #13 Jul 1st, 2007, 00:20

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 · #14 Jul 1st, 2007, 00:26

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

pa007 · #15 Jul 1st, 2007, 00:38

Fire away, I like life on the edge.

Pete.

Lchad · #16 Jul 1st, 2007, 00:38

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

*hands Pete an ice pack for head!

pa007 · #17 Jul 1st, 2007, 00:45

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 · #18 Jul 1st, 2007, 10:36

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 · #19 Jul 1st, 2007, 12:12

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.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Help withs <ul>'s