R/F My first page

HTML & CSS
1

Hi everyone, I just grabbed myself some tutorials on HTML and CSS, and attached to this post is the very first page I hand-coded. Even though they’re valid xhtml strict, css 2.1 and do not use table at all, I think there’s something about my coding that’s quite not right according to the standard.

Any comment and R/F would be really appreciated :slight_smile:

2

Hi metaion. Welcome to SitePoint. :slight_smile:

Looks like a pretty good job. Is there anything in particular you are worried about?

From a quick look, I see you have more divs there than are needed, such as

<div id=“intro”>

and

<div id=“summary”>

3

There are a few things i see that can be improved upon…

  1. You have a DIV element with the id of header then inside that you have another DIV element with the id of logo and inside that the h1 element, to cut down on markup and CSS what you can do is remove the #logo element and just have the H1 element with the bottom margin of 5px.
  2. Your #header element contains an unordered list which has a property of float: left, because your not floating anything before or after the UL element you don’t need the float property. Also on your #header element you will need to add a clear fix to it such as overflow: hidden or visit the following link for my personal preference. CSS clearfix
  3. Currently your #horz_advert and #action elements are DIV’s, they can either be a paragraph or span tag instead or just the IMG tag by itself with an id.

I think that’s pretty much from me as far as i could see, good job bud as you certainly got the know how to continue as a front end web developer.

4

Thanks the warm welcome.

I think there’s something not right about my css. Since after browsing around here looking at people’s codes, they use a lot of different kinds of rules (some of them I don’t even know about, had to do a check) for their works, not just simple margin-padding-floating like I did.

Regarding that paticular case, because there’s a line between the two paragraphs intro and summary that I had to put them in separate divisions and use a bottom/top border. Is there a better way to do it?

Thanks again for your help :slight_smile:

PS: This post is directed at ralph.m since SgtLegend posted when I’m in the middle of typing :stuck_out_tongue:

5

You could just put the line on the paragraph itself, adding bottom margin and padding as necessary. You could either give that P a special class, or even try something like

#intro_data p:first-child {
  margin-bottom: 20px; 
  padding-bottom: 20px; 
  border-bottom: 1px solid #ccc;
}

… or similar. first-child won’t work in all browsers, though.

6

I actually found a JS script that emulates CSS3 pseudo selectors in IE 8 and below and older modern browsers, i have personally used it and love it but in rare cases some scripts conflict with but 99% of the time you can get great results.

Its called selectivizr and you can download it from Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

7

In order for the unordered list to appear in a line (such as when making a horizontal menu), doesn’t it have to be floated left?

8

The main UL element doesn’t need to be float as by default it follows the flow of the page, for your LI elements however you can use the display property with a value of inline-block which works in all browsers except IE 6 & 7 which require just inline as the value. The main issue with floats is unless you clear them the flow of the page can become a real mess and a nightmare to fix which is why i suggested you either use the overflow or .clearfix methods to clear the floats in your navigation.

9

I got it, thanks for the help.

Personally, floating and inline-block, which one do you use to make horizontal menu, assuming compatibility with IE6+ is a must?

10

If you don’t want to end up writing IE specific CSS then float is the way to go but personally i try to avoid floats as i still try to include the IE 6 audience to sites i build.