7 replies [Last post]
Kapitol
Offline
Regular
Last seen: 10 years 4 weeks ago
Timezone: GMT-5
Joined: 2007-01-19
Posts: 11
Points: 2

This site was live in 2005. I decided to update the code to a pure CSS layout from an old table layout.

I am new and this is my first post. I hope this is the right spot. I need a second eye on this because I am missing the error in the code. The footer gets destroyed by the rest of layout and I cant find the cause. The CSS is inside of the header still.

http://nate.feitfamily.org/settlers/updated.html

Thanks in advance.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

You've got a major case of

You've got a major case of divitis

Verschwindende wrote:
  • CSS doesn't make pies

Kapitol
Offline
Regular
Last seen: 10 years 4 weeks ago
Timezone: GMT-5
Joined: 2007-01-19
Posts: 11
Points: 2

Thanks

You have gave me a lot to think about. Its kind of funny because 6 months ago when I started every page I made or converted to CSS had divs each one with an absolute position style in it.

I thought I had come so far only to be told that inst the case. Its kind of heart breaking. I had chosen 6 sites to feature in a portfolio and their code all look like the one linked above.

Thanks for the heads up.

portfolio - http://nate.feitfamily.org

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

I know it's hard to hear but

I know it's hard to hear but you're certainly further along the CSS road than a lot of people that post here. Congrats on getting rid of all the AP though, that's often the hardest step.

I'm not saying it's a bad design or you should give up, just that you don't need to wrap every element in a div and style that - there are numerous semantic and structural tags you should be using; heading tags for news headers, lists for lists of links, etc.

See if you can convert a small section of it to use proper tags and we'll help you along your way Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Kapitol wrote:You have gave

Kapitol wrote:
You have gave me a lot to think about. Its kind of funny because 6 months ago when I started every page I made or converted to CSS had divs each one with an absolute position style in it.

I thought I had come so far only to be told that insn't the case. Its kind of heart breaking. I had chosen 6 sites to feature in a portfolio and their code all look like the one linked above.

One thing that may cheer you up is that if you take the time to learn how to code html semantically, using a strict document type, and only applying CSS after your html is pretty well done, you will end up saving yourself a whole lot of time and effort and you will be doing future-proof web pages that won't have to have their html re-coded just to update their look.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Kapitol
Offline
Regular
Last seen: 10 years 4 weeks ago
Timezone: GMT-5
Joined: 2007-01-19
Posts: 11
Points: 2

Updated

I updated that page. Please check it out and rip me a new one if you have the time =P

http://nate.feitfamily.org/settlers/updated.html

Thanks

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi I like the page look and

Hi

I like the page look and feel Smile

The text sizes changes between browsers (FF and IE)

I have found that this is because IE can't do math very well.

If you set the body to font-size:100.1% and then use percentages IE OPERA Safari and Firefox can be made to look the same, but only with judicious use of cascading %ages.

For example, let's say you set the p's to be 85% of the body's 100.1%

IE will be slighlty bigger than the other three browsers. But at 84% they might all be the same.

Next, the 'Mini FAQ with some tips' title appeasr lower in IE. This is undoubtably coz IE messes up adjoining margins. I tend to have to play around with margins to get this right, but always by zeroing them on divs paragraphs and many other elemenst first.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Looking much better code

Looking much better code wise, but you're misusing heading tags.

H1 should only be used once, for a main title (eg your site logo), then use H2, H3, H4 tags as the headings get less important.

View your site with styles disabled, you'll see what I mean.

Verschwindende wrote:
  • CSS doesn't make pies