SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I had some problems need help about CSS!

    This is my site http://thietkewebtopx.com/ . On the home page 3 the box I put class = "list_home". Happened to me is a problem when users zoom in site! Moving box look so bad! I need help. thank you everyone

    This is my CSS
    HTML Code:
    .list_home{
    -moz-transition: all 0.7s ease 0s;
        background: none repeat scroll 0 0 #ECECEC;
        border: 2px solid #DBDBDB;
        display: block;
        float: left;
        margin-left: 13px;
        margin-right: 12px;
        min-height: 305px;
        padding: 10px 29px 10px 10px;
        width: 28%;
    }

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

    It's not quite clear what you mean or what you want to happen exactly. When you say "zoom" do you mean resizing the layout via the browsers zoom function or were you just referring to the window being opened and closed?

    The elements will wrap at small window sizes so you would be better using display:inline-block instead of floats so that they don't snag. Also give them a bottom margin to stay clear.

    e.g. (this code is additional to yours and not a replacement)
    Code:
    .list_home{
    float:none;
    display:inline-block;
    *display:inline;/* ie6/7 hack for inline block*/
    zoom:1.0;
    vertical-align:top;
    margin-bottom:10px;
    min-width:240px;
    }
    I also added a min-width because you are not scaling the images so the images will stick out unless you stop them.

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help!the error that I want to present here is the div tag it moved as early as this http://thietkewebtopx.com/wp-content.../01/error1.jpg
    and I want it in a state like this whenever a motion browser http://thietkewebtopx.com/wp-content.../01/error2.jpg

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,274
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by thietkewebtopx View Post
    Thanks for your help!the error that I want to present here is the div tag it moved as early as this http://thietkewebtopx.com/wp-content.../01/error1.jpg
    and I want it in a state like this whenever a motion browser http://thietkewebtopx.com/wp-content.../01/error2.jpg

    Sorry but I an still unclear as to what you want to happen?

    and I want it in a state like this whenever a motion browser http://thietkewebtopx.com/wp-content.../01/error2.jpg
    That sounds like you want it to wrap at smaller window sizes which is exactly what the code I gave you will do. Try the code I alreadfy gave you and then if that's not what you want we can take it from there.

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your enthusiastic help!


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
  •