mungocherry33 — 2011-11-12T20:50:06-05:00 — #1
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.
ralphm — 2011-11-13T04:00:27-05:00 — #2
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? :lol:
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.
system — 2011-11-13T04:05:04-05:00 — #3
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.
mungocherry33 — 2011-11-13T20:09:25-05:00 — #4
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.
mungocherry33 — 2011-11-13T20:14:43-05:00 — #5
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.
system — 2011-11-13T20:18:27-05:00 — #6
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.
ralphm — 2011-11-13T20:19:47-05:00 — #7
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. :D)
A common method for including image and text is called "image replacement". Here is an example of it:
mungocherry33 — 2011-11-15T18:52:19-05:00 — #8
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.
ralphm — 2011-11-15T20:34:37-05:00 — #9
Sorry to hear that, mungocherry33. Best wishes, and feel free to post back when you are ready.
mungocherry33 — 2011-11-30T16:15:29-05:00 — #10
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.