...

View Full Version : Making CSS Menu Fit



number41baby
07-27-2011, 12:36 PM
Hello,

Fixed the PHP issue (thanks) and now hoping we can fix the one remaining problem. Inside the 'zzz's.

zzzhttp://www.redtilldead.com/temp-cf/php/index.phpzzz

The menu does not stretch to 780 pixels like I would like it to (see black
table below it). It lines up on the left but not the right. I have played around with every number from the margins, paddings, width (set at 153? right now). Everytime I do, the last column goes to the next line.

Just want the right of the menu to be flush with the 780px. table.

Any thoughts.

Thanks,

DN

teedoff
07-27-2011, 03:12 PM
First, you dont need to put "zzz" around your link. Use the link button(the little icon that looks like a globe) to create a clickable link for us to use.

Second, WHY are you using tables for layouts (http://www.hotdesign.com/seybold/)?

And finally, your menu seems to be stretching the full width of the table...780px. At least for me in FF anyway. Can you screenshot what you're seeing and in what browser?

sunfighter
07-27-2011, 08:01 PM
Use firefox with firebug to look at your work. Your tables do not fill in like you think. If you definitely want tables add a second row to the top 'link' table and put your 360 td's in that. Easier to control.

BTW - things look totally different and not good in IE8

number41baby
07-27-2011, 10:42 PM
Hello,

First off, thanks for the replies.

I guess I am out of my depth here. I am using IE8 and it looks fine to me (the black box below is just a guide I use to see if it all lines up). In Firefox, I cannot even see the black table I am using as a guide. See image attached. I see the left side lining up but not the right.

Based on what I have and the fact that I do not know how to use CSS for much, do you have an recommendations?

Thanks,

DN

http://www.redtilldead.com/temp-cf/php/image_pp_01.jpg

sunfighter
07-29-2011, 08:14 PM
First off, I had IE8 set for something else and it kicked your site into the bad. I just reset IE8 and your site looks the same as FF. Now, to your problems.

You are using depreciated tags and attributes and they render differently in different browsers. Use this site to keep your coding up to par:
http://validator.w3.org/

Both tables use align="center" that's depreciated. I used inline styling to correct it. Also depreciated is <td width="390" bgcolor="000000"><br /> and the bgcolor is why it does not show up in FF. I changed those.

The extra width in the second table. This is because of your css file:

ul li { float:left; text-align:center; padding-top: 5px; margin-right:3px; position:relative; background:#003e65; }What were interested in is this -> margin-right:3px; Thats the space you see in the menu compared to the bottom table. Couple of ways to get rid of this. I shrunk the 360px <td>'s and in order to maintain centering, fudged the 10px <td>'s. If your going to use those for displaying anything we have to restart our engines on this. But the code I used to put things under each other with the apparent width is this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="dropdown.css" rel="stylesheet" type="text/css" />

</head>

<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table width="800" border="0" cellpadding="0" cellspacing="0" style="text-align: center;margin:0 auto;">
<tr>
<td style="width: 10px;">&nbsp;</td>
<td colspan="2">
<ul>

<li><a href="#">The Show</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Segments</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Press</a></li>
</ul>
</li>

<li><a href="#">The Panel</a>
<ul>
<li><a href="#">Host</a></li>
<li><a href="#">Premier League</a></li>
<li><a href="#">Championship</a></li>
<li><a href="#">European</a></li>
</ul>
</li>

<li><a href="#">Subscribe</a>
<ul>
<li><a href="#">I-Tunes</a></li>
<li><a href="#">RSS Feed</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>

<li><a href="#">Archives</a>
<ul>
<li><a href="#">Current Season</a></li>
<li><a href="#">Summer 2011</a></li>
<li><a href="#">Club Review Shows</a></li>
<li><a href="#">2010-2011 Season</a></li>
</ul>
</li>

<li><a href="#">Contact</a>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Supporter Clubs</a></li>
<li><a href="#">Footy Links</a></li>
</ul>
</li>

</ul>
<!--<div style="background-color:red;w3px;height:25px;float:right;">&nbsp;</div>-->
</td>
<td style="width: 10px;">&nbsp;</td>
</tr>
</table>


<table width="800px" border="0" cellpadding="0" cellspacing="0" style="text-align: center;margin:0 auto;">
<tr>
<td style="width: 10px;">&nbsp;</td>
<td style="background-color: #000000; width: 389px;"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</td>
<td style="background-color: #000000; width: 388px;">

</td>
<td style="width: 13px;">&nbsp;</td>
</tr>
</table>
</body>
</html>I don't think I changed the css file. But check how things look and LMK.

number41baby
08-01-2011, 04:25 PM
Hello,

RE: HELP
First off, thanks.

RE: CODE
Your code works perfectly and looks right in all browsers.

http://www.redtilldead.com/temp-cf/php/test.htm

QUESTIONS

1 - I tried putting the code in to a PHP file. That way I only have to change the menu on one file instead of on every page. It did not work out so well :)

http://www.redtilldead.com/temp-cf/php/index.php

2 - As I am learning, I would love to know what you did with the black table below. It has a couple columns which confuse me. As I am not an expert, I have always made my artwork using table within a table. For example, with this artwork, whatever the length of the menu is (ie: 780px), I create a 780px table below it and paste in the artwork/text measured to the 780px. With all these extra columns to make it line-up with the menu, I am unsure which areas I should work in.

Thanks again...closer than I have ever been to making this work.

DN

PS: I will get to the validation stuff you recommended as well. So much to learn ;)

number41baby
08-01-2011, 07:18 PM
Hello,

May I ask you another question?

As I was not sure I would get a response to my menu issues here, I went ahead and tried another method in case I could get it to work. It works in both browsers but positioning is an issue. Please ignore the look of the image (archives)...just used a random image I had to test.

http://www.redtilldead.com/temp_image_no/index.htm

In IE, it is positioned perfectly vertically (right under the blue artwork) but, in FF, it is slightly lower.

Is there a way to position that table exactly where I want. Say using the pixel or something? Example, the top of the image would be at the 300 pixel mark?

Any thoughts?

Thanks,

Derek



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum