homepage Welcome to WebmasterWorld Guest from 54.196.24.103
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Achieving equal space between horizontal list items of varying width
Combining min-width and max-width
SilverLining




msg:4578539
 11:39 am on May 28, 2013 (gmt 0)

What is the best way to achieve equal space between horizontal list items of varying width, using the structure below.

I have set both min-width and max-width. When a word spans two lines and the max-width kicks in, the "visual padding" is sometimes too much e.g.
#penultimate. The same happens when a word is narrower than the min-width.

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
ul { display: table; list-style: none; width: 800px; }
li { margin-bottom: auto; margin-top: auto; text-align: center; text-transform: uppercase; }
li a { border: 1px solid #000; display: table-cell; float: left; max-width: 100px; min-width: 60px; padding: 0 10px; vertical-align: middle; word-wrap: break-word; }
</style>
</head>
<body>
<ul>
[pre] [/pre]<li><a href="#">blah</a></li>
<li><a href="#">blah blah</a></li>
<li><a href="#">fooooooooooooooo</a></li>
<li><a href="#">foofoo foofoo</a></li>
<li><a href="#" id="penultimate">foo foo foo </a></li>
<li><a href="#">longwordfoo</a></li>
</ul>
</body>
</html>


Ideally one needs to strip all additional space in the
a tag and possibly place the padding on the li.

Thanks

 

rainborick




msg:4578706
 7:08 pm on May 28, 2013 (gmt 0)

Uniformity and flexibility rarely mix easily in CSS. You're generally going to have to compromise a little both ways. But I took a stab at it:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
ul { list-style: none; width: 800px; }
li { float:left; margin-left:2%; margin-bottom: auto; margin-top: auto; max-width:14%; text-align: center; text-transform: uppercase; word-wrap: break-word; border: 1px solid #000; }
li a { padding:0 10px 6px 10px; }
</style>
</head>
<body>
<ul>
<li><a href="#">blah</a></li>
<li><a href="#">blah blah</a></li>
<li><a href="#">fooooooooooooooo</a></li>
<li><a href="#">foofoo foofoo</a></li>
<li><a href="#" id="penultimate">foo foo foo </a></li>
<li><a href="#">longwordfoo</a></li>
</ul>
</body>
</html>

rainborick




msg:4578715
 7:28 pm on May 28, 2013 (gmt 0)

This might be better for tweaking/visualizing:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
ul { list-style: none; width:800px; margin:0; padding:0; background-color:#f0f0f0; }
li { float:left; margin-left:2%; max-width:14%; padding:0 10px 4px 10px;
text-align:center; text-transform:uppercase; word-wrap:break-word; border:1px solid #000; }
ul:after, ul li:last-child:after {
content:' ';
display:block;
height:0;
clear:left;
}
</style>
</head>
<body>
<ul>
<li><a href="#">blah</a></li>
<li><a href="#">blah blah</a></li>
<li><a href="#">fooooooooooooooo</a></li>
<li><a href="#">foofoo foofoo</a></li>
<li><a href="#" id="penultimate">foo foo foo </a></li>
<li><a href="#">longwordfoo</a></li>
</ul>
<p>More</p>
</body>
</html>

lucy24




msg:4578801
 11:46 pm on May 28, 2013 (gmt 0)

li { margin-bottom: auto; margin-top: auto; text-align: center; text-transform: uppercase; }
li a { border: 1px solid #000; display: table-cell; float: left; max-width: 100px; min-width: 60px; padding: 0 10px; vertical-align: middle; word-wrap: break-word; }

I have trouble fitting "display: almost-anything" and "float" into the same sentence. In any case, shouldn't the "table-cell" aspect be attached to li, not to li a?

SilverLining




msg:4578893
 6:46 am on May 29, 2013 (gmt 0)

Thank you for your replies.

I added the border to make the space between words more noticeable. In the implementation there are no borders and there is little space to work with, so additional padding on the "li" elements is not really an option.

lucy24, display: table-cell is on the "a" tag to display the text vertically centre aligned.

Made some changes, but still have the same issue:

<html>
<head>
<title>Example</title>
<style>
ul {
display: table;
list-style: none;
width: 100%;
}
li {
float: left;
margin-bottom: auto;
margin-top: auto;
text-align: center;
}
li a {
display: table-cell;
font-size: 11px;
height: 60px;
max-width: 100px;
min-width: 50px;
padding: 0px 5px;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li><a href="#">blah</a></li>
<li><a href="#">blah blah</a></li>
<li><a href="#">foooooooo foooooooo</a></li>
<li><a href="#">foofoo foofoo</a></li>
<li><a href="#" id="penultimate">foo foo foo </a></li>
<li><a href="#">longwordfoo</a></li>
</ul>
</body>
</html>

SilverLining




msg:4579017
 1:47 pm on May 29, 2013 (gmt 0)

What I would like to achieve is something like this:
|     | ---------- |       |           |
| --- | ---------- | ----- | ---- ---- |
| | ---- | | |

This is where CSS comes second to Tables.

I have also been experimenting with this, but still no progress:

<script>
var width = $('ul li').each(function(){
var innerWidth = $(this).innerWidth();
$(this).css('width',innerWidth + 'px');
});
</script>

SilverLining




msg:4581561
 6:15 am on Jun 6, 2013 (gmt 0)

Hi again,

Just to clarify, I cannot use a table for the required purpose, as it's a navigation with second level dropdown menus.

Any solutions?

Thanks

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved