Having problems with some css positioning.. plz help

[doc fluty]

First, i am not a web designer. I am a small business owner who is trying to learn a little bit about web design because the last two "web design companies" decided to over promise and under deliver.

Anyway....

I am trying to do what any normal web guy would do and stick the logo on the left with some nav horizontally to the right... with another set of navigation underneath

I have enclosed a picture if that clears up what i am trying to do.

my idea was something like header>div id="logo" and then div id="nav" and finally Div id="subnav" all inside the header div

But i cant even figure out how to get the top nav to lay flat... i think it has to do with displaying them inline and then floating them to the left... but I dont know..

Ive watched many videos and they all show the navigation displayed horizontal.. but its always below the logo.. how can i get it center vertically and laying horizontal?

hope i explained it clear enough.. here is the link examples..

here is what im trying to do...

4 divs. header, logo, topnav, subnav

1. the overall header width is 960px & the height is 100px (thinking about making it expand fully though)
2. the top portion of the header will be 70px tall and the subnav will be 30px tall
3. the logo png image is 350 wide and the width is 60px tall
4. the topnav section there is 4 links in the top nav
5. there is 6 links in the sub nav section
6. one image will be horizontally repeated as the background for the entire header
7. no images for the navigation.. just text based with no drop downs needed.
8. image for the header will be header.jpg
9. the logo will need padding for the top of 10px... the text to the right needs to be centered vertically & horizontally with some breathing room in between the text


thats what im working with and can not get right... please help

 

[krymson]

you would do something like this...

HTML

<div id="header">
    <div id="top_head">
         <div id="logo"></div><!--END LOGO-->
         <div id="nav">
              <ul>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
              </ul>
          </div><!--END NAV-->
          <div class="clear"></div><!--END CLEAR-->
    </div><!--END TOP_HEAD-->
          <div id="subnav">
              <ul>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
              </ul>
          </div><--END SUBNAV-->
 </div><--END HEADER-->

The CSS

#header{
background: url(images/header_bg.jpg) repeat-y;
width:960px;
height:100px;
}
#top_head{
width:960px;
height:50px;
}
#logo{
background: url(images/logo.png) no-repeat;
height:50px;
width:350px;
float: left;
}
.nav{
width:900px;
height:50px;
float:right;
text-align:center;
}
.clear{
clear:both;
}
#subnav{
width:960px:
height:50px;
background-color:#000000;
}

And that will get you started, all you have to do from there is work out your padding and everything a few tweaks here and there.

I won't do the whole thing for you because trial and error are the key to learning but if you do get frustrated with it send me a PM or go to my website and send me a message and we'll work something out.

 

[ronaldroe]

Actually, you'll have to still force the li's to display horizontally. There are 2 ways of doing this:

Either:

#nav li{display:inline;}

or

#nav li{float:left;}

 

[PixelPusher]

I would position the logo absolutely and then use two lists for your menus. If you are going to have a image for you logo (which im 99% sure you will) try using the Gilder/Levin method where you insert and empty span in your anchor that overlays the text. This way when images are turned off the text is still visible.

Being that all web pages are essentially glorified documents/outlines you also want to think about how a page is read from a web crawlers/bot perspective. It needs to be semantic and have a logical flow.

That being said, I would do something like this:

<div id="header">
   <a href="" class="logo"><span></span>Logo Inc.</a>
   <ul class="main-menu">
      <li><a href="">Link1</a</li>
      <li><a href="">Link2</a</li>
      <li><a href="">Link3</a</li>
      ...
   </ul>
   <ul class="sub-menu">
      <li><a href="">Sublink1</a</li>
      <li><a href="">Sublink2</a</li>
      <li><a href="">Sublink3</a</li>
      ...
   </ul>
</div>

div#header {
  position:relative;
  width:960px;
  margin:0 auto;
  overflow:hidden;
  background:#color url() 0 0 repeat-y;
}
a.logo {
  position:absolute;
  top:5px;
  left:5px;
  display:block;
  width:200px;
  height:100px;
  font-size:2.5em;
  text-decoration:none;
}
a.logo span {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:transparent url(logo_image.png) 0 0 no-repeat;
}
div#header ul {
  list-style:none;
  float:right;
}
div#header li {
  float:left;
}
div#header a {
  display:block;
  font-size:1em;
  padding:5px 10px;
  text-decoration:none;
}
div#header a:hover {
 /* General hover styles */
}
div#header ul.main-menu a {
 /* specific to main menu */
}
div#header ul.sub-menu a {
 /* specific to sub menu */
}

Give that a whirl. Its off the top of my head, meaning I did not get to test it, kinda pressed for time If you have any questions, just let us know.

Good luck!