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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How Do I Position The Text Closer to The Bullet Arrow Image?

    Alright guys

    I am wondering how do I position the text to be closer to the bullet arrow image, without effect any of the other parts of the lists.

    Code:
    /************************************************
    
    *	Left Sidebar 		    	        	        * 
    
    ************************************************/
    
    
    
    #l_sidebar {
    
    	float: left;
    
    	width: 175px;
    
    	margin: 0px 0px 0px 10px;
    
    	padding: 0px;
    
    	line-height: 20px;
    
    	display: inline;
    
    	}
    
    	
    
    #l_sidebar p {
    
    	padding: 0px;
    
    	margin: 0px;
    
    	}
    
    	
    
    #l_sidebar a img {
    
    	border: none;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #l_sidebar h2 {
    
    
    	height: 45px;
    	
    	color: #f9ea45;
    
    	font-size: 12px;
    
    	font-family: Verdana;
    
    	font-weight: bold;
    
    	margin: 0px 0px 10px 0px;
    
    	padding: 1px 0px 1px 5px;
    
    	line-height: 42px;
    
    	}
    	
    	
    	
    #l_sidebar h3 {
    
    	color: #006699;
    
    	font-size: 18px;
    
    	font-family: Times New Roman, Tahoma, Verdana;
    
    	font-weight: normal;
    
    	margin: 0px 0px 5px 0px;
    
    	padding: 0px;
    
    	line-height: 20px;
    
    	}
    	
    #l_sidebar ul { 
    list-style-image:url("images/m10.jpg");
    margin: 0px 0px 0px 8px;
    padding:0px;
    }
    
    #l_sidebar li { 
    background:transparent url(images/dashline.jpg) no-repeat scroll -10px bottom;
    list-style-position:inside;
    list-style-type:disc;
    padding:5px;
    }
    
    #l_sidebar li li {
    background: #FFFFFF }
    
    #l_sidebar li a, #l_sidebar li a:visited { color: #359CBB; text-decoration: none; }
    #l_sidebar li a:hover, #l_sidebar li a:active { color: #444; }
    	
    .leftboxheader {
    
    	background: #FFFFFF;
    
    	float: left;
    
    	width: 175px;
    	
    	height: 33px;
    
    	margin: 0px 0px 0px 0px;
    
    	padding: 0px 0px 0px 0px;
    
    	
    	}
    	
    
    	.leftbox {
    
    	background: #FFFFFF;
    
    	float: left;
    
    	width: 171px;
    	
    	margin: px 0px 0px 0px;
    
    	padding: 0px 0px 0px 0px;
    
    	border-left: 2px solid #9B9B9B;
    
    	border-right: 2px solid #9B9B9B;
    
        font-size: 11px;
    
    	font-family: Tahoma;
    	
    	font-weight: Bold;
    
    	color: #359CBB;
    
        
    		}
    	
    .leftbottom {
    
        background: #FFFFFF url(images/borderbottom.jpg) no-repeat;
    
    	float: left;
    
    	width: 175px;
    	
    	height: 10px;
    
    	margin: 0px 0px 0px 0px;
    
    	padding: 0px 0px 10px 0px;
    
    	
    	}
    http://www.supreme-host.com/web/categories.php

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    The position of list bullets can’t be influenced very much and the visual outcome differs in different browsers. For this reason it’s better to remove the list style and apply the bullets as background images to the list items. You can then influence the horizontal position with left padding.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I gave you a link to an example that shows you this before, I'll show you some code this time.
    If you make the image a background of the li you can control it much easier than replacing the bullet with your own image.
    Try it like this once -
    CSS -
    Code:
    #l_sidebar ul { 
    list-style:none;
    margin: 0px 0px 0px 8px;
    padding:0px;
    }
    
    #l_sidebar li { 
    background:transparent url(images/dashline.jpg) no-repeat scroll -10px bottom;
    padding:5px;
    }
    
    #l_sidebar li li {
    background: #FFFFFF }
    
    #l_sidebar li a:link { 
    background: url("images/m10.jpg") no-repeat 0 5px;
    color: #359CBB; 
    text-decoration: none; 
    padding: 0 0 0 5px;
    }
    And, of course, you need a link in your ul -
    Code:
    <div class="leftbox">
    <ul>
    <li><a href="#">Newest Products</a></li>
    <li>Dollar Deals</li>
    <li>Product Request</li></ul>
    </div>
    /edit - Like VIP says, as a background you have more control over it. I just put it as a background of the anchor since you already have your dotted line as a background of the li.
    Last edited by Excavator; 12-24-2009 at 04:33 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I gave you a link to an example that shows you this before, I'll show you some code this time.
    If you make the image a background of the li you can control it much easier than replacing the bullet with your own image.
    Try it like this once -
    CSS -
    Code:
    #l_sidebar ul { 
    list-style:none;
    margin: 0px 0px 0px 8px;
    padding:0px;
    }
    
    #l_sidebar li { 
    background:transparent url(images/dashline.jpg) no-repeat scroll -10px bottom;
    padding:5px;
    }
    
    #l_sidebar li li {
    background: #FFFFFF }
    
    #l_sidebar li a:link { 
    background: url("images/m10.jpg") no-repeat 0 5px;
    color: #359CBB; 
    text-decoration: none; 
    padding: 0 0 0 5px;
    }
    And, of course, you need a link in your ul -
    Code:
    <div class="leftbox">
    <ul>
    <li><a href="#">Newest Products</a></li>
    <li>Dollar Deals</li>
    <li>Product Request</li></ul>
    </div>
    /edit - Like VIP says, as a background you have more control over it. I just put it as a background of the anchor since you already have your dotted line as a background of the li.
    I am sorry to say that I have just changed my code over to the one that you supplied.. And when I do I loose the bullet image completely...

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Have you included anchors in the list?


  •  

    Posting Permissions

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