SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble getting started with appropriate layout

    I'm a relative newbie having recently taken a beginning and intermediate class on XHTML/CSS. My son who is a web designer/developer gave me the page in the attached .pdf file and told me to reproduce it but I'm having trouble getting started with the layout. I want to make it as simple and elegant as I can. Would a header and single container be all that I need for layout or is this a 3-column design? Any help would be greatly appreciated.
    Attached Files Attached Files

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi mungocherry33. Welcome to SitePoint.

    My son who is a web designer/developer gave me the page in the attached .pdf file and told me to reproduce it
    So is this an exam question?

    Probably the way to go here would be to have an outer wrapper that is centered with a white background. Center it with margin: 0 auto (or change the 0 to a value equivalent to the required gap at the top).

    Then have your heading, with perhaps a paragraph below it for the subheading.

    Then perhaps a content div to hold the rest, with a black border and either a big margin around the outside or have this centered with margin: 0 auto once again. Also give it padding to keep the text away from the border.

    Inside that content div you might have an h2 with left padding for the image to sit as a background image, or just set the image inside the h2 text.

    Actually, on seconds thoughts (I'm thinking aloud here), since the image is hard up against the border, it might be better to position it absolutely in the top left corner (giving the container position: relative as well) and then give the header text a big left margin to stop it overlapping that image.

    The "Learn more" para will just have a special class and a black background.

    Finally, the buttons at the bottom could just be three floated paragraphs.

    Anyhow, that;s one way to approach it.

    Then you have your paragraphs underneath.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mungocherry33 View Post
    I'm a relative newbie having recently taken a beginning and intermediate class on XHTML/CSS. My son who is a web designer/developer gave me the page in the attached .pdf file and told me to reproduce it but I'm having trouble getting started with the layout. I want to make it as simple and elegant as I can. Would a header and single container be all that I need for layout or is this a 3-column design? Any help would be greatly appreciated.
    Just out of curiosity, what advice on the layout did your son give you?

    I see it is as basically a single column with a series of block level elements some of which will have floated elements withn them.

  4. #4
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m!. I could envision several ways to do it but I wanted to make sure I did it in one of the simplest ways possible. My son used Dreamweaver, (this project was for his brother), but the code that was generated was a huge amount, and I thought there must be simpler ways for sure. He gave it to me just as a learning example. What about putting that top part in a header, as the logo and text are an all-in-one gif. IIRC?

    webdev1958, my son gave me no hints.

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to you too webdev1958 for your input. That was one of the ways I thought about approaching it. Just getting the ball rolling has been the toughest part.

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My son used Dreamweaver, (this project was for his brother), but the code that was generated was a huge amount, and I thought there must be simpler ways for sure.
    I'm sure there must be as well.

    A lot of people use Dreamweaver (and other wysiwyg editors) and like other wysiwyg editors the code it generates is extremely likely to be bloated and much less likely to be W3C Standards compliant.

    Post the code you have so far and we can try to help you.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mungocherry33 View Post
    used Dreamweaver ... but the code that was generated was a huge amount, and I thought there must be simpler ways for sure.
    For sure. One grave downside of auto-generated code like that is that it's usually bloated and inefficient. Much better to hand code if you can.

    What about putting that top part in a header, as the logo and text are an all-in-one gif.
    Hm, you can, but make sure there is a text alternative. Never include important text in an image only, as some people (blind ones, for example) won't be able to access it. (And before you consider flipping the bird at blind users, remember that Google is one of those, too. )

    A common method for including image and text is called "image replacement". Here is an example of it:
    http://www.pmob.co.uk/temp/headerreplacement2.htm
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again guys for all your help. I'm going to have to put this project on the back burner for a little while as I had an uncle die recently.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Sorry to hear that, mungocherry33. Best wishes, and feel free to post back when you are ready.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the sentiments. I'm finding I'm still adversely affected, because he was my favorite uncle and the one I was closest to.

    Greg


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
  •