Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
Building a Website (v2)
superfireydave
post Feb 3 2011, 05:11 PM
Post #1
Atomican
Guru




~removed~

This post has been edited by superfireydave: Oct 25 2012, 07:22 PM
Go to the top of the page
 
+Quote Post
Brock
post Feb 3 2011, 06:53 PM
Post #2
Atomican
Overlord




Noice. Thanks a bunch for this!
Go to the top of the page
 
+Quote Post
Girvo
post Feb 4 2011, 01:17 AM
Post #3
Hero
Titan




Solid effort man :)


--------------------
brains: NO U R RONG N00B VISTA IS 4 N00BZ N LINUX IS HIPPIE SHIT
Go to the top of the page
 
+Quote Post
Brock
post Feb 4 2011, 11:51 AM
Post #4
Atomican
Overlord




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!
Go to the top of the page
 
+Quote Post
superfireydave
post Feb 4 2011, 12:09 PM
Post #5
Atomican
Guru




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 :))
Go to the top of the page
 
+Quote Post
Brock
post Feb 4 2011, 12:19 PM
Post #6
Atomican
Overlord




Awesome :)
Go to the top of the page
 
+Quote Post
Mr.Twinkie
post Jun 13 2011, 05:26 PM
Post #7
Atomican
Overlord




Thank you for your work.

QUOTE
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!

This post has been edited by Mr.Twinkie: Jun 13 2011, 05:36 PM


--------------------
"Ignorance is a luxury that you cannot afford"

If you know you can do better, you will do better.
And where there's a will, there's a way and you can always find the way....
Go to the top of the page
 
+Quote Post
Redhatter
post Jun 15 2011, 08:25 AM
Post #8
Hero
Guru




QUOTE (superfireydave @ Feb 3 2011, 05:11 PM) *
CODE
<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 &lt;img&gt; :-) Otherwise, good tutorial.


--------------------
Stuart Longland (aka Redhatter, VK4MSL)
Resident Gentoo developer.

http://dev.gentoo.org/~redhatter/

I haven't lost my mind, it's backed up on a tape somewhere...
Go to the top of the page
 
+Quote Post
SledgY
post Jun 15 2011, 01:17 PM
Post #9
Atomican
Master




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>.
  • QUOTE
    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:

This post has been edited by SledgY: Jun 15 2011, 01:38 PM


--------------------
poweredbypenguins.org - SledgY lives in the cloud...
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



Lo-Fi Version Time is now: 25th April 2014 - 02:27 AM