View Full Version : First CSS site - Very Messed Up

02-03-2005, 03:43 PM
Please check it out and let me know why I suck...

http://www.theprojectband.net/index1.htm - (I realize that my nave link for home isn't working because I've got a construction page up as index.html that I didn't want to remove yet.)



Thanks for looking...


02-03-2005, 03:59 PM
Do you have any specific questions, or is this supposed to be a review?
If so, it needs to be moved to the "Site review" forum.

Please let us know if you want your site to be reviewed; if so, DO NOT cross-post, but wait 'till a moderator moves it to the appropriate forum.

Quick observation: ouch!!! :eek: How much saturated red can anyone use on one page?!!

02-03-2005, 04:08 PM
No it's not a review submission... I'm very concerned about my layout. I've spent about 15 hours the past 3 nights trying to learn CSS layout to avoid using tables.

I used HyperText on a mac to code and in the validation window everything looks fine. I've uploaded and Both Firefox and Safario show the tables all squished up... the navigation isn't visible....1/2's of paragraphs arent even showing.

I'm asking for help....

If I wanted a review I'd say... Please let me know what you think... I'll be completely changing color scheme and images as that's the least of my concern at the moment... I'm more worried about presenting information in an organized fashion.

02-03-2005, 04:28 PM
As far as the css, you're on the right track. But without a DOCTYPE, and cleaning up the html, the way your site displays will be hit or miss.

The way some of your <p> tags are nested is out of order and is likely causing problems too.

Where your floated containers are breaking through the bottom of the parent container you need to add an element to clear the float. So:

<div id="parent">
<div style="float:right;">
<div style="clear:both;"><!-- --></div>

You may want to set clear to right or left depending on the context.

02-03-2005, 04:36 PM
Ah, okay.

I only have IE6.0/win available here, in that everything sort of looks okay.
I'd start with adding a valid doctype, since a number of browsers tend to use this to assert what rendering mode to chose.
Furthermore, mark up the menu list properly, with ul start and end tags (<ul> ... </ul>). You could place these inside the "nav" div, or replace the div by the ul altogether (you then need to adjust your style rules, though). You could give this one a fixed width, too.

Since you aim for a fixed width layout, make sure all you main layout blocks have a set width. In this case I think the body element will do as container so you shouldn't have to envelop the whole lot in a container on its own.

The center element is deprecated and should really not be used; center elements using CSS. The normal technique for fixed width elements would be to set left and right margin to "auto".

02-03-2005, 04:41 PM
Thanks very much for your help guys. For some reason most of the layout tutorials haven't really "struck a chord" with me so I'm wandering around a bit aimlessly.

I appreciate the help.


02-03-2005, 04:49 PM
No problem...

Again, be sure to start with the appropriate DOCTYPE and validate as you make changes to your page. If your html is valid it will give you a better foundation for the css to make things look as intended.


02-03-2005, 04:50 PM
I added the <ul>...</ul> tags and that took care of the nav bar.

I added <div style="clear:both;"><!-- --></div> under my last content block in the body part of my page under the last <div> and that helped as well.

Just a question... what does the clear property do? This is the first I've seen of it...

02-03-2005, 04:51 PM
This DOCTYPE would be the same as the default on any html page... right?

as in I can open dreamweaver and copy the one it puts in the page?

Sorry for the ignorance as I've never realized it was a big deal...so never paid much mind..

02-03-2005, 04:52 PM
This is my favorite for comprehensive examples: http://css.maxdesign.com.au/floatutorial/

02-03-2005, 05:01 PM
The doctype declaration depends on which "flavor" of HTML your page is marked up in: HTML 4.01 strict, transitional or frames, XHTML 1.0 strict, transitional or frames, XHTML 1.1... Judging by your markup, HTML 4.01 strict sounds okay, although with some minor changes you could make it validate as XHTML 1.0 strict (which is basically the same, only with stricter syntax rules).

A proper doctype declaration would be:

"http://www.w3.org/TR/html4/strict.dtd"> (Note that the HTML should be in the same case as your html element).

02-03-2005, 05:21 PM
I've checked things out after putting in the:


and in safari my (block with the picture located in the body) is reaching outside of my main body. In Mozilla it still looks exactly like it did when i started this post..

Any ideas?