9 replies [Last post]
Siggles
Offline
newbie
Last seen: 15 years 23 weeks ago
Joined: 2006-02-23
Posts: 9
Points: 0

http://www.knollysgardencentre.co.uk/test2/index3.html

Thanks for your comments.

Siggles

Anonymous
Anonymous's picture
Guru

My first CSS site. ANy good?

Looks nice.

Fix the validation errors and it'll be nicer. Wink

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

My first CSS site. ANy good?

I think the navigation items at the top would look better if they were all one size.

I like it, it's very easy to read, but I think maybe it's a bit bland?

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 7 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

My first CSS site. ANy good?

Also in FF (on PC) there is something odd going on with your "web design by" bit being in the wrong place.

See attachment.

Siggles
Offline
newbie
Last seen: 15 years 23 weeks ago
Joined: 2006-02-23
Posts: 9
Points: 0

My first CSS site. ANy good?

briski wrote:
Also in FF (on PC) there is something odd going on with your "web design by" bit being in the wrong place.

See attachment.

I thought I had fixed that grrrr! It looks okay on my Firefox though??

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

My first CSS site. ANy good?

You're not clearing the floats.

Verschwindende wrote:
  • CSS doesn't make pies

Siggles
Offline
newbie
Last seen: 15 years 23 weeks ago
Joined: 2006-02-23
Posts: 9
Points: 0

My first CSS site. ANy good?

thepineapplehead wrote:
You're not clearing the floats.

Hi, thanks for your help.

Does that mean I must add

clear: both;

to each div id in the style sheet?

I have one in the footer div but no where else. When I added this, not long before I posted this message, it seemed to resolve the probelm on my FF.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

<meta http-equiv="Content-Language" content="en-gb" />

<title>Knollys Garden Centre</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<!-- style sheet links -->
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />

</head>

<body>
<!-- border -->
<div id="container">

<!-- picture header -->
<div id="header"><img alt="home" src="background4.jpg" width="740" height="150" /></div>

<!-- menu -->
<div id="menu">
	<div id="navcontainer">
		<ul id="navlist">
			<li><a title="link one" href="index.html">Home</a></li>
			<li><a title="link two" href="index.html">Tree Ordering</a></li>
			<li><a title="link three" href="index.html">Consultation</a></li>
			<li><a title="link four" href="index.html">Landscaping</a></li>
			<li><a title="link five" href="index.html">Shed Supply</a></li>
			<li><a title="link six" href="index.html">Fencing & Trellis</a></li>
			<li><a title="link seven" href="index.html">Paving</a></li>
			<li><a title="link eight" href="index.html">Aggregates</a></li>
		</ul>
	</div>
</div>

<!-- main content -->
<div id="content">
  <div id="leftcolumn">
  <div class="underline2">
	  <h1>Knollys Garden Centre</h1>
	  <p>Knollys Road, London, SW16 2JJ &middot; Tel: 0208 769 7321</p>
	</div>
	
	<div id="picwrap"><img src="exterior7_s.jpg" alt="Test" width="125" height="94" border="1" align="absbottom" class="floatimgleft"/>
	  <p>At Knollys Garden Centre our friendly and knowledgeable staff will be happy to answer all your gardening questions. We stock a huge range of garden products and sundries, tools, seeds, bulbs, pots, houseplants, specialist and multi-purpose composts, along with bedding, shrubs trees and perennials.</p>
	</div>

<div class="underline2">
	  <h2>Tree Ordering Service </h2>
	</div>

<p>Mature container grown trees  delivered direct to your door. All you have to do is choose from our  comprehensive catalogue and we will deliver at a time that suits you.
</p>

<div class="underline2">
	  <h2>Consultation</h2>
	</div>

<p>We can suggest the right plant  for the right position and for an agreed charge will visit your home, draw up a  planting plan and supply everything necessary to transform your garden.</p>


<div class="underline2">
	  <h2>Landscaping Service </h2>
	</div>

<p>Our associate company Terra Firma  Landscapes can offer a complete landscaping service from clearance of overgrown  plots to a design and build service. Small courtyards or a large garden  commercial or private ask us for a quotation.</p>




</div>


<div id="rightcolumn">
  <h2 align="right"><img src="sample_calendar2.jpg" alt="Calendar" width="80" height="47" class="floatimgleft"/><br />
    Gardening Calendar</p>
  </h2>
</div>

<div id="rightcolumn2">
  <p>At Knollys garden centre our friendly and knowledgeable staff will be happy to answer all your gardening questions. We stock a huge range of garden products and sundries, tools, seeds, bulbs, pots, houseplants, specialist and multi-purpose composts, along with bedding, shrubs trees and perennials.</p>
  
  <div class="underline2">
	  <h2>Special Offers </h2>
	</div>
  
  <p>At Knollys garden centre our friendly and knowledgeable staff will be happy to answer all your gardening questions. We stock a huge range of garden products and sundries, tools, seeds, bulbs, pots, houseplants, specialist and multi-purpose composts, along with bedding, shrubs trees and perennials.</p>
  
  <p>At Knollys garden centre our friendly and knowledgeable staff will be happy to answer all your gardening questions. We stock a huge range of garden products and sundries, tools, seeds, bulbs, pots, houseplants, specialist and multi-purpose composts, along with bedding, shrubs trees and perennials.</p>
</div>

</div>


<!-- bottom footer -->
<div id="footer">
	<p>web design by <a title="Siggit.com" href="http://www.tristarwebdesign.co.uk">Siggit.com</a></p>
</div>

</div>

</body>

</html>

body
{
	margin: 25px;
	font-family: trebuchet ms, arial, verdana, tahoma;
	font-size:80%; line-height: 200%;
	background-image:url('background.jpg');
	background-repeat:repeat-y;
}

img
{
	border: 1px;
	float: left;
}

a:active, a:visited, a:link
{
	color: #5F5F3D;
	text-decoration: none;
}

a:hover
{
	color: #000;
	text-decoration: none;
}

#container
{
	width: 760px;
	margin: 20px auto;
	border:1px solid #666642;
	background-color: #F5F5F1;
}

#picwrap
{
	float: left;
	margin-top: 10px;
}

#header
{
	width: 740px;
	height: 150px;
	margin: 10px auto;
	border:1px solid #666642;
	background-color: #E7E7DA;
}

#header h1
{
	font-size: 400%;
}

#menu
{
	width: 740px;
	height: 35px;
	margin: 10px auto;
	border:1px solid #666642;
	background-color: #E7E7DA;
}

#content
{
	width: 720px;
	padding: 10px;
	margin: 10px auto;
	border:1px solid #666642;
	background-color: #E7E7DA;
	clear: both;
	height: 820px;
}

#content h1
{
	font-size: 300%;
	color: #666642;
	padding-top: 10px;
	font-weight: 100;
}

#content h2
{
	font-size: 175%;
	color: #666642;
	font-weight: 100;
}

#topcompname
{
	width: 50%;
	float: left;
}

#leftcolumn
{
	width: 55%;
	float: left;
}

#rightcolumn
{
	width: 40%;
	border-bottom: 1px dashed #666642;
	float: right;
	margin-top: 20px;
}

#firstpic
{
	width: auto;
	float: left;
	margin-top: 20px;
}

#firstpic2
{
	width: auto;
	float: left;
	margin-top: 20px;
}


#rightcolumn2
{
	width: 39%;
	float: right;
	margin-top: 20px;
	clear: both;
}

.underline1
{
	width: 100%;
	border-bottom: 1px dashed #666642;
	float: left;
}

.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
clear: both;
} 

.underline2
{
	width: 100%;
	border-bottom: 1px dashed #666642;
	margin-top: 20px;
}

#footer
{
	width: 720px;
	padding: 0px 10px;
	margin: 10px auto;
	border:1px solid #666642;
	background-color: #E7E7DA;
	text-align: right;
	clear: both;
}

Siggles
Offline
newbie
Last seen: 15 years 23 weeks ago
Joined: 2006-02-23
Posts: 9
Points: 0

My first CSS site. ANy good?

I am such a doughnut!!!!!!!

I was making changes on my pc, then replying in the forum, like some magic wand had ftp'd it for me!!!

Der!!!

How does it look now?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

My first CSS site. ANy good?

Siggles wrote:
I am such a doughnut!!!!!!!

I was making changes on my pc, then replying in the forum, like some magic wand had ftp'd it for me!!!

Der!!!

How does it look now?

I had a feeling you'd have done that Laughing out loud

Is there any need for two rightcolumn divs? Why not just something like this:

<div id="rightcolumn">

<h2> Gardening Calendar </h2>

<p> blah blah </p>

<h2> Special Offers </h2>

<p> blah blah </p>

</div>

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

My first CSS site. ANy good?

Locked for the time being

http://www.csscreator.com/css-forum/sutra84914.html#84914

until layouts are resolved Tongue

/mod

Verschwindende wrote:
  • CSS doesn't make pies