Jump to content
Can't remember your login details? Read more... ×

Building a Website (v2)

Recommended Posts

Hey Dave, I have a question!


I noticed that in your background.jpg file you have incorporated the white background for the text content to sit, is there any reason for this? Would it be a better idea to create a separate DIV wrapped around the content boxes, at 760px wide with a white background, center it horizontally, and give it top and bottom margins, so that the height of it can expand if you make extensive changes to the text etc.?


Overall, very helpful tutorial :) helped me understand the box model a lot better!

Share this post

Link to post
Share on other sites

The reason the background is included is that this was designed to be a pretty simple exercise. I didn't want people to have to dick around trying to get the background images lining up.

In this example, the content is fixed, so there's no need to expand it.


However, in a real situation, you'd want to do pretty much what you said. I'll be covering that, and navigation in the second part :))

Share this post

Link to post
Share on other sites

Thank you for your work.


The finished page should look like this one: http://www.davidlumley.com.au/projects/htm...d_css_tutorial/

You can download the images and the empty html/css files here: http://www.davidlumley.com.au/projects/htm...orial_empty.zip

Or the final html/css files with images here: http://www.davidlumley.com.au/projects/htm...al_finished.zip

The links gives you 404 not found. :(


Other then that the info you provided is great helps. Thanks!

Edited by Mr.Twinkie

Share this post

Link to post
Share on other sites

<div class="section">
	<img id="main_image" src="images/image.jpg" width="710" height="160" alt="my first image">
	<div class="box_section">

The width and height attributes of the img tag are fairly self explanatory, but the alt attribute isn't.

The alt attribute is what is shown when the image can't be displayed, and is what gets read aloud to screenreaders. Making sure you give all your images descriptive alt tags is important for accessibility, and will make your site of higher quality to search engines too.

You'll notice we also gave the <img> tag an ID. This is so we can manipulate this particular image later with CSS.

That should be <img> :-) Otherwise, good tutorial.

Share this post

Link to post
Share on other sites

A couple of points:


Example is using the HTML 5 doc type so...

  • Instead of using <div class="section"> and <div id="header"> use <section> and <header>.
  • Use unordered lists (the li tag) for any navigation lists you have (like your primary navigation) because semantically, these are a list of links. As with everything else, you can alter the formatting using CSS.

    Except in HTML 5 when you should use the <nav> and <menu> tags.
Yes older versions of IE will not recognise HTML5 tags but that can be fixed with modernizr.


For placing example images may I recommend placekitten.com or dummyimage.com.


Other recommended links:

Edited by SledgY

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now