asked on

CSS layout positioning

Hello,

In trying to escape using nasty tables for layouts we're trying to get into this CSS positioning malarky sorted for layout. We're having a few problems; in the page im working on at:

http://www.oxoid.com/2005/beNhome.asp

I have a logo and two lists which work as menu and submenu. I want the lists one on top of the other and next to the logo but things are not working to plan and I'm getting the positioning or something wrong. Can you help? We need to get a hold of this quickly.

CSS code for the areas is:
body {
      background-image:url(http://www.oxoid.com/2005/images/pg_bg.jpg);
      background-repeat:repeat-x;
      background-color:#CCCCCC;
      margin:0;
      padding:10px;
      text-align:center;
      font:1em Arial, Helvetica, sans-serif;
      color:#000;
      font-weight:normal;
      line-height:100%;}


#top_nav_wrapper {
      text-align:left;
      width:767px;
      margin:0px auto;
      background-color:#F6CA26;
}
.logoDiv {
      position:relative;
      top:5px;
      left:17px;
      width:150px;
      /*width:750px;*/
}
#menu_wrapper {
/*wrapps the main and sub menus*/
      position:relative;
      top:10px;
      left:167px;
}

#top_nav_topmenu ul {
      font: 0.75em Arial, Helvetica, sans-serif;
      font-weight:bold;

}

#top_nav_topmenu li {
      list-style:none;
      float:left;
      }

#top_nav_topmenu li a {
      display:block;
      color:#FFF;
      padding:2px 5px;
      margin:0 5px 0 0;
      border-bottom:1px solid #FFF;
      border-top:1px solid #FFF;
      border-right:1px solid #FFF;
      border-left:5px solid #FFF;
      text-decoration:none;
      background-color:#F6CA26;
      }

#top_nav_topmenu li a:hover {
      background-color:#FFF;
      color:#F6CA26;
}

#top_nav_topmenu {
      position:relative;
      top:5px;
      left:167px;
      margin:5px 0px 0px 167px;
      width:596px;
      /*height:37px;*/
}

#top_nav_submenu {
      width:596px;
      text-align:left;
      position:relative;
      /*top:5px;
      left:171px;*/
      /*margin:5px 0px 0px 0px;*/
      /*height:37px;*/
}

#top_nav_submenu ul {
      font: 0.7em Arial, Helvetica, sans-serif;
      font-weight:normal;
}

#top_nav_submenu li {
      list-style:none;
      margin:0;
      float:left;
      }

#top_nav_submenu li a {
      display:block;
      color:#FFF;
      padding:0 5px 5px 5px;
      margin:0;
      line-height:100%;
      text-decoration:none;
      }

#top_nav_submenu li a:hover {
      color:#FFCC00;

}

Thanks very much,

beN

Eternal_Student

You need to add display:inline to the UL & LI styles:

#top_nav_topmenu ul {
font: 0.75em Arial, Helvetica, sans-serif;
font-weight:bold;
display: inline;

}

#top_nav_topmenu li {
list-style:none;
float:left;
display: inline;
}

Try that.

lwakelin

ASKER

No Ive just tried that eternal_student

Most of the styling for the list elements ensures it displayes horizontally. Thanks though.

anyone else?

Eternal_Student

So do you want the menu to display horizontally or vertically because your current code displays it vertically ?

Explain exactly what you want.

lwakelin

ASKER

In IE 6 and Firefox 1.0 on my machine the menus are displayed horizontally. Just not in the correct position.

Eternal_Student

OK well your style sheet isnt loading then because that link ^ is displaying a normal list.

lwakelin

ASKER

oops, sorry about that one, so it does. It seems I neglected to change the address from my development server to the live one.

lol cheers for pointing that out. It should now look a little better and clearer what i want to achieve,

thanks again,

beN

GrandSchtroumpf

You need to float your elements and stop using relative positioning so much.
Add the following rules at the end of your stylesheet and you'll get an idea.
You'll need to adjust the margins and paddings. I also added a blue background because white on white is not easy to read.

.logoDiv {
      float: left;
      top:0;
      left:0;
}
#menu_wrapper {
      float: left;
      top:0;
      left:0;
      background: blue;
}

#top_nav_topmenu {
      position:relative;
      top:0;
      left:0;
      margin:0;
      width:596px;
}

#top_nav_submenu {

      clear:left;
      width:596px;
      text-align:left;
      position:relative;
      top:0;
      left:0;
}

lwakelin

ASKER

thanks GrandSchtroumpf that has helped alot but theres more stuff to sort:

if you look at the page at http://www.oxoid.com/2005/beNhome.asp

IE 6 displays the page very well however the two menu bars are to far from the graphic (there is a padding to the graphic of 18px on the right hand side. the space between it and the menus is far more than this for some reason)

firefox 1.0 has lots of problems with the page.

The top of the two menus seems to be too far down padding wise, there should only be 5 pixels. Again the menus are too far from the graphic.

In firefox also there seems to be some big white spaces when I want yellow to be the background colour with the exception of a thin horizontal strip as appears in IE.

How can I sort this?

cheers,

beN

lwakelin

ASKER

oh and the style sheet now looks like this:

body {
      background-image:url(http://www.oxoid.com/2005/images/pg_bg.jpg);
      background-repeat:repeat-x;
      background-color:#CCCCCC;
      margin:0;
      padding:10px;
      text-align:center;
      font:1em Arial, Helvetica, sans-serif;
      color:#000;
      font-weight:normal;
      line-height:100%;}


#top_nav_wrapper {
      text-align:left;
      width:767px;
      margin:0px auto;
      padding:0;
      background-color:#F6CA26;
}
.logoDiv {
      float:left;
      padding:5px 18px 5px 17px;
      background-color:#F6CA26;
}
#menu_wrapper {
/*wrapps the main and sub menus*/
      float:left;
      width:582px;
      background-color:#F6CA26;

       }

#top_nav_topmenu ul {
      font: 0.75em Arial, Helvetica, sans-serif;
      font-weight:bold;
       }

#top_nav_topmenu li {
      list-style:none;
      float:left;
       }

#top_nav_topmenu li a {
      display:block;
      color:#FFF;
      padding:2px 5px;
      margin:0 5px 0 0;
      border-bottom:1px solid #FFF;
      border-top:1px solid #FFF;
      border-right:1px solid #FFF;
      border-left:5px solid #FFF;
      text-decoration:none;
      background-color:#F6CA26;
      }

#top_nav_topmenu li a:hover {
      background-color:#FFF;
      color:#F6CA26;
}

#top_nav_topmenu {
      background-color:#F6CA26;
      position:relative;
      padding:5px 0px 0px 0px;
      margin:0;
      width:582px;
       /*height:37px;*/
}

#top_nav_submenu {
      clear:left;
      width:582px;
      text-align:left;
      position:relative;
      padding:14px 0px 0px 0px;
      background-color:#F6CA26;

      /*margin:5px 0px 0px 0px;*/
      /*height:37px;*/
}

#top_nav_submenu ul {
      font: 0.7em Arial, Helvetica, sans-serif;
      font-weight:normal;
       }

#top_nav_submenu li {
      list-style:none;
      margin:0;
      float:left;
       }

#top_nav_submenu li a {
      display:block;
      color:#FFF;
      padding:0 5px 5px 5px;
      margin:0;
      line-height:100%;
      text-decoration:none;
      }

#top_nav_submenu li a:hover {
      color:#0084B7;

}

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lwakelin

ASKER

cheers for that, it seems to be sorted now,

beN

GrandSchtroumpf

<:°)