SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 36 of 36
  1. #26
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, so basically it's putting a . below the #container div to drag it round the content, then hiding the . so it doesn't affect the design?

  2. #27
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Yes. Very sneaky, eh?!

    overflow: hidden is much simpler and is widely used, but you discovered why it isn't always appropriate—such as when you want content to hang outside the container. (BTW, sorry for not seeing that coming earlier... I should have checked for that.)

  3. #28
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Indeed - and very handy to know!

    No need to apologise, I would have been stuck without the advice so thanks to you, Paul and Ray for all the help!

    As a side, although I don't need to do that anymore, is there a way to place a background image a set distance from the bottom or the right, as opposed to the top or left?

  4. #29
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tinohead View Post
    is there a way to place a background image a set distance from the bottom or the right, as opposed to the top or left?
    Pretty much yes. The background declaration looks like this:

    Code:
    background: transparent url() scroll repeat 0 0;
    This is the default setting. You can replace "transparent" with a color, such as #ff0000. Inside the brackets you place a path to an image. Instead of scroll you can used fixed. Instead of repeat you can use no-repeat or repeat-y or repeat-x.

    0 0 means 0% from the left and 0% from the top. So if you change that to 100% 100%, for example, the image will sit at the bottom right, or if you use 50% 50% the image will be centered (the middle of the top of the image aligns with the middle of the container's top, and the middle of the side of the image aligns with the middle of the side of the container). You can also use words like top center, or other values like 10px 40%.

    So you could place the image near the bottom right corner, but you would not be setting a distance "from" the bottom right corner. If using pixels, you would be setting the distance of the image's top left corner from the top left corner of the container. If using % (say 90%) you would be placing the point 90% down or along the image 90% down or along the container.

    Hope that makes some kind of sense.

  5. #30
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Ralph and yes that does make sense - but am I right in saying that it wouldn't work in a fluid layout, i.e. one where it would always be a fixed distance from the bottom (say 100px).

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,529
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Tinohead View Post
    Thanks for the reply Ralph and yes that does make sense - but am I right in saying that it wouldn't work in a fluid layout, i.e. one where it would always be a fixed distance from the bottom (say 100px).
    You can't place a background image at 100px from the bottom but you could place it at 90% form the top as Ralph suggested. It will work just the same in a fluid layout as a fixed one and will keep at the position you set.

    You could add 100px of transparent image to the bottom of the background image itself and then place it at 100% and that would give you the effect of being at 100px from the bottom of that element at all times.

  7. #32
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You could add 100px of transparent image to the bottom of the background image itself and then place it at 100% and that would give you the effect of being at 100px from the bottom of that element at all times.
    Oooo, sneaky! That's a nice suggestion. There's always a way to beat the system!

  8. #33
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can't place a background image at 100px from the bottom but you could place it at 90% form the top as Ralph suggested. It will work just the same in a fluid layout as a fixed one and will keep at the position you set.

    You could add 100px of transparent image to the bottom of the background image itself and then place it at 100% and that would give you the effect of being at 100px from the bottom of that element at all times.
    Am I not right in saying though that by using a percentage as a distance, it couldn't be pixel accurate? I.e. rounding of numbers might cause the position to be a pixel out?

    I do like the idea of the transparent gap though - don't know why I never thought of it myself!

    Thanks Paul.

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,529
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Tinohead View Post
    Am I not right in saying though that by using a percentage as a distance, it couldn't be pixel accurate? I.e. rounding of numbers might cause the position to be a pixel out?

    .
    It depends on what element you have it placed in. If the element is a fluid height (as it should be) then 90% of say 1000px height is completely different from 90% of 2000px height. and may be many tens of pixels difference.

    You could only be accurate if your element had a fixed height and worked out what percentage would leave you with a 100px gap

  10. #35
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The girls is being cut off because of the overflow:hidden I added to clear the floats. When you need visible overflow you will need to use another clearing method so try this. <snip Aslett's clearfix method>
    Paul, wouldn't it have been simpler to replace {overflow: hidden;} with {display: table;}? I didn't test this page, but since there's a declared width, there's no worry about shrink-wrapping, and IE6/7 is covered by the width being a hasLayout trigger.

    edit: Never mind. I forgot the purpose was to allow for an overflow condition which {display: table;} would not allow. My bad. :head hung in shame: ⇐ where's a 'head hung in shame' icon?


    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,529
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gary.turner View Post
    edit: Never mind. I forgot the purpose was to allow for an overflow condition which {display: table;} would not allow. My bad. :head hung in shame: ⇐ where's a 'head hung in shame' icon?

    lol - If I remember correctly the element that was overflowing was being placed there absolutely so Firefox would have baulked at the position:relative and display:table anyway.

    If the element was overflowing by negative margins then display:table would have been ok so it was a fair suggestion

    display table doesn't hide overflow by default but it will stretch to accommodate an element that is too big and therefore there wouldn't be any overflow.

    I had to run tests to check all those - just to be sure


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
  •