SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Div + Li = Headache...please help

    /*The Problem*/
    I a trying to have the lists be indented under the paragraph, which it will do if there is not a image next to it. What happens is the li is being put behind or on top of the image, you will noticed this if you put a border:1 on the ul. I have tried to apply a z-index and it does nothing, also when I apply a margin or padding i have to use a 300 px for it to show, but it will mess up the rest of the page that do not have images.

    Can anyone help me with this? Do you understand?




    /*CSS CODE*/
    #hd_top {margin:auto 0; padding auto 0:}

    .product_img {width:235px; margin: 0 5px 5px 0; float:left;}
    .product_img img {margin:3px;}

    p {margin: 0 auto; padding:0 auto; font-size:0.8em; line-height:normal;}

    #ul {margin:5px 0; padding: 0; font-size:0.8em; display: block;}
    #li {list-style-position:inside;}



    /*HTML CODE*/

    <div id="hd_top">
    <div class="product_img">
    <img src="img/7570.jpg" width="225" height="225" alt="Item"/>
    </div>
    <p>
    We have added eight beautiful new patterns to our Dur Designer line. From modern to classic styles - choose the one that portrays the look you want. Designer patterns are coordinated to compliment many of our Dur solid colors and are a smart way to change the look of your tablesetting with just a few new decorated pieces. 12" Dur Designer can also be coordinated with our additional new Decorated Displayware shown on pages 74-79.
    </p>

    <ul>
    <li>Colors: Black (03), White (02)</li>
    <li>Colors: Red (05), Green (07)</li>
    <li>Colors: Black (03), White (02)</li>
    <li>Colors: Black (03), White (02)</li>
    <li># 4512 has a white liner; 7006 also in Honey Yellow(22), Sunset Orange(52)</li>
    </ul>
    </div>

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bradb_47 View Post
    /*CSS CODE*/
    #hd_top {margin:auto 0; padding auto 0:}

    .product_img {width:235px; margin: 0 5px 5px 0; float:left;}
    .product_img img {margin:3px;}

    p {margin: 0 auto; padding:0 auto; font-size:0.8em; line-height:normal;}

    #ul {margin:5px 0; padding: 0; font-size:0.8em; display: block;}
    #li {list-style-position:inside;}
    Looks like your missing : after padding in your #hd_top and a ; to close. The .product_img div wrapper is unnecessary as the image elements are defaulted to display block. Apply that class specifically to the image. Why not float the image right instead?

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I corrected those things, and took out the wrapper, but still the li is not indenting the way it should. I would rather not float right because of the design on the page.


    CORRECTED CSS

    .product_img { margin: 0 5px 5px 0; float:left;}

    p {margin: 0 auto; padding:0 auto; font-size:0.8em; line-height:normal;}

    ul {margin:5px 0; padding: 0; font-size:0.8em;}
    li {list-style-position:inside;}


    CORRECTED HTML

    <img class="product_img" src="images/7570.jpg" width="225" height="225" alt="Item"/>

    <p>
    We have added eight beautiful new patterns to our Dur Designer line. From modern to classic styles - choose the one that portrays the look you want. Designer patterns are coordinated to compliment many of our Dur solid colors and are a smart way to change the look of your tablesetting with just a few new decorated pieces. 12" Dur Designer can also be coordinated with our additional new Decorated Displayware shown on pages 74-79.
    </p>

    <ul>
    <li>Colors: Black (03), White (02)</li>
    <li>Colors: Red (05), Green (07)</li>
    <li>Colors: Black (03), White (02)</li>
    <li>Colors: Black (03), White (02)</li>
    <li># 4512 has a white liner; 7006 also in Honey Yellow(22), Sunset Orange(52)</li>
    </ul>

  4. #4
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a "live" example we could take a look at?

  5. #5
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    verticaleap.net/carl/Untitled-14.html

    This is a heading page. That might help you locate it in the style sheet.

  6. #6
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking at the content on the page, if you give <ul> a position, width and float them right, the images on the left won't overlap anymore. Without giving the <ul> a width and a float right, any content that extends beyond the image drop below and align left, thus looking "broke". You will then want to clear both floats so the content does not creep up underneath the image and list

    }
    Code CSS:
    #headingpg ul {
    border:1px solid #000000;
    float:right;
    font-size:0.8em;
    margin:5px 0;
    padding:0;
    position:relative;
    width:340px;
     
    #headingpg .flags {clear:both;}

  7. #7
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at the page again. I just figured out the way I want it to look. I believe it still is under the image, but it is using the left padding correctly and if the bullets show multiple times on the page nothing is effected.

    #headingpg ul {
    margin:5px 0;
    padding:0 0 0 0.8em;
    font-size:0.8em;
    text-indent:0.8em; }

    #headingpg .flags {clear:both;}



    Is this the wrong way to do it? I can't set a width or float right because the bullets below will be effected.

  8. #8
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends, you can achieve the layout a bunch of different ways, thats the beauty of CSS the first <ul> set looks nicely formatted, the next list the last bullet drops down below the image. It all depends on how you want the page to look...like the list with the last bullet that drops, maybe give that an id with a width and float it right so it doesnt break below.

  9. #9
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you know of a way to have the wrapped text from the bullet position inside instead of outside? (See 2nd bullet section) Yellow (22).

  10. #10
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    ul li {list-style-position:outside;}


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
  •