WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Is the following code set up the right why and if not what should be changed.

Reply
  Thread Tools Display Modes
Old 24th October 10, 10:52 PM   #1
ilovecss
WLC Member
 
Join Date: Apr 2009
Posts: 15
Default Is the following code set up the right why and if not what should be changed.

Here is the html page.

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=utf-8" />
<title>Your Name Attorney at Law</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>

<body>
<div id="wrapper">
<div id="header"><!-- header --></div>
<div id="nav"> 
<!-- navigation links -->
<ul class="horizontal_list">
<li><a href="#"><span id="firmprofile">Firm Profile</span></a></li>
<li><a href="#"><span id="attorneys">Attorneys</span></a></li>
<li><a href="#"><span id="practiceareas">Practice Areas</span></a></li>
<li><a href="#"><span id="emailform">Email Form</span></a></li>
<li><a href="#"><span id="directions">Directions</span></a></li>
</ul>
</div>

<div id="links"><!-- links -->
<div id="linksa">Navigation</div>
<div id="linksb"><div style="padding:10px 20px 10px 20px;">Link Number 1</div></div>
<div id="linksc"></div>
</div>

<div id="maincontent"><!-- maincontent -->
<div id="maincontenta">Main Content</div>
<div id="maincontentb"><div style="padding:10px 20px 10px 20px;">Some news goes here...</div></div>
<div id="maincontentc"></div>
</div>

<div id="footer">All Rights Reserved Copyright 2010 - 2011</div>

</div>
</body>
</html>
Here is the css code!!!

Code:
@charset "utf-8";
/* CSS Document */
body {
	background-color: #FFF;
	margin: 0px;
	padding: 0px;
}
#wrapper #header {
	background-image: url(images/header.gif);
	height: 262px;
	width: 1000px;
	background-repeat: no-repeat;
}
#wrapper {
	height: auto;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#links {
	float: left;
	height: auto;
	width: 250px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#linksa {
	background-image: url(images/linksa.gif);
	background-repeat: no-repeat;
	height: 45px;
	width: 250px;
	line-height: 45px;
	text-align: center;
	vertical-align: middle;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
}
#linksb {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #999;
	background-image: url(images/linksb.gif);
	background-repeat: repeat-y;
	height: 300px;
	width: 250px;
}
#footer {
	background-image: url(images/footer.gif);
	background-repeat: no-repeat;
	clear: both;
	height: 40px;
	width: 1000px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 40px;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
}

#linksc {
	background-image: url(images/linksc.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 250px;
}


a:link {
	color:#FFF;
	font:Verdana, Geneva, sans-serif;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-decoration:none;
}
a:visited {
	color:#666;
	font:Verdana, Geneva, sans-serif;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-decoration:none;
}
a:hover {
	color:#666;
	font:Verdana, Geneva, sans-serif;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-decoration:none;
}
a:active {
	color:#666;
	font:Verdana, Geneva, sans-serif;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-decoration:none;
}
#nav {
	height:40px;
	width:1000px;
	margin-right: auto;
	margin-left: auto;
}
ul{
	padding: 0;
	height: auto;
	margin: 0;
}
ul.horizontal_list li{
    text-align: left;
    float: left;
    list-style: none
}
#firmprofile
{
	display: block;
	width: 202px;
	height: 40px;
	background:url(images/1.gif) no-repeat 0 0;
	width:202px;
	height:40px;
	border:0px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
}
#attorneys
{
	display: block;
	width: 200px;
	height: 40px;
	background:url(images/2.gif) no-repeat 0 0;
	width:200px;
	height:40px;
	border:0px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
}
#practiceareas
{
	display: block;
	width: 200px;
	height: 40px;
	background:url(images/3.gif) no-repeat 0 0;
	width:200px;
	height:40px;
	border:0px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
}
#emailform
{
	display: block;
	width: 199px;
	height: 40px;
	background:url(images/4.gif) no-repeat 0 0;
	width:199px;
	height:40px;
	border:0px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
}
#directions
{
	display: block;
	width: 199px;
	height: 40px;
	background:url(images/5.gif) no-repeat 0 0;
	width:199px;
	height:40px;
	border:0px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
}
.padding {
	padding-top:50px;
}
#maincontent {
	float: right;
	height: auto;
	width: 740px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#maincontenta {
	background-image: url(images/maincontenta.gif);
	background-repeat: no-repeat;
	height: 45px;
	width: 740px;
	line-height: 45px;
	text-align: center;
	vertical-align: middle;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
}
#maincontentb {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #999;
	background-image: url(images/maincontentb.gif);
	background-repeat: repeat-y;
	height: 300px;
	width: 740px;
}
#maincontentc {
	background-image: url(images/maincontentc.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 740px;
}
ilovecss is offline   Reply With Quote
Old 24th October 10, 11:46 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Is the following code set up the right why and if not what should be changed.

Set up the "right way" for what?
chrishirst is offline   Reply With Quote
Old 25th October 10, 12:03 AM   #3
ilovecss
WLC Member
 
Join Date: Apr 2009
Posts: 15
Default Re: Is the following code set up the right why and if not what should be changed.

Is the html and css setup the right way. Or could I code
it a different way?
ilovecss is offline   Reply With Quote
Old 25th October 10, 01:12 AM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Is the following code set up the right why and if not what should be changed.

There is no "right way" or "wrong way". There are several ways to write the markup. If it gets the layout you were looking for, it's right.
chrishirst is offline   Reply With Quote
Old 25th October 10, 11:11 AM   #5
sheferd
WLC Member
 
Join Date: Aug 2010
Location: Liverpool (but I'm from the south)
Posts: 40
Default Re: Is the following code set up the right why and if not what should be changed.

You could remove the inline styles.
" style="padding:10px 20px 10px 20px;" "
And apply a class instead

That would be more "the right way"...

Other than that looks ok...
Also for future reference (to the code) you could put closing comments on closing divs that have alot of content in them.

e.g. <!-- /maincontent --> It's not required but it was a little tricky finding one or two, mainly just because of the horizontal space a post allows but it's good practice.
sheferd is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:45 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.