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

    How Do I Move The Text Over For This Part Please?

    Alright guys

    I have decided to change the whole bullet layout. Instead of using a separating image for the bullet, and then for the dashed line on the bottom, I have included one picture..

    Now I need to know how to move the text over a little bit please... And thank you

    Code:
    #l_sidebar ul { 
    list-style: none;
    margin: 0px ;
    padding: 0; }
    
    #l_sidebar li { 
    background: url(images/bulletback.jpg) no-repeat left;
    }
    
    #l_sidebar li a, #l_sidebar li a:visited { 
    color: #359CBB; 
    text-decoration: none; 
    margin: 0px;
    }
    My website: http://www.supreme-host.com/web/categories.php

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    With that margin:0px; your telling it sit right up next to it's container. Add 10px left margin like this -

    Code:
    	
    #l_sidebar ul { 
    list-style: none;
    margin: 0 0 0 10px ;
    padding: 0; }
    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

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    With that margin:0px; your telling it sit right up next to it's container. Add 10px left margin like this -

    Code:
    	
    #l_sidebar ul { 
    list-style: none;
    margin: 0 0 0 10px ;
    padding: 0; }
    Excavator

    If I add the above margin code as shown above then it moves also the #l_sidebar li {
    background: url(images/bulletback.jpg) no-repeat left;
    }

    over as well... I need to move the text over not the background image for the list properties

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Ahh, that image is pretty faint and I didn't see it.
    You're going to make links in the menu someday, so style the anchor to move the text over.
    You've already done this before, when we put a background image on the anchor.

    Like this -
    Code:
    	
    #l_sidebar ul { 
    list-style: none;
    margin: 0;
    padding: 0; }
    
    #l_sidebar li { 
    background: url(images/bulletback.jpg) no-repeat left;
    }
    
    #l_sidebar li a, #l_sidebar li a:visited { 
    color: #359CBB; 
    text-decoration: none; 
    margin: 0 0 0 10px;
    }
    And don't forget to add your links -
    Code:
    
    <div class="leftbox">
    <ul>
    <li><a href="#">Newest Products</a></li>
    <li>Dollar Deals</li>
    <li>Product Request</li></ul>
    </div>
    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


  •  

    Posting Permissions

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