A Review..(Take Revenge!)

@Sux0rZh_jc0rzDec 04.2003

yep. n00b here. made a layout… bluerobot.com’s right-sided menu layout was the base and i twisted it around and chewed it up and spit it out and stepped on it and beat it with an ugly stick and now i got this wonderful piece here… I’d like all the help you can give. every little detail. I’m learning CSS and i’d like to catch anything i’m doing wrong before it becomes habit. I know I probly even have inconsistancies in my design… point them out? cuz ima blind kid. well not really. but you know what i mean. or mayby you don’t… anyways, all help appreciated. And anyone know how to fix that stupid menu overlapping the bottomheader and not forcing it downwards? It’s Grr.

~~[url]~~http://xaxei.europe.webmatrixhosting.net[/url] <–The site.
~~[url]~~http://somuchlove.2ya.com[/url] <–has domain masking and uses frames to do so.. this screws my CSS up… if you know a fix for this, please tell me. (or no how it screws it up??)

Thanks a ton in advance. I know I’m not worth your time… but thanks anyways for you help.

Ok… didnt do a spellcheck.. don’t kill me… yet… please?

to post a comment

Full-stack Developer

13 Comments(s) _↴

@jeff_archer7Dec 04.2003 — #Below is the simplest fix i could think of.... copy n past this onto a spare page and tell me what you think

really simlpe

put 2 mins thought into it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">



<HTML><HEAD><TITLE>Xaxei's Useless Info and Tests</TITLE>

<META http-equiv=Content-Type content="text/html; charset=windows-1252">

<META http-equiv=content-script-type content=text/javascript>

<META http-equiv=content-style-type content=text/css>

<META http-equiv=imagetoolbar content=no>

<META content=all name=robots>

<META content="Copyright Xaxei" name=copyright>

<META content=Xaxei name=author>

<META content=YourDescription name=description>

<META content=YourSearchEngineKeywords name=keywords>

<META content=general name=rating>

<META content="7 days" name=revisit-after>

<META content="living document" name=doc-class><LINK href="/favicon.ico"

type=image/x-icon rel="Shortcut Icon">

<STYLE type=text/css media=screen>BODY {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 11px/20px verdana, arial, helvetica, sans-serif; COLOR: #ccc; PADDING-TOP: 0px; BACKGROUND-COLOR: black

}

H1.Main {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 900; FONT-SIZE: 28px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 15px; COLOR: #ccc; LINE-HEIGHT: 28px; PADDING-TOP: 0px; FONT-STYLE: italic

}

H2.Main {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 900; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 15px; COLOR: #ccc; LINE-HEIGHT: 0px; PADDING-TOP: 0px; FONT-STYLE: italic

}

H1.Menu {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 900; FONT-SIZE: 18px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #ccc; LINE-HEIGHT: 18px; PADDING-TOP: 0px; FONT-STYLE: italic; TEXT-ALIGN: center

}

H2.Menu {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 900; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 15px; COLOR: #ccc; LINE-HEIGHT: 0px; PADDING-TOP: 0px; FONT-STYLE: italic

}

HR {

MARGIN: 5px 5px 10px; WIDTH: 70%; HEIGHT: 1px

}

P {

PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px 0px 5px; FONT: 11px/20px verdana, arial, helvetica, sans-serif; COLOR: #ccc; PADDING-TOP: 5px

}

UNKNOWN {

MARGIN: 0px

}

UNKNOWN {

TEXT-INDENT: 30px

}

P.Nav {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 11px/20px verdana, arial, helvetica, sans-serif; COLOR: #ccc; PADDING-TOP: 0px; TEXT-ALIGN: center

}

A {

FONT-WEIGHT: 600; FONT-SIZE: 11px; COLOR: #09c; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none

}

A:link {

COLOR: #09c

}

A:visited {

COLOR: #07a

}

A:hover {

COLOR: darkred

}

#TopHeader {

PADDING-RIGHT: 0px; PADDING-LEFT: 20px; PADDING-BOTTOM: 15px; MARGIN: 0px; LINE-HEIGHT: 11px; PADDING-TOP: 15px; HEIGHT: 14px; BACKGROUND-COLOR: #333; voice-family: inherit

}

UNKNOWN {

HEIGHT: 14px

}

#BottomHeader {

PADDING-RIGHT: 0px; PADDING-LEFT: 29px; PADDING-BOTTOM: 5px; FONT: 11px/11px verdana, arial, helvetica, sans-serif; PADDING-TOP: 20px; HEIGHT: 14px; BACKGROUND-COLOR: #333; voice-family: inherit

}

UNKNOWN {

HEIGHT: 14px

}

#TopNav {

BORDER-RIGHT: darkred 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: darkred 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 10px 203px 10px 10px; BORDER-LEFT: darkred 1px solid; LINE-HEIGHT: 11px; PADDING-TOP: 5px; BORDER-BOTTOM: darkred 1px solid; HEIGHT: 14px; voice-family: inherit

}

UNKNOWN {

HEIGHT: 14px

}

#BottomNav {

BORDER-RIGHT: darkred 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: darkred 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 10px 203px 30px 10px; BORDER-LEFT: darkred 1px solid; LINE-HEIGHT: 11px; PADDING-TOP: 5px; BORDER-BOTTOM: darkred 1px solid; HEIGHT: 14px; voice-family: inherit

}

UNKNOWN {

HEIGHT: 14px

}

#Main {

BORDER-RIGHT: darkred 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: darkred 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px 203px 10px 10px; BORDER-LEFT: darkred 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: darkred 1px solid

}

#Menu {

BORDER-RIGHT: darkred 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: darkred 1px solid; PADDING-LEFT: 10px; RIGHT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: darkred 1px solid; WIDTH: 160px; LINE-HEIGHT: 17px; PADDING-TOP: 10px; BORDER-BOTTOM: darkred 1px solid; POSITION: absolute; TOP: 54px; voice-family: inherit

}

UNKNOWN {

WIDTH: 160px

}

</STYLE>

<META content="MSHTML 6.00.2800.1276" name=GENERATOR></HEAD>

<BODY>

<DIV id=TopHeader><A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Xaxei.net</A> Coming in

July!</DIV>

<DIV id=TopNav>

<P class=Nav><A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Xaxei</A> | <A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Link1</A> | <A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Link2</A> | <A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Link3</A> | <A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Last Link</A></P></DIV>

<DIV id=Main>

<H1 class=Main>Test Header</H1>

<P>This is here to represent actual text that you might add later. It does not

have to be here... but it is. If you feel that this is not a fair representation

of actual text then oh well because i dont care. I'm just putting this here to

fill the webpage so that it looks like what it might look like when you fill it

with information. Should you feel the need to hate me, go ahead. Blow me up or

something...</P>

<P>We are kids with no life... blah blah blah.. read the poem to the right

please. It is a good one and it may make you think twice about whether alcohol

really hurts people or not. mayby you'll even feel a bit sorry and stop

drinking.. or mayby it'll reinforce your already standing decision not to drink.

or mayby it will make you cry because it has happened to you.. but hopefully not

cause being sad is never good.</P>

<P>We need to vent our rage by blowing up things! just playin..<BR><BR>"I am

ready to meet my maker, but as to whether my maker is ready for the great ordeal

of meeting me is another matter."<BR>--Winston Churchill</P></DIV>

<DIV id=Menu style="background-color: #000000">

<H1 class=Menu>Links:</H1>

<HR>

<P><A title="Organized Confusion"

href="http://www.expage.com/organizedconfusionx" target=_blank>Organized

Confusion</A><BR><A title="Free Domain Name Forwarding @ www.shorturl.com"

href="http://www.shorturl.com/ref/in.cgi?somuchlove.2ya.com" target=_blank a

services)>< forwarding (url 2ya.com></a></P><A title="Free Domain Name Forwarding @ www.shorturl.com"

href="http://www.shorturl.com/ref/in.cgi?somuchlove.2ya.com" target=_blank a

services)>

<HR>

<P>-(M.A.D.D.)-<BR>Near to the door<BR>he paused to stand<BR>as he took his

class ring<BR>off her hand.<BR>all who were watching<BR>did not speak <BR>as a

silent tear<BR>ran down his cheek<BR>through his mind<BR>the memories ran<BR>of

the moments they<BR>walked hand in hand<BR>but now her eyes<BR>were terribly

cold and<BR>he would never again<BR>have her to hold<BR>they watched in

silence<BR>as he bent near<BR>and whispered the words<BR>"I LOVE YOU" in her

ear<BR>he touched her face <BR>and started to cry <BR>he put on his ring <BR>and

wanted to die<BR>just then the wind<BR>began to blow<BR>as they lowered her

casket<BR>into the snow<BR>this is what happens<BR>to men alive<BR>when friends

let friends<BR>drink and drive.<BR></P></a></DIV><DIV id=BottomNav>

<P class=Nav>

<A title="Free Domain Name Forwarding @ www.shorturl.com"

href="http://www.shorturl.com/ref/in.cgi?somuchlove.2ya.com" target=_blank a

services)></a><A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Xaxei</A> | <A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Link1</A> | <A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Link2</A> | <A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Link3</A> | <A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/">Last Link</A></P></DIV>

<DIV id=BottomHeader>(<A title=Xaxei.net

href="http://xaxei.europe.webmatrixhosting.net/default.aspx">Xaxei</A>) All

works are copyright of their respective owners.</DIV></BODY></HTML>

@Paul_JrDec 04.2003 — #Doesn't fix the problem...

@Sux0rZh_jc0rzauthorDec 04.2003 — #yeah... i guess i posted the review too early cause i went back to try and fix myself... so i added CSS and HTML 4.01 Transitional validates at the bottom of the page.

My site now validates as HTML 4.01 transitional... and CSS is valid except i need to find a #xxx color for darkred, as it is not a valid css color...

other than that i corrected everything myself... validation wise. i probly still have a ton of problems.. can you guys find anything i missed? any CSS techniques i might be doing wrong... or... anythin like that?

EDIT: Forget to mention i still need a hack to make my bottomheader push down instead of having the right menu overflow it...

@Paul_JrDec 04.2003 — #External Stylesheet.

@Sux0rZh_jc0rzauthorDec 04.2003 — #due to the fact that peeps are judging this layout, i built it in for easy reference. It's not a webpage yet. just a layout. but thanks for your advice. I will use an external style sheet if/when I actually use it as a layout.

@pyroDec 04.2003 — #The problem with your footer is the absolute positioning. You should use floats, instead. Floats, however, work better when a width is specified. Here's an example of floats:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Example&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta http-equiv="content-script-type" content="text/javascript"&gt;
 &lt;meta http-equiv="content-style-type" content="text/css"&gt;
 &lt;style type="text/css"&gt;
 #wrapper {
 width: 600px;
 border: 1px solid #000;
 float: left;
 }
 #topnav {
 border-bottom: 1px solid #000;
 }
 #botnav {
 border-top: 1px solid #000;
 }
 #menu {
 width: 150px;
 border: 1px solid #000;
 float: left;
 margin-left: 10px;
 }
 #footer {
 width: 760px;
 border: 1px solid #000;
 margin-top: 10px;
 clear: both;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="wrapper"&gt;
 &lt;div id="topnav"&gt;Top Nav&lt;/div&gt;
 &lt;div id="content"&gt;
 &lt;p&gt;The following text consists of a mock Latin which has been based 
 upon the average frequency of characters and word lengths of the 
 English language in order to reproduce a reasonably accurate overall 
 visual impression. Lorem ipsum dolor sit amet, consectetur adipscing 
 elit, sed diam nonnumy eiusmod tempor incidunt ut labore et dolore 
 magna aliquam erat volupat.&lt;/p&gt;
 &lt;p&gt;Et harumd dereud facilis est er expedit distinct. Nam liber a 
 tempor cum soluta nobis eligend optio comque nihil quod a impedit 
 anim id quod maxim placeat facer possim omnis es voluptas assumenda 
 est, omnis dolor repellend. Temporem autem quinsud et aur office 
 debit aut tum rerum necesit atib saepe eveniet ut er repudiand 
 sint et molestia non este recusand.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div id="botnav"&gt;Bottom Nav&lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="menu"&gt;Menu
 &lt;ul&gt;
 &lt;li&gt;blah&lt;/li&gt;
 &lt;li&gt;blah&lt;/li&gt;
 &lt;li&gt;blah&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;div id="footer"&gt;Footer&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@Sux0rZh_jc0rzauthorDec 05.2003 — #Ok, thanks a ton for your help pyro. that was exactly what i was looking for. i read your post and gave the bottomheader a width of 100% but it ended up making it scroll if i resized it... this was because of a padding: 20px 0px 5px 29px... so i made the margin: 0px 0px 0px -29px and it fixed the scrolling issue while keeping the header going to 100% of the page.. know why this would happen btw? i'm confused as to why this would happen..(IE 6..)

Can anyone view my website in mozilla/opera/netscape? Ima try to download those tonight..

(yeah i use IE cuz it's faster than the other ones on average...except mozilla. dunno bout that. never tried.)

thanks much in advance.

@pyroDec 05.2003 — #It does not work in Mozilla, and for a very good reason. You forgot to add clear: both; to the style definitions for your footer. Once you add that, it will work much better.

To figure out the actual width of an element, you must use this (and remember that IE 5 and 5.5 have a botched box model):

width = width + padding + border

So, if you set the width to 100% and have 29px of padding on the left, compliant browsers set the width to 100% + 29px.

As far as speed between IE and Mozilla, in most cases, it's seemed to me that Mozilla is faster.

@Sux0rZh_jc0rzauthorDec 05.2003 — #yes i figured it did 100% + 29... but i couldnt very well just make the percentage lower because they aren't like terms... let me add the clear and download the browsers and test it all out.

@pyroDec 05.2003 — #Ok, good luck. ?

@Sux0rZh_jc0rzauthorDec 07.2003 — #ok. what the what the heck.. i cant get positioning right on my menu for mozilla and IE. IE makes it right, but then mozilla has it 5 px to far the left. mozilla makes it right but then it is 5px to far to the right in IE... GRR. anyone know how to fix?

(http://xaxei.europe.webmatrixhosting.net)

@PeOfEoDec 07.2003 — #Sux0rZh@jc0rz, all the css is in your head, why not just link it there to an external file so it doesnt have to be on every page, save some bandwidth. :rolleyes:

@Sux0rZh_jc0rzauthorDec 07.2003 — #uhg thats already been covered. I'm not done changing the layout and its not being used for more than one page atm so why should i move it? its easier to alter how it is right now. i will use external when im ready to use the layout on more than one page.