WordPress.org

Ready to get started?Download WordPress

Forums

<UL> is making Images Float? (6 posts)

  1. bcinelli
    Member
    Posted 7 years ago #

    On my most recent post on DirtyDalerz.com ( http://dirtydalerz.com/blog/?p=83 ) I am unable to have the pictures line up on the left hand side as an <UL>. I have it coded out right but there has to be something in my stylesheet that is screwing it up. I have asked around to a couple friends i know and have come up with nothing. I want it to come out as a list i just created with a picture next to each paragraph (girl). I would really appreciate some help on this :).

    Thanks,
    B.c.

  2. Doodlebee
    Member
    Posted 7 years ago #

    I will say #1 - your stylesheet is quite confusing. You've got a *whole bunch* of stuff there you aren't even using in your site.

    That being said, I think your issue is here:

    /*For Post Unordered lists or Lists*/
    .storycontent ol li {
    list-style-type: none;
    display: block;
    }

    You're noting "storycontent OL" - which is an ordered list. You're using an unordered list for your images, though: UL.

    To start with, try changing it to :

    /*For Post Unordered lists or Lists*/
    .storycontent ul li {
    list-style-type: none;
    display: block;
    }

    And see if it helps. (But I'm betting you're gonna have a whole bunch of other issues, as well.) It's a start!

  3. bcinelli
    Member
    Posted 7 years ago #

    I made that change and still the same problem.

    Yeah, I know this is actually a theme I had gotten from the THEME archives called "dark maple" .. I'm guessing its something with the original stylesheet that is crappy. I haven't gotten around to cleaning it up which I should do.

    is there anything else i can try to remedy this problem? I appreciate your help SOOOOOo much!

  4. Doodlebee
    Member
    Posted 7 years ago #

    'kay -

    add this to the bottom of your stylesheet (if it's last, it'll override anything prior to it):

    .storycontent ul {
    list-style-type:none;}

    .storycontent li {
    clear:left;}

    .storycontent li img {
    display:block;
    float:left;
    margin:10px;}

    HTH!

  5. bcinelli
    Member
    Posted 7 years ago #

    It look like it worked ! .. thank yoU!

    Just another quick thing. how come when the paragraph runs on longer then the pictures length it wraps below it. Is there a way to have it just wrap to the width of the paragraph as it is next to the picture intstead?

    Thank you agin SOO MUCH !

  6. Doodlebee
    Member
    Posted 7 years ago #

    Yeah, you could do that too. It's because the image *is* floated, to allow text to wrap around it. If it wasn't floated, then the image would appear, and the block of text would be below it, and not beside it.

    So, if you want the image to appear, and have the block of text *next* to it - with no running under the image (if the text is longer) you'd need to edit in this way (this is just an example - removing seom text for length and...well...um, content!):

    HTML:
    <ul>
    <li><a href="image link here" title="Photo Sharing">
    <img src="image.jpg" width="192" height="240" align="left" alt="V.Guerra.jpg" /></a>
    <div class="blocktext">
    <strong>5. Vida Guerra</strong> -
    text about this chick here</div>
    </li>

    </ul>

    Note the addition of the <div> tags right there where your text starts.

    Your CSS should reflect this:

    div.blocktext {
    width:500px;
    float:right;
    }

    That's just the basics - you can do the width and formatting as you see fit.

    Then you'll need to change your li stufff in the stylesheet to this:

    .storycontent li {
    clear:both;}

    that way, each li element will clear the image and text prior to it - no matter which is longer.

    HTH!

Topic Closed

This topic has been closed to new replies.

About this Topic