Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Making CSS Menu Fit

    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

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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?

    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?
    Teed

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,683
    Thanks
    25
    Thanked 656 Times in 655 Posts
    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

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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


  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,683
    Thanks
    25
    Thanked 656 Times in 655 Posts
    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:
    Code:
    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:

    Code:
    <!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.

  • #6
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •