Forum Moderators: open
Regards
- Have you assigned a width to your td? <td width="4">
- Did you put a in each empty cell? What was the result?
- Does your code validate?
- What browsers have you checked it in?
#el{BACKGROUND:url(img/green_left.gif) no-repeat right;WIDTH:4px;}
#em{
TEXT-ALIGN: center;
COLOR: white;
FONT-FAMILY: Tahoma, Verdana;
FONT-SIZE: xx-small;
FONT-WEIGHT: bold;
PADDING: 0px 5px;
BACKGROUND: url(img/green_mid.gif) repeat-x;
WHITE-SPACE: nowrap;
}
#er{BACKGROUND:url(img/green_right.gif) no-repeat left;WIDTH:4px;}
<td height=20 width=10> </td>
<td id=el></td><td id=em>Home</td><td id=er></td>
<td id=el></td><td id=em><a href=promo.htm>Promotions</a></td><td id=er></td>
<td> </td>
Brief explanation: The first line is just an initial spacer for the menu. The next (Home) is the current tab, so it doesn't need a link! The next (Promotions) is an example of a tab (menu) link, and the last line 'should' fill the remainder of the parent.
To give you an idea of what the menu looks like:
Sorry, my ASCII is stuffed in the translation!
_____ ______ ______ ______
/ \/______\/______\/______\_______
¦ ¦
¦ ¦
The above code is basically what I'm using now. The problem is the last <td>. I want the last <td> to expand to the rest/remainder of the parent's width exactly! As shown in the ASCII picture. It's the part without a tab above it! When I change the last line to <td width=100%> </td> The menu squashes like this.
_____ ______ ______ ______
¦ ¦______¦______¦______¦__________
¦ ¦
¦ ¦
The cells between the tabs only have a background image! The issue with putting 's between the cells so they don't squash, is that the 's are bigger than the 4 pixels. Is there another way to force a cell to remain 4 pixels, without text on it, when you set the last cell to expand to the remainder of the parent width?
Really sorry, I'm an experienced coder (mainly C++) but this is driving me nuts! Quite frankly, I don't care much for compatiability if there's a solution! I test everything on IE and Mozilla Firefox. I've seen this done before, but without cells, just hundrends of <div>'s! My code is small, and easy to extend/change and I hand write every line.
Regards
Trevor
[edited by: SubEvil at 6:32 am (utc) on Nov. 30, 2004]
Furthermore, if you want to extend the last column, then you should give a width of 100% to the table and assign a width to all the cell (using style sheet for example) except the last one.
Try this, hope this help to go further.
table.menu {width:100%;}td.em{TEXT-ALIGN: center;
COLOR: white;
FONT-FAMILY: Tahoma, Verdana;
FONT-SIZE: xx-small;
FONT-WEIGHT: bold;
PADDING: 0px 5px;
BACKGROUND: url(img/green_mid.gif) repeat-x;
WHITE-SPACE: nowrap;}
td.er{width:4px; BACKGROUND:url(img/green_right.gif) no-repeat left; }
td.el{width:4px;}
</style>
</head>
<body>
<table class='menu' border=1 cellpadding=0><tr>
<td height=20 width=10></td>
<td class=el></td><td class=em width=10>Home</td><td class=er></td>
<td class=el></td><td class=em width=10><a href=promo.htm>Promotions</a></td><td class=er></td>
<td> w</td></tr></table>
</body>
</html>
You may also need to look out for Quirks Mode vs. Standards Mode [webmasterworld.com] issues when you use foreground images on a layout this tight.
Thanx, I see what you're thinking, but I already set the table to width=100%. I should have copied the table code as well! BTW, why is using id's not 'a great idea?' For the purposes of this menu, they work just the same? Or am I wrong? Here goes:
<html>
<head>
<style>
BODY
{
TEXT-ALIGN: center;
COLOR: #467E75;
FONT-FAMILY: Tahoma, Verdana;
BACKGROUND-COLOR: white;
SCROLLBAR-BASE-COLOR: #467E75;
SCROLLBAR-ARROW-COLOR: #ffffff;
FONT-SIZE: x-small;
}
#el{BACKGROUND:url(img/green_left.gif) no-repeat right;WIDTH:5px;}
#em{
TEXT-ALIGN: center;
COLOR: white;
FONT-FAMILY: Tahoma, Verdana;
FONT-SIZE: xx-small;
FONT-WEIGHT: bold;
PADDING: 0px 5px;
BACKGROUND: url(img/green_mid.gif) repeat-x;
WHITE-SPACE: nowrap;
position:abolute;
}
#er{BACKGROUND:url(img/green_right.gif) no-repeat left;WIDTH:5px;}
#dl{BACKGROUND:url(img/gray_left.gif) no-repeat top right fixed;WIDTH=4px;}
#dm{BACKGROUND:url(img/gray_mid.gif) repeat-x top;WHITE-SPACE: nowrap;}
#dm A{
TEXT-ALIGN: center;
COLOR: lightgrey;
FONT-FAMILY: Tahoma, Verdana;
FONT-SIZE: xx-small;
FONT-WEIGHT: bold;
PADDING: 0px 5px;
TEXT-DECORATION: none;
WHITE-SPACE: nowrap;
}
#dm A:hover{COLOR:white;TEXT-DECORATION:underline;}
#dr{BACKGROUND:url(img/gray_right.gif) no-repeat top left;WIDTH:4px;}
</style>
</head>
<body>
<center>
<table width="750" cellspacing=0 cellpadding=0 border=0 bgcolor=black>
<tr><td>
<table cellspacing=0 cellpadding=0 border=0 width=100%>
<tr>
<td height=20 width=10> </td>
<td id=el></td><td id=em>Home</td><td id=er></td>
<td id=dl></td><td id=dm><a href=profile.htm>Profile</a></td><td id=dr></td>
<td id=dl></td><td id=dm><a href=products.htm>Products</a></td><td id=dr></td>
<td id=dl></td><td id=dm><a href=promo.htm>Promotions</a></td><td id=dr></td>
<td> </td>
</tr>
<tr>
<td bgcolor=#59A79A height=1 colspan=1></td>
<td><table cellspacing=0 cellpadding=0 height=1><tr><td bgcolor=#59A79A width=2></td><td bgcolor=#295350 width=3></td></tr></table></td>
<td bgcolor=#295350></td>
<td><table cellspacing=0 cellpadding=0 height=1><tr><td bgcolor=#295350 width=3></td><td bgcolor=#59A79A width=2></td></tr></table></td>
<td bgcolor=#59A79A height=1 colspan=22></td>
</tr>
</table>
</td></tr>
</table>
</center>
</body>
</html>
Only for the current tab.
el = enabled left (Currently enabled)
em = enabled middle
er = enabled right
For all the other (disabled but) clickable tabs
dl = disabled left (Currently disabled)
dm = disabled middle
dr = disabled right
<SNIP>
Look at the example, then read the text to understand.
Test1 is almost what I want, but the last TD must expand to the width of parent, so the little light green line at the bottom runs to the end.
Test2 has the parent table's width set to 100%, not the ideal desired effect, because it expands each tab.
Test3 has the last cell set to 100%, it squashes and effectively removes the nice 4/5 pixel spacers.
Test4 gives an idea of what I want, but the last cell has a width of 400, and the table has a width of 100%, but it still has issues!
Regards
[edited by: BlobFisk at 9:34 am (utc) on Nov. 30, 2004]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]
why is using id's not 'a great idea?'
An id is supposed to be unique on any given page - that is, it is supposed to be declared just once in an HTML docuemnt. A class has no such restriction.
Regarding the div and id, it is usually used for UNIQUE element such as left column, right column, header, footer, etc... or layer/DHTML element. Try to use class and span.
Laslty, please read the Term of Services as URL are not allowed in this forum.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<style>
BODY
{
TEXT-ALIGN: center;
COLOR: #467E75;
FONT-FAMILY: Tahoma, Verdana;
BACKGROUND-COLOR: white;
SCROLLBAR-BASE-COLOR: #467E75;
SCROLLBAR-ARROW-COLOR: #ffffff;
FONT-SIZE: x-small;
}
table {width:750px;
padding:0 none;
border:0 none;
/*border-collapse: collapse;*/ }
td.el{background:url(img/green_left.gif) no-repeat right;}
td.em{
TEXT-ALIGN: center;
COLOR: white;
FONT-FAMILY: Tahoma, Verdana;
FONT-SIZE: xx-small;
FONT-WEIGHT: bold;
PADDING: 0px 5px;
BACKGROUND: url(img/green_mid.gif) repeat-x;
WHITE-SPACE: nowrap;
position:abolute;
}
td.er{BACKGROUND:url(img/green_right.gif) no-repeat left; }
td.dl{width:4px; BACKGROUND:url(img/gray_left.gif) no-repeat top right fixed;}
td.dm{BACKGROUND:url(img/gray_mid.gif) repeat-x top; WHITE-SPACE: nowrap;}
td.dm A{
TEXT-ALIGN: center;
COLOR: lightgrey;
FONT-FAMILY: Tahoma, Verdana;
FONT-SIZE: xx-small;
FONT-WEIGHT: bold;
PADDING: 0px 5px;
TEXT-DECORATION: none;
WHITE-SPACE: nowrap;
}
td.dm A:hover{COLOR:white; TEXT-DECORATION:underline;}
td.dr{width:4px; BACKGROUND:url(img/gray_right.gif) no-repeat top left;}
td.threepx {width:3px;}
td.twopx {width:2px;}
td.bgA {background-color:#59A79A;}
td.bgB {background-color:#295350;}
</style>
</head>
<body>
<center>
<table cellpadding=0 border=0>
<tr>
<td height=20 width=10> </td>
<td class=el colspan=2></td>
<td class=em>Home</td>
<td class=er colspan=2></td>
<td class=dl></td>
<td class=dm><a href=profile.htm>Profile</a></td>
<td class=dr></td>
<td class=dl></td>
<td class=dm><a href=products.htm>Products</a></td>
<td class=dr></td>
<td class=dl></td>
<td class=dm><a href=promo.htm>Promotions</a></td>
<td class=dr></td>
<td width=100%></td>
</tr>
<tr>
<td class='bgA' height=30></td>
<td class='twopx bgA'></td>
<td class='threepx bgB'></td>
<td class='bgB'></td>
<td class='threepx bgB'></td>
<td class='twopx bgA'></td>
</td><td class='bgA' colspan=10></td>
</tr></table>
</center>
</body>
</html>
About my coding philosophy. Ease of use (future updates) and code size play roughly equal roles. Sticking to standards comes next. That's why I used the duplicate id's, they're easier on my eye, shorter and they work in IE and firefox. The idea of using 1 large table is fine, but I will have a lot of content in the middle, the problem with that is working out all the colspans etc. But I suppose I could colspan everthing into 1 cell for the content area.
BTW, thanx for the syntax on using multiple classes, I looked for that everywhere!
Your example suffers from the same problem as my test3.htm example. The last cell in the menu is set to width=100% which squashes everything else. So the nice 4 pixel side pictures disapear because they have 'no visible content' other than the background image! My issue is with that last cell! Thank you very much for the effort you are putting into this, I really appreciate it! I really do think you will help me solve this! Thanks again!
I have finally noticed the problem, sorry can't help much more. I have tried but failed. I am sure there must be something very very simple to do, but I am in the vague (not a css pro).
May be someone else could help you resolve this matter.
Tomda
