I wrote this code but for some reason it seems out of wack and the firefox browser scambled all of the codes. * { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 800px;
}
#header {
OPACITY: 1.00;
-MOZ-OPACITY: 1.00;
-KHTML-OPACITY: 1.00;
FILTER: ALPHA (OPACITY=100);
BACKGROUND-COLOR: RGB(0,0,0)! IMPORTANT;
BACKGROUND-IMAGE: URL(IMAGE URL GOES HERE);
BACKGROUND-POSITION: CENTER CENTER;
BACKGROUND-REPEAT: NO-REPEAT;
BACKGROUND-ATTACHMENT: FIXED;
BORDER-COLOR: RGB(135,120,19)! IMPORTANT;
BORDER-STYLE: DOUBLE;
BORDER-WIDTH: 0px;
FONT-FAMILY: Verdana;
FONT-WEIGHT: BOLD;
FONT-STYLE: NORMAL;
FONT-SIZE: 12px;
TEXT-DECORATION: UNDERLINE;
TEXT-TRANSFORM: UPPERCASE;
TEXT-ALIGN: CENTER;
POSITION: relative;
MARGIN-TOP: 50px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
WIDTH: 800px; HEIGHT: 200px;
VISIBILITY: VISIBLE! IMPORTANT;
}
#navigation {
color: #333;
MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
MARGIN-BOTTOM: 10px;
background: yellow;
width: 800px;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
}
#leftcolumn {
background: green;
display: incline;
color: #333;
MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 10px;
MARGIN-BOTTOM: 10px;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
width: 580px;
float: left;
}
#rightcolumn {
background: blue;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
display: incline;
color: #333;
MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
MARGIN-BOTTOM: 10px;
width: 180px;
float: right;
}
#footer {
MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
MARGIN-BOTTOM: 10px;
width: 800px;
clear: both;
color: #333;
background: orange;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
}
.clear { clear: both; background: none; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Faux Column CSS Layouts - 3 Column - faux-4-3-col</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<STYLE TYPE="TEXT/CSS">
.MyGen {Text Properties}
.TEXT {
COLOR: RGB(255,255,255)! IMPORTANT;
BACKGROUND-COLOR: RGB()! IMPORTANT;
BACKGROUND-IMAGE:
URL(IMAGE URL GOES HERE);
BACKGROUND-POSITION: CENTER CENTER;
BACKGROUND-ATTACHMENT: FIXED;
BACKGROUND-REPEAT: NO-REPEAT;
BORDER-COLOR: RGB(255,255,255)! IMPORTANT;
BORDER-STYLE: NONE;
BORDER-WIDTH: 1px;
FONT-FAMILY: Verdana;
FONT-WEIGHT: NORMAL;
FONT-STYLE: NORMAL;
FONT-SIZE: 10px;
TEXT-DECORATION: NORMAL;
TEXT-TRANSFORM: NONE;
text-align: justify;
MARGIN: px; PADDING: px;
DISPLAY: BLOCK;
}
A:ACTIVE, A:VISITED, A:LINK,
A.REDLNIK:ACTIVE, A.REDLINK:VISITED, A.REDLINK:LINK,
A.NAVBAR:ACTIVE, A.NAVBAR:VISITED, A.NAVBAR:LINK,
A.TEXT:ACTIVE, A.TEXT:VISITED, A.TEXT:LINK {
COLOR: RGB(255,255,255)! IMPORTANT;
BACKGROUND-COLOR: RGB()! IMPORTANT;
BACKGROUND-IMAGE:
URL(IMAGE URL GOES HERE);
BACKGROUND-POSITION: CENTER CENTER;
BACKGROUND-ATTACHMENT: FIXED;
BACKGROUND-REPEAT: NO-REPEAT;
BORDER-COLOR: RGB(255,255,255)! IMPORTANT;
BORDER-STYLE: NONE;
BORDER-WIDTH: 1px;
FONT-FAMILY: Verdana;
FONT-WEIGHT: NORMAL;
FONT-STYLE: NORMAL;
FONT-SIZE: 10px;
TEXT-DECORATION: NONE;
TEXT-TRANSFORM: UPPERCASE;
TEXT-ALIGN: CENTER;
MARGIN: px; PADDING: px;
DISPLAY: ;
}
A:HOVER, A.REDLINK:HOVER, A.NAVBAR:HOVER, A.TEXT:HOVER {
COLOR: RGB(136,65,18)! IMPORTANT;
BACKGROUND-COLOR: RGB()! IMPORTANT;
BACKGROUND-IMAGE:
URL(IMAGE URL GOES HERE);
BACKGROUND-POSITION: CENTER CENTER;
BACKGROUND-ATTACHMENT: FIXED;
BACKGROUND-REPEAT: NO-REPEAT;
BORDER-COLOR: RGB(255,255,255)! IMPORTANT;
BORDER-STYLE: NONE;
BORDER-WIDTH: 1px;
FONT-FAMILY: Verdana;
FONT-WEIGHT: BOLD;
FONT-STYLE: NORMAL;
FONT-SIZE: 11px;
TEXT-DECORATION: UNDERLINE;
TEXT-TRANSFORM: UPPERCASE;
TEXT-ALIGN: CENTER;
MARGIN: px; PADDING: px;
DISPLAY: ;
}
</STYLE>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header"><h1><a href="http://www.example.com">Free CSS Layouts</a></h1></div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation"> Navigation Here </div>
<!-- End Navigation -->
<!-- Begin Left Column -->
<div id="leftcolumn">
<SPAN CLASS="TEXT"><CENTER>Music Videos</CENTER></SPAN>
<SPAN CLASS="TEXT">
<img border="1" src="http://www.example.com" align="left" width="150" height="200" alt="picture1qu2">
specific text removed
</SPAN>
</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<!-- End Content Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<CENTER>
<SPAN CLASS="TEXT"><CENTER>Music Videos</CENTER></SPAN>
<br>
<SPAN CLASS="TEXT"><CENTER>Paramore<BR>Misery Business<BR></CENTER></SPAN>
<embed src="http://www.example.com" type="application/x-shockwave-flash" allowfullscreen="true" width="180" height="148"></embed>
<br>
<SPAN CLASS="TEXT"><CENTER>Paramore<BR>Misery Business<BR></CENTER></SPAN>
<embed src="http://www.example.com" type="application/x-shockwave-flash" allowfullscreen="true" width="180" height="148"></embed>
<br>
<SPAN CLASS="TEXT"><CENTER>Paramore<BR>Misery Business<BR></CENTER></SPAN>
<embed src="http://www.example.com" type="application/x-shockwave-flash" allowfullscreen="true" width="180" height="148"></embed>
<br>
<SPAN CLASS="TEXT">
specific text removed
</SPAN>
<BR>
</CENTER>
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer"> This is the Footer </div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
[edited by: VividDreamer at 6:29 pm (utc) on Feb. 7, 2009]
[edited by: swa66 at 11:30 am (utc) on Feb. 10, 2009]
[edit reason] URL and politically loaded specific text removal, please see ToS [/edit]
