Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
CSS & HTML: Does anyone know how to change this table layout to a css layout
Bottom of Page1 to 10 of 10
-
I need the exact same behaviors as the following table set up. I'd like to know how it could be done in a css based layout. Anyone got an idea?
<html>
<head>
<style type="text/css">
<!--
body {
font-family: verdana, sans serif;
font-size: 62.5%; }
table{
font-size: 1.2em; }
td {
width: 16%;
background:#003366;
border-left: 1px solid #FFFFFF;
text-align: center;
}
a {
display: block;
font-weight: bold;
color: #FFFFFF;
padding: 4px 4px 4px 4px; }
-->
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#">Tab 1</a></td>
<td><a href="#">Tab 2</a></td>
<td><a href="#">Tab 3</a></td>
<td><a href="#">Tab 4 Long</a></td>
<td><a href="#">Tab 5 Longer</a></td>
<td><a href="#">Tab 6 Longest</a></td>
</tr>
</table>
</body>
</html>
moved to the right category by JohnRiv -
Check out the code in the CSS Challenge - Styling unordered list into horizontal nav post. It's pretty close to what you're trying to do.
-
That post is actually my discussion as well. I entered this new version to better illustrate what I'm trying to do.
-
is this a joke?
-
- CommentAuthorclimaxdesigns
- CommentTimeFeb 23rd 2006
very helpful methberg
<ul id="nav">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4 Long</a></li>
<li><a href="#">Tab 5 Longer</a></li>
<li><a href="#">Tab 6 Longest</a></li>
</ul> -
Ok, heres the thing. I know how to style an Unordered List into a horizontal nav. The problem I'm having is with the nav spanning 100% of the screen in a liquid layout.
Here's the scenario. All the tabs are the same width, the text within each tab is centered horizontally and verticaly. Also,the text inside each tab is of different lengths, ranging from 4 characters to 23 characters. Because of this, when the browser width is changed (i.e. made smaller) the longer strings of text need to wrap within their tabs to fit.
When using a styled unordered list to achieve a horizontal nav, only the tabs with the wrapped text are changed in height, not all of the tabs. That's the problem I'm trying to solve. I need all of the tabs to be the same height and width all the time, not just when the number of lines of text within each tab is the same. -
- CommentAuthorNick Presta
- CommentTimeFeb 24th 2006
You actually can't detect that via CSS. You will need javascript.
You could try setting the height of the UL, and then setting the height of the list-items to 100% to see if they fill the height of the UL when it stretches to accomodate the text wrapping. -
Thanks Nick,
I thought I had tried something like that, but turns out I hadn't set the height of the UL, just the LI's to 100%.
Here's wat I found when I set the UL height. The method works, so long as the wrapping text height does not extend past the height of the UL, otherwise it breaks.
So unfortunately, for this project I'm still stuck with the only solution being a 1 row table.
Thanks though. I appreciate your help. -
- CommentAuthorNick Presta
- CommentTimeFeb 24th 2006
You can set the width, height and font-size of that menu in percentages. That should fix it, although getting it working initially will probably take slightly longer. -
<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;
display:table-row;
width:100%;}
#topNav li {
border-left: 1px solid #FFFFFF;
text-align: center;
width: 16%;
padding: 5px 0px 5px 0px;
display:table-cell;
vertical-align:middle;}
#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>
<div id="table">
<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>
</div>
</body>
</html>
unfortunately, the above solution does not work in IE, i hear. old fashioned table is the way to go here. i tried to css-ize amazon.com's layout once, and i ran into the same problem with their submenu =/
1 to 10 of 10