www.webdeveloper.com
Results 1 to 6 of 6

Thread: question about lists and css

  1. #1
    Join Date
    Jan 2007
    Posts
    108

    question about lists and css

    Hello,
    I've been messing with lists and css and I was wondering why there is a space between my two divs.

    see example below...........

    http://www.mrmjs.com/images/cssQ1.jpg

    I made a container div, a banner div and then a nav div. I put the lists in the nav div and it adds a space between banner div and nav div. my question is how do I remove this space?

    here is the code i have so far

    <body>
    <div class="container">
    <div class="banner">Banner to be placed here </div>
    <div class="nav"><ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5 </li>
    </ul></div></div>
    </body>

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    -just playin' around with your code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">
    .banner {width:100%; height:100px; border:1px solid red;}
    .container {width:100%; border:3px double blue;}
    .nav {float:left; margin-top:10px;}
    .nav ul {list-style-type:none;}
    .nav ul li {margin:3px 0 3px 0;}
    .nav ul li a {background-color:none; color:black; text-decoration:none;}
    .nav ul li a:hover {background-color:yellow; color:red; text-decoration:underline; padding:0 6px 0 6px; letter-spacing:0.04em; font-weight:bold;}
    #content {width:auto; border-left:6px double silver; margin-left:130px; padding:25px; 20px 30px 20px;}
    </style>
    <script type="text/javascript"><!--
    // -->
    </script>
    </head>
    <body>
    <div class="container">
    <div class="banner">Banner to be placed here </div>
    <div class="nav">
    <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    </ul>
    </div>

    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
    Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
    volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
    dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
    Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
    mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
    metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
    lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
    turpis at erat.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
    Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
    quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
    purus, vel hendrerit ipsum tellus at ante.</p>

    </div>

    </div>
    </body>
    </html>
    but to answer your question. I assume that you are using IE? IE gives padding to just about everything. The first line of my CSS:
    * {padding:0; margin:0; border:0;}
    removes all of that to zero.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Jan 2007
    Posts
    108
    Im using Firefox but Im building with Dreamweaver 8. I see the space in both Dreamweaver and Firefox.

    here is the code and pic for a new before...

    With out ordered list

    http://www.mrmjs.com/images/cssQ2.jpg

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .container {
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    }
    -->
    </style>
    </head>

    <body>
    <div class="container">Content for class "container" Goes Here
    <div class="banner">Content for class "banner" Goes Here
    <div class="navigation">Content for class "navigation" Goes Here</div>
    </div>
    </div>
    </body>
    </html>
    With ordered list

    http://www.mrmjs.com/images/cssQ3.jpg

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .container {
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    }
    -->
    </style>
    </head>

    <body>
    <div class="container">Content for class "container" Goes Here
    <div class="banner">Content for class "banner" Goes Here
    <div class="navigation">
    <ol>
    <li>Content for class "navigation" Goes Here</li>
    </ol>
    </div>
    </div>
    </div>
    </body>
    </html>
    as you can see it adds space in the banner div or between the banner and navigation divs but I dont see anything in the code??? im I missing it?

  4. #4
    Join Date
    Jan 2007
    Posts
    108
    I got it.. I had to set the lists padding and margins to 0 and it went away

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by MrMJS
    I got it.. I had to set the lists padding and margins to 0 and it went away
    from my post higher up:
    but to answer your question. I assume that you are using IE? IE gives padding to just about everything. The first line of my CSS:
    * {padding:0; margin:0; border:0;}
    removes all of that to zero.
    would remove all padding, margin and borders from all elements (including lists). -Glad you figured it out.
    I build for: Firefox and tweak for IE

  6. #6
    Join Date
    Jan 2007
    Posts
    108
    thxs for your help

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