SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Help!! Navigation CSS Hell!!!

    Our web site is http://www.fhhsbandhome.com/portal/pages/home.php. As you can see our navigation is giving us hell. It doesn't scale with resolutions at all!! On very small resolutions it collapses down and then on larger ones it just expands to the left. You can use a web site such as http://www.anybrowser.com/ScreenSizeTest.html to confirm this. Well this is a serious problem. I've spent hours messing around with the navigation and honestly at this point all I'm asking for is for someone to take the time, sit down, and make the appropriate code changes to make our navigation scale correctly and work correctly in all browsers/resolutions. Thanks!!

    P.S If someone could really do this for us, it would be great. We are a high school band who uses our web site for a LOT of issues, and with a broken navigation, that makes our web site useless . Any good help ASAP would be appreciated highly.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The absolute positioning of the #menu div is causing the problem - let it sit naturally within the table cell (I won't go on about table layouts here ......). Aligning the div to the top of the cell, and applying appropriate margins seems to work :
    Code:
    .navbg {
    	background-color: #333333;
    	background-image: url(images/navbg.jpg);
    	background-repeat: repeat-x;
    	height: 63px;
    	vertical-align: top;
    }
    
    #menu {
    	margin:5px 0 0 30px;
    	position: relative;
    }
    The relative positioning is to provide a reference for the absolutely positioned <ul>s.

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #menu {
    margin:5px 0 0 30px;
    position: relative;

    }[/CODE]
    The relative positioning is to provide a reference for the absolutely positioned <ul>s.[/QUOTE]

    Were you trying to create a relatively positioned object inside another object? If so try using padding-left:Xpx; OR use margin-left:Xpx; margin-right:Xpx (etc.). Also, if this were divisions you could try using the float:left; attribute, but I'm not sure this will work for tables (have you considered nesting it inside an object such as a div which won't automatically position a child object in the center)?

    Also, the float:left; should remove the need for absolute positioning (it will indicate the the position of the child element is left of the previous element).

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alright things are almost fixed. I've changed the font to Arial on the Navigation and when I did that and changed the size of the font, it through off the alignment of some stuff. Pleasse check http://www.fhhsbandhome.com/portal/pages/home.php to see what I mean.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just adjust the top margin on the menu div to move things down a fraction :
    Code:
    #menu {
    	margin:10px 0 0 30px;
    	position: relative;
    }


Bookmarks

Posting Permissions

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