Results 1 to 8 of 8

Thread: div list issue

  1. #1
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default div list issue

    Hi again all.

    I have a side nav set up with a top and bottom div for adding custom images for design purposes.

    The main content of the side nav is placed between the two.

    I have the layout working fine. However when I place a ul in the content div, it adds what looks to be padding or margins to it and ends up vertically centering it.

    I've tried to zero them out with no luck. What I am trying to do is eliminate the space between my list and the top and bottom of the div, so that the list is snug up tight to the div horz line boundaries.

    Here is my html, although you wont see the custom graphics, the issue is still apparent. The css follows.

    Any help would be great!! Thanks again.

    Code:
    <!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=UTF-8" />
    <title>Untitled Document</title>
    <link href="CSS/sidecol.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="sidecol">
      <div id="sidecoltop"></div>
      <div id="sidecolbody">
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
        </ul>
      </div>
      <div id="sidecolbottom"></div>
    </div>
    </body>
    </html>
    Code:
    @charset "UTF-8";
    #sidecol {
    	float: left;
    	width: 225px;
    }
    #sidecol  ul  li {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	list-style-type: none;
    	letter-spacing: 1px;
    }
    #sidecoltop {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	width: 225px;
    	background-image: url(../images/col_top.png);
    	background-position: center;
    	height: 28px;
    	margin-bottom: 0px;
    	background-repeat: no-repeat;
    	border: none;
    }
    #sidecolbody {
    	width: 223px;
    	background-image: url(../images/col_body.png);
    	background-repeat: repeat-y;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	position: relative;
    	line-height: 18px;
    	background-position: center;
    	padding: 1px;
    	margin: 0px;
    }
    #sidecolbottom {
    	width: 225px;
    	height: 29px;
    	background-image: url(../images/col_bottom.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	border: none;
    }

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    This?

    Code:
    <!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=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    #sidecol {
    	float: left;
    	width: 225px;
    }
    #sidecol  ul  li {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	list-style-type: none;
    	letter-spacing: 1px;
    }
    #sidecoltop {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	width: 225px;
    	background-image: url(../images/col_top.png);
    	background-position: center;
    	height: 28px;
    	margin-bottom: 0px;
    	background-repeat: no-repeat;
    	border: none;
    }
    #sidecolbody {
    	width: 223px;
    	background-image: url(../images/col_body.png);
    	background-repeat: repeat-y;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	position: relative;
    	line-height: 18px;
    	background-position: center;
    	padding: 1px;
    	margin: 0px;
    }
    #sidecolbottom {
    	width: 225px;
    	height: 29px;
    	background-image: url(../images/col_bottom.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	border: none;
    }
    </style>
    </head>
    
    <body>
    <div id="sidecol">
      <div id="sidecoltop"></div>
      <div id="sidecolbody">
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
        </ul>
      </div>
      <div id="sidecolbottom"></div>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes that works, but i am trying to place it in an external css instead of in the page head. I tried it on my full page code, but it doesn't do anything. Only when I place my side col on its own page does it work.

    So I guess my question is how to get it to eliminate that gap in the css code... ??

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    wait which gap? that should be the same just add in the

    Code:
    * {
    margin:0;
    padding:0; 
    }
    After the utf-8


    edit

    so here..

    @charset "UTF-8";
    -----> Put that here
    #sidecol {

  5. #5
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That doesn't seem to do it...

    This is the gap I want to close. It doesn't seem to make a gap when its plain text, but if I do a ul or new p it adds the gap... ??


  6. #6
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I just want the top and bottom div lines to be snug up against my ul using css.

  7. #7
    Join Date
    Mar 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Use these in the CSS as #navbartop ul {position: relative; line-height: 0px; text-align: right; top: ... then c the change.



    Edit: signature removed: wait until you have 5 posts
    Last edited by djr33; 03-18-2009 at 05:17 PM.

  8. #8
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Fixed the issue. it was because the div had a <p tag attached to it. Simple removal fixed the issue. Problem resolved!

Bookmarks

Posting Permissions

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