This is with an external css file, im still utilizing tables, for now untill I can grasp
the whole positioning thing. Im trying to learn all this while I work at the same time
so my brain is in 3 places at once right now.
There is no other content as of now for this one, but if it appears ok to the masses,
then I will probably run with it.
I feel that the colors are a bit too abrassive. the rest of the layout works, i think.
Now, onto the code:
-No doctype yet. Give it one. Same goes for encoding.
-Ok, what the hell is doing the <body> tag inside a td?!
-There are some quirks here and there over your css, nothing major, but still...wtf?
Example:
You keep declaing your font family everywhere, and all you need would be something like:
code:
body, td, p {font-family: Verdana, Arial, Helvetica, sans-serif; }
The elements over it will be inherited to its child elements. I mean, every little tag (excluding tables and paragraphs) insed the body tags will have automatically sans-serif as its font family. And so on.
'contentmain' is not a tag. Add a little period before it (".contentmain").
Try divs with an absolute position, and keep messin'. Its much better than a table, thats for usre. Its not that hard to understand, trust me, i was in a similar situation than you ( or even worse, in words of dl, "bizarre"), and it took me little to get the hang of positioning.
I think thats all from my side, i hope it helps, it has been a very good progress over all.
As far as the visual appeal - I like the orange, and white always goes great with orange, but that yellow is a bit too harsh for me.
The overall layout is fine - relatively clean and simple. I think it could use a little more punch though. As it stands, the strongest visual elements are the thick yellow background of the headers (note: the background, not the header text =( ) and the banners at the bottom.
I think a dark orange stroke around the logo text would help, and I think the stronger look for the navigation is in order. I would personally recommend bold text, and making the links fill the block that contains them. Kind of like the effect I made with your menu for the curves site.
The good part - no font tags! yay! (oh, wait - there *is* one! Why?!?!? You don't need it!)
Somewhat minimized code, compared to the other site. Less is always better =) There still seem to be a few extraneous <span>'s though...
Some semantic issues -
You have instances where you have a header, followed by a paragraph of text. Only you code it as if that header is just the first line of the paragraph, and use <br>'s to break it up visually. Code it like it is - <h2></h2> for the header, and <p></p> for the paragraph. Remember that you can style the <h2> tag however you want =)
You have headers that should be <h1>'s inside <td>'s, with inline style specs. These should be coded within the same <td> as the textual content, as <h1>'s, with the styles specified in the style sheet.
You have items in the 'this week' box that are a list of events/issues. With a 'bullet' included even. Only you have them coded as <p>'s with a '-' for the marker. Code it as a list, and style the UL and LI elements how you want them =)
In regard to position, the biggest mistake people make is trying to position things that really don;t *need* positioning. A well structured XHTML document, couple with a good style sheet will often fall into place properly with minimal overt positioning.
I *highly* recommend avoiding absolute positioning in the majority of cases.
Lay the page out logically, and the markup will do most of the work *for* you. When it doesn't, turn to the CSS to fill in, using the least fuss possible, and working your way up if needed.
Don't try to control something that is already doing what you want it to <-- great tip that applies to almost anything in life
awesome. thanks alot. I was trying really carefull not to add extra garbage where it didn't need to be. I'd hate to show you the current site I have for my group. www.sudden-rush.com
No need to rip that one to shreds though... hehe...
As far as the font tags... I don't understand why it's placing them, I tried to utilize the stylesheet to define it all... i will go in and tweak...
quote:I *highly* recommend avoiding absolute positioning in the majority of cases.
I have to agree. Most simple CSS layouts only require some clever use of the "float" property, as well as some negative margins. Absolute positioning is only really necessary when you need to totally remove something from the document flow, or for complex 3-column layouts, and even then, only one column is absolutely positioned.
I'm kinda in a love/hate relationship with your choice of colors. They're certainly bold and aggressive, but it's not something I'd want to look at for extended periods of time
And again, don't forget your doctype and encoding. It's best to put these in before you begin designing, because often times doctype switching will trigger different rendering modes in different browsers, and in some cases, can actually break layouts.
So by looking at the design I have as of now, colors aside, how would I go about defining the boxes
and aligning them to look the way it is now? Im understanding that alignment is somewhat relative
as far as code goes, but it's the specific layout structure that is confusing me beyond ...whatevers!
Every attempt thus far has resulted in about an hour of "try this, nope didn't work, lets try that.... nope..." etc.
thanks again for all the incredible feedback and advice though!
actually, scratch that question.... as i look at the page, the last element in the menu is utilizing a different link style somehow, and to be honest, I dont know why!?!?!?!?
I think Im just trying to run way before I learn to walk and it's frustrating. put some music in front of me, and Im all good. this stuff just fries my brain.
I really needed to update our website but for all the stuff I want it to do, what would be relatively basic for most of you lunatics would take me an eternity (well at least more time then i have)
thanks guys!
[This message has been edited by Radical Rob (edited 09-04-2003).]
Well, basically you need to look at it in terms of blocks.
You've got one block across the top with your image.
You've got another block the same width below that holding your content
So, Since your image is one big block, you don't have to bother wrapping that in a <div> or anything. You aren't centering, and you have a set width on your content block, so there's no fiddling to do with that.
I would set up a class "main". Set it's width to 700px, add a margin, set padding to 0.
In the <img> tag for your logo, set the class to "main". You can also set up a class for "border-yellow" (or whatever) with a specification for a 1px solid border of your chosen yellow. In the main content <div>, you can specify the class as follows: <div class="main border-yellow"> And this will apply the styles from both the "main" and "border-yellow" classes to that <div>.
Inside, you have one box going across the top - I'd give that an id of "nav" and set it to the appropriate width and border and all. Then I would specify how links inside that div should look (nose through the other style sheet to see hwo I did it there).
Then you have you have two columns. I would set up two container <div>'s both with a "float:left;" specified, and with widths set appropriately (you'll have to see how much of the width is taken up by margins and padding, etc.)
I would then set a class to use for all of the individual boxes inside each of the two columns (perhaps a "content" class with all the spec such as colors, fonts, margins, etc, and then a "content-left" and a content-right with just the widths specified - do it like above <div class="content content-left"> or somthing similar...).
Then you have more content that spans those two columns. To avoid problems from the earlier "floats", make a class in your style sheet ".clear" with the spec "clear:both;"
Then add a simple <br class="clear"/> after the two floated <div>'s.
Add your content in after that.
That, in a nutshell is how I would do it.
Feel free to ask about any specifics....
Ok, this is the site redone completely without tables. It felt like crochet for gods sake, adjusting this, taking in a little of that, adding some padding here, align this... get confused, start again....
Anyways, now the only areas I cant seem to get going is placing my 250px wide box on the right side.
And for some reason, the spacing is a little off on the adbanners at the bottom and the bottom box of content.
I double checked the padding and margins but couldn't find the problem.
Lastly, I can't get my footer text to work. Im trying to get the left text flush on the left side of the footer and the booking information on the right side.
I think once I conquer this part I'll be in businness.
I gotta say though, after understanding what needs to go where, Dreamweaver wasn't that difficult to use to design this. It makes adjusting the style sheet and seeing the effect pretty close to WYSIWYG designing.
--First option: Rearrange your HTML so that the right column comes before the left one. Then apply "float: right" to it.
--Second option: If the ordering of HTML is absolutely essential, and you must have the right column come after the left, you can use absolute positioning. The disadvantage to this is that if the user chooses to resize the text, the column may overlap other page elements. The following rules account for users who resize text up, but not those that resize down:
Footer: Simply float the left footer to the left ("float: left;"), and the right one to the right ("float: right;").
Other notes: I noticed that you're using the "class" selector on all your elements. This works, but if the element occurs only once on the page, you should be using the "id" selector.
For example, since you're only going to have one right column on the page, it makes sense to replace <div class="rightcolumn"> with <div id="rightcolumn"> and then replace the css selector [.rightcolumn] with [#rightcolumn]. Take a look at the code behind other CSS sites, and you'll see that that's how most of us do it.
[This message has been edited by ozphactor (edited 09-06-2003).]
I tried that and for some reason my right column is a tad to big as it pushes my left column down below it. I tried resizing the .rightcolumn but it didn't take for some reason...
I figured out that I needed to create a box around the entire site so that the align right
pushes it only as far as the invisible box allows. That much I got,
as for the footer I ended up changing the width of each to 350 as they were pushing each other down.
Hmm, the right column floats correctly in Firebird, but not in IE6, where it pushes the left column down. Also in Firebird, the banners are overlapping the footer div for some reason. You'll have to check the page in some other browsers besides IE.
Something else I noticed... why on earth are your paragraphs marked up as headings?? I'm seeing this:
code:
<h2>It's been a long time coming but we're just about ready
to launch the new Sudden Rush website design. Hopefully you will be kept well
informed as to the whereabouts of the group, their performances, new releases
and upcoming projects. <br>
<br>
Take a moment and send us a little <a rel="nofollow" href="feedback.php">FEEDBACK</a>
as to what you think of the new design. Make sure you sign
up for the newsletters and be the first to get the latest
scoops on the rush. <a rel="nofollow" href="newsletter.php">SIGN UP FOR THE NEWSLETTER</a>
<br>
-a hui hoe</h2>
You should fix that. Paragraphs are to be marked up as <p>, second level headings as <h2>.
oh that... hehe.... i wasn't sure of an "official" way or correct way to utilize the h2 tags....
I just defined the title of the left columns with h1 and defined it as so and the contents
of that column as h2, then h3 for right column and h3 for column content.... it was just easier
to type, no specific reasoning.
For majority of people that will visit the page are middle aged women, without to much net
savy other then microsoft and most wont use any other browser. (so I assume....)
The "official" way to utilize an <h2> tag is for second level headings. The "official" way to use the <p> tag is to mark up paragraphs, or other similar bodies of text.
Think of it as an outline. The <h1> tag is (usually) the page title. The <h2> tag divides the page into seperate sections (navigation, content), the <h3> divides those sections, and so on. So if you were to strip out all content besides the heading tags, you would end up with something resembling a page outline.
quote:For majority of people that will visit the page are middle aged women, without to much net
savy other then microsoft and most wont use any other browser. (so I assume....)
posted 09-04-2003 01:26
