View Single Post

delusion · #1 (**permalink**) Jun 18th, 2007, 10:50

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