SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    list item acting strange

    Hi,
    I am working on a and the li is acting strange.As it is, the li should be floating to each other which it does but one li don't let anything float next to it. there isn't any clear property. What is wrong?
    Last edited by Paul O'B; Apr 24, 2013 at 04:21.
    All those who wander aren't lost.

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey nofel

    If you're talking about the list items in the products-grid, then what I'm saying should apply.

    The problem is that you are trying to float items that are belonging to different lists together.

    Your HTML code goes like this:

    Code HTML4Strict:
    <ul class="products-grid">
        <li class="first"></li>></li>
        <li></li>
        <li></li>                           <!-- Note that this is the 3rd item in your list, but it's at the far right column -->
        <li class="last"></li>></li>  <!-- This item is the hanging one that seems to "not float" -->
    </ul>
     
    <!-- The problem lies between these two lines. You have closed off the unordered list and opened a new one. -->
    <ul class="products-grid">
        <li class="first"></li>></li>
        <li></li>
        <li></li>
        <li class="last"></li>></li>
    </ul>

    There are two ways to fix this problem
    1) Make sure your lists are only 3 item wide (If you don't want to change anything else)
    2) Do not create separate uls. Instead, place all of your li into one single ul.

    Hope this helps.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    As correctly mentioned above you have 4 items in a ul so every ul will start on a new line leaving one orphaned list item. You need then all in one list or as mentioned above put them three across only.

    You have a big issue with your images in that some are over 1300k!!! That's more than the whole css, html, js, images and other resources for most whole small sites. That thumbnail image should be about 2k in size not 1300k+. You have similar images of much to large a file size. Make your thumbnail images smaller in your paint package and optimise them down to a few k each and your page will load in a flash .

  4. #4
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks zell and paul, i will look into it. paul can you remove the hyperlink. i don't want site to be indexed.
    Off Topic:

    its been a long time paul, how you been
    All those who wander aren't lost.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    Thanks zell and paul, i will look into it. paul can you remove the hyperlink. i don't want site to be indexed.
    Ok removed this time but just obfuscate a little in future (e.g. mysitexxxdotxxxcom ) and then people can still work out the link but search engines won't

    Off Topic:


    Off Topic:

    its been a long time paul, how you been


    Fine thanks and still here Hope you are well also A little busy at the moment though.

  6. #6
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tried but i don't see any code, maybe its dynamic as its magento. is there a css hack which can make it display none? like if i use nth-child? will it do?
    All those who wander aren't lost.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Why would you want to hide the 4th item? No one will see it then.

    You could use nth-child or more simply last-child if you always have 4 items but it seems strange to hide your content.

  8. #8
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    my bad, i was wrong. i mean to say clear 4th item.anyhow i was able to style it with different thing and i fixed it, though i couldn't find extra pair of li that you pointed out. here is what it look like now (genuinelyjanestudiosdotammarworxdotcom/retail-store)
    All those who wander aren't lost.


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
  •