Website Layout

remi

<div class="IPBDescription">I need some advice.</div> I need you guys to tell me which way you prefer...
unseperated... <a href='http://home.comcast.net/~sky3987/newsite2/index2.html' target='_blank'>http://home.comcast.net/~sky3987/newsite2/index2.html</a>
or seperated. <a href='http://home.comcast.net/~sky3987/newsite2/index.html' target='_blank'>http://home.comcast.net/~sky3987/newsite2/index.html</a>

I don't care what you think of the content, it's just the design I care about because I just made the site yesterday to this morning...

Also, how do I make it so browsers won't cache the page?
And finally, is there a tutorial or something somehow to tell me how I could make it so that I could just put my updated news in like a .txt file or something, and then have some code (php, cgi, perl... something) look in the txt file and use that data to plop it into the layout?

Any complements/advice/criticism on the site is welcome.

So far people have mainly said that the text is too small.

Thanks.

Thansal

Seperated!

unsepperated looks like poo.

remi

<!--QuoteBegin-Thansal+Apr 16 2005, 05:27 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (Thansal @ Apr 16 2005, 05:27 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Seperated!

unsepperated looks like poo. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd-->
The thing about the unseperated though is it looks much more "together"... I don't know. I'm torn. (hence me asking for advice)

StormLiong

Unseperated is better.

Separated has a bit TOO much repetition going on which really makes the design look "boring" (not sure wat better word to describe it) and starts to distract from the other design aspect of the site.

Seph_Kimara

I much prefer unseperated. Easier on the eye.

remi

<!--QuoteBegin-StormLiong+Apr 16 2005, 05:34 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (StormLiong @ Apr 16 2005, 05:34 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Separated has a bit TOO much repetition going on which really makes the design look "boring" (not sure wat better word to describe it) and starts to distract from the other design aspect of the site. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd-->
Aye. I just don't like how the News posts are broken up in the unseperated version (the line) and I'm not sure how to make it look any better.

enf0rcer

<!--QuoteBegin-Seph Kimara+Apr 16 2005, 05:49 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (Seph Kimara @ Apr 16 2005, 05:49 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> I much prefer unseperated. Easier on the eye. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd-->
dito

StormLiong

<!--QuoteBegin-Psyke+Apr 16 2005, 05:54 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (Psyke @ Apr 16 2005, 05:54 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> <!--QuoteBegin-StormLiong+Apr 16 2005, 05:34 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (StormLiong @ Apr 16 2005, 05:34 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Separated has a bit TOO much repetition going on which really makes the design look "boring" (not sure wat better word to describe it) and starts to distract from the other design aspect of the site. <!--QuoteEnd--></td></tr></table><div class='postcolor'><!--QuoteEEnd-->
Aye. I just don't like how the News posts are broken up in the unseperated version (the line) and I'm not sure how to make it look any better. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd-->
I really went through the same design problem as you did when I designed this one site. In the end it was just too much trouble and just went with the way you went with the single horizontal line.

ALternatively you can separate them with a simple box - 1 line box amd nuthin else, no icons etc etc

remi

Do you mean instead of my nice detailed boxes? or do you mean inside the box seperate them in that manner?

Gwahir

unseparated

Easier on the eye.
Less scrolling to be done when you have more on there.
Less distance for the eye to travel.
Far less repetitive.
Just feels better.

remi

Any suggestions for a different way of splitting up entries on the unseperated version?

MedHead

I would do this:

<img src='http://www.flagmandesign.com/files/pageexample.gif' border='0' alt='user posted image' />

remi

That does look nice, but then what would I do for aditional days? (most of the time I wouldn't have 5 entries for one day)

Gwahir

large bold font with a line below it... just like we see there.

MedHead

<img src='http://www.flagmandesign.com/files/pageexample2.gif' border='0' alt='user posted image' />

Imagine the duplicate entries are actually not duplicates, but signify new days.

remi

Oh that does look nice. I think in order to do the different color underline effect thing I will need to use an additional table around the heading so that I can set the background to an image with a stripe in it or whatever... I'll make another version of the page to test out that method and see how it looks.

edit: Oh, and Medhead, what font did you use there for the date? is it Arial? Times New Roman?
edit2: Definitely having trouble figuring out how I could do that type of line, and make it still work if people change their font sizes... (I don't know how to specify a certain pixel size, just the +# way)

MedHead

The serif font is bold Georgia.

The sans-serif font is Trebuchet MS.

You could always use CSS to design your header. Something like this:

<!--c1--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>CODE</b> </td></tr><tr><td id='CODE'><!--ec1-->
<style type="text/css" media="all">

h2 {
 background: url(images/stripe.jpg) repeat-x bottom;
 color: #214660;
 font-size: 115%;
 margin: 0;
 padding: .5em 0;
 }

</style>
<!--c2--></td></tr></table><div class='postcolor'><!--ec2-->

And then set the header text to <h2>.

remi

I really need to learn to do CSS.

Ok, so here's a question:
<STYLE>
<!--
A{text-decoration:none}
-->
</STYLE>

How could I make it so that within the left box the links aren't underlined, but in the main text they are? And what is -2 or -1 in %? (My text in the textbox is -1, and in the links box it's -2)

edit: Oh, and if that works the way I think it does, there would still be a problem with making the link go across the whole page.
edit2: Is there some html for making a background image not repeat vertically, and be aligned on the bottom?
edit3: oh, and allow me to quote from my website:
<!--QuoteBegin--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> </td></tr><tr><td id='QUOTE'><!--QuoteEBegin-->Could anyone help me make this into a php script or something so that I can just put my updates in a txt file, and have them show up here?<!--QuoteEnd--></td></tr></table><div class='postcolor'><!--QuoteEEnd-->
(is there some way I can make a template type thing and have it automatically put the data into the template?)

MedHead

You could make the content area links underlined and the navigation links not underlined by using CSS.

edit 1: I don't know what you mean.
edit 2: I don't recall anything like that off the top of my head (it's been a while since I used plain old HTML). CSS could do this easily.
edit 3: You could use WordPress, but to design your own theme, you'd need to work with PHP. The documentation provided is pretty well written to help out, but it's a chore (I'm doing it myself, and being a total newbie to PHP, it's taking more time than I wanted).

remi

The first I mean there would still be a problem making the stripe go across the whole box under the date...

I don't know. I don't know how to use CSS at all.

Would you be able to show me what would be needed to do both of those things? or should I just go look at htmlgoodies.com at the CSS section? (I assume they have one.)

remi

What is the <SPAN> command? (does it do anything? how do I use it?)

MedHead

There shouldn't be any problem getting the <h2> line going all the way across. Are you having trouble with it?

You can make a background repeat vertically and stick to the bottom very easily with CSS:

<!--c1--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>CODE</b> </td></tr><tr><td id='CODE'><!--ec1-->

<table id="content">
Data here
</table>

In the <head> area:

<style type="text/css" media="all">

#content {
 background: url(images/imagehere.jpg) repeat-y bottom;
 }

</style>
<!--c2--></td></tr></table><div class='postcolor'><!--ec2-->

Whoops, noticed an error in what I wrote.

Breakthrough

Unseperated.

MedHead

If you really want to learn how to use XHTML and CSS, I suggest reading through <a href='http://www.w3schools.com/' target='_blank'>http://www.w3schools.com/</a>.

Sky

Heh, you sign your newsposts as Sky. Caught my attention, that did. <!--emo&:p--><img src='http://www.unknownworlds.com/forums/html/emoticons/tounge.gif' border='0' style='vertical-align:middle' alt='tounge.gif' /><!--endemo-->

remi

Aye. My real name is Skyler. Your username caught my attention, it did.

Sky

My real name....is decidedly not Skyler. I'm just Sky/Skyhigh/5kyh16h91. <!--emo&:D--><img src='http://www.unknownworlds.com/forums/html/emoticons/biggrin-fix.gif' border='0' style='vertical-align:middle' alt='biggrin-fix.gif' /><!--endemo-->

remi

Med, what font did you use for the times? is that what you said is Trebuchet?

remi

I hate stupid html, and using +values rather then actual point values.

remi

<a href='http://home.comcast.net/~sky3987/newsite2/index3.html' target='_blank'>http://home.comcast.net/~sky3987/newsite2/index3.html</a>

Managed to get it there... I think it looks okay... Stupid html and stuff **** me off though.

edit: Yike, accidentally made three posts in a row without realizing it.

antifreeze

Your latest version looks alot better. Personally i would lift up the "Sunday, April 17, 2005" by about 15 pixels so it's at the top of the box.

Medhed and Fam are the best people around if you want help with web design. Fam is usually available on IRC, and i have been bothering with him for the last week asking for advice on my site im doing for my Uni work.

<a href='http://www.hawxby.com/wsdica2/index.html' target='_blank'>http://www.hawxby.com/wsdica2/index.html</a>


Edit:
Having now looked at the source i would say try to get away from site layout using tables as soon as possible. I know it's done alot but it's the wrong way to do things, try positing elements within div tags and use CSS classes to position them. Take a look at my site, not a table it sight.