Log in

View Full Version : div list issue


Atlantis
03-17-2009, 03:49 AM
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.


<!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>


@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;
}
bluewalrus
03-17-2009, 03:53 AM
This?


<!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>
Atlantis
03-17-2009, 04:02 AM
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... ??
bluewalrus
03-17-2009, 04:09 AM
wait which gap? that should be the same just add in the


* {
margin:0;
padding:0;
}

After the utf-8


edit

so here..


@charset "UTF-8";
-----> Put that here
#sidecol {
Atlantis
03-17-2009, 05:56 AM
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... ??

http://i524.photobucket.com/albums/cc326/rljoneson/pic.png
Atlantis
03-17-2009, 09:37 PM
I just want the top and bottom div lines to be snug up against my ul using css.
katherinej
03-18-2009, 08:53 AM
Use these in the CSS as #navbartop ul {position: relative; line-height: 0px; text-align: right; top: ... then c the change.



signature removed: wait until you have 5 posts
Atlantis
04-13-2009, 06:09 PM
Fixed the issue. it was because the div had a <p tag attached to it. Simple removal fixed the issue. Problem resolved!