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 7 of 7
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts

    Keeping links from wrapping under bullet points

    Currently i have a drop down menu with custom graphic bullet points. In the design it shows the link wrapping, but not under bullet. Is there a way to keep this from happening?

    http://media.ebby.com/65/

    hover over the first button to see what i mean.

    Thanks for any help.

  • #2
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post

    Not really clear

    I don't exactly know what you mean. I can see the link is wrapping, placing the word "Series" on the same indentation as the custom ">" (on a Mac, Safari). If you'd like it to continue as in a usual list, your CSS list-style-position should be set to "outside".

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Well the link is wrapping, which is fine, but it goes under the bullet point. Here is the code, which i changed to outside:

    Code:
    #main_nav li ul li{
     clear:both;
     padding:10px 10px 10px 30px;
     list-style-image:url(../gfx/nav/carrot.gif);
     list-style-position:outside;
    }
    Yet the points are not showing up. I know i ran into this before but can't remember how to handle it.

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    I think this has something to do with the paddings and margins. Have you tried setting both to zero and altering them when needed? So in the body, or main_nav:
    Code:
    padding: 0px;
    margin: 0px;
    and in the li selector:
    Code:
    #main_nav li ul li {
    
    padding:0px 0px 0px 30px;
    }
    You may also want to try using a margin instead of a padding.

  • Users who have thanked joerivanveen for this post:

    jcdevelopment (05-20-2010)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It is usually advisable to start your css with this code.

    Code:
    *{
    margin:0;
    padding:0;
    }
    It resets the browser(s) to zero.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Some left margin, say margin-left:20px; will also be required for #main_nav li ul li to see the bullets.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Quote Originally Posted by joerivanveen View Post
    I think this has something to do with the paddings and margins. Have you tried setting both to zero and altering them when needed? So in the body, or main_nav:
    Code:
    padding: 0px;
    margin: 0px;
    and in the li selector:
    Code:
    #main_nav li ul li {
    
    padding:0px 0px 0px 30px;
    }


    You may also want to try using a margin instead of a padding.
    Brain fart i guess. I used margin instead. Thanks!


  •  

    Tags for this Thread

    Posting Permissions

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