?
Solved

CSS layout positioning

Posted on 2005-03-14
12
Medium Priority
?
377 Views
Last Modified: 2006-11-17
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
Comment
Question by:lwakelin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
  • 3
12 Comments
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 13533574
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
 

Author Comment

by:lwakelin
ID: 13533620
No Ive just tried that eternal_student

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

anyone else?
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 13533631
So do you want the menu to display horizontally or vertically because your current code displays it vertically ?

Explain exactly what you want.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:lwakelin
ID: 13533689
In IE 6 and Firefox 1.0 on my machine the menus are displayed horizontally. Just not in the correct position.
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 13533699
OK well your style sheet isnt loading then because that link ^ is displaying a normal list.

0
 

Author Comment

by:lwakelin
ID: 13533754
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13534268
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
 

Author Comment

by:lwakelin
ID: 13535396
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
 

Author Comment

by:lwakelin
ID: 13535426
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
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 2000 total points
ID: 13535694
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
 

Author Comment

by:lwakelin
ID: 13536047
cheers for that, it seems to be sorted now,

beN
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13536223
<:°)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month8 days, 10 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question