Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation A tricky web layout

    Hey guys,

    I need some help with trying to pull of something for a web site. I am not much of a developer, more of a designer. The problem is I have spend half the day trying to figure out how to create a layout that has an image spanned across the whole screen no matter your resolution. But it still needs to be centered no matter what the resolution. Below is a website that shows a perfect example of what i am talking about. Any suggestion as to lead me in the right direction would be a lot of help. I apologize in advance if i have not give enough information as to what i am looking to do. Any help will be greatly appreciated.

    http://www.mayoclinic.com/

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    That page has a div:

    Code:
    <div id="photo" class="photo3"></div>
    with this css:

    Code:
    body.mymayo #photo.photo3 {
        background: url("../img/photo_3_1.jpg") no-repeat scroll center top #FFFFFF;
    }
    body.mymayo #photo {
        height: 400px;
        left: 0;
        position: absolute;
        top: 130px;
        width: 100%;
        z-index: 1;
    }
    So the div spans the width of the viewport, and has a centred background image. It's positioned behind the content by using position:absolute. As this stands, it's a bit odd below about 960px wide, at which point scroll bars kick in and the image is then less wide than the header etc. Adding

    min-width:960px

    would prevent that.

    Firebug is invaluable for looking at this sort of thing.
    Last edited by SB65; 03-09-2012 at 04:53 PM.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much! It works like a charm now. I saw that but i must have missed something because I would not get it to work properly. Thanks for the help.

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Location
    New York, NY
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    firebug being invaluable. . . . yes, but can it do this that chrome can do??

    firebug being invaluable. . . yes, but can it do this that chrome can do??

    bring up mayoclinic.com on chrome
    f12 for developer tools
    Resources
    Expand 'frames folder' -- you should see 'images'. . . . click images.
    now there's a list of all the images for the page on the left.
    and if you click any of them, it will show the image on the right

    dont matter if the image is on some subfolder


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •