SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone please tell me the details of this layout

    Hello,

    The details of this layout is quite simple but yet i dont understand it that well.

    To me it looks like they have a div for the top background which is 100%
    then it looks like they have managed to get a width on the page somehow
    then it look like the jeanette thomas is floated to the right
    and that the menu is floated to the left;

    Can someone please give me details on the site layout?
    Im not sure about this layout.

    http://www.nbm.com.au/concepts/jeanettethomas/home.html
    Ben

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

    Looks pretty straight forward to me.

    The 100% background is a repeated image along the x-axis of the body element for the black part with a background color for the rest of the page.

    Then the rest is just a centred wrapper of 900px width and centred in the usual way with auto margins etc.

    Inside that wrapper the elements can be floated and placed as needed.

    The left column (login etc) is probably a background image repeated on a container that holds the left and right columns to give an equal column effect. The columns would just be floated left and right.

    The structure is pretty straight forward and shouldn't take more than 30 minutes to do (the structure that is).

    I'm not really sure what you thought the problem was or am I looking at the wrong thing

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there paul,

    Do you think you could whip up a template that matches that kind of basic layout.
    It would be most appreciated.

    Ben

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgive me if I sound grouchy, but I think Paul has given you enough information to do it by yourself.

    Why don't you have a go yourself and then re-post here if you run into any problems?
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

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

    Here's a quick mock up using different colours.

    http://www.pmob.co.uk/temp/template-alpha.htm

    View source as the css is all in the head.


    The left column is an image repeated on #outer. The top strip is an image repeated on the body. The rest is straight forward.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,354
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Tailslide
    Forgive me if I sound grouchy, but I think Paul has given you enough information to do it by yourself.
    lol - I was about to say that but then I relented

    Alpha_a1 - Tailslide is right though and you should really have a go yourself and then ask when you get stuck.

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello Paul,

    Thankyou so much for that. There were some things i couldnt get my head around.
    How you could get content to appear over in the other boxes by using <p></p>
    eg. Logo goes here.
    You see im trying to center some h1 text inside the black box but when ever i put it inside the <p></p> it makes a new line. I know that h1 is a block element so i set the h1 to display inline and it still doesnt work, it makes a new line.

    ive also looked at the
    <div id="flash">
    <h2>Sub header</h2>
    <p>Some picture</p>

    part and the some picture sits in the other box as well. As far i remember the P is floated to the right.

    Ive read some books on css but i havent come how you can float them to the right and they magically appear in a new box. can you explain it to me?


    Ben

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,354
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    How you could get content to appear over in the other boxes by using <p></p>
    eg. Logo goes here.
    You need to read up a bit on floats to understand the concept. All you do is float the element in the direction you want and it will allow the content that follows to wrap alongside. You could float elements left and right also and as long as their widths are correct they will also line up alongside.

    The flash section just contains floats that are left and right. It makes no difference what the element is. I just used h2 and a p element because that was a logical choice but if you want more content inside you would change those to divs and then stack your content inside.

    The header section was an h1 but if you want to add more content then change it to a div and float it left with the correct width. You can then centre text horizontally by just using text-align:center. I set the line-height to the height of the element to centre the line vertically but if you want more than one line you would need to remove that line-height setting.

    Read up on floats (there are more tutorials on google) and read the faq on floats for a list of bugs and clearing issues.

    It seems that you need to do a little bit of homework before you can progress with this as you do need to get a grasp of the concept.

    Just play around with the code I gave you and try things out and see what effect they have.

    I know that h1 is a block element so i set the h1 to display inline and it still doesnt work, it makes a new line.
    The h1 is a block element and setting it to display:inline makes the h1 display as an inline box. However the p element is also block level and will start on a new line. You would have to make both the p element and the h1 element display:inline before they would sit on the same line. Or alternatively float them side by side.

    Hope that helps.


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
  •