Forum Moderators: not2easy
Everything looks fine in CSS, but when I try to view it in firefox, all of the text in the <div> tags appear to be top aligned and the "Custom Products" and "Standard Products" sections are positioned slightly above the other elements.
Any help getting this sorted out (as well as comments/suggestions on coding and design) would be greatly appreciated!
HTML:
<table border="0" cellpadding="0" cellspacing="0" style="width:750px">
<tr>
<td>
<div id="box1" class="nav">
<p style="margin-top:8px"><a href="#" onmouseover="change('box1')" onmouseout="change_back('box1')">Home</a>
</p>
</div>
</td>
<td>
<div id="box2" class="nav">
<a href="#" onmouseover="change('box2');" onmouseout="change_back('box2');">Custom Products</a>
</div>
</td>
<td>
<div id="box3" class="nav">
<a href="#" onmouseover="change('box3');" onmouseout="change_back('box3');">Standard Products</a>
</div>
</td>
<td>
<div id="box4" class="nav">
<p style="margin-top:8px">
<a href="#" onmouseover="change('box4')" onmouseout="change_back('box4')">Support</a></p>
</div>
</td>
<td>
<div id="box5" class="nav">
<p style="margin-top:8px">
<a href="#" onmouseover="change('box5')" onmouseout="change_back('box5')">Company</a>
</p>
</div>
</td>
<td>
<div id="box6" class="nav">
<p style="margin-top:8px">
<a href="#" onmouseover="change('box6')" onmouseout="change_back('box6')">Contact Us</a>
</p>
</div>
</td>
</tr>
</table>
CSS:
div.nav
{
width:125px;
background-color:#ED1A2D;
color:#000000;
font-family:"Arial Black", Arial, sans-serif;
font-size:9pt;
height:35px;
margin:0 auto;
clear:both;
}
div.nav a
{
font-family:"Arial Black", Arial, sans-serif;
font-size:9pt;
color:#000000;
text-decoration:none;
}
div.nav a:link
{
font-family:"Arial Black", Arial, sans-serif;
font-size:9pt;
color:#000000;
text-decoration:none;
}
div.nav a:visited
{
font-family:"Arial Black", Arial, sans-serif;
font-size:9pt;
color:#000000;
text-decoration:none;
}
div.nav a:hover
{
font-family:"Arial Black", Arial, sans-serif;
font-size:9pt;
color:#FFFFFF;
text-decoration:none;
}
The CSS way of doing things is as follows:
Typically we'd use a <ul> with in that <li>'s that each contain an <a> for the menu in the html.
And then render it how we like things to be rendered all in css. Even really fancy menu's can be built that way (search e.g. for "sliding doors css". Take care, the tutorials are showing age and uses some "hacks". Nowadays hacks aren't the way to do things, conditional comments rule])
Mixing tables, javascript and css is harder than it needs to be.
I agree with swa666, this code does look unnecessarily complicated, however taking it one step at time and letting you keep working with the table element, until you figure out how to replace it with a <ul> later, if you like ;)
The reason that "Custom Products" and "Standard Products" are appearing "higher" than the other elements is that they are not nested inside a <p> element like the others are. <p> elements have default margins and will usually leave a gap above and below themselves, though you've actually specified the top margin using inline CSS this means the missing 2 don't have this top gap!
(PS: your "Quick fix" would be to add <p>'s to the other 2 items!)
e.g.
<td>
<div id="box4" class="nav">
<p style="margin-top:8px">
<a href="#" onmouseover="change('box4')" onmouseout="change_back('box4')">Support</a>
</p>
</div>
</td>
broader suggestions..
You should not need to use a <p> element at all as you have now created a situation where you have way too many wrapper elements for your link, <td>, <div> & <p>.
You can actually achieve this just by using <td> and <a> and CSS, and still have different background images for each hover if that's what the JS is doing - you don't need the JS!
here's some code that shows the basic premise without images, and the unique ID's for the table cells are not being used yet, but would be if you required different background images instead of just a standard color rollover. Also it moves the inline CSS into the external file to clean things up a bit and optimise HTML
There are ways, as swa666 says where this can be done using a list and one singular image, but if you're "New to design and CSS" this might be a nice first step to minimising code & letting the CSS do its job ;)
CSS:
table#topnav {width: 750px; border: 0;}
table#topnav td {padding: 0; /* cellpadding */ border: 0;}#topnav td {
text-align: center;
font-family:"Arial Black", Arial, sans-serif;
font-size: 10px;
/* the above 2 rules will apply to everything in table cell so no need to repeat for <a> */
}#topnav a { /* this covers all link states */
text-decoration:none;
display: block; /* makes link fill up table cell */
padding: 8px; /* control space around text */
color:#000;
background: #f00;
}/* put any hover CHANGES ONLY in here */
#topnav a:hover {
color:#fff;
background: #000;
}/* if using CSS instead of JS for hover effect */
#topnav #box1 a {/* this is where you would put first stage background-image */}
#topnav #box1 a:hover {/* this is where you would put second background-image */}HTML:
<table cellspacing="0" id="topnav">
<tr>
<td id="box1"><a href="#">Home</a></td>
<td id="box2"><a href="#">Custom Products</a></td>
<td id="box3"><a href="#">Standard Products</a></td>
<td id="box4"><a href="#">Support</a></td>
<td id="box5"><a href="#">Company</a></td>
<td id="box6"><a href="#">Contact Us</a></td>
</tr>
</table>
this does not cover the actual links width, but if you want them all the same that could be set on "#topnav td", if you want them different to accommodate different sized images, use the "boxn" ID's
-Suzy
[edited by: SuzyUK at 6:20 pm (utc) on Jan. 20, 2008]
A <div> is generic containing element, it's just another HTML element, and one that is generally used to contain a whole division of a page (sidebar, menu, content, footer etc..).
When using a <table> or a <ul>, to contain say a navigation area, both of these are already a containing element and have further inbuilt containing elements, i.e. the <td> or the <li> so you don't actually need a div at all - there's no need for everything in a CSS layout to be in a <div> although I'm aware that "div layouts" and "CSS layouts" are often synonymous :) The flexibility of CSS is that it can use elements that are already there, indeed it should, else "divitis" will occur
In this case you should perhaps think in terms of "positioning" the <a> link inside the table cell, although technically you do not actually need any positioning at all. You just need to use the normal document flow, some padding, and to make the <a> into a block element for display purposes.
sorry if that's already understood, but I just read the thread title and realised it was maybe not clear
Concerning the use of the <p> tag, is it generally not needed inside a <div> tag? Sometimes it seems as though I am not able to position text correctly within a <div> unless I use it and set margins around the <p>. I would be happy to lose the extra tag if it is not needed though.
Thanks again!
Thank you Suzy for the code. I am using it for my menu and it is working great, with one exception apparently. For some reason IE6 renders the "Standard Products" and "Custom Products" as being bigger than the others. The widths are all the same, but the height of those 2 boxes is larger than the others. Any conventions I can use to get it to appear correctly? I am using FF and IE7 on this machine so I didn't catch it originally..
Thanks
I agree with swa666, ...
Am I that evil ;-) (a 6 less will do fine).
Just kidding.
And actually honored.
