New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

new to css - can you check my code?


Post Reply New Thread Subscribe

 
Thread Tools
JoshMcg

 
Member Since: Jun 06, 2008
Posts: 27
JoshMcg is on a distinguished road
Mac Specs: Blackbook - 2.4 GHZ Core 2 Duo - 2 GB RAM - 250 GB HDD

JoshMcg is offline
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;
}
QUOTE Thanks
Eric559

 
Eric559's Avatar
 
Member Since: Jul 18, 2007
Location: Central California
Posts: 3,185
Eric559 is a glorious beacon of lightEric559 is a glorious beacon of lightEric559 is a glorious beacon of lightEric559 is a glorious beacon of lightEric559 is a glorious beacon of lightEric559 is a glorious beacon of light
Mac Specs: 2.16GHz C2D MacBook w/ 2GB RAM & 120GB HD. HTC Droid Incredible.

Eric559 is offline
Try this:

http://jigsaw.w3.org/css-validator/
QUOTE Thanks
JoshMcg

 
Member Since: Jun 06, 2008
Posts: 27
JoshMcg is on a distinguished road
Mac Specs: Blackbook - 2.4 GHZ Core 2 Duo - 2 GB RAM - 250 GB HDD

JoshMcg is offline
I get this error. Can anyone explain this?

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

 
Member Since: Dec 24, 2006
Location: N. Ireland
Posts: 901
Del has a spectacular aura about
Mac Specs: Mac Pro 2xQuad core 2.8GHZ

Del is offline
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;
}
QUOTE Thanks
CircularSaw

 
Member Since: May 23, 2008
Posts: 76
CircularSaw will become famous soon enough
Mac Specs: 2.0GHz Aluminium MacBook

CircularSaw is offline
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.

Web Designer
Microsoft Web Developer
MacBook Owner
QUOTE Thanks
JoshMcg

 
Member Since: Jun 06, 2008
Posts: 27
JoshMcg is on a distinguished road
Mac Specs: Blackbook - 2.4 GHZ Core 2 Duo - 2 GB RAM - 250 GB HDD

JoshMcg is offline
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?
QUOTE Thanks
CircularSaw

 
Member Since: May 23, 2008
Posts: 76
CircularSaw will become famous soon enough
Mac Specs: 2.0GHz Aluminium MacBook

CircularSaw is offline
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.

Web Designer
Microsoft Web Developer
MacBook Owner
QUOTE Thanks
CircularSaw

 
Member Since: May 23, 2008
Posts: 76
CircularSaw will become famous soon enough
Mac Specs: 2.0GHz Aluminium MacBook

CircularSaw is offline
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!
Attached Files
File Type: zip example.zip (126.0 KB, 3 views)

Web Designer
Microsoft Web Developer
MacBook Owner
QUOTE Thanks

Post Reply New Thread Subscribe


« Endless Source of Inspiration | Probably very simple but how does he do that? »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
What display to buy. Need vertical position and good resolution / for code css betovarg Images, Graphic Design, and Digital Photography 0 05-19-2008 02:44 PM
XCode Debugging From Source Code deanrayj OS X - Development and Darwin 0 04-25-2008 10:33 PM
trouble with CSS and Dreamweaver hippy.green Web Design and Hosting 2 06-18-2007 06:56 AM
My first tableless CSS layout ChicoWeb Web Design and Hosting 17 01-18-2005 03:57 PM
CSS strangeness in Safari only!? stevenjohn Web Design and Hosting 1 03-29-2004 08:08 AM

All times are GMT -4. The time now is 10:33 PM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?