looking for css pro's feedback

I have just finished the layout for my new site can you have a look at the site and the css file to give me some feedback i am self taught and i just want to know if i'am doing ok or where i can improve my skill

site: http://www.scotlandwebdevelopment.com

css file: http://www.scotlandwebdevelopment.com/code/layout.css

thanks

 

Your site looks very nice and clean visually. I checked out your CSS, and noticed that you used a lot of absolute positioning. While this is not completely bad, it does have a few drawbacks. For me, the most prominent problem with using a lot of absolute positioning is that your site is not very scalable.

When I use the word "scalable" I am not talking about just talking about the page adjusting to expand and contract with browser size (horizontally), but I am also talking about your site, and various elements of your site, scaling vertically. I am also talking about scalability in the sense of using the a lot of the same code for hundreds and even thousands of pages. Absolute positioning usually means that you must make specific changed for every page to make that page look right.

For example, look at the element with the header "Market Beating Prices". What if you want to use that same box on another page with the header "Recent Market Price Updates" or something, and the text you want under that header is 500 words longer. How it is now, it will not fit in your box, it will overlap. If you make that box bigger, the box below it will need to shift down as well, or it will overlap.

I suggest looking into more relative positioning, and making your elements more dynamic so that they expand and contract depending on how much content is in there.

I don't have any great links for relative positioning right now. If I come across some I will post them.

 

cool thanks this is exactly the type of thing i am looking for - i can slice the images to scale them vertically so that they grow with the content and i will use relative positioning to layout the page

keep em coming

 

I'd actually use a combination of floats and negative margins where appropriate for the layout.

 

You have used in places, code like this...

<div id="contact"><p><strong>0141 442 8989</strong></p></div>

Code (markup):

When I would have used...

<p id="contact">0141 442 8989</p>

Code (markup):

There is no reason for the div or the strong tags to be there. Always to to minimise the use of markup. Less is better.

 

I completely disagree, i heard the opposite, you shouldn't create styles that are already there i.e. bold <strong>, i <italics> etc.

your using alot of CSS short hand which is good, BUT since you are a web design firm at some point your clients will want you to make email news letters which will NOT take CSS short hand

and just to keep the short hand going... you can reduce all hex colors to 3 letters/numbers such as #ffffff becomes #fff and #a1a1a1 becomes #a1a and so on

you have alot of "display:block;" just create a style called .block in your CSS

.block {display: block;}

Code (markup):

in your HTML, everytime you want to do a block just add it to the style ( i do this for float: left, and float: right as well

<div style="stuff block">...</div>

Code (markup):

 

While I do agree that less can be more, in this case I'd have to disagree (somewhat). I'd use the DIV but without the P element (since a phone number is not a paragraph). If the phone number is supposed to be given stronger emphasis than normal, then I'd use the STRONG element, especially for the benefit of those without styling enabled or supported.

Actually bold != strong. <b></b> are presentational tags, whereas <strong></strong> are semantic tags meaning "stronger emphasis". In other words, a user agent is not required to render STRONG as bold text, all it has to do is give it stronger "emphasis" than it would otherwise. Same with EM and I. EM means "emphasis" which is not always italicized. Whereas "I" is presentational in nature and will always be italicized unless overridden by a stylesheet.

And before anyone gets their Sunday best in a knot, both B and I and EM and STRONG do have their place in correctly structured semantic markup, and should thus be used appropriately.

That's actually very BAD advice. Since you're not only introducing classes that should not even need to be there, but the class names are not even semantic, on top of (in this case) being used to set the default behavior of block-level elements via a style rule (kinda redundant, don't you think?).

 

kool well i use the strong inline for seo to draw users and bots attention - i have had a go with changing my use of positioning and have redesigned the site so take a look !!

thanks all great feedback so far

im not really sure what floats and negative margins where appropriate for the layout really means could you give me a little more info please thanks

I just want to improve my skills

 

Use the elements (markup) as they're supposed to be used; don't use them to game the search engines.

As for floats and negative margins, if you look in my thread "All You Need to Know About SEO" (it's in my signature), the third post has an example of a 3 column layout that uses floats and negative margins.

 

while im reading - im not gaming search engines i was stating fact that i use strong to gain USERS & bots - thats just the truth is it not

 

That wasn't geared specifically towards you, Mike. It was a general blanket statement and warning by me to anyone who might read this thread.

(Gah, I really need to finish Minimal Markup so I can put an end to this nonsense...)

 

what im finding with the floats is that when the browser is resized they are doing seemingly uncontrollable things like passing over one another - i have made a few 2 & 3 col layouts trying to figure it out - so i have the min widths on the divs to stop the divs from shrinking but the divs still seam to pass over each other - how can i stop that?

 

sounds like a margin problem to me

What does the full HTML and CSS code look like?

 

ok i think im getting somewhere now - i have redone the layout with floats and i have been working out how to graphically skin the page - im still finding it difficult (the orange images i cant get them centred in column 1) - i have tested this in ff & ie7 so i hope it looks ok - dan if there is an easier way for me to use graphics with this sort of layout let me know

thanks

PS links same as first post

 

You're good dude. I personally like it. Get the text into a lighter shade and you'll be perfect.

 

Going back some posts I have to add that the <b> tag has been deprecated in favor of <strong>. The same with <i> and <em>.

The <strong> tags are good for SEO, and so are <p> and <h1>,<h2>,<h3>,<h4>,<h5>,<h6>, so you should think a little further than just compressing your markup to the max.

 

B and I have not been deprecated. They merely have presentational uses, (such as text that is deliberately bolded, or ship names and book titles being italicized for instance).

And just saying that elements are good for SEO doesn't do a bit of good. You have to tell them WHY they're good (which in this case means a mini-treatise on semantic markup).

 

I'm thinking <address/> would be good for displaying the phone number.

 

Ok, this example of how I'd mark and style everything up is kinda-sorta-but-not-exactly-yet-close-enough to how I'd do it that it should be suitable for the purpose of this thread. Note that it's not perfect, and there is some room for improvement (and a couple "errors" were intentional mind you; just to see how well you pay attention to how I code things), but other than that, it should work without any hacks - as long as you don't care about IE 5.x at all (IE 5.x will require a couple instances of the simplified box model hack to correct the layout, but other than that it should be fine) or IE 6's lack of PNG alpha-transparency support (that's what you get for using PNG-24 though) in addition to min and max width.

I didn't try to center the three images in the content DIV, figuring instead to leave those as a personal exercise (ok, I did try - I used a list, but IE 6 didn't like it too much). Also note that some of the class names need to be changed (they'll be the ones with the image name and file type), and that the IMG elements with styles applied to change their width need to be axed (if those are going to be content images, set the containers to a fixed width and adjust the #content and #content .wrapper DIV styling appropriately).

And remember, this isn't perfect, but it's workable with a little bit of elbow-grease (I'm not going to do EVERYTHING for free). Oh, and I tossed in a menu for you as well.

<!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" xml:lang="en" lang="en">
<head>
	<title>Untitled Document</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A brief description of the current page goes here." />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen,projection" />
</head>
<body>
<div id="header">
	<img src="/images/Scotland%20Web%20Development%20logo.png" width="230" height="66" alt="Scotland Web Development Logo" title="" />
</div>
<ul id="menu">
	<li><a href="#" title="Go to the Scotland Web Development Home Page">Home</a></li>
	<li><a href="#" title="About Scotland Web Development">Who We Are</a></li>
	<li><a href="#" title="(I'll let you figure this one out)">Our Products</a></li>
	<li><a href="#" title="What We Can Do For You">Services We Provide</a></li>
	<li><a href="#" title="Send Scotland Web Development an Enquiry">Contact Us</a></li>
</ul>
<div id="content">
	<div class="wrapper">
		<h1>Web Page Title</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
			tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
			quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
			consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
			molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
			accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
			dolore te feugait nulla facilisi.
		</p>
		<img class="image1-png" src="/images/image1.png" width="200" height="100" alt="alternate text for image" title="descriptive title for image" />
		<p>
			Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
			nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
			in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
			at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
			delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
			consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
			magna aliquam erat volutpat.
		</p>
		<h2>Subheading 1</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
			tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
			quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
			consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
			molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
			accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
			dolore te feugait nulla facilisi.
		</p>
		<p>
			Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
			nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
			in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
			at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
			delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
			consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
			magna aliquam erat volutpat.
		</p>
		<h2>Subheading 2</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
			tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
			quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
			consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
			consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
			odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
			nulla facilisi.
		</p>
		<p>
			Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
			nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
			in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
			at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
			delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
			consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
			magna aliquam erat volutpat.
		</p>
		<img class="image3-png" src="/images/image3.png" width="100" height="100" alt="alternative text for image" title="descriptive title for image" />
		<img class="image3-png" src="/images/image3.png" width="100" height="100" alt="alternative text for image" title="descriptive title for image" />
		<img class="image3-png" src="/images/image3.png" width="100" height="100" alt="alternative text for image" title="descriptive title for image" />
	</div>
</div>
<div id="sidebar1">
	<div class="wrapper">
		<h2>Left Sidebar</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
			tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
			quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
			consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
			consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
			odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
			nulla facilisi.
		</p>
		<img src="/images/image1.png" width="200" height="100" alt="alternate text for image" title="descriptive title for image" />
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
			tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
			quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
			consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
			consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
			odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
			nulla facilisi.
		</p>
		<img src="/images/image1.png" width="200" height="100" alt="alternate text for image" title="descriptive title for image" />
	</div>
</div>
<div id="sidebar2">
	<div class="wrapper">
		<h2>Right Sidebar</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
			tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
			quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
			consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
			consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
			odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
			nulla facilisi.
		</p>
	</div>
</div>
<div id="footer">
	<em>Copyright &#169 ; 2007, Scotland Web Development. All Rights Reserved.</em> <!-- remove the space from between the 169 and the ; character; vBulletin will process it as © if it's intact -->
</div>
</body>
</html>

Code (markup):

And the CSS for it...

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var {
	margin: 0;
	padding: 0;
}

body {
	background: #000 url("/images/bg.png") top left repeat-x;
	color: #000;
	font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	letter-spacing: 1px;
	margin: 0 auto;
	max-width: 1150px;
	min-width: 750px;
	padding: 1em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, garamond, "times new roman", times, serif;
	font-weight: bold;
}

h1 {
	font-size: 1.75em;
	line-height: 1.8em;
}

h2 {
	font-size: 1.5em;
	line-height: 1.55em;
}

h3 {
	font-size: 1.05em;
	line-height: 1.1em;
}

h4 {
	font-size: 0.95em;
	line-height: 1em;
}

h5 {
	font-size: 0.85em;
	line-height: 0.9em;
}

h6 {
	font-size: 0.75em;
	line-height: 0.8em;
}

img {
	border: 0;																/* this squashes a Firefox bug */
	display: block;
}

p {
	padding: 0.5em 0;
}

table {																		/* I'd like to have all the browsers on the same page with regard to tables - this does it */
	border-collapse: collapse;
	empty-cells: show;
	table-layout: fixed;
}

#header, #footer {
	background: url("/images/head.png") top left repeat-x;
	color: #FFF;
}

#header {
	height: 101px;
	padding: 20px 0 0 20px;
}

#menu {
	background: #555;
	height: 2em;
	line-height: 2em;
	list-style: none;
	margin-bottom: 1em;
}
	#menu li {
		display: inline;
		white-space: nowrap;
	}

	#menu a {
		border-right: 1px solid #000;
		color: #FFF;
		float: left;
		height: 2em;
		padding: 0 0.5em;
		text-decoration: none;
	}

	#menu a:hover, #menu a:active, #menu a:focus {
		background: #CCC;
		color: #000;
	}

#content .wrapper, #sidebar1, #sidebar2 {
	background: #555 url("/images/box.png");
	color: #FFF;
}
	#content {
		float: left;
		margin: 0 -30em 1em 0;
		width: 100%;
	}
		#content .wrapper {
			margin: 0 30em 0 0;
			padding: 0.5em 1em;
		}

		#content .image1-png {
			float: right;
			margin: 4px 0 4px 8px;
		}

		#content .image3-png {
			display: inline;
		}
	
	#sidebar1 {
		float: left;
		margin: 0 0.25em 1em 1em;
		width: 14em;
	}
		#sidebar1 .wrapper {
			padding: 0.5em;
		}

		#sidebar1 img {
			margin: 0 auto;
			width: 12em;
		}

	#sidebar2 {
		float: left;
		margin: 0 -13.5em 1em 0.75em;
		padding-bottom: 0.5em;
		width: 14em;
	}
		#sidebar2 .wrapper {
			background: url("/images/image2.png") bottom center no-repeat;
			padding: 0.5em 0.5em 600px 0.5em;
		}

#footer {
	clear: left;
	height: 101px;
}
	#footer em {
		display: block;
		font-style: normal;
		padding: 1em 0.5em 0 1em;
	}

Code (markup):

 

wow - im getting to work reading it just now - thanks again