Position an unordered list further left?

cbouchar · 03-12-2005, 05:34 PM

Is there a way to get an unordered list to start further to the left? I am using the list in a narrow menu and horizontal space is at a premium. The attached pic shows where the list is appearing.

Any help would be appreciated.

_Aerospace_Eng_ · 03-12-2005, 05:42 PM

try using padding-left:0px; or margin-left:0px; i can't remember which one of those is the right one but one of them works, im also assuming u may know basic css

bazz · 03-12-2005, 05:47 PM

HI,

Yes, as far as I can tell, you can position anything anywhere.

I have done what your trying, like this....

<div id="divname">
<ul>
<li></li>
<li></li>
</ul>
</div>

The the css could be

div#divname {
properties for DIV here
}

div#divname ul {
properties for UL here
}

div#divnamne ul li {
properties for LI here
}

doing it like this means that only this UL shall be affected by this CSS. Other UL's will be controlled by whatever div name they have been placed within.

HTH

Just adding this in case you might need it. If you will have more than one UL in the div say, for example, when you have separate blocks of bulleted points in one page of text, then you can assign a class to each UL in that div like this

div#divname ul#1stclassname li {
properties here
}

div#divname ul#2ndclassname li {
properties here
}

Bazz

cbouchar · 03-12-2005, 06:14 PM

The div that the list is in has a 5px padding. The image shows that the list is moved over much more than 5px. The list automatically indents - it doesn't start flush to the left. What I want to do is remove the indent. Is this possible? Is there a way to simulate the removal of the indent by having the bullets flush (or very close to flush) with the left edge of the div?

_Aerospace_Eng_ · 03-12-2005, 06:40 PM

sighs, implementing something of what i previously already said in this thread! margin-left is the key

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>List,less margin</title>
<style type="text/css">
ul#nomargin {
margin-left:15px;
list-type:circle;
}
</style>
</head>

<body>
<ul id="nomargin">
<li>blah1</li>
<li>blah2</li>
<li>blah3</li>
</ul>
</body>
</html>

cbouchar · 03-12-2005, 07:12 PM

The margin-left worked for IE but not FireFox. How can I get it to work in both? The margin simply moved the list to the right even more in FireFox.
The attached pics show what happens in FF.

bazz · 03-12-2005, 07:51 PM

I ahd an almost identical problem last night where my list on the left of the page, went off screen in IE and was fine in FF. However, when I coded it better (well, it must have been better coz it worked), it's the same both in IE and FF.

I was fiddling with it so much that I can't remember the specific chjange which fixed it so I'm off now to c+P the CSS for you.

If you play with it, I hope it works as you need.

Code:

#leftdiv, #rightdiv {

color : #000040;
text-align : left;
background-color : transparent;
margin-top : 5px;
margin-right : 0px; 
padding : 35px 25px;
height: 90%;
border: double #785B83;
 border-width : 0 4px;
line-height : 20px;
}

#leftdiv {
	width : 37%;
	float : left;
	border : 0;
	padding-left : 0;
	margin : 0;
}

div#productnavbar1 {
	float : left;
	#background-color: #785B83;
	background-image : url('images/menubkgrnd.jpg');
	border : 1px solid #e5f9ff;
	text-align: left;
	margin-top : -35px;
	width : 190px;
	
}

div#productnavbar1 h3 {
	font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
	font-size : 1.1em;
	margin-left : 20px;
	padding-top : 10px;
	padding-bottom : 10px;
}

div#productnavbar1 ul {
	background-color: transparent;
	display: block;
	white-space: nowrap;
	margin-top : -15px;
	margin-bottom : 0;
	
	
}

div#productnavbar1 ul li
{
	display : block;
	list-style-type: none;
	line-height : 25px;
	border-bottom : 1px solid #000040;
	background-color : #785B83;
	margin-left : -40px;
	
}

div#productnavbar1 ul li a:link, div#productnavbar1 ul li a:visited, div#productnavbar1 ul li a:active {
	color: #000040;
	text-decoration: none;
	font-size : .9em;
	font-weight : normal;
	width : 98%;
	display : block;
	padding-left : 2%; 
}


div#productnavbar1 ul li a:visited {
	background-color: transparent;
	color : #000040;
	
width : 98%;}

div#productnavbar1 ul li a:hover {
	background-color: #ffffff;
	color : #000040;
	background: url(/images/bkgrnd2.jpg); 
	width : 100%;
	display : block;
}

Bazz

trancedm · 03-13-2005, 12:18 AM

ul {
margin: 0;
padding: 0; }

cbouchar · 03-13-2005, 04:14 AM

Trancedm! Thank you. That did the trick. It appears the same in both browsers now.
_Aerospace_Eng_ ! You were right but I need to use both elements you mentioned, not just one or the other as suggested.

Either way, thanks for your help.

cbouchar