www.webdeveloper.com
Results 1 to 3 of 3

Thread: Basic css... but ive been confused forever!Fist, i am not a web designer. I am a smal

  1. #1
    Join Date
    Jun 2011
    Posts
    4

    Basic css... but ive been confused forever!Fist, i am not a web designer. I am a smal

    Fist, 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..

    http://i53.tinypic.com/v4lybq.jpg

    here is what im trying to do...

    4 divs. header, logo, topnav, subnav

    1. the overall header width is 960px & the height is 100px
    2. the top potion of the header will be 80px tall and the bottom nav will be 20px
    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

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Post the code you have to date and a link to the problem page.

  3. #3
    Join Date
    Dec 2010
    Posts
    59
    To be basic, you'll need four DIVs structured as follows:
    HTML Code:
    <div id="header">
       <div id="header-logo"></div>
       <div id="header-nav"></div>
    </div>
    <div id="nav">
    </div>
    You'll need to float the header-logo and the header-nav inside the header ID.

    So the CSS will be something like: (untested)

    Code:
    #header {
       width: 960px;
       height: 80px;
       background-image: ... ;
    }
    #header-logo {
       width: 350px;
       float: left;
    }
    #header-nav {
      width: 610px;
      float: right;
    }
    #nav {
      width: 960px;
      height: 20px;
    }
    Last edited by ralphchadkirk; 06-03-2011 at 04:53 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles