SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    list-style not inline

    Building a vertical menu and when I put list-style-position to inside, it forces text to the next line. But when it's reinforced as outside, it places it correctly but it's not where I want it.

    Here's a quick snippet of the markup, I've obviously done something wrong or missed something obvious out.

    Code:
    #navigation ul {
    	list-style-type: square;
    	list-style-position: inside;
    	margin:0;
    	padding:0;
    	background:#;
    }
    #navigation li {
    	padding: 5px;
    	border-bottom: 1px #fff solid;
    }
    #navigation a {
    	 color: #fff;
    	 display: block;
    	 cursor: pointer;
    	 height: 40px;
    	 line-height: 40px;
    	 text-indent: 20px;
    	 text-decoration:none;
    	 width:100%;
    }

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Have you tried putting the list-style-type and list-style-type position into your <li>? I've put these two declarations inside the <li> rule and it seems to work.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Albablue89 View Post
    But when it's reinforced as outside, it places it correctly but it's not where I want it.
    That's where margin/padding comes into play. If you try something like

    Code:
    ul {padding-left: 20px;}
    you will probably get what you want. You need some left padding to provide room for your bullets.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Have you tried putting the list-style-type and list-style-type position into your <li>? I've put these two declarations inside the <li> rule and it seems to work.
    Yeah, I had it in <li> to begin with then moved it, but it just has the same effect for me.

    Quote Originally Posted by ralph.m View Post
    That's where margin/padding comes into play. If you try something like

    Code:
    ul {padding-left: 20px;}
    you will probably get what you want. You need some left padding to provide room for your bullets.
    That doesn't work either inside or outside.

    I have a border border-left and border-bottom, so padding inwards left just forces the <li> borders out.

    Then, if I put the following into <li> instead of <ul> it'll just push the bullet point and text left in there separate lines.

    #navigation li {
    list-style-type: square;
    list-style-position: inside;
    padding-left: 25px;

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try margin-left then. You haven't really said what's wrong with it as is (unless I missed it). Perhaps post a screen shot of what it looks like and how you'd like it to look.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    My oligopolies ralph, try this:

    http://www.awblue.com/test/

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, that's good, but how do you actually want it to appear? It's not quite clear yet. If we know what to aim for, we can suggest what code to use.

    Do you have a screen shot of a mockup?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Basically, for the square to be on the same line to the left of the <a> text within the <il>

  9. #9
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    From the problem you see in the current test page, it's down #navigation having display: block;

    Although I thought that display block is exactly what you should have for using a vertical menu ?

    When I remove display block from .a the <li> list style goes on the same line as the <a> text, however then the actually clickable link is only the text and not the actual whole <li> area.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you want to change the vertical position of the bullet, that's impossible (cross browser)

    However, you can use a bullet IMAGE and place that as the background of hte <li> and you can use the background position property to move it wherever you want. You'll have to remove the list-style on the <ul> now if you go that approach .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Albablue89 View Post
    Basically, for the square to be on the same line to the left of the <a> text within the <il>
    But I mean an exact description. I mean, what is that left border for? Do you have an image of what you want?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It's cool. I know where I've went wrong and what exactly is causing it the <a> to go to a new line.

    From putting display: block; AND width:100%; into the .a markup together, it's forced it to take up the FULL 298px of the Nav. This isn't entirely a fault, but it became the issue when I added a list-type; - for the reason that it takes a part of the width up, when there was no width left, with .a taking the full width:100%;, thus forcing the <a> to the next line.

    The background .il method would do, or background images altogether in order to keep the full <IL> clickable.

    Or is there another way to keep the full list item clickable?

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Have you updated your page with the new code?
    http://www.awblue.com/test/

    The concept of full width links are easy, the anchor must be a non-inline leement and have (by either default or set) a width to tkae up the full area.

    Right now the test page has the links spanning across the entire item.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Have you updated your page with the new code?
    http://www.awblue.com/test/

    The concept of full width links are easy, the anchor must be a non-inline leement and have (by either default or set) a width to tkae up the full area.

    Right now the test page has the links spanning across the entire item.
    Haven't updated test page yet pal.

    Do you have examples of the difference between what you described there?

  15. #15
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

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