homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Floating 4 unordered lists side by side
assuming a liquid layout
steve




msg:3876798
 10:28 am on Mar 23, 2009 (gmt 0)

I'm trying to position four <ul>s to create menus of links.

I can get them working if I set the width of the UL to 22%, but setting it to 25% as below forces the last <ul> below the others.

I can't set fixed widths (i.e. px) so what can I do, am I forced to use 22% width?

/Steve

Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>List OneItem 1Item 2Item 3Item 4</title>

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

body {
background-color:#F0F0F0;
font-size: 62.5%;
font-family: Verdana, Courier, Tahoma;
}

#footer_box {
float:left;
width: 100%;
background: #EEE;
border-top: 1px #CCC solid;
border-bottom: 1px #CCC solid;
}

#footer_box ul {

width: 25%;
float: left;
padding: 1em;
}

#footer_box li {
width: 100%;
list-style: none;
line-height: 1.4em;
text-align: left;
color:#555;
font-size: 1.2em;
font-weight: bold;
}

#footer_box a {
text-decoration: none;
font-size: 90%;
font-weight: normal;
}

#footer_box a:hover {
text-decoration: underline;
}

#footer p {
clear: both;
color: #999;
font-size: 1em;
text-align: center;
}

</style>

</head>

<body>
<div id="footer">

<div id="footer_box">
<div id="footer_list_holder">
<ul id="footer_list">
<li>List One</li>
<li><a href="/">Item 1</a></li>
<li><a href="/">Item 2</a></li>
<li><a href="/">Item 3</a></li>
<li><a href="/">Item 4</a></li>
</ul>
<ul id="footer_list">
<li>List Two</li>
<li><a href="/">Item 1</a></li>
<li><a href="/">Item 2</a></li>
<li><a href="/">Item 3</a></li>
</ul>
<ul id="footer_list">
<li>List Three</li>
<li><a href="/">1</a></li>
<li><a href="/">2</a></li>
<li><a href="/">3</a></li>
<li><a href="/">4</a></li>
</ul>
<ul id="footer_list">
<li>List Four</li>
<li><a href="/">1</a></li>
<li><a href="/">2</a></li>
<li><a href="/">3</a></li>
</ul>
</div> <!-- end #footer list holder -->
</div> <!-- end #footer box -->

<p>text</p>
<p>text</p>
<p>text</p>
</div><!-- footer -->

</body>

</html>


 

PSWorx




msg:3876898
 1:03 pm on Mar 23, 2009 (gmt 0)

I think the problems with the footer borders (ive only just glanced at the css and html here), if your trying to set a 1px border and then give its child objects (4 of) 25% width then you will be over by 2 pixels on the horizontal as youve defined a static borders and given a non-static width to the child objects aswell as padding to the child objects (Look for info relating to the BOX model).

[webdesign.about.com ]
[quirksmode.org ]


#footer_box {
float:left;
width: 100%;
background: #EEE;
border-top: 1px #CCC solid; // 1px
border-bottom: 1px #CCC solid; // 1px
}


#footer_box ul {

width: 25%; // Dynamic width
float: left;
padding: 1em; // Dynamic padding
}

Above you have already reserved 2 pixels for the border (thats 1 either side), and given dynamic width and padding so it will throw the last list below the others as there isnt enough room on the horizontal.

Using the percentages of say 20% will produce different results depending on the resolution of the screen its being viewed on, im a bit rusty here but i cant really see a solution for this issue unless you use javascript to actively re-write the width and padding of the child objects depending on the screen resolution whilst taking into account the border widths also, that is if your looking for a pixel perfect solution.

Any other offers on this?

steve




msg:3876948
 2:42 pm on Mar 23, 2009 (gmt 0)

I commented out the borders, to see if that helped - unfortunately it didn't :-(

So I tried removing the 1em padding on the <ul>, which worked for FF and Opera but not IE7. In IE, the rightmost list will now jump in and out of place as I change the width of the browser window. Is this a rounding error?

simonuk




msg:3876962
 3:23 pm on Mar 23, 2009 (gmt 0)

This is strange because the class fix I have for you is a weird one.

First off you must remove the padding from the UL and style the elements inside the LI

Secondly create a new class (I called it .short) and give the final UL a class. As an example in the CSS do:

.short {margin-left:-1px;}

And in the html for the final UL use:

<ul id="footer_list" class="short">

Now the fix doesn't make much sense to me because usually IE follows the same pattern and gives elements the same conditions all around so a bug where it gives just one solitary pixel more than needed is strange. I would have expected 2 pixel or 10 but an uneven one pixel is strange.

So anyway in IE you have 100% + 1 pixel so remove the 1 pixel and you're set.

steve




msg:3877151
 7:59 pm on Mar 23, 2009 (gmt 0)

Thank you Simon, that works a treat.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved