SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inline UL display question vertical spacing on wrap ??

    I have an inline ul with no bullets.

    This ul could possibly have say 200 items in it. So obviously the ul is going to reach the edge of the browser and then wrap, which is exactly what I want.

    I used css to put some space between each link, which works fine. I then turned the font size up to 24px.

    Now what i cannot figure out is how to get each wrapped line further apart from one another vertically!

    http://www.snug8.com/index.php

    any ideas

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Is the ul within a fixed width container, or will it just go to the edge of whatever screen size it lands on? And are the li/a fixed width or variable (spaced with padding)?

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah it's in a div tag with a width.

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im happy with it wrapping, that's precisely what I wanted. But I just want more space in between each of lines once it does wrap. I can't seem to find any way to control this.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    If, the ul container, li, and anchor are a fixed width, then you can float the li/a left a give the first li that wraps a class with a little top padding. If the li/a are not a fixed width, I don't see a way to do it with your current setup. You could however make each new line a seperate ul and give it the top padding. Maybe someone else has more ideas...

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im working withint the joomla frame work.. so it's the cms driven menu. What I have available to me to style is the following

    <div class="moduletable_menu">
    <ul class="menu">
    <li id="current" class="active item1"><a href="http://www.snug8.com/"><span>Snug8.com</span></a></li>
    <li class="item27"><a href="/index.php/this-is-my-test"><span>Test</span></a></li>

    so forth

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, setting a bottom margin on the <li>'s will work just nicely .

    Though since the <li> is an inline element it won't accept vertical padding or margins. Add float:left; to the <li>'s

    ALso, when you set the font size up to 24px the padding on the <li> is recalculated because it is an em value and that's based on the font size
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, setting a bottom margin on the <li>'s will work just nicely .

    Though since the <li> is an inline element it won't accept vertical padding or margins. Add float:left; to the <li>'s

    ALso, when you set the font size up to 24px the padding on the <li> is recalculated because it is an em value and that's based on the font size
    Man, I am getting rusty. Been hitting the gym instead. Now I have big muscles and a small brain again.

  9. #9
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    brilliant! Thanks

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •