SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I make my list items width and height properties responsive on resize?

    Hi all,

    Basically I want to my list items to resize in width and height when the window/containing ul is resized, at the moment i can only get this to work on the width, the height never seems to change?

    Can anyone advise how this can be achieved?

    Here is my code:

    CSS
    Code:
    #test{max-width:302px;width:100%;max-height:100px;height:100%}
    #test li{background:url('http://www.dummyimage.com/100/000/fff') no-repeat 0 0;max-width:30%;width:100%;max-height:30%;height:100%;float:left;margin-left:1px;}
    #test li:first-child{margin-left:0;}​
    HTML
    HTML Code:
    <ul id="test">
        <li>Hello</li>
        <li>Hihi</li>
        <li>whatsup</li>
    </ul>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    #test li{background:url('http://www.dummyimage.com/100/000/fff') no-repeat 0 0;max-width:30%;width:100%;max-height:30%;height:100%;float:left;margin-left:1px;}


    You have, what I would call, some logical conflicts here. if the MAX the height can be is 30% , how can you then declare the height to be 100%. This is what is probably causing the problem.

  3. #3
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, yeah i thought that was out, basically i was following what i had written for max-width. Taking max-height out however doesnt improve my problem at all?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Well the other issue is height:100% ; ( on both the UL/LIs).

    There is no % height calculation in CSS. In other words, if the UL was , say height:500px you'd see the height: some%; work. In other words for a child element , other than HTML/BODY to receive % height, the parent has to have an explicitly declared "height:" and no, min-height doesn't count as declaring "height"
    . That being said your content will be the height f the content text.


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
  •