Jump to content


Building a Website (v2)

  • Please log in to reply
8 replies to this topic

#1 superfireydave


    Apple Strudel

  • Atomican
  • 11,107 posts

Posted 03 February 2011 - 05:11 PM


Edited by superfireydave, 25 October 2012 - 07:22 PM.

#2 Brock



  • Atomican
  • 2,591 posts

Posted 03 February 2011 - 06:53 PM

Noice. Thanks a bunch for this!

#3 Girvo



  • Hero
  • 20,557 posts

Posted 04 February 2011 - 01:17 AM

Solid effort man :)

#4 Brock



  • Atomican
  • 2,591 posts

Posted 04 February 2011 - 11:51 AM

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!

#5 superfireydave


    Apple Strudel

  • Atomican
  • 11,107 posts

Posted 04 February 2011 - 12:09 PM

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 :))

#6 Brock



  • Atomican
  • 2,591 posts

Posted 04 February 2011 - 12:19 PM

Awesome :)

#7 Mr.Twinkie



  • Atomican
  • 3,247 posts
  • Gender:Male
  • Location:Check your windows....
  • Interests:Being special. My momma always said I was special.

Posted 13 June 2011 - 05:26 PM

Thank you for your work.

The finished page should look like this one: http://www.davidluml...d_css_tutorial/
You can download the images and the empty html/css files here: http://www.davidluml...orial_empty.zip
Or the final html/css files with images here: http://www.davidluml...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, 13 June 2011 - 05:36 PM.

"Ignorance is a luxury that you cannot afford"


#8 Redhatter


    Apple Strudel

  • Hero
  • 9,300 posts

Posted 15 June 2011 - 08:25 AM

<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 &lt;img&gt; :-) Otherwise, good tutorial.

Stuart Longland (aka Redhatter, VK4MSL) I haven't lost my mind, it's backed up on a tape somewhere...

No longer active on these forums, see http://stuartl.longlandclan.yi.org/ for contact details.

#9 SledgY



  • Atomican
  • 917 posts

Posted 15 June 2011 - 01:17 PM

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, 15 June 2011 - 01:38 PM.

poweredbypenguins.org - SledgY lives in the cloud...

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users