CSS Forum

**brandonwaugh** · 06:30 PM

Hey i'm looking for someone to help me make my coding as simple as possible without really changing anything. Also get rid of stuff that really doesn't need to be there. I'm kinda new to the whole website design thing. This isn't going to be a real website or anything, it is just a school project.

HTML 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>

<title>Brandon's Super Awesome Website</title>



<style type="text/css">


html {height:100%;}
body {height:100%; margin:0; padding:0;}

#bg
{
position:fixed; top:0; left:0; width:100%; height:100%;
}

#content {position:relative; z-index:1;}


body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-image:url(Winter.jpg); size: auto;
	background-repeat:no-repeat;
	margin: 0;
	padding: 0;
	color: #000;
}
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}

a:link {
	color: #42413C;
	text-decoration: underline; 
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}


.container {
	width: 960px;
	margin: 0 auto; 
}


.header {
	background: #ADB96E;
	border:groove;
	border-color:#F00;

}

.sidebar1 {
	float: left;
	width: 180px;
	background: #EADCAE;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-bottom: 150px;
	border:groove;
	border-color:#F00;
}
.content {
	background-color:#390;
	padding: 10px 0;
	width: 600px;
	float: left;
	margin-top: 50px;
	margin-left: 80px;
	margin-bottom: 100px;
	border:groove;
	border-color:#F00;
}

.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}


ul.nav {
	list-style: none; 
	border-top: 1px solid #666; 
	margin-bottom: 15px; 
}
ul.nav li {
	border-bottom: 1px solid #666; 
}
ul.nav a, ul.nav a:visited { 
	padding: 5px 5px 5px 15px;
	display: block; 
	width: 160px; 
	text-decoration: none;
	background: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	background: #ADB96E;
	color: #FFF;
}



.fltrt {  
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.footer {
	padding: 10px 0;
	background: #CCC49F;
	margin-top: 100px;
	position: relative;
	clear: both;
	border:groove; 
	border-color:#F00;
}


</style></head>

<body>

<div class="container">
  <div class="header">
  <center>  <h1>Brandon's Super Awesome Perfect Website</h1> </center>
  <a href="#"><a href="#"></a></div>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="Home.html">Home</a></li>
      <li><a href="Aboutme.html">About</a></li>
      <li><a href="Photos.html">Photos</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
    <p><img src="Me.jpg" width="151" height="184" /></p>
<center><h4>This is me<br/>
    </h4> </center>
</div>
  <div class="content">
    <center><h1>Welcome to my Website!</h1></center>
    <p>This is my first ever website, and I was happy to make it! I'd really appreciate it if you could look around and read things on my website, like the <a href="Aboutme.html">About me</a> section of my website, to learn a little about me. Then head over to the <a href="Photos.html">Photos</a> page to see photos of me, things i like to do, and some other random things. Finally go to the <a href="Contact.html">Contact</a> page, where you can contact me and send me your opinions on my website, and what I can do to improve it.</p>
    <h2></h2>
    </div>
    
    <div class="footer">
    
   <center> <p> &copy;2010 Brandon waugh</p> </center>
    </div>
</div>
</div>
</body>
</html>

**ElmanF** · 10-27-2010, 05:21 AM

Try this CSS optimizer

**LadynRed** · 10-27-2010, 02:52 PM

What you need is to learn CSS shorthand. Many of your rules that take 3-4 line can be done all on ONE line with shorthand such as:

Quote:

padding-right: 15px;
padding-left: 15px;

is done on one line with: padding: 0 15px
0= top and bottom
15px = left and right

Quote:

background-image:url(Winter.jpg);
background-repeat:no-repeat;

Shorthand is: background: url(Winter.jpg) no-repeat;

All of this:

Quote:

a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}

would be more efficient as:

a:link, a:visited{
text-decoration: underline;
}
Then all you need is to set the colors for each of those. However, you don't need the text-decoration: underline at all as that is the default behavior for links. For accessibility reasons, you should NOT remove the underline from links, except for obvious navigation.

On this:

Quote:

border:groove;
border-color:#F00;

..shorthand comes in as border: 1px groove #f00;

and this:

Quote:

<center><h1>Welcome to my Website!</h1></center>

horrible. The <center> tag has been deprecated and CSS should be used for this. Get rid of it, just use:
h1{text-align: center;}

**Crazyhunk** · 10-29-2010, 01:59 PM

I tried my best...

Code:

<!DOCTYPE html> 
<head>
	<meta charset="utf-8">
	<!--[if IE]><![endif]-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Brandon's Super Awesome Website</title>
	<meta name="description" content="Description of Website here">
	<meta name="author" content="Brandon Waugh">
	<link rel="shortcut icon" href="favicon.ico">

	<style type="text/css">
	html {height:100%;}
	body {height:100%; margin:0; padding:0;}
	#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
	#content {position:relative; z-index:1;}
	body {font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;	background-image:url(Winter.jpg) no-repeat; size: auto;margin: 0;padding: 0;color: #000;}
	ul, ol, dl {padding: 0;margin: 0;}
	h1, h2, h3, h4, h5, h6, p {margin-top: 0;padding:0 15px;}
	h1, h4{text-align: center;}
	a img { border: none;}
	a:link {color: #42413C;}
	a:visited {color: #6E6C64;}
	a:link, a:visited{text-decoration: underline;}
	a:hover, a:active, a:focus {text-decoration: none;}
	.container {width: 960px;margin: 0 auto;}
	.header {background: #ADB96E;border: 1px groove #f00;}
	.sidebar1 {float: left;	width: 180px;background: #EADCAE;padding-bottom: 10px;margin-top: 20px;margin-bottom: 150px;border: 1px groove #F00;}
	.content {background-color:#390;padding: 10px 0;width: 600px;float: left;margin-top: 50px;margin-left: 80px;margin-bottom: 100px;border:1px groove #F00;}
	.content ul, .content ol {padding: 0 15px 15px 40px;}
	ul.nav {list-style: none;border-top: 1px solid #666;margin-bottom: 15px;}
	ul.nav li {border-bottom: 1px solid #666;}
	ul.nav a, ul.nav a:visited {padding: 5px 5px 5px 15px;display: block;width: 160px;text-decoration: none;background: #C6D580;}
	ul.nav a:hover, ul.nav a:active, ul.nav a:focus { background: #ADB96E;color: #FFF;}
	.fltrt {float: right;margin-left: 8px;}
	.fltlft {float: left;margin-right: 8px;}
	.clearfloat { clear:both;height:0;font-size: 1px;line-height: 0px;}
	.footer {padding: 10px 0;background: #CCC49F;margin-top: 100px;position: relative;clear: both;border:1px groove #F00;}
	.footer p {text-align:center;}
	</style>
</head>

<body>
	<div class="container">
		<div class="header">
			<h1>Brandon's Super Awesome Perfect Website</h1>
			<a href="#"></a></div>
			<div class="sidebar1">
				<ul class="nav">
					<li><a href="Home.html">Home</a></li>
					<li><a href="Aboutme.html">About</a></li>
					<li><a href="Photos.html">Photos</a></li>
					<li><a href="Contact.html">Contact</a></li>
				</ul>
				<p><img src="Me.jpg" width="151" height="184" alt="My Pic"/></p>
				<h4>This is me<br/></h4> 
			</div>
			<div class="content">
				<h1>Welcome to my Website!</h1>
				<p>This is my first ever website, and I was happy to make it! I'd really appreciate it if you could look around and read things on my website, like the <a href="Aboutme.html">About me</a> section of my website, to learn a little about me. Then head over to the <a href="Photos.html">Photos</a> page to see photos of me, things i like to do, and some other random things. Finally go to the <a href="Contact.html">Contact</a> page, where you can contact me and send me your opinions on my website, and what I can do to improve it.</p>
				<h2></h2>
			</div>
			<div class="footer">
				<p> &copy;2010 Brandon Waugh</p>
			</div>
		</div>
	</div>
</body>
</html>