SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Float Images and LI alignment ...Code...

    Hello all,

    I have images I float:left on my screen, then I can write my <p> around them... however, when I put in a UL, the bullet then creeps into the image...

    I can fix margins, but then the rest of the bullets on the screen move of course... I would like the UL to wrap also.

    How do I get it to pick up the correct margin I have set for the image?

    Here is my Image and Content CSS:

    Code:
    #inner{
        width:100%;
        float:left;
        margin-right:-1px;
    }/* contain cleared elements from clearing other floats*/
    
    #inner_margin{
        margin-left:8px;
        margin-right: 5px;
    }
    
    #inner_margin p{
        line-height: 1.3em;
        margin-bottom: 1.3em;
        margin-left: 5px;
        margin-right: 5px;
        font-size: .9em;
    }
    #inner_margin ul{
        margin-left: 2em;
        font-size: .9em;
        padding-bottom: .5em;
        padding-top: .5em;
    }
    #inner_margin li{
    padding-bottom: .5em;
    }
    /*###Image Float#####*/
    img.floatleft{
        _position:relative;
        float:left;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 0;    
    }
    img.floatleft_border{
        _position:relative;
        float:left;
        margin-right: 10px;
        margin-bottom: 10px;    
        border: 1px solid #000000;
    }
    img.floatright{
        _position:relative;
        float:left;
        margin-right: 10px;
        margin-bottom: 10px;    
        border: 0;
    }
    img.floatright_border{
        _position:relative;
        float:left;
        margin-right: 10px;
        margin-bottom: 10px;    
        border: 1px solid #000000;
    }
    Thanks
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide an online test-page? That at least would make it easier for me to help you.
    Dan G
    Marketing Strategist & Consultant

  3. #3
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Hmm...

    A quick fix would be to wrap an identified div around the offending bullets so that you can select them seperately in your stylesheet.

    Or you could also give that <ul> a class all its own.

  4. #4
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    ...either way, once you can select those <li>'s seperately, you can style them and them alone without affecting anything else on your page.

  5. #5
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hear you on that SOtD, I am trying to minimize my CSS as much as possible is why I am asking. Is there not a way to make the UL recognize the the <p> does?

    can I do:

    #inner_margin p ul{}
    is that legit?
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  6. #6
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well putting the margin in the LI rather than the UL tag makes it work in FF not in IE6 though... Hmm....

    Code:
    #inner_margin ul{
        font-size: .9em;
        padding-bottom: .5em;
        padding-top: .5em;
    }
    #inner_margin li{
        margin-left: 2em; 
    padding-bottom: .5em;
    }
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, a <ul> may not be a descendant of a <p>. The spaces between the ID and element selectors are descendant selectors, which means that the one on the right of the descendant selector is a descendant of the one on the left.

    Why are you using the underscore hack (which is not valid)? Why can't you just show position:relative to all browsers?

    Could you put up a test page?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working great with margin: in the LI

    Here is a test page:

    http://www.fs.fed.us/r5/hfqlg/test/
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh! You removed the default left margin on the <ul>s rule for the universal selector. You could put a left margin or left padding on the list instead of left margin on the <li>s.

    These three articles explain how to style lists.
    http://www.alistapart.com/articles/taminglists/
    http://css.maxdesign.com.au/listutorial/
    http://www.webreference.com/programming/css_lists/
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by buildakicker
    Well putting the margin in the LI rather than the UL tag makes it work in FF not in IE6 though... Hmm....

    Code:
    #inner_margin ul{
        font-size: .9em;
        padding-bottom: .5em;
        padding-top: .5em;
    }
    #inner_margin li{
        margin-left: 2em; 
    padding-bottom: .5em;
    }
    Try...
    #inner_margin ul li{}


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
  •