SitePoint Sponsor

User Tag List

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

    content resizes to window size (was in css & javascript forum)

    I've seen this done in a few different places where the background image resizes to fit the window...I'm wondering if there is a way for this to work for the entire page of a portfolio site so the header, main image and footer always fit on the page...hope that makes sense.

    Obviously there would need to be a minimum height, but what I need is for the height to fit the users window size so there is no scrolling...

    The site I'm creating won't have a background image, but that is the only way I have seen it done so far.

    Paul from the Javascript forum suggested checking in here for about achieving 100% height.

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

    It depends on exactly what dynamics you need.

    You obviously can't have a site that fits all windows without scaling all the elements and that would be silly anyway.

    If you just want a background that fills the viewport height then you are probably looking at a sticky footer effect. You can read up on it in the CSS faq (see link in my sig - there is also a faq on 100% height you may find useful).

    If on the other hand you want a header and footer always fixed to the top and bottom of the viewport then you are looking at fixed positioning which is something different again.

    We'd need to see a picture of your design and what you would expect to happen to the layout at various sizes.

    Suffice to say that usually doing none of the above is the best approach and content should dictate what the page looks like Just let it flow and adjust to screen sizes automatically. Everyone expects to scroll vertically so there is no need to avoid this.

  3. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    Unfortunately my photographer clients prefer sites that do not scroll vertically. My latest client is asking if it is possible to have everything (header, footer, content) adjust to the users window height...I'm still trying to determine if he is just concerned with the home page or if this is something he would like on all pages.

    The site I am creating will not have a background image...you are welcome to take a look at the current pages at Wegle Photography

    Since this is not my first client to express concern about scrolling I figured it is best to start looking into options other than designing to a 600px max height.

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

    You could certainly use media queries to swap background images for smaller background images depending on the sites width and height. It would be a little awkward to change any foreground images without using scripting of some sort.

    Here's some links that show media queries in action.

    Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks
    CSS3 Media Queries and creating adaptive layouts - Robert's talk
    CSS3: Media Queries: width and height // Think Vitamin Membership

    Media queries don't work in ie8 and under though and you;d have to supplement it with some js for IE8 and under.

    You can scale images with css but the results aren't generally that good and do depend on the image used.

    CSS Proportional Image Scale - CSS Tutorials - hasLayout.net by Zoffix Znet

    Or you could use javascript as in this example.

    jquery.imagefit: JavaScript to proportionally scale images to fit

    If your clients don't like scrolling then perhaps they can show you a site that performs the way they want. It seems that they are looking for something like a flash site instead.

    I'd be inclined to use a fixed header and footer and then use either javascript scaling or css scaling to scale the image within the remaining space. The image quality may suffer though.

  5. #5
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    The javascript/jquery link you provided looks like it might be what I want.

    I think I may have miss worded what I am looking for, but just to be extremely clear...there is no background image on the site I am creating...I was just using it as an example!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Given a standard three-level vertical split of header/content/footer, is it possible for CSS to to give the content a flexible vertical height, so that the footer always remains at the bottom of the page?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You can do something like this with css only. It really needs tidying up and tying into that javsascript resize routine I posted earlier.

    I assume this was the sort of think that was required?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Here was my attempt at adding a little js to resize the image but needs Paul W's magic touch as I don't think the logic is sound (and of course needs to be made to work on multiple images and not just the one image).

  9. #9
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes this is exactly what I have been thinking of!!! Thank you.

    Now to see if I can get it to work with my site.

  10. #10
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, hopefully one last question...I've got everything working except for the right side border...I'm not sure why it is not coming up? Any suggestions?

    Wegle Photography

  11. #11
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the fix for the border.

    As I'm continuing to play with this I'm wondering if it really is the right thing as it doesn't seem like the image is resizing so much as the footer is covering it up...not really what I'm after, I want to see the whole image.

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

    The border makes the image too big and the bottom of the image is being hidden by the overflow:hidden anyway.

    I've added a border to my example but you need to keep the same format.

    The new version is here.

    The element with class="x" is the trick that vertically aligns the image and cannot be omitted.

    The page will work without javascript but the image won't scale as nicely. The js checks if the height is too tall abd if so makes sure the width of the image doesn't keep getting any wider.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mieche View Post
    I found the fix for the border.

    As I'm continuing to play with this I'm wondering if it really is the right thing as it doesn't seem like the image is resizing so much as the footer is covering it up...not really what I'm after, I want to see the whole image.
    Yes that's because you omitted the important bits from my routine and basically you are just hiding the image whereas mine is being scaled within limits and vertically centred.

    See my above demo for the latest code.

  14. #14
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul I really appreciate all your help, but I still cannot seem to get this working. I have added the javascript and the x class, but still no bueno. Does the fact that this site is in wordpress make any difference?

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Here was my attempt at adding a little js to resize the image but needs Paul W's magic touch as I don't think the logic is sound (and of course needs to be made to work on multiple images and not just the one image).
    It it was in a code review there would be a few improvements to make there, but the logic of what's happening does appear to be sound.

    In light of the recent comment from the OP, I'll see if the good folks in the Wordpress forum have anything to add.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the move Paul W...I appreciate all the help and hard work both of you have given me on this situation. I didn't realize there was a wordpress forum, hooray!

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

    Yes I've no idea how you will implement this in wordpress but you do need to maintain the structure I've given.

    specifically this section.

    Code:
    <div id="outer"> 	<div class="content"><b class="x"></b><img  id="theImage" class="test" title="Audi A3" src="images/carscale.jpg" alt=""/></div> </div>
    If you nest extra elements or don't keep the b element next to the image then you break the structure. As soon as you nest another element you break the routines because there is no longer any height to work with.

    You need to strip away everything that is not needed and end up with a structure as in my example above which shows that it will work once everything is in the right place.

    #outer contains the available space between footer and image and the class="x" must be 100% height of this space because it then forces the image to vertical-align within that space. (See here for the details of the technique).

    If you add extra nested elements inside then you break that relationship and nothing will align.

  18. #18
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B...thanks again for all your help, but unfortunately I can't change the structure of wordpress so hopefully someone here will be able to help.

    I'm using Thematic framework with a child theme for my customizations.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,525
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you post the minimum html that you have to work with I'll see if it's possible to fit what's needed into your structure.

  20. #20
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ugh...I'm headed to redesign. Thank you so much for the help, I truly, truly appreciate it. Hopefully after redesign the client won't be throwing any other curveballs my way.


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
  •