tags:

views:

47

answers:

1

I've been trying to get this to work for the last two days but have had little success. Maybe I'm getting confused with all the nested divs, who knows, but I could use someone to look at the code and point me in the right direction.

What I have: http://landgraff.com/backend/process.html

What it should look like: http://landgraff.com/process.html

The reason I'm redoing this site is because I used tables on the original, and I'm trying to get away from using tables... so that's why I'm redoing it for practice =]

The following is from: http://landgraff.com/backend/css/ProcessStylesheet.css

@charset "utf-8";

#bodytext {
    color: #6B6351;
    font-family: arial, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 14pt;
    margin: 35px 0px 0px 30px;
    width: 370px;
}

#logo {
    float: left;
    background: url(../images/logosmall.gif) no-repeat;
    width: 75px;
    height: 152px;
    text-indent: -9999px;
}

#process_title {
    clear: both;
    float: left;
    background: url(../images/process/process_title.gif) no-repeat;
    width: 75px;
    height: 347px;
    text-indent: -9999px;   
}

#header {
    float: left;
    background: url(../images/process/header.gif) no-repeat;
    width: 163px;
    height: 26px;
    text-indent: -9999px;
    margin-top: 1px;
}
+1  A: 
#bodytext {
color:#6B6351;
font-family:arial,Arial,Helvetica,sans-serif;
font-size:11px;
line-height:14pt;
margin:35px 0 0 80px;
width:395px;
}

#header {
background:url("../images/process/header.gif") no-repeat scroll 0 0 transparent;
height:26px;
margin-left:100px;
margin-top:159px;
text-indent:-9999px;
width:163px;
}

This is the way to go if you want to keep your markup and class/ids. Also, you'll have to add a tag around the last line of the copy.

It's quite ok for starters tough, good luck!

Claudiu
Thanks for the great reply. That works! So basically I just had to get my margins and widths right? I love using Chrome's Inspect Element feature because it allows me to toggle on and off CSS to see what effect it's having. Interesting. If you have the time, I'm all ears for anything you'd do different in this HTML/CSS code. I'd like to keep, and stay, away from tables!
Stradigos
Also, removed the float property on the header. Better than Chrome's Inspect Element is Mozzila's FireBug AddOn. Try it, you'll see the (big) difference! :)
Claudiu