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 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Position an unordered list further left?

    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.
    Attached Thumbnails Attached Thumbnails Position an unordered list further left?-list.gif  

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    Last edited by bazz; 03-12-2005 at 06:50 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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>

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails Position an unordered list further left?-ie.gif   Position an unordered list further left?-ff.gif  

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    Last edited by bazz; 03-12-2005 at 08:55 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    Regular Coder
    Join Date
    Mar 2005
    Posts
    123
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ul {
    margin: 0;
    padding: 0; }

  • #9
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    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


  •  

    Posting Permissions

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