CSS in a Mess: Help Needed - Webmaster Forum - Web Design, Programming and SEO forums

08-10-2004, 03:41 PM

ULTiMATE

Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:

Posts: 241

iTrader: 0 / 0%

ULTiMATE is on a distinguished road

CSS in a Mess: Help Needed

I've been coding this site on and off for ages now using tutorials and a book i picked up from the library. I finally managed to bring my page to XHTML 1.0 Strict, but still problems with the CSS and getting things to show up properly. I'm still flawed with my CSS, so can someone help me by running through what the problem may be. The problem i have are the header font tags (H2, H3, etc). Also the code is an absolute mess, so help with how i could clean it up would be appreciated.

Code:

/* General */

body{
	background-color: #005689;
	color: #67A7D7;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 75%;
	text-align: center;
}

body, div, p, span{
	font-family: "Arial", Verdana, helvetica, sans-serif;
	letter-spacing: 1px;
}

a{
	color: #000000;
	text-decoration: none;
}

a: visited{
	color: #000000;
	text-decoration: none;
}

a: hover{
	color: #000000;
}

/* Main Layout Area's */

#wrapper{

	background: #fff url(background-inner.gif) repeat;
	color: #333333;
	margin: 25px auto;
	padding: 0px;
	border: 1px solid #000000;
	voice-family: "\"}\""; 
	voice-family: nherit;
	width: 700px;	
	text-align: justify;
}

#banner { 
	background: url(banner.jpg) no-repeat left top;
	float: left;
	width: 700px;
	height: 100px;
}

#content{
	width: 420px;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
}

#latestproject{
	width: 220px;
	margin-right: 8px;
	float: right;
	background: #FFFFFF;
	border: 1px solid #DDDDDD;
	text-align: center;
}

#sidemenu{
	font-fanily: "Arial", Verdana, Helvetica, sans-serif;
	font-size: 100%;
	width: 220px;
	margin-right: 8px;
	float: right;
	text-align: left;
}

#footer{
	font-family: "Arial", Verdana, Helvetica, sans-serif;
	font-size: 0.8em;
	clear: both;
	padding: 10px 5px 10px 5px;
	border-top: 1px dotted #DDDDDD;
	background-color: #FFFFFF;
	position: relative;
	top: 0px;
}

.clear{
	clear: both;
}


/* Header Area's */



/* Typography */

h1{
	margin: 0 0 15px 0;
	padding: 0;
	width: 700px;
	height: 160px;
	text-indent: -9999px;
	clear: both;
}

#content h2{
	margin: 0 0 5px 0;
	padding: 0;
	height: 43px;
	text-indent: -9999px;
}

#latestproject h3{
	margin: 0;
	padding: 0;
	height: 21px;
	text-indent: -9999px;
}

h4{
	margin: 5px 0 0 0;
	padding: 0;
	font-size: 1.1em;
	font-family: "Arial", Verdana, helvetica, sans-serif;
	font-weight: bold;
	letter-spacing: 1px;
	color: #005689;
}

#content h4{
	border-bottom: 1px solid #CCCCCC;
}


#content p, #content-full p{
	text-align: justify;
	color: #333333;
	margin-top: 0;
	margin-bottom: 15px;
}

#content-full img{
	border: 1px solid #EAEAEA;
	margin: 0 5px;
}

#sidebar h3, #sidebar h4, #sidebar p{
	padding: 0 10px;
	text-align: left;
}

#sidebar p, .small{
	margin: 0;
	font-size: 0.9em;
	color: #666666;
	background: transparent;
}


/* Other */

#sidebar img{
	border: 1px solid #EAEAEA;
	margin-top: 10px;
}

08-10-2004, 06:18 PM

Evo

Status: Junior Member
Join date: Aug 2004
Location:
Expertise:
Software:

Posts: 39

iTrader: 0 / 0%

Evo is on a distinguished road

#sidemenu{
font-fanily: "Arial", Verdana, Helvetica, sans-serif;
font-size: 100%;
width: 220px;
margin-right: 8px;
float: right;
text-align: left;
}

mispelt font-family, thats something easy to fix.

a: visited{
color: #000000;
text-decoration: none;
}

a: hover{
color: #000000;
}

no space should be between the a: and the next work, make them a:visited and a:hover.

Thats all I see that should make it valid.

Too make it better, well, I'm new to this so talk to someone who knows a lot about it.