Results 1 to 8 of 8
  1. #1
    new to css - can you check my code?

    Member Since
    Jun 06, 2008
    Posts
    27
    Specs:
    Blackbook - 2.4 GHZ Core 2 Duo - 2 GB RAM - 250 GB HDD
    new to css - can you check my code?
    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;
    }

  2. #2
    new to css - can you check my code?
    Eric559's Avatar
    Member Since
    Jul 18, 2007
    Location
    Central California
    Posts
    3,185
    Specs:
    2.16GHz C2D MacBook w/ 2GB RAM & 120GB HD. HTC Droid Incredible.

  3. #3
    new to css - can you check my code?

    Member Since
    Jun 06, 2008
    Posts
    27
    Specs:
    Blackbook - 2.4 GHZ Core 2 Duo - 2 GB RAM - 250 GB HDD
    I get this error. Can anyone explain this?

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

  4. #4
    new to css - can you check my code?

    Member Since
    Dec 24, 2006
    Location
    N. Ireland
    Posts
    901
    Specs:
    Mac Pro 2xQuad core 2.8GHZ
    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;
    }

  5. #5
    new to css - can you check my code?

    Member Since
    May 23, 2008
    Posts
    76
    Specs:
    2.0GHz Aluminium MacBook
    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

  6. #6
    new to css - can you check my code?

    Member Since
    Jun 06, 2008
    Posts
    27
    Specs:
    Blackbook - 2.4 GHZ Core 2 Duo - 2 GB RAM - 250 GB HDD
    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?

  7. #7
    new to css - can you check my code?

    Member Since
    May 23, 2008
    Posts
    76
    Specs:
    2.0GHz Aluminium MacBook
    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

  8. #8
    new to css - can you check my code?

    Member Since
    May 23, 2008
    Posts
    76
    Specs:
    2.0GHz Aluminium MacBook
    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 Attached Files
    Web Designer
    Microsoft Web Developer
    MacBook Owner

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Replies: 5
    Last Post: 03-08-2014, 06:46 PM
  2. How to check assembly code of C program in Xcode 4?
    By Benthicwhale in forum OS X - Development and Darwin
    Replies: 1
    Last Post: 09-03-2011, 10:00 PM
  3. Using Share This buttons with iWeb- Someone check this code?
    By BrenGun in forum Web Design and Hosting
    Replies: 0
    Last Post: 02-13-2011, 01:01 PM
  4. What display to buy. Need vertical position and good resolution / for code css
    By betovarg in forum Images, Graphic Design, and Digital Photography
    Replies: 0
    Last Post: 05-19-2008, 01:44 PM
  5. Replies: 3
    Last Post: 07-02-2004, 09:13 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •