SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 84
  1. #51
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ahve just changed it to use a class of last as it for some reason, just sounds better.

    I have used the settings as suggested by you, width of 29%, and the same margins. Doing it like this, I get more of a gap between the boxes and the right hand edge of the main content box than the equivalent gap at the left hand edge?

  2. #52
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    text-align: center for #container makes sure you have an equal gap both left and right edges. using 29% will just make them bigger, but still equal. i used 29% and 1% as a safety measure that the boxes will remain 3 on a row. you can play around with these values as you like. just make sure that the sum for all divs width on a line + the sum of the margins between them stays below 100%.

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

    I see you've got this sorted with some good advice above

    I have a little trick to share anyway because this is a common problem. When you have a sequence of elements and you apply a margin-right to them to separate them but you don't want to add a class to the far right element every time then you can often (depending on situation) use this little trick.

    Apply a left margin to the elements instead to create the gap but then simply move the main parent back to the left with a negative margin to offset this difference. This negates the first offset and allows the elements to sit where you wanted.

    Usually you can do this without changing the html as in your example.

    Code:
    #cmembers {margin-left:-2%}
    #cmembers div {
        border: 1px solid black;
        width: 44%;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        margin-bottom: 1em;
        padding: .8em;
        background: #C6D7E9;
        background: rgba(255, 255, 255, 0.5);
        display:inline-block;
        margin-left:2%;
    }
    * html #cmembers div{display:inline}
    *+html #cmembers div{display:inline}
    Code:
    <section id="cmembers">
                <div>Peter f</div>
                <div>Tom f</div>
                <div>Claire f</div>
                <div>Mark f</div>
                <div>Richard f</div>
            </section>
    Of course if you are good with php then adding a class is no problem anyway

  4. #54
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very clever trick

    but this will work only if some styling like backgrounds, borders are not applied to the parent or its children in a way it'll show an ugly odd positioning contras something like the children stepping out from the left side of their parent.

    ps: i've edited my post "a little" after Paul O'B replied, to make it more clear about what i mean.

  5. #55
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    very clever trick

    but this will work only if borders are not to be set for the parent
    Yes it's only useful in certain situations and if you have to add extra elements to use it then it's not always the best method. It's just useful for those occasions when you don't have to change mark up to use it.

    We could use css3 to style every second element to have no margin also.

    Code:
    #cmembers div:nth-of-type(even){margin-right:0}
    However it's not much use until support is better for it and of course would have to be changed if three columns were needed

  6. #56
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, I will go and have a play about with your solution Paul, Thanks for that.

    One thing I want to ask is:

    What are the "*" and "+" doing at the strat of the CSS statements on these lines?

    * html #cmembers div{display:inline}
    *+html #cmembers div{display:inline}

  7. #57
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post
    Right, I will go and have a play about with your solution Paul, Thanks for that.

    One thing I want to ask is:

    What are the "*" and "+" doing at the strat of the CSS statements on these lines?

    * html #cmembers div{display:inline}
    *+html #cmembers div{display:inline}

    The "* html" is the star selector hack which supplies styles to only IE6 and is used to pass the value display:inline to only IE6 (because that will make it behave as inline-block when it has been set to haslayout mode in a separate previous rule).

    The "*+html" rule makes use of a similar parsing bug but this time only IE7 will get the rules.

    The rules cannot be combined and must remain separate and following the original declarations to work. The code is 100% valid but makes use of a broken parser in ie6 and 7.

  8. #58
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, I have an issue:

    Here is my code:

    #cmembers div
    {
    border: 1px solid black;
    width: 29&#37;;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    margin-bottom: 1%;
    padding: .8em;

    background: #C6D7E9;
    background: rgba(255, 255, 255, 0.5);

    display: inline-block;
    margin-right: 1%;

    }

    .last
    {
    margin-right: 0%;
    }

    It seems to me that the .last, margin-right: 0%; is not being acted upon as when I put that in and test it, the page looks no different than when it is removed.

    It's not online yet, still running locally at the moment.

    Another thing: If I put text-align: center; on #container, it centres everything, even on other pages which is NOT what I am aiming for. I added text-align: center; to 'cmembers and, that made the box that was on the bottom row on it's own move to the middle instead of stay on the left under the first column of boxes as it should be.

    Any ideas?

  9. #59
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, put the page online

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

    Code:
    #cmembers div {}
    #cmembers div.last{ .....these rules will win out now }
    You need to apply the rule with equal weight (if later in the source) or greater weight if earlier in the source.

    Regading the centering then I'm not sure what you are trying to center as you have two columns already equally spaced. If you want the text in the divs centred then apply text-align:center to the div.

  11. #61
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, Site is uploaded at log.neiltonge.co.uk/comittee.php

    Can you give me a hand. I'm getting a little confused. I really do appreciate the help you are all giving.

    Thanks

    Neil

  12. #62
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #cmembers div.last {
    color:blue;
    margin-right:0;
    }
    as Paul O'B said, i see you have good specificity and the rules is obeyed, as you can see from the box model here:


    as for the other part: if you want those to be centered as a whole, but columns aligned, but you don't want #cmembers involved, you could put a wrapper in a wrapper in #cmembers and have text-align:center for the outer and text-align:left for the inner one.

  13. #63
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, yeh, that bit is working but how do I make the boxes extend from where they are now on the left to the edge of the red area at the right?

  14. #64
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post
    Ok, yeh, that bit is working but how do I make the boxes extend from where they are now on the left to the edge of the red area at the right?
    Isn't that what the 2% right margin was for or am I missing something ?

    Code:
    #cmembers div
    {
    border: 1px solid black;
    width: 29%;
    
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    
    margin-bottom: 1%;
    padding: .8em;
    
    background: #C6D7E9;
    background: rgba(255, 255, 255, 0.5);
    
    display: inline-block;
    margin-right: 2%;
    
    }
    Or did you mean something else?

  15. #65
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh jees, yes, Just added 2&#37; instead of 1% and it lines up perfectly. Now, how do I fix it in IE6 and IE7?

  16. #66
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #cmembers div
    {
    border: 1px solid black;
    width: 29&#37;;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    margin-bottom: 1%;
    padding: .8em;

    background: #C6D7E9;
    background: rgba(255, 255, 255, 0.5);

    display: inline-block;
    margin-right: 2%;

    zoom: 1;
    *display: inline;

    }

  17. #67
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, can't get that to work in IE6 or 7.

    One thing I want to know, is how did you know that 29&#37; * 3 plus 2% * 2 plus 0.8em * 6 is equal to 100%?

  18. #68
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    easy: 30&#37; * 3 plus 2% * 2 plus 0.8em * 6 was not cutting it

  19. #69
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, but how do you know:

    1.) How many percent is equal to 1em?

    2.) That those widths and dimensions would fit perfectly with the same gap at both the left and right hand side?

    Sorry, I'm just trying to get this straight in my head. :-)

  20. #70
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #cmembers div
    {
    border: 1px solid black;
    width: 29&#37;;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    margin-bottom: 1%;
    padding: .8em;

    background: #C6D7E9;
    background: rgba(255, 255, 255, 0.5);

    display: inline-block;
    margin-right: 2%;
    }

    #cmembers div{zoom:1; display:inline}


    basically hasLayout and display:inline work similarly to the standard display:inline-block, and zoom:1 triggers hasLayout in ie. so the two

    zoom:1;
    display: inline;

    should be enough. you need to play a little with it 'till it works using ie targeting hacks Paul O'B told you about

  21. #71
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post
    Nope, can't get that to work in IE6 or 7.

    One thing I want to know, is how did you know that 29% * 3 plus 2% * 2 plus 0.8em * 6 is equal to 100%?
    You are making things quite hard for yourself as you have sized the main container in pixels but then you have divided it using percent. There's nothing wrong with that (apart for the 1px rounding error on percentages in some browsers) but unless uou are going to change the size of the container at some stage then you may as well just use pixels for the inner elements and you will know exactly how wide to make things so that they fit.

    To work out the size in percent and ems you need to do the following.

    main container = 960px width

    main content has 1 em padding - 1 em is equal to the font-size for that element so if the element is font-size 16px then 1em = 16px.

    So that gives us 960 - 32px = 928px available space for your three boxes.

    Your boxes are 29% wide which = 269.12px which will probably round down to 269px (but could be rounded up by some browsers)

    The boxes also have padding and borders so you need to add 2px for the borders and then you have .8em padding. As mentioned before the .8em will be .8 of the parent font-size so .8 of 16px = 12.8px padding (call it 13px)

    So now we have a box size of 269 + 2 + 26px = 297px

    Therefore 3 across would be 297 x 3 = 891px

    928 -892 = 37px of available space left. So to space them out we need half of that = 18.5 (call it 18)

    So the margin-right needs to be 18px

    Instead I would have used pixels for the elements to make life easier. and do this.

    Code:
    #cmembers {
    font-size:0;/* kill white space bug in inline-block elements*/
    }
    #cmembers div {
        border: 1px solid black;
        width: 267px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        margin-bottom: 2%;
        padding: 12px;
        background: #C6D7E9;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        margin-right: 24px;
        font-size:16px;
    }
    * html #cmembers div /*Targets IE6*/ {
        display: inline;
    }
    * + html #cmembers div /*Targets IE7*/ {
        display: inline;
    }
    #cmembers div.last {
        margin-right: 0;
        color: blue;
    }
    I reduced the sizes a little from the original calculations but the maths are as follows.

    (267 + 2 + 24) x 3 = 879

    928 - 879 = 49

    49 / 2 = 24.5

    So elements are 267px wide with 12px padding and 1px borders and a right margin of 24px and fit in all browsers.

  22. #72
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    good math, Paul O'B

    but since OP could later decide about how many columns there are (2 or 3 or 5) these calculations will always be approximate.

    hence,
    Quote Originally Posted by noonnope View Post
    as for the other part: if you want those to be centered as a whole, but columns aligned, but you don't want #cmembers involved, you could put a wrapper in a wrapper in #cmembers and have text-align:center for the outer and text-align:left for the inner one.
    and use &#37; since it easier: 45% for two, 29% for three, etc

  23. #73
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    good math, Paul O'B

    but since OP could later decide about how many columns there are (2 or 3 or 5) these calculations will always be approximate.
    Yes of course

    The main point I was making that when dealing with percentages you just need to add a little more leeway than you should due to rounding errors but at the same time you should know what 2px + 1em + 29% + 2% is going to equal because you can't guess that it will fit.

    Of course if you use an extra wrapper that has no borders or padding then maths are easy and you can add padding and borders to the inner elements instead but I always avoid extra mark up because that is a hack and hacks should remain in the css file where they belong

  24. #74
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    only one thing i would add: using percentages doesn't mean restriction in using only integer values. 28.3&#37; is good also.

    actually two: 2px + 1em + 29% + 2% is the reason i put that much emphasis on the understanding of the box model and how it can help us (all good browsers have developer tools showing you exactly what the calculated box model is and how the rounded one looks like ).

    about the rest: all the way with you... when possible

  25. #75
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    only one thing i would add: using percentages doesn't mean restriction in using only integer values. 28.3% is good also.
    Yes that's fine for all browsers except Opera. Opera doesn't do parts of a percentage unfortunately.

    e.g.This is miles out in opera

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
        width:1000px;
        float:left;
        border:1px solid #000;
    }
    ul {
        margin:0;
        padding:0;
        list-style:none;
    }
    /* 8 x 12.5% = 100% exactly (12.5% should equal 125px) */
    li {
        float:left;
        width:12.5%;
        background:red
    }
    li:nth-of-type(odd) {
     background:green
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <ul>
            <li>example 1</li>
            <li>example 2</li>
            <li>example 3</li>
            <li>example 4</li>
            <li>example 5</li>
            <li>example 6</li>
            <li>example 7</li>
            <li>example 8</li>
        </ul>
    </div>
    </body>
    </html>
    If opera support is needed then best to stick to whole number percentages.


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
  •