Is this unorthodox?

[delusion]

Ok, so I've been looking around on this forum and picked up a few nice tips. I've been working on a CSS-based site for a friend of mine. It looks like I got the desired design and positioning (although I think the whole page should be centered). It even passed the W3C-validation.
I'm pretty proud of myself, but somehow I don't think I used the right tools and ways to build the site like its supposed to, or I did it the hard way

Can someone tell me If there's a better way to edit the .css?

My used CSS:

Code: Select all

div.Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:800px;
    height:166px;
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 100px;
    text-align: center;
}

div.top-left_ {
    position:absolute;
    left:47px;
    top:53px;
    width:396px;
    height:75px;
}

div.home-button_ {
    position:absolute;
    left:443px;
    top:53px;
    width:83px;
    height:28px;
}

div.portfolio-button_ {
    position:absolute;
    left:526px;
    top:53px;
    width:86px;
    height:28px;
}

div.contact-button_ {
    position:absolute;
    left:612px;
    top:53px;
    width:82px;
    height:28px;
}

div.right-spacer_ {
    position:absolute;
    left:694px;
    top:53px;
    width:24px;
    height:122px;
}

div.under-nav_ {
    position:absolute;
    left:443px;
    top:81px;
    width:251px;
    height:47px;
}

div.bottom-logo_ {
    position:absolute;
    left:47px;
    top:128px;
    width:62px;
    height:47px;
}

div.layout-08_ {
    position:absolute;
    left:109px;
    top:128px;
    width:528px;
    height:auto;
    background-color: #000000;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    z-index: 2;
}

div.spacer_ {
    position:absolute;
    left:637px;
    top:128px;
    width:57px;
    height:47px;
}

div.faux-background_ {
    position:absolute;
    left:47px;
    top:175px;
    width:671px;
    height:120%;
    background-image: url(images/faux_background.png);
    z-index: 1;
}
.Body {
    background-color:#969696;
    background-image: url(background_overall.png);
    background-repeat: repeat-x;
}

This is the outcome of my struggle with CSS: http://www.allura.nl/preview/fotonijkamp/

Does it make sense to you guys?

[edit] I just found out the background doesn't do what it's supposed to when the text gets longer or shorter..
Back to the drawingboard.. I'll get it right..

[edit 2] Found out another thing.. Internet Explorer.. need I say more? :S

[karinne]

To center your site just follow this

How to center your site horizontally
body can be used to style too!

As for your code ... I've never been one to use the position property. I think float is the best way to go. And ... you don't really need it here since it's a 1 column layout.

body in this instance doesn't need to have a class for it IMO just apply the styles to the body like

Code: Select all

body {
   background-color:#969696;
background-image: url(background_overall.png);
  background-repeat: repeat-x;
}

Like you've notice in IE6, PNG support is not there at all. I suggest this

PNG in Windows IE: How To Use

You're still thinking too much in terms of tables with spacer gifs and the whole bit. Look into using margins and paddings.

And not everything should be a class. Main areas like headers and content and footer are usually ID's since they will only be used once in a document (having 2 headers just isn't logical).

It's a good start tho.

[delusion]

Thanks for the info and links.. Most of the output is made by Photoshop, edited by me. Maybe I should just make it from scratch myself..

Still on the drawingboard

[karinne]

yes ... don't rely on PS's slice and dice tool ... it's just as bad as using a WYSIWYG

[delusion]

How about slicing the image in Photoshop, and only save the images.. Is that a good idea?

[karinne]

Yes ... that's what I do but I slice them manually ... I don't use the slice tool. See what you can do with CSS only ... like borders and background-image, etc...

[delusion]

Yeah, I seperated the background image(s) already. I'm thinking baby-steps.. Rome wasn't built in one day either

[BGarner]

And not everything should be a class. Main areas like headers and content and footer are usually ID's since they will only be used once in a document (having 2 headers just isn't logical).

Check out this quick article on when to use class and when to use id.

Can someone tell me If there's a better way to edit the .css?

Do it all by hand! With that being said, there are some nifty programs that help you code faster. Try TopStyle Lite, it's free.

Do as much of the visual part of your site in CSS as you can. Rounded corners can be done without images using Nifty Corners.

Hope this helps!

[delusion]

I'm using Dreamweaver CS3. Any reason why I should use TopStyle instead? I think the .css-support in DW is great, although I can't compare it with anything :P

So, a little resume: Use photoshop to create the layout, then cut it up by hand and try to use only the images like the rounded corders.
Than use dreamweaver or TopStyle to create a slick .css-file.
Also use the CSS for creating borders, buttons and background coloring.

Am I right so far?

[Lchad]

Yes you are right. Use DW code view to handcode using html. No tables ok!

I'm wanting to buy the latest DW, do you like it?

[delusion]

Originally Posted by Lchad

Yes you are right. Use DW code view to handcode using html. No tables ok!

I'm wanting to buy the latest DW, do you like it?

I do like it, but the main reasons for me to have the design-pack of CS3 are Illustrator and Photoshop.. They really improved in terms of workspace and workspeed.

Anyway.. I'm still the oldschool kindof guy who codes everything by hand. I still don't like the drag 'n drop mehtod

I'll let you know when I created something new..

[karinne]

Originally Posted by delusion

Anyway.. I'm still the oldschool kindof guy who codes everything by hand. I still don't like the drag 'n drop mehtod

Good ... stay that way. DW has a code view ... stick to it

[fuzzee]

Do you really have to use position:absolute??

It can later become a problem, and the website goes automatically to the top left corner.
Don't worry, I learned that the hard way. I redesigned my website 5 times, before I realized that I had position:absolute on the main content!!

[delusion]

Originally Posted by fuzzee

Do you really have to use position:absolute??

It can later become a problem, and the website goes automatically to the top left corner.
Don't worry, I learned that the hard way. I redesigned my website 5 times, before I realized that I had position:absolute on the main content!!

The absolute positioning looks like the standard output Photoshop makes. I've learned that much already, so no more standard PS-output for me

I'm working on a different website aswell where I'm creating the CSS from scratch.
I'm learning the hard way aswell.. that makes this work so good

[delusion]

So, I've put this project on hold and started another one.

The following URL is a temporary one, so it might not be working when you look at this thread in a couple of weeks..

URL: http://bs4y.allura.nl/index.php?id=1

CSS:

Code: Select all

* {padding: 0; margin: 0;}

A:link    {
color:#6666FF;
    }
A:hover    {
color:#6666FF;
    }
A:active    {
color:#6666FF;
    }
A:visited    {
color:#6666FF;
}
    
#Table_01 {
    background-image: url(background.jpg);
    background-repeat: repeat-y;
    height: auto;
    width: 900px;
}
#Table_01 #Banner_ {
    float: right;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
#Table_01 #Logo_ {
    float: left;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
#Table_01 #Adres_ {
    margin-top: 0px;
    padding-top: 0px;
}
#Table_01 #bs4y-04_ {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #3399ff;
    float: left;
    margin-left: 7px;
}
#Table_01 #bs4y-06_ {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #3399ff;
    float: right;
    margin-top: 0px;
    padding-top: 0px;
    margin-right: 6px;
    padding-right: 6px;
}
#Table_01 #bs4y-05_ {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    margin-left: 125px;
    color: #000000;
    margin-top: 0px;
    width: 678px;
    padding-top: 0px;
}#Table_01 #bs4y-09_ {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: lighter;
    color: #00CCFF;
    text-align: center;
    background-color: #FFFFFF;
}

HTML/PHP:

Code: Select all

<?php 
include "vars.php";
?>
<!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>
<title><? echo "$title"; ?></title>
<meta name="keywords" content="<? echo $keywords; ?>" />
<meta name="description" content="<? echo $description; ?>" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css"> 
#Table_01 #Banner_ {
    margin-bottom: -4px;
    padding-bottom: -4px;
    }
#Table_01 #Logo_ {
    margin-bottom: -4px;
    padding-bottom: -4px;
}
#Table_01 #bs4y-08_ {
    margin-bottom: -5px;
    padding-bottom: -5px;
}
</style>
<![endif]-->
</head>

<body style="background-color:#FFFFFF;">
<div id="Table_01">
    <div id="Logo_">
        <img id="Logo" src="images/Logo.png" width="451" height="125" alt="BestShop4You Logo" />
    </div>
    <div id="Banner_">
        <img id="Banner" src="images/Banner.png" width="449" height="125" alt="Banner" />
    </div>
    <div id="Adres_">
        <img id="Adres" src="images/Adres.png" width="900" height="39" alt="Adres" />
    </div>
    <div id="bs4y-04_">
        <? include "nav.php"; ?>
    </div>
    <div id="bs4y-06_">Onze merken:<br /></div>
    <div id="bs4y-05_">
        <?php
        $id = $_GET['id'];
        database_connect();
        $query = "SELECT * from content
                  WHERE id = $id";
        $error = mysql_error();
        if (!$result = mysql_query($query)) {
            print "$error";
            exit;
            }
        
        while($row = mysql_fetch_object($result)){
        $content = $row->text;
          print("$content");
            }
         
        ?>
    </div>
    <div id="bs4y-07_">    </div>
    <div id="bs4y-08_">
        <img id="bs4y_08" src="images/bs4y_08.png" width="900" height="40" alt="" />
    </div>
    <div id="bs4y-09_">
        &copy; <a href="http://www.allura.nl" target="_blank">Allura Beheer</a>.
    </div>
</div>
</body>
</html>

So, did I improve yet?
What can I change to make it better?
Why doesn't the W3C CSS-validator work?

(I didn't put this one up in the "free website critique"-section, because it's a temporary url and a project in development..)

[fuzzee]

nice site! you need to get it centered:

margin: 0 auto;

and you need to get it so that the index content shows when you first come onto the site. i get some weird javascript error when I try to validate the css, so there I can't help you!

[delusion]

Originally Posted by fuzzee

nice site! you need to get it centered:

margin: 0 auto;

and you need to get it so that the index content shows when you first come onto the site. i get some weird javascript error when I try to validate the css, so there I can't help you!

Yeah.. centering the site is the next step
And I'm getting the weird java-error as well on the W3c-site.. That's why I didn't validate it yet..

[edit] Centering done

[fuzzee]

centering only done in IE!!

[delusion]

Originally Posted by fuzzee

centering only done in IE!!

And Firefox..

here anyway..