Topic: okay giv'it to me... (Page 1 of 1)

this is phase one of me going through and cleaning up the coding on this website. it's not meant to be fancy, just really functional and prepped for a bunch of other features that the newspaper (ethnic Samoan newspaper run by friends of mine) will be adding soon (like advertising in the column under the menu..) ..

PLEASE DO NOT look past this page because the coding there is embarrassing and i'm still in the process of fixing it. i've spent an awful lot of time checking padding and margin-type crap between i.e. and f.f. browsers and STILL things are not quite in the right place in f.f. ... i'm getting there, but any suggestions to speed up the process would be much appreciated.

in the meantime, please talk to me about color scheme (yes i know the tab at the top is not the same color as the main bit.. completely intentional, though possibly silly ) , also any ideas to further bring this page into the millenium ... please ...

thank you heaps!

--------------
no. damn it.

edit: perhaps posting a link might help - Samoana Online

(Edited by LaSun on 09-21-2004 10:09)

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

yes i ssooooo know what u mean.

the blandness came from me worrying that we're going to have fit a bunch of other things on this page later (photos for the news items at the top, ads in left column) and i didn't want the design to distract. (the blandness past the main page, i have no excuse .. => )

that's why i'm fishing for ideas...

--------------
no. damn it.

the header is nice!

but its missing some decoration at the bottom!

help .. my page turned into a pumpkin!

but then i like the orange ...
but then there is such a thing as overkill ...

okay i give up ... (for now).

oh, i added some decoration to the bottom



--------------
no. damn it.

(Edited by LaSun on 09-26-2004 11:46)

The overall feel is very disjointed. There is no sense of cohesion to anything...
The different elements of the page seem randomly placed with no regard to how they interact with each other.

The colors aren't bad, but the site is *very* dark...it wouldn't hurt to lighten up a few of the elements jsut a touch.

Now, the code is quite a mess. It seems like some effort was made to do things in a semantically correct manner, but then was given up on.

Some tidbits -

The links menu on the left: get rid of the H1's! They're not headers, they're links. They should also be coded as a list...since that's what they are.

Tables? Right in the middle of this non-tabled layout you throw in tables? No need for those, yo've shown that you can design without them - get rid of them.

Now, the 'newsbar' thing - *that* is where you want your H1's. Get the image out of there and use a header tag the way they're meant to be. Oh....wait - even worse: it's only a background image?? That won't even display alt-text, or be parsed for someone with a screen reader...bad bad bad. Background images are for decoration only - an image that is part of the content shoudl always be marked up as an image, and an image should not be used to display text that is part of the page whenever it can be avoided.
Same goes for your logo - mark it up as an image, don't set it as a background image. And don't break the other three background images in your "panel" divs up - just make it one background image....

Same issue for the "heard on the street" box.

And for the rest of them, for that matter.

So to sum up -

* Use H* tags appropriately
* Don't use images for headers
* Don't use background images to display actual content
* Mark your lists up as lists...
* get rid of those tables!
* be sure to consider the interealtion between all the different sections of the page...

I would also highly recommend that you not use absolute positioning. Get used to using floats and the like instead - you'll find that once you start working that way, things fall into place a lot easier than you might think.

yes! a critique i can finally work with

thank you thank you DL-44 ...

i was getting really frustrated with trying to position things with css that i gave up and used the tables (as you can obviously tell, => ) . positioning is also the reason i shoved those headers in as backgrounds images. as just regular images they came out fine in explorer but were all over the place in f.f. ... looks like i need another tutorial on dimensions and positioning .. (and h1 tags) ... hhmmm ...

the disjointed thing, i picked up on before and i think i have an idea to fix that (provided i can fix the positioning).. looking forward to working on it now.

thank you again DL ...

--------------
"...cause it's a war between evil and it's a war between good ..."

(Edited by LaSun on 09-26-2004 23:02)

umm... better?

--------------
"...cause it's a war between evil and it's a war between good ..."

I liked the old headers you had before. The new ones just don't seem as nice before. I don't remember how you had them set up before, did you just have them set as a background, or were you using an image replacement technique?

Here's a good article on some different ones. I use this method quite a bit. http://www.mezzoblue.com/tests/revised-image-replacement/

Overall things appear to be much better. The code is quite a bit cleaner, and the layout feels a little more pulled together.

Still some odd things going on in the code though -

1) you have your navigation menu setup as list items, but you have no list!

2) Headers are still a bit out of whack, as far as code structure goes

3) Try to cut out as many of the wrapping <div>'s and <span>'s as possible - apply the styling directly to the element you are styling rather than to a "wrapper".

For example -

<h2> features Samoana Online &nbsp;  </h2>



           		<div ID="item1">

           			<div ID="i1image" class="b-link"> 

           			<img src="efarani.jpg" alt="Elizabeth Tuisalega Farani" border="0"><br>					

						Miss NZ Asia Pacific<br>

						<span class="smtext">Photo by Trish Newsham</span><p>

						

						

						

			

           			</div>

           			<div ID="i1story" class="newstext">

           			<span class="newstexth1">Samoan girls sweep the Miss NZ Asia Pacific Pageant</span><p>



           			It's official: Samoan girls are beauty queens! <p>

						This past saturday (25/09/04) NZ Samoans took out the competition at the Miss NZ Asia Pacific, with

						four of our girls placing at the end of the night.

						<p>

						Elizabeth Tuisalega Farani (left) won the overall title in a pageant where countries as

						diverse as the Philipines, Taiwan, Cambodia and Thailand were also represented. 

						She will go on to compete in the Miss Global Tourism Pageant held in Alberta, Canada in November.

						

						<p align="right"><span class="b-link"><a rel="nofollow" href="newspaper.html#ms"> &nbsp; // more photos // </a> </span>

I would code more like this -

<h1>features Samoana Online</h1> //this is a top level header, should be an H1.  Also, why an &amp;nbsp;??

<div ID="item1">



<div class="photo-left">//just make one generic class for photos such as these

<img src="efarani.jpg" alt="Elizabeth Tuisalega Farani" height="" width="">//make sure you add your height and width! Use css to set border:none;

<br>					

Miss NZ Asia Pacific

<br>

<span class="smtext">Photo by Trish Newsham</span>//rogue <p> tag was here...?

</div>



<div class="newstext">//no need for the ID here, use a single generic class

<h2>Samoan girls sweep the Miss NZ Asia Pacific Pageant</h2>//this is a header! code it as one.  it is a 2nd level header...

<p>

It's official: Samoan girls are beauty queens! 

</p>

<p>

This past saturday (25/09/04) NZ Samoans took out the competition at the Miss NZ Asia Pacific, with four of our girls placing at the end of the night.

</p>

<p>

Elizabeth Tuisalega Farani (left) won the overall title in a pageant where countries as diverse as the Philipines, Taiwan, Cambodia and Thailand were also represented. 

She will go on to compete in the Miss Global Tourism Pageant held in Alberta, Canada in November.

</p>

<p class="b-link" align="right">//no need for a span!  add the class declaration to the <p>

<a rel="nofollow" href="newspaper.html#ms">// more photos //</a>why spaces in your links???

</p>

There are a lot of such instances where you can cut out a lot of the redundant code.

Also, the navigation menu still feels very detached from the rest of the page.

All in all, this is a good improvement though.



(Edited by DL-44 on 09-29-2004 19:38)

Slight digression: Shucks, I never thought I'd see anything about Samoa on here. The Asylum's feeling more like home already. ~shore do miss da islands~

LaSun, sorry I don't have anything constructive to add other than what DL's already put in here but it's looking nice.

:end digression

hey silence.. i've had my suspicions about you for a while hehe... must be the 'Melbourne' thing..

Nathus, the old headers? you mean those clunky pumpkin-coloured background images? oh i outgrew those almost a day and a half ago hehe. we'll see about introducing elements of them back into my next version of the page ... and thanks for the link. filing that for bedtime reading...

thank you again DL ... so much to learn! but working with what you posted before was extremely enlightening already. everyone was going on about how great CSS was compared to old fashioned HTML and i'm finally beginning to see it .. i need to learn to hop on the bandwagon a lot earlier in future. (don't even talk to me about JS yet..)

stay tuned for part 3.. (4?) of this thread!

--------------
"...cause it's a war between evil and it's a war between good ..."

A couple of 'tips' then, to help you on your way -

1) I always have a series of "generic" classes at the end of my style sheet for general purpose use. Things such as a "float-left" and a "float-right" class. A "clear" class (clear:both;), alignment classes, a "border" class, a "no-margin" class, etc etc etc...

2) don't forget that you can call mulitple classes for the same tag. Just leave a space between - <a class="this-class that-class-too even-this-class">

3) CSS can break pretty much all the rules of mark-up. Mark it up properly, and style til happy...

4) MINIMIZE! Don't add mark-up unless you have to. Don't assign ID's unless truly called for.



(Edited by DL-44 on 09-30-2004 04:24)