- Joined
- Jun 6, 2008
- Messages
- 27
- Reaction score
- 0
- Points
- 1
- Your Mac's Specs
- Blackbook - 2.4 GHZ Core 2 Duo - 2 GB RAM - 250 GB HDD
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;
}
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;
}