SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How is the page layout coded please? Absolute Positioning?

    Hello,

    I came across this website and I have don't all the dissecting and probing to see how this layout was coded. My very first impression was "Absolute Positioning", I wonder if anyone can have a look share their thoughts. The part of the page that I am curious about are the:

    1. Logo Div
    2. Content Div

    Here is the live link to the site: http://theblue.hyatt.com/en/hotel/home.html

    Thank you for all your help.

    hyatt.jpg
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You can look under the hood with the browser's developer tools to see what's going on. It's a great way to learn.

    1. Logo Div
    Yes, that's position: absolute;, but inside an empty div that is centered, set to position: relative and has a width of 980px.

    2. Content Div
    That's pretty much a standard, centered content div with a set width.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post



    That's pretty much a standard, centered content div with a set width.
    ... and dragged on top of the slideshow with a negative top margin.
    Code:
    #mainContent {
        background: #FFFFFF;
        margin-top: -78px;
        position: relative;
        width: 842px;
    }


Tags for this Thread

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
  •