Edited by superfireydave, 25 October 2012 - 07:22 PM.
Building a Website (v2)
Posted 04 February 2011 - 01:17 AM
Posted 04 February 2011 - 11:51 AM
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!
Posted 04 February 2011 - 12:09 PM
Posted 13 June 2011 - 05:26 PM
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.
PC Specs: ASUS P7P55D-E Deluxe | i7 860 | R9 390 | Corsair TX-750W | 4GB G-Skill Ripjaws + 8GB Corsair Dominator | Antec 902 Case | ASUS MG279Q IPS Freesync Monitor
My momma always said I was special.
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"> </div> </div> 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.
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.
Posted 15 June 2011 - 01:17 PM
Example is using the HTML 5 doc type so...
- Instead of using <div class="section"> and <div id="header"> use <section> and <header>.
Except in HTML 5 when you should use the <nav> and <menu> tags.
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.
For placing example images may I recommend placekitten.com or dummyimage.com.
Other recommended links:
Edited by SledgY, 15 June 2011 - 01:38 PM.
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users