Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 378
  • Last Modified:

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
0
lwakelin
Asked:
lwakelin
  • 6
  • 3
  • 3
1 Solution
 
Eternal_StudentCommented:
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.
0
 
lwakelinAuthor Commented:
No Ive just tried that eternal_student

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

anyone else?
0
 
Eternal_StudentCommented:
So do you want the menu to display horizontally or vertically because your current code displays it vertically ?

Explain exactly what you want.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
lwakelinAuthor Commented:
In IE 6 and Firefox 1.0 on my machine the menus are displayed horizontally. Just not in the correct position.
0
 
Eternal_StudentCommented:
OK well your style sheet isnt loading then because that link ^ is displaying a normal list.

0
 
lwakelinAuthor Commented:
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
0
 
GrandSchtroumpfCommented:
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;
}
0
 
lwakelinAuthor Commented:
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
0
 
lwakelinAuthor Commented:
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;

}
0
 
GrandSchtroumpfCommented:
Those issues are just cosmetics.

> 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.
That's because you don't put your background color on the right element.

div#page {
  background-color: gold;
}
div#page div {
  background-color: white;
}


To fix the margin and padding on the menu, use this:

ul {
  margin: 0;
  padding: 0;
}


Note that you don't need to post your CSS each time.
0
 
lwakelinAuthor Commented:
cheers for that, it seems to be sorted now,

beN
0
 
GrandSchtroumpfCommented:
<:°)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now