Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
OK, here's the thing. I have this horizontal nav I need to create. I'm trying to do it semanticaly with as little extra markup as possible. Here's what I have so far:
<htmL>
<head>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
font-size: 62.5%;
color: #000000;
font-family: verdana, arial, helvetica, sans-serif; }
#topNav {
margin: 0;
padding: 0 0 0 3%;
background: #B8D1EB;
clear: both;
list-style: none; }
#topNav li {
border-left: 1px solid #FFFFFF;
text-align: center;
width: 16%;
padding: 5px 0px 5px 0px;
float: left; }
#topNav li.last {
border-right: 1px solid #FFFFFF; }
#topNav a {
font-size: 1.2em;
font-weight: bold;
height: 100%;
color: #006699;
text-decoration: none;
padding: 0px; }
-->
</style>
</head>
<body>
<ul id="topNav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3 Link 3</a></li>
<li><a href="#">Link 4 Link 4 Link 4</a></li>
<li><a href="#">Link 5 Link 5 Link 5</a></li>
<li class="last"><a href="#">Link 6 Link 6 Link 6</a></li>
<br style="clear: both;">
</ul>
</body>
</html>
Now here's the tricky part:
If you look in your browser, you'll see that each "tab" is bordered by white lines. When the text in the tabs begins to wrap due to screen resolution the white borders stretch for the tabs in which the wrapping takes place.
I need the stretching to happen for all of the tabs not tjust the ones with wrapping text, and I also need the text to stay vertically centered. Anyone got any ideas? -
- CommentAuthorNick Presta
- CommentTimeFeb 21st 2006 edited
I'm too tired to copy and paste and tweak but this will probably help:
http://www.cssplay.co.uk/menus/centered.html
-
Thanks Nick,
I'll let you know how it goes. -
Nick,
Unfortunately, the info on that page didn't help. Perhaps I should better explain the problem. I have a page with a centered horizontal nav. Each tab in the nav should be the same size. This works fine when the text within the tabs all stays on one line.
The problem arises when the screen resolution changes so that some of the text within the tabs needs to wrap. The tabs where the text wraps expand in height, as they should, but the tabs where the text does not wrap do not change in height.
I need to find a way so that all of the tabs are the same height regardles of whether the text wraps in some of the tabs or not. -
this is an interesting issue. I've had simmilar questions before but unfortunately i didn't find a flexible CSS way to solve them. It would be easy to do this in a table based enviornment, but I'm sure you're not going on that track.
A possible (grandma' ) sollution, if you know the exact number of buttons that go into your topnav would be to designate an image as a background for your ul that would mimic borders (precisely tailored to your buttons).
However using that method you can kiss flexibilty and fluid design goodbye as it does not scale horizontaly and it would look terrible in case of an incomplete (per line) multi row menu.
I'm tracking this discussion. Maybe someone can figure this one out. -
I've posed the same question differently in another post, Does anyone know how to change this table layout to a css layout to see if showing the effect I'm looking for first would better help people understand the problem I'm trying to solve.
So far no luck. -
- CommentAuthorNick Presta
- CommentTimeFeb 24th 2006
As I said, javascript would be the only way to detect that.
But try my solution and see if it works.
1 to 7 of 7