[web] Question about structuring the page

Started by
9 comments, last by Sander 17 years, 7 months ago
Hello, I created a small template of what I would like my site to look like using a paint program (pay no attention to the content, it's all junk [smile]): I also created a very similar-looking page in HTML. It's not quite the same: I couldn't get the right font to work, so I used a less attractive alternative. But there is a bigger problem, which I'll address after the code:

<html>
<head>

</head>

<body text=white>

<table border=0 cellspacing=0 cellpadding=20>

<tr>

<td width=20% bgcolor=#d0dfff>
 
</td>

<!-- Title cell -->
<td colspan=2 bgcolor=#8ab0ff valign=bottom cellpadding=0>
<div align=center><font face="Verdana" size=7 color=#830000><b>Some Creative Title</b></font></div><br>
</td>
<!-- End title cell -->

<tr>

<!-- Menu -->
<td rowspan=2 bgcolor=#8ab0ff valign=top>
<font face="Verdana">

<A href="home.htm"><img src="arrow.gif" border=0> Home</a><br />
<A href="home.htm"><img src="arrow.gif" border=0> Stuff</a><br />
<A href="home.htm"><img src="arrow.gif" border=0> More Stuff</a><br />
<A href="home.htm"><img src="arrow.gif" border=0> Links</a><br />
<A href="home.htm"><img src="arrow.gif" border=0> Contact</a><br />
<A href="home.htm"><img src="arrow.gif" border=0> Even More Stuff</a><br />
<A href="home.htm"><img src="arrow.gif" border=0> ...</a><br />

</font>
</td>
<!-- End menu -->

<!-- Body -->
<td bgcolor=#3274ff>

<blockquote>

<div align=center><font size=5 face="Verdana">
<b>A Warm and Fuzzy Welcome Message</b>
</font></div>

<p /><p />

<font face="Verdana">
Some random text.<p />

What is polyphasic sleep?<br />
Polyphasic sleep is a sleep pattern intended to reduce sleep time to 2–5
hours daily. This is achieved by spreading out sleep into short naps of 
around 20–45 minutes throughout the day. This is supposed to allow for 
more waking hours with relatively high alertness. The most common type 
of polyphasic sleep is having 6 naps of 20 minutes each, each occurring 4 
hours apart throughout the day.<p />

How does polyphasic sleep work? The theory is that after undergoing controlled 
sleep deprivation during an initial adjustment period, the brain will start to enter 
the essential sleep stages much more quickly, as a survival strategy. Once this 
adaptation is learned, the theory goes, a comfortable and sustainable 
equilibrium of sleeping in only naps can be established.  This is possibly because 
polyphasic sleep was the preferred schedule of ancestors of the human race for 
thousands of years prior to the industrial revolution and artificial lighting and the 
subsequent disruption of sleep schedules.<p />

There are several advantages to polyphasic sleep. For example, there is 22 
hours a day to get things done.  There is more than enough time for homework, 
extracurricular activities, part-time jobs and recreation. People also report that 
they have lots of energy.  Polyphasic sleepers report that they never got tired 
until it is time for a nap. Polyphasic sleepers also report heightened perception, 
an easier time losing weight, and a disappearance of sleep disorders, such as 
sleep-walking and talking, insomnia, nightmares, and back and neck pain.<p />

Perhaps most stunning of all is that polyphasic sleepers report that it’s really 
easy to do, once you get used to it.  After about 2 months, there was no 
longer a need for alarm clocks.............
</font>

</blockquote>

</td>
<!-- End body -->

<td bgcolor=#0053ff width=20%>
 
</td>

</tr>

<tr>

<td bgcolor=#0053ff>

 

</td>

<td bgcolor=#003095>
 
</td>

</tr>

</table>

</body>
</html>


Here's what the resulting web page looks like. The foremost question I have is that the title is not positioned properly. In the layout image, I had it flush with the bottom of the cell. In fact, if there were letters in the title that had parts that go underneath the normal line of text (such as j, p, q, and y), I would want them to actually overlap the cell underneath. Is this possible to achieve? Also, a more general question: My whole website is essentially a giant table. Is this a bad thing? Is design usually done differently these days? Thanks in advance for the help.
.:<<-v0d[KA]->>:.
Advertisement
Table layouts are "old school." They have some advantages, and in many cases are better, but generally speaking they are also much harder to change in the future and harder to debug across different browsers. It does the trick, so don't let the CSS-layout die-hards get you down. If have the time to learn, i highly recomend you learn about CSS positioning and DIVs. There's plenty of info on the internet about the topic.

If you want the text to be down a smidge, you can try wrapping the text in a DIV and giving the DIV a negative margin value:

<DIV style="margin: 0 0 -10 0">

That works on some browsers. Personally, i don't think the text should go on the bottom line as it looks odd IMHO.


On general layout: i think you have too many different colors of blue. Stick to 2 or maybe 3. It's also very "flat" looking, which may be what you want, but even some simple dropshadows would help.

I did a very similar layout on one of my projects. You might appreciate having something to compare with for code:

Thanks for the suggestions. I'll be looking a bit more at CSS then. Frankly, I don't like the idea of having my page in a table.

I revised my design a bit, using elements from some small web pages I made before. I also invoked some CSS, which I'm frankly not very familiar with yet. In order to achieve the text alignment of the title, I used a background image, but I'll go ahead and try your method about negative margins now.

I think the design looks a bit better than the first version, but I am by no means experienced. So I'll accept criticism:

Version #2.
.:<<-v0d[KA]->>:.
All right, I tried to use the negative margins (for page version #2), but I ran into a problem: for some reason, there is now a line break in the middle of my title! Here's what it looks like (looks even worse on firefox):



Why does it happen? Here's the HTML that I use for printing the title:
<td nowrap>   <h1 class="blend">creative</h1><h1 class="contrast">title</h1></td>


Observe that I even use nowrap inside my <td> tag.

Here's the CSS style information for h1.blend and h1.contrast:
h1.blend { 	color: #5361b9;	font-size: 72px;	font-weight: bold;	margin: 0, 0, -10, 0;	font-family: Times New Roman;}h1.contrast {	color: #35417f;	font-size: 72px;	font-weight: bold;	margin: 0, 0, -10, 0;	font-family: Times New Roman;}


And another question: it's impossible to tell from the screenie, but if I move the text down even further (give it a margin of -30, for instance), it gets eaten by the main content cell of the table (which I'll be working on replacing with CSS). How can I make it so that the title gets painted over the cell, and not the other way around?

Again, thanks for the help.
.:<<-v0d[KA]->>:.
You get a line break because you are using two consequtive headers. Headers are designed to linebreak after the closing tag (most block elements are, including DIVs, P, TABLE, and H). When you design pages, you need to look at it from the viewpoint of content, not HTML extratrickery to make it look a certain way. So does your pages really have two level-1 headers or are you just trying to force it look a certain way? Let the HTML define the content and let the CSS define the look and feel.

If you want a header with multi-colors, use a span inside:

<H1>Title<SPAN style="color: #3333BB"></SPAN></H1>


Also, when defining margins and padding in CSS, do not use commas to separate. Spaces will do, like so:

margin: 0 0 -10 0;

that's clockwise starting from the top.

I should also point out that your choice of blue is very harsh on the eyes. Sorry! :-)
Thanks for the tips. I looked up what you said, and I now understand the difference between "block elements" and "inline elements" in HTML. My page works now!

And thanks for the tip about colors. I never studied or read about design, so I go by my own innate instincts, which are, of course, unreliable.

What do you suggest I change? Should I just pick a different tone of blue? Or go for a completely different color scheme? What exactly is harsh?

Is there anything I should change about the layout?
.:<<-v0d[KA]->>:.
hey, dropping the title into the box with matching colors comes out pretty cool, actually. Nice idea (very brochure-like). I'd move the text down a wee bit more for better effect.

I spent the last 6 years as a color analyzer in a photo lab, so i feel i have a pretty keen eye for color. But when i say "harsh", i mean that the color literally burns into my retinae. When i go from your page to, say, Google, the white background looks purple and it takes a few seconds for the effect to wear off.

The problem (as i see it) is that your color is fairly high-chroma and it can't decide if it's purple or blue. But it's the high-chroma that causes the "retinae burn" effect. What you want to do is sort of neutralize the color a bit by bringing three RGB componants together. For instance, here is straight up green:

#00FF00

It's used in torture chambers around the world, i'm sure. To tone it down, you knock the green down a notch and bring up the other color componants as well. It's still noticeably green, but less harsh:

#339966

even that is rather harsh to my eyes though. I'd actually prefer something like

#336666

The closer the numbers get together, the more "grey" it is. You might point out that grey is boring, but for reading text, it can't be beat. I've come to learn that it is VERY easy to discern subtle differences between greys than it is to tell the difference between "really red" and "extremely red." So for reading text on a web page, you can have a more neutral color but still have color to it. You might call it "off-grey."

Save the high-chroma stuph for accent areas, not the main text block.
Actually, i started monkeying with your page just for fun and come up with the following color scheme. I ripped the color off the background of my text editor (yes i work on powder blue). I added some cutesy junk just for fun. I'm not saying it works, but it might give you some ideas.

I'm a fan of clean, simple layouts. I'm not really impressed by ultra-graphical websites because i can never find what i'm looking for.

Here ya go:

http://www.leiavoia.net/qstuph/vodka_sample.html
I actually like the original color scheme better. leiavoia's advice about colors isn't bad, but I really like the contrast of the dark red with the blue background of the first design. Your latest design basically uses one color in different shades: blue.

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Quote:Original post by Sander
I actually like the original color scheme better. leiavoia's advice about colors isn't bad, but I really like the contrast of the dark red with the blue background of the first design. Your latest design basically uses one color in different shades: blue.


Red on blue is the ultimate sin. Die heathen! :-)

In fact, on forums i have administrated in the past, we have strictly banned the use of red text on our blue-themed forums. It's a real eye-bleeder. I'm surprised you like it, to be frank.

This topic is closed to new replies.

Advertisement