I was looking at the source of this page and i do not understand how they make the menu bar and the black bar apear that it goes the whole length of the page.. I even saved the page and the part of the menu is verry small anyways can anyone tell me how this is done here is the link to the <<<<PAGE>>>>> (<!-- m --><a class="postlink" href="http://www.mediatemple.net/">http://www.mediatemple.net/</a><!-- m -->)<!--content-->You use table with 100% width then use cell bg image.<!--content-->From the HTML 4.01 Specification:<br />
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.<br />
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/tables.html#h-11.1">http://www.w3.org/TR/html4/struct/tables.html#h-11.1</a><!-- m --><!--content--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm14/strict.dtd"><br />
<html><br />
<head><br />
<title>New Document</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
</head><br />
<style type="text/css"><br />
<!--<br />
body { margin:0; }<br />
#menu { background-image:url(menuBG.gif); background-repeat: repeat-x; width:100%; text-align:right; margin:0; }<br />
#menu img { border:0; }<br />
#submenu { background:#000; width:100%; margin-top:-5px; }<br />
--><br />
</style><br />
<body><br />
<div id="menu"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"left.gif" width="108px" height="24px" alt=""><a href="index.html"><img src="services.gif" width="94px" height="24px" alt="Services"></a><a href="index.html"><img src="started.gif" width="94px" height="24px" alt="Get Started"></a><a href="index.html"><img src="support.gif" width="94px" height="24px" alt="Support"></a><a href="index.html"><img src="opportunities.gif" width="94px" height="24px" alt="Opportunities"></a><a href="index.html"><img src="company.gif" width="94px" height="24px" alt="Company"></a><img src="right.gif" width="108px" height="24px" alt=""><br />
</div><br />
<div id="submenu"><br />
non-breaking space code<br />
</div><br />
</body><br />
</html><br />
<br />
Do the sub menu much like I did the menu code. You can take out the backround of black and put in the background image if that's what you are looking for. One of those quirk kind of things and maybe it's just because my text editor does it, but if I listed each link on a seperate line then there was a space in between the images. If I had the code for the links one after another, then it looked correct. The addtional space happened in IE and Mozilla. I've seen this before and I don't know why it happens beyond reading a the return key code differently than having no additional character at all. I also trimmed one image down because it really didn't need to be that big. See attachment.<!--content-->
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.<br />
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/tables.html#h-11.1">http://www.w3.org/TR/html4/struct/tables.html#h-11.1</a><!-- m --><!--content--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm14/strict.dtd"><br />
<html><br />
<head><br />
<title>New Document</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
</head><br />
<style type="text/css"><br />
<!--<br />
body { margin:0; }<br />
#menu { background-image:url(menuBG.gif); background-repeat: repeat-x; width:100%; text-align:right; margin:0; }<br />
#menu img { border:0; }<br />
#submenu { background:#000; width:100%; margin-top:-5px; }<br />
--><br />
</style><br />
<body><br />
<div id="menu"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"left.gif" width="108px" height="24px" alt=""><a href="index.html"><img src="services.gif" width="94px" height="24px" alt="Services"></a><a href="index.html"><img src="started.gif" width="94px" height="24px" alt="Get Started"></a><a href="index.html"><img src="support.gif" width="94px" height="24px" alt="Support"></a><a href="index.html"><img src="opportunities.gif" width="94px" height="24px" alt="Opportunities"></a><a href="index.html"><img src="company.gif" width="94px" height="24px" alt="Company"></a><img src="right.gif" width="108px" height="24px" alt=""><br />
</div><br />
<div id="submenu"><br />
non-breaking space code<br />
</div><br />
</body><br />
</html><br />
<br />
Do the sub menu much like I did the menu code. You can take out the backround of black and put in the background image if that's what you are looking for. One of those quirk kind of things and maybe it's just because my text editor does it, but if I listed each link on a seperate line then there was a space in between the images. If I had the code for the links one after another, then it looked correct. The addtional space happened in IE and Mozilla. I've seen this before and I don't know why it happens beyond reading a the return key code differently than having no additional character at all. I also trimmed one image down because it really didn't need to be that big. See attachment.<!--content-->