Got my first web-design job, And I'm in a little over my head (help!)

Geez, Steam, sorry everyone's yelling at you every which way. My turn : )

First,
Your teacher apparently did not bother explaining positioning at all. Absolute positioning for large chunks of pages is almost guarenteed to break somewhere on someone. Of course things will overlap with position: absolute. Position: absolute basically takes that element out of the document flow-- the page cannot see the element, and the element cannot see the page. They are sortof floating above the page (not to be confused with floats, but that's closer to the truth as absolutely positioned things naturally get a higher z-index on the page). Thus, things can easily sit over each other because they are blind to each other.

Position:static should almost never end up in code. Why? It's the default for everything. You only ever need to say it explicitly is if you positioned something for another browser (doing the CSS signatures trick to send something to IE6 for example) and need to re-set that element before further positioning. Best example would be with the negative-margin wrapping sidebar that you see at layout gala-- the links in such a sidebar aren't clickable in Safari or FF if earlier the sidebar was told position: absolute first (I have one page that did one of those).

I'll be the first to call bs on this (sorry). XHTML is not the future that was promised us, thanks in part to Microsoft. There is actually NO reason (other than coin flipping, familiarity, or just the weather outside) to be using XHTML. It has ZERO benefit. Use XHTML1.0 if you want (I do now and then, on a whim) but you're still serving it as text/html so it's NOT real XHTML. Absolutely not. And XHTML1.1 should NEVER be used unless your page is actually an XML with HTML document. XHTML1.1 is REQUIRED to be sent from the server as "application xml+xhtml" which wouldn't be an issue except Microsoft has decided not to support that (not even for IE8). (To open such a page, MS will try to go get Firefox to open it for you : )

If the teacher is teaching XHTML1.0, fine, so long as she is extremely clear about the differences between XHTML1 and HTML4, why one is not better than the other, and possible traps you could write yourself into if you are writing as XHTML believing that the page can be turned to XML later (only if it's parsable through an XML parser while still HTML-- that means no "name" attributes on most things, no "& copy;" style character entities, etc. Since all that is perfectly fine in HTML, you can see it on XHTML pages, but they shouldn't be there). The "extra strictness" of XHTML is appealing to many, which is fine, but you can apply that to HTML4.01 Strict as well. Out of curiousity I've changed doctypes on my pages to XHTML1.1 to send to the validator just to see any other errors that will throw (pages must not only be valid by well-formed for XHTML1.1) and then go back to my real doctype. You can be just as strict with HTML4.01 I can't emphasise that enough!

Bleh, scuse the rant.

voice-family: "\"}\"";
voice-family: inherit;

Code (markup):

Please don't use this. There are better hacks, ones which DON"T SCREAM AT THE BLIND PEOPLE! Heh, this was one of the earliest hacks, but it has been replaced largely with * html (and in general, hacks should be avoided like the plague-- there are really only a few particular issues, with IE6 of course, where you need regular * html hacks).

As far as the page overall, what BlogSalesman and other have said about 3-column floated-sidebar CSS designs is spot on. From the jpg it looks like a really common set-up and I really am curious how your teacher is teaching the classes.

How many classes have you had? What all have you guys already learned? Who does your teacher use as resources? What text editor do you guys use in school?
How many browsers does she have you guys testing in? Hopefully at least the big 5 plus a text browsers like Lynx.

Anyway, the reason stuff scrunches up on browser resize is because the sidebars, being blind, only know where their positioned sides are (you told one 10px from the right and 50px from the top, and told the other 10px from the left) in relation to their nearest positioned parent-- in this case, you might not have one, so it's either the body or the viewport (browser window). So they stay at those distances from the sides-- like you told them. They're being good doggies, yes.

With floats, and a fixed width on the middle part (or a flex width on the middle part, even better), the floats CAN see at least some of the page (their tops and widths are attached to the page still, but their bottoms are floating above other blocks on the page) so they would not be allowed to cover anyone else.

I'm curious how the teacher is explaining floats and positioning. They're not easy subject, and there are lots of web pages trying to explain them (and then other pages just trying to explain IE's bugs with them lawlz), as well as a heap of books, so if you guys have only been doing this stuff for a few months, you're ready to build your own sites, but for learning purposes and not to help out a company at all.

Did I type too much? Blah, end of workday, Friday...

 

I agree no position is needed, if you want a good example look here:
http://www.alistapart.com/d/holygrail/example_3.html

3 Columns, header footer..
Unlike other tutorials the content appears first in the source code.

 

Heh, teh holy grail style : ) However, that does use those floated-wrapped-up-negative-margins sidebars I mentioned. Not sure I'd throw that at a newbie. After deathshadow posted his version of it, it still took me 2 or 3 builds to "get" it, and a bit of playing with it to discover the Safari-FF link-clicking problem (only when the sidebars are positioned like absolutely somewhere earlier in the code).

 

I would have to agree that its rude. I feel bad for the guy. He is obivoulsy just a beginner. We don't all start out as experts. Hell i don't even find myself decently good yet.

 

Well, I did not know his teacher gave him the job, so if anything I would blame the teacher.

I just always put myself in the client's shoes, because I have been screwed on business deals before. You hire someone to do a job and then find out they know nothing?

Sorry for the comment Steam, I thought you had gotten this gig yourself.

 

Thanks a lot guys, i got it working I think at least lol.

And salesman its cool. Everyone has to start somewhere though. I mean shit I have been in webdesign for like 2 classes. I haven't even gotten out of using notepad as how i built the website lol.

Holy shit it worked. I love you guys! lol

 

Here´s a link to testpage i´ve made. Feel free to copy the code and the css from it. Just tweak it to your purpose(looking at your pic i think this should fit you needs)

http://koti.mbnet.fi/thinner/multitest/

The css is here: http://koti.mbnet.fi/thinner/multitest/multi.css

 

i use notepad as my editor, and i dont think ill ever switch, it does exactly what i need. show my text. thats all, and replace/find/goto perfect

 

Never use Absolute Position!!,
Float from left to right using div tags.
I would edit it for you and try and help you if you want?

 

Now, I wouldn't go so far as to say never absolute position, more of, it's a special tool we have to be careful of. But, it's also very useful. Better to say, Never position large chunks of a page absolutely, unless you're doing a setup which required it (fake CSS frames, anyone?). It's great for small things that need to be in a pixel-perfect place in regards to a particular container.

2 classes? Well, building a real site, you'll be learning pretty fast : ) Good luck.