|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
September 7th, 2005, 10:51 AM
|
|||
|
|||
|
CSS Sites - www.kdbuilders.co.uk
I have built the following site
www.kdbuilders.co.uk Here is the stylesheet and source code for the site, what i was wondering is if i have produced my site the best way possible. I think i haven't as my footer as to be positioned. Along with other little chinks i can find in my design. i was hoping that someone could have a look at my design techniques and tell me where i have gone wrong many thanks. Source Code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>KD Builders</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Description" content="KD Builders of Huddersfield are specilists in gabion baskets and Gabion installation along with general building work ranging from walling to paving." />
<link rel="stylesheet" type="text/css" href="KDBuilders.css" media="screen" />
</head>
<body>
<div id="container">
<div id="pageHeader"><img src="logo.gif" height="80" width="250" alt="KD Builders" />
</div>
<div id="button">
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="GabionBaskets.html">Gabion Baskets</a></li>
<li><a href="GeneralBuilding.html">General Building</a></li>
<li><a href="ContactUs.html">Contact Us</a></li>
</ul>
</div>
<div id="CenterBox"><img src="BoltonJob1.jpg" alt="Kienan Bolton"/>
<img src="CooksonsJob1.jpg" alt="Walling Holmbridge"/>
<img src="MelthamJob1.jpg" alt="Paving Meltham"/>
<img src="GleesonsJob1.jpg" alt="Walling Holmfirth"/>
</div>
<div id="LeftBox">
<h4>About KD Builders</h4>
<p class="p1"> KD Builders have over 13 years experience in the building and construction industry with both partners being C.I.T.B trained to an advanced craft level and are experienced in all aspects of walling and general building construction.</p>
<p class="p1">
The company has recently expanded into Gabion Basket installation and fitting service and acquired a new Director to the company, Gordon Williamson who has over 10 years experience in this field of work.The company currently has a maximum of 10 staff at any one time. Although we are a small company we pride ourselves on our professionalism and craftsmanship with our attention to detail.</p>
<p class="p1">
We are currently working on various contracts and would welcome the opportunity to work directly for your company, and feel that we can offer a quality service.
</p>
</div>
<div id="RightBox">
<h4>Testimonials</h4>
<p class="p1">
KD Builders have successfully completed projects for the following construction businesses.
</p>
<ul>
<li>Henry Boot</li>
<li>JR Cooksons</li>
<li>Kienan Construction</li>
<li>Finnegans</li>
</ul>
</div>
<div id="Footer">
<img src="break.gif" width="550" height="2" alt=""/>
<p class="p1">
KD Builders <br />
Tel: 01484 6674534<br />
E-Mail: Info@KDBuilders.co.uk
</p>
</div>
</div>
</body>
</html>
Stylesheet Code:
body{
text-align:center;
font: 10px "trebuchet MS", Arial, Helvetica, Sans-serif;
background: #e2e2e2;
}
#pageHeader {
width:700px;
height:100px;
background:#ffffff;
margin:0;
padding:0;
color: #666666;
}
#pageHeader img { position: absolute; left: 20px; top: 3px; width: 250px; height: 80px; }
#button {
width: 360px;
padding: 0;
margin: 0;
font-family: trebuchet MS, Arial, sans-serif;
font-size: 11px;
text-align: center;
position:absolute;
top:68px;
left:330px
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
#button li
{
float:left;
width:90px;
}
#button li a {
float:left;
width:90px;
color: #7c7c7c;
text-decoration: none;
}
#button li a:hover {
background-color: #ffffff;
text-decoration: underline;
width:90px;
color: #d00000;
}
#container {
text-align:left;
background:#ffffff;
width:700px;
height:550px;
margin:auto;
position:relative;
padding:0;
}
#CenterBox {
position:absolute;
left:25px;
top:90px;
height: 125px;
width: 650px;
background-color: #e2e2e2;
color: #ffffff;
}
#CenterBox img { float:left; width: 125px; height: 90px; margin-left: 25px; margin-top: 15px; border: 3px solid }
#LeftBox {
position:absolute;
left:25px;
top:250px;
width: 425px;
text-align: justify;
padding: 0 0 5px;
background-color: #ffffff;
color: #666666;
}
#LeftBox h4 {
font-size: 16px;
background: #ffffff;
height: 15px;
margin: 0;
color: #d00000;
}
#LeftBox .p1{
font: 11px "trebuchet MS", Arial, Helvetica, Sans-serif;
line-height: 1.3em;
padding:2px 2px 0px;
}
#RightBox {
position:absolute;
left:480px;
top:250px;
width: 183px;
text-align: justify;
background-color: #ffffff;
color: #7c7c7c;
}
#RightBox h4 {
font-size: 16px;
height: 15px;
text-align: center;
margin:0px;
color: #d00000;
}
#RightBox .p1{
font: 11px "trebuchet MS", Arial, Helvetica, Sans-serif;
line-height: 1.3em;
padding:2px 2px 0px;
}
#Footer {
position:absolute;
top: 480px;
height:2px;
width: 700px;
text-align: center;
font: 10px "trebuchet MS", Arial, Helvetica, Sans-serif;
word-spacing: 10px;
background-color: #ffffff;
color: #000000;
}
#Footer .p1{
position:relative;
top: -10px;
font: 12px "trebuchet MS", Arial, Helvetica, Sans-serif;
color: #7c7c7c;
margin-left: 30px;
}
|
|
#2
September 9th, 2005, 09:17 AM
|
||||
|
||||
|
Looks good to me! Personally I try to avoid using "position: absolute", but there's nothing wrong with it...the design looks good too.
I was unable to validate your css due to one warning on your xhtml: validate xhtml You should be able to fix this be using the unicode value for the ampersand.
__________________
ShepherdWeb :: Charging Rhino Wizard I know of no more encouraging fact than the unquestionable ability of man to elevate his life by conscious endeavor. {Henry David Thoreau} § shepherdweb.com § fariswheel productions § reagan administration
|
|
#3
September 9th, 2005, 12:04 PM
|
||||
|
||||
|
Your headings are in the wrong order, btw.
<h1> should be the top-level header. If the page title/header is an image, then make it the background of the <h1> element with CSS and hide the contents with a <span> with display: none;
|
|
#5
September 10th, 2005, 10:13 AM
|
||||
|
||||
|
i like the site, clean and easy to read. The only thing is that on a couple of pages menu options appear on the left but i didn't see these straight away...dunno if there is someway of making them more noticable!! just a thought !!
__________________
|
|
#6
September 11th, 2005, 12:36 AM
|
||||
|
||||
|
--moved to Site Reviews forum, it's more proper place.
 nice and simple design, well done for that... and looks like fully valid xhtml with minimal html contents. as far as I could see now, there's nothing wrong with the design - guess you can simply check all pages in the automatic validators to see for yourself.
|
|
#7
September 11th, 2005, 10:43 PM
|
||||
|
||||
|
Looks very nice, i must say
It looks very familiar too
__________________
www.xoise.com - www.ourfreegames.com - www.playtouchgames.com - www.randomtools.net - www.xenocide-rpg.com
|
|
#8
September 12th, 2005, 02:41 AM
|
||||
|
||||
|
Quote:
|
|
#9
September 13th, 2005, 08:25 PM
|
|||
|
|||
|
Difficult to grab and interest a user with building and stonework as your brief but plaudits to your effort.
I thought it was an extermely nice touch with the slideshow showing the work in progress, the sub-menu bar was out of place hidden like text down the left - needs more thought. Pretty good effort overall.
|
|
#11
September 14th, 2005, 09:04 PM
|
||||
|
||||
|
Oh, he posted originally with a table layout and the works looking to validate his html, and I helped him out.
|
|
#12
September 14th, 2005, 09:11 PM
|
||||
|
||||
|
Quote:
ah...
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
