new to css - can you check my code?

JoshMcg · Jun 12, 2008

I am just learning css and I am trying to setup a very basic one-page site with it. Can you look over my code? I am somewhat happy with the overall look that I have but I feel like what I have could be done better. Obviously I am going to add more content, but this page is more about me learning css then to show off my fish tank.

http://www.whoisjosh.net/plantedtank/plantedtank.html

For starters I would like it if it had space on both sides, and not just the right. Also, I read something like you shouldn't rely to much on absolute positioning and that is what I used.

Here is my html

<html>
<head>
<title>WhoisJosh.net - My Planted Tank</title>
<link rel="stylesheet" type="text/css" href="../styles/plantedtank.css">
</head>
<body>

<div id="main">
<img src="fishtrans.png" id="logo">
<h1 id="header">My Planted Tank</h1>
<a href="http://www.whoisjosh.net" id="back">Back to WhoisJosh.net</a>
</div>

</body>
</html>

here is the css

body {
background-color: #F8F8F8;

}

#main {
width: 80%;
background-color: #b8f999;
background-image: url(../plantedtank/backbar.jpg);
background-repeat: repeat-x;
background-position: bottom;
height: 218px;
position: relative;
}

#logo{
float: left;
}

#header {
padding: 0;
position: absolute;
top: 125px;
left: 300px;
}

#back {
position: absolute;
top: 195px;
left: 250 px;
}

Eric559 · Jun 12, 2008

Try this:

http://jigsaw.w3.org/css-validator/

JoshMcg · Jun 13, 2008

I get this error. Can anyone explain this?

33 #back Value Error : left Too many values or values are not recognized : 250 px

Del · Jun 13, 2008

You might not be able to have 'space' on both sides due to your absolute positioning.

That aside what you would need is (i think as im just doing this from memory and havent done any css for ages)

Code:

body {
  margin-left: auto;
  margin-right: auto;
}

CircularSaw · Jun 13, 2008

under #back you have a space between the number (250) and the value type (px). You should not have spaces at all there. It should read:

left: 250px;

I would also recomend putting the following lines before the <head>:

<!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" >

Glas to see your using stylesheets rather that inline styles but i would recommend not using absolute positioning. You can achieve the layout you want entirely using floats and margins/padding.

Good work though. If you want i can suggest alterations to the code. Don't want to without invitation though.

JoshMcg · Jun 13, 2008

Thanks for the help.

I was hoping someone could help me eliminate the absolute positioning, so I would love to hear your suggestions circularsaw.

What is the meaning of those lines you want me to add?

CircularSaw · Jun 16, 2008

I'll put some code together after work to show you how to use floats and divs together.

As for those two lines. They basically describe to the browser what type of document they are and how to render them. You should write all your web pages as XHTML Strict. I'll put together a post later with some hints on what that means.

CircularSaw · Jun 18, 2008

I've attached some example code i created. I recommend creating all your HTML as XHTML strict. W3C has a validation service and guidlines on what this means but things i noticed in your code were:

all tags must be closed. If they are anchors for instance you must include the </a>. IF they are img tags make sure they are ended with />.

Image tags must include an alt. For example:

<img src="image_path" alt"short image description" />

I often find it easier to draw on paper how I am going to structure a page in regards to DIVs before i start coding. Name them all and them just bang out the code but it does take practice.

Let me know if anything is unclear. Hoped this helped!

View attachment example.zip