Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS inline display looks funky! -also AJAX question?

    First, here is the content in question:

    http://choiceconcessions.com/index.html.

    I translated Illustrator exported tables into divs, and now I can't make the top navigation (why Choice?, menus, our story, contact) stay in one line, with no break between the header or on either side.

    I know it's something simple, but I've been messing with it for hours and can't make it work!

    Thanks in advance for pointing me in the right direction-
    Jessica

    oops- Nevermind that AJAX question.. one thing at a time!!!

    Code:
    body,
    html {
      margin:0px;
      padding:0px;
      border:0px;
      background-color:#0078ff0
    }
    p, ul, ol, li {
      font : 10pt Arial,geneva,helvetica;
    }
    h1 {
      font : bold 14pt Arial, Helvetica, geneva;
    }
    h2 {
      font : bold 12pt Arial, Helvetica, geneva;
    }
    
    #wrap {
      width:1200px;
      margins:1 auto;
      background:#99c;
    }
    
    #header {
      position:relative;
      width:1200px;
    }
    
    #topnavigation {
      margin:0;
      padding:0;
      float:left;
      width:1200px;
    }
    
    #nav ul {
      margin:0;
      padding:0;
      list-style:none;
    }
    
    #nav li {
      display:inline;
      padding:0px;
      margin:0px;
      float:left;
      width:auto;
    }
    
    #content {
      float:left;
      width:915px;
      padding:10px
      background:#c9c;
    }
    
    #rightnavigation {
      float:right;
      width:285px;
      background:#9c9;
    }
    
    #footer {
      clear:both;
      background:#cc9;
    }
    Last edited by jurassica; 02-06-2012 at 04:24 AM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by jurassica View Post
    I translated Illustrator exported tables into divs, and now I can't make the top navigation (why Choice?, menus, our story, contact) stay in one line, with no break between the header or on either side.

    I know it's something simple, but I've been messing with it for hours and can't make it work!
    By default, browsers give ul elements non-zero margin-top, margin-bottom, and padding-left values to create space above and below the list and accommodate the list's bullets.

    You need to set those values to zero on the ul#nav element either directly or by specifying a default rule. To do so directly, you might use the following code:

    Code:
    ul#nav { margin: 0; padding: 0; }
    To do so using a default rule, you might use the following code:

    Code:
    * { margin: 0; padding: 0; } /* selects every element */
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you!

    Thank you!
    I thought I had it here, but I had to change #nav ul to #topnavigation ul to make it work! So simple!

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,348
    Thanks
    11
    Thanked 289 Times in 288 Posts
    Quote Originally Posted by jurassica View Post
    Thank you!
    I thought I had it here, but I had to change #nav ul to #topnavigation ul to make it work! So simple!
    I realize you've got it working, but just to clarify since you thought you had it already... You had:

    Code:
    #nav ul {
      margin:0;
      padding:0;
      list-style:none;
    }
    which is different from:
    Code:
    ul #nav {
      margin:0;
      padding:0;
      list-style:none;
    }
    In your html, you use the #nav id like this:
    Code:
    <ul id="nav">
    So the second CSS style above is what you want. The first was accomplishing nothing.

    Dave


  •  

    Posting Permissions

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