Web Design Forums

Dirti · 14-08-2006, 09:29

I'm sure you people have read it a thousand times, newbie switching from tables to css.

But anyway, i started learning CSS a couple of days ago and want a bit of critique on the following code.

Things i'd like to know: Basically is my code good so far? any bad points? am i heading in totally the wrong direction doing it like i am at the moment?

Also a brief question, as you can see in the code below on line 19 i'm using <img tags to display multiple images in one div tag. Later i will be making each of these images a link. What i would like to know is, is there a better way to do this using css than how i'm currently doing it?

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=iso-8859-1" />
<title>.Spicy Pixel.</title>
<style type="text/css">
html{ background:#F8F9D1 url(../gfx/bg4.jpg) repeat-x;}
body{ margin:60px; font-family:Verdana, Arial, Trebuchet MS; font-size:11px; color:#000000;}
div#header{background-image:url(../gfx/spicybnrsi.jpg); width:700px; height:170px;}
div#content_container{width:630px; border:#D7D9B7 2px dotted;}
div#content_top{background-image:url(../gfx/flat/top.jpg); width:630px; height:56px;}
div#content_mid{background-image:url(../gfx/flat/mdl.jpg); width:630px; height:300px;}/*content is in this one*/
div#content_bottem{background-image:url(../gfx/flat/bottem.jpg); width:630px; height:57px;}
</style>
</head>
<body>
<div id="container" align="center">
<div id="header"></div>
<div id="content_container"><div id="header_links"><img src="../gfx/flat/links/home.jpg" alt="Home"/><img src="../gfx/flat/links/portfolio.jpg" alt="Portfolio"/><img src="../gfx/flat/links/pricing.jpg" alt="Pricing"/><img src="../gfx/flat/links/webdesign.jpg" alt="Web Design"/><img src="../gfx/flat/links/photography.jpg" alt="Photography"/></div>
<div id="content_top"></div>
<div id="content_mid">

</div>
<div id="content_bottem"></div></div>
<div id="copyright"><i>Copyright Spicy Pixel 2006</i></div>

</div>
</body>
</html>

The page looks like this in Firefox: http://img89.imageshack.us/img89/4504/spss6.jpg

Thanks in advance for any help

funkyprem · 14-08-2006, 10:17

that's a damn good start chap!!!

things i would change:

1) any fonts with a space in them need to be specified thus : "Trebuchet MS"
2) the menu can be done as an unordered list, then the images added via css
3) personally i would place all of the css for html and pace it in your body declarations. there'd no need for html {... }
4) when referencing backgronud urls, i always make them root relative.

keep it up!

pgo · 14-08-2006, 10:42

You've misspelled "bottom"...

Anyway.

Quote:

is there a better way to do this using css than how i'm currently doing it?

Good to see you asking that question, because there's always something.

Navigation should usually be a list. Check out http://css.maxdesign.com.au

MikeMackay · 14-08-2006, 11:47

You may also want to place your CSS in an external file instead of directly in your page mark-up. This makes site wide maintenance a breeze as all your HTML pages will link to the one external css file; it also minimises the size of the HTML page too.

- Mike

dtrenz · 14-08-2006, 12:18

too many closed div tags?

Code:

<div id="content_bottem"></div></div>

also, for your own sanity, try making your code more readable/debuggable/maintanable/etc by using seperate lines and indentation. it can save loads of time later on, and it helps you keep track of nested tags and making sure you have the right ratio of open/closed tags. like so:

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=iso-8859-1" />
<title>.Spicy Pixel.</title>
<style type="text/css">
html {
background:#F8F9D1 url(../gfx/bg4.jpg) repeat-x;
}

body {
margin:60px; 
font-family:Verdana, Arial, Trebuchet MS; 
font-size:11px; 
color:#000000;
}

div#header {
background-image:url(../gfx/spicybnrsi.jpg); 
width:700px; 
height:170px;
}

div#content_container {
width:630px; 
border:#D7D9B7 2px dotted;}

div#content_top {
background-image:url(../gfx/flat/top.jpg); 
width:630px; 
height:56px;
}

div#content_mid {	/*content is in this one*/
background-image:url(../gfx/flat/mdl.jpg); 
width:630px; 
height:300px;
}

div#content_bottem {
background-image:url(../gfx/flat/bottem.jpg); 
width:630px; 
height:57px;
}
</style>
</head>
<body>
<div id="container" align="center">
	<div id="header"></div>
	<div id="content_container">
		<div id="header_links">
			<img src="../gfx/flat/links/home.jpg" alt="Home"/><img src="../gfx/flat/links/portfolio.jpg" alt="Portfolio"/>
			<img src="../gfx/flat/links/pricing.jpg" alt="Pricing"/><img src="../gfx/flat/links/webdesign.jpg" alt="Web Design"/>
			<img src="../gfx/flat/links/photography.jpg" alt="Photography"/>
		</div>
	<div id="content_top"></div>
	<div id="content_mid"></div>
	<div id="content_bottem"></div>
	<div id="copyright"><i>Copyright Spicy Pixel 2006</i></div>
</div>
</body>
</html>

Dirti · 14-08-2006, 12:58

Quote:

Originally Posted by funkyprem

3) personally i would place all of the css for html and pace it in your body declarations. there'd no need for html {... }

Hmm i tried that to begin with but for some reason it didn't like it when i previewed in Firefox. The browser just seemed to ignore the code all together

Quote:

Originally Posted by pgo

You've misspelled "bottom"...
[/url]

Oops

Spelling was never my strong point to be honest. I fixed it now though and thanks for the link

Quote:

Originally Posted by MikeMackay

You may also want to place your CSS in an external file instead of directly in your page mark-up. This makes site wide maintenance a breeze as all your HTML pages will link to the one external css file; it also minimises the size of the HTML page too.

- Mike

Yep, they mentioned this in many of the tutorials i've read. I'll certainly do it when i get the site up on the web!

Quote:

Originally Posted by dtrenz

too many closed div tags?

Code:

<div id="content_bottem"></div></div>

also, for your own sanity, try making your code more readable/debuggable/maintanable/etc by using seperate lines and indentation. it can save loads of time later on, and it helps you keep track of nested tags and making sure you have the right ratio of open/closed tags. like so:

That extra </div> belongs to the <div id="content_container">. The div is there for the dotted border around the content. I did left, right, top, bottom borders for the divs inside it but it seemed easier to just have one going round to the outside instead of repeating code. Also it looked a little messed up the first way when viewed in Firefox

And i see where you coming from on the code formating, spacing it out more. I was just going a little crazy seeing how many lines i could get the code down to but i guess it's probably not the best way to do things

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

14-08-2006, 10:17	#2 (permalink)
funkyprem For all your goober needs Join Date: Dec 2004 Location: Coventry, UK Posts: 1,528	that's a damn good start chap!!! things i would change: 1) any fonts with a space in them need to be specified thus : "Trebuchet MS" 2) the menu can be done as an unordered list, then the images added via css 3) personally i would place all of the css for html and pace it in your body declarations. there'd no need for html {... } 4) when referencing backgronud urls, i always make them root relative. keep it up!

14-08-2006, 11:47	#4 (permalink)
MikeMackay Everything is fine. Join Date: Feb 2005 Location: Witham & London Posts: 815	You may also want to place your CSS in an external file instead of directly in your page mark-up. This makes site wide maintenance a breeze as all your HTML pages will link to the one external css file; it also minimises the size of the HTML page too. - Mike

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)