I've horribly mangled my CSS. Tell me what I'm doing wrong.

Discussion in 'CSS' started by bakagamer, Feb 4, 2006.

0
  1. #1
    I'm fairly experienced with html from web design classes, but they never went in depth about css layouts. I've been working on one, and I had just finished it, when I screwed it up. It doesn't display anywhere near properly, and it seems to hate me, I add one new thing and I screw the layout up.
    Here's the code: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
	width:880px;
	height:600px;
	clear: none;
	float: left;
}
#sidebar_link {
background-color:#7EB379;
width:115;
height:15px;
padding:2px;
border-bottom:1px solid #000;
}
#sidebar_spacer {
width:115px;
height:5px;
}

#top {
	color:#333333;
	width:880px;
	background-color: #BBDBCD;
	border-bottom: 2px solid #000;
	height: 30px;
}
#bottom {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	width:880px;
	background-color: #D3E7E4;
	text-align:center;
	height: 15px;
	float: left;
}
#thumb_left {
width:95px;
height:95px;
float:left;
padding:4px;
border:1px solid #000000
}
#thumb_right {
width:95px;
height:95px;
float:right;
padding:4px;
border:1px solid #000000
}
#main {
	color:#333333;
	height:520px;
	width:614px;
	font-family:Arial, Helvetica, sans-serif;
	color: #333333;
	background:#D3E7E4;
	letter-spacing: normal;
	text-align: center;
	border-bottom: 2px solid #000;
	float: left;
	}
#sidebar {
	float:left;
	width:124px;
	height:500px;
	color: #333333;
	padding-bottom:20px;
	padding-right:5px;
	background-color: #94C5BD;
	border-bottom: 2px solid #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	border-left: 2px solid #000;
}
#right {
	float:left;
	width:123px;
	height:500px;
	border-bottom:2px solid #000;
	font-family:Arial, Helvetica, sans-serif;
	color: #333333;
	padding-bottom:20px;
	padding-right:5px;
	padding-left:5px;
	background-color: #94C5BD;
	border-right: 2px solid #000;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}
body {
	background-color: #73B098;
}
</style>
	
<title>Wrek LG -- WORD OMITTED TO PROTECT THE INNOCENT Happens. A lot. </title>
</head>

<body style="background-color:#73B098"> <!-- PAGE STARTS HERE ________________ -->
<div id="container"> 
<div id="top" align="center">
  <h1>Wrek-LG.com</h1>
</div>

<div id="sidebar"><div id="sidebar_spacer"></div>
  <div id="sidebar_link">links</div>
  <div id="sidebar_link">links</div>
  <div id="sidebar_link">links</div>
  <div id="sidebar_spacer"></div>
  <div id="sidebar_link">links</div>
  <div id="sidebar_link">links</div>
  <div id="sidebar_link">links</div>
  <div id="sidebar_link">links</div>
  <div id="sidebar_link">links</div>
  <div id="sidebar_link">links</div>
</div>
<div id="main">
  <iframe scrolling="yes" height="510" width="600" src="home_iframe.html" frameborder="0" name="main" />
</div>

<div id="right"><p>Test Test Test Test Test Test </p>
</div>
<div id="bottom"><p>&quot;Bakagamer&quot;, 2006.</p></div>
</div>

</body>

</html>
    Code (markup):
    Anyone want to check it out and tell me what I'm doing wrong? Knowing me, it should be something obvious I overlooked. :)
    Thanks in advance.
    Edit: I un-mangled the code and (I'm still not sure what was wrong, it just worked. :) ) and now the last 2 parts (right side, footer) don't show up for whatever reason.
     
    bakagamer, Feb 4, 2006 IP
  2. AWD1

    AWD1 Peon

    Messages:
    191
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hey dude,

    Have you got a link somewhere we could see? It might make more sense to us then.

    By the way...you should probably "unlearn" what you learned in web design classes. If yours are anything like the ones we have in Canada are, you're bound to end up swimming upstream.
     
    AWD1, Feb 5, 2006 IP
  3. bakagamer

    bakagamer Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sorry to bump such an old thread, but I lost the bookmark and forgot about it for a while. :p Anyways, I scrapped this design for something I did in fireworks.
     
    bakagamer, Feb 23, 2006 IP