PDA

Click to See Complete Forum and Search --> : A Review..(Take Revenge!)

Sux0rZh@jc0rz
12-03-2003, 10:13 PM
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.

http://xaxei.europe.webmatrixhosting.net <--The site.
http://somuchlove.2ya.com <--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?
jeff_archer7
12-03-2003, 11:05 PM
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">

<!--------------------BASTARDIZED BY THE CATDOG------------------------>

<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><!-- BlueRobot was here.(Thanks for the hacks!) --></BODY></HTML>
Paul Jr
12-03-2003, 11:15 PM
Doesn't fix the problem...
Sux0rZh@jc0rz
12-03-2003, 11:52 PM
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 Jr
12-04-2003, 12:30 AM
External Stylesheet.
Sux0rZh@jc0rz
12-04-2003, 06:54 AM
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.
pyro
12-04-2003, 08:28 AM
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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
#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;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="topnav">Top Nav</div>
<div id="content">
<p>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.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a
tempor *** 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.</p>
</div>
<div id="botnav">Bottom Nav</div>
</div>
<div id="menu">Menu
<ul>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>
</div>
<div id="footer">Footer</div>
</body>
</html>
Sux0rZh@jc0rz
12-05-2003, 07:08 AM
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.
pyro
12-05-2003, 08:43 AM
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@jc0rz
12-05-2003, 03:16 PM
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.
pyro
12-05-2003, 04:51 PM
Ok, good luck. :)
Sux0rZh@jc0rz
12-07-2003, 11:47 AM
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)
PeOfEo
12-07-2003, 01:13 PM
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@jc0rz
12-07-2003, 01:42 PM
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.