Trying to learn how to take my layout in photoshop and convert to CSS...

[suess0r]

Hi,

I have decided that the pre-designed template I was using doesn't fit what I was trying to do before, So i've recreated my site layout in photoshop. I have a basic 1 header 1 main ad space w/ a login panel beside it, body, side bar for more ads, and a footer... my design looks real tight, and just need help moving it to dreamweaver (without slicing into tables), so can someone point me to a tutorial on how I can convert my images to my web page via CSS? kinda n00bish question but I could appreciate the help...

[cmgmyr]

The way that I do it is to slice my design up in photoshop, export it (with tables), then open it up in dreamweaver. Then I make a temp.html file where I work on the new CSS design. This way I can bounce back and forth between the table design and the CSS design and make sure everything is like how it is supposed to look. You still need to hand code all of the divs and information in the pages. There is really nothing that I know of that converts your table design to a css one...but I don't think you would want it anyways...

I know I didn't give you too much information, but if you need to know anything more specific, please let me know. I usually "convert" 2-3 psd files a week for different clients.

-Chris

[suess0r]

hey chris,

thanks for your help, i did go ahead and slice the images into the corresponding tables, and have begun the rebuilding into CSS on a temp.html page. I have the header, nav bar done... i have a question though

I have an ad space "dimensions of: H:150px by W:612" and right next to it i have a login panel "H:150 x W:163"
I want to know how I can make it so the login panel will position absolute Right, and the ad on the left, so when the page gets expanded they will stay on the opposite ends. pretty basic, but i'm kinda stuck. thanks

[suess0r]

OK, i've finished the page, but i'm stuck on the following....

1. For some reason the background color, and background images I have in my CSS aren't working in the browser, but i can see it in dreamweaver how i want it to look.

2. I'm having issues with using float, i want to have the AD on the left and the login on the right but i don't want to have that huge space between them if i float left & right on the 2.

I have provided my CSS file below, the pages i'm working on are here...

www.clb411.com/new/design.html -> the sliced version of what i want
www.clb411.com/new/temp.html -> the CSS version of the sliced images

here's my CSS file...

[quote]/* CSS Document */

body {
background: #5f6565;
color: #333;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}

.containter {
margin: 0 auto;
width: 775px;
}

.header {
background-color: #5f6565;
background-image: url(../images/page_01.jpg);
background-position: center top;
height: 70px;
width: 775px;
}
.navigation {
background-color: #5f6565;
height: 24px;
width: 775px;
}
.ad {
height: 150px;
float: left;
}
.login {
height: 150px;
width: 164px;
float: left;
}
.line {
    background: #5f6565;
background-image: url(../images/page_10.jpg);
background-position: center top;
float: left;
height: 12px;
width: 775px;
}


.content {
float: left;
width: 588px;
background: #ffffff;
}
.side_bar {
float: left;
width: 189px;
}
.footer {
background-color: #5f6565;
background-image: url(../images/page_27.jpg);
background-position: center top;
float: left;
width: 775px;
height: 43px;
}[/quote]

[cmgmyr]

which background colors and images aren't working for you?

Also...the point of a CSS layout is not to have any tables (or atleast none for the actual layout) It looks like you just copied the different tables in new divs...which really doesn't do too much. Your layout should be all divs...nice and clean :)

[suess0r]

hey,

OK you're so right, i've basically created tables in my CSS instead of letting the div's take over. I have taken off the width of the divs but i'm having a hard time trying to figure out how to make the page expand when i expand the page, etc. and i'm kinda lost on that aspect. (been working with tables for so long, is there anything i need to do different?)

[cmgmyr]

take a look at some css tutorials and free templates out there, it might give you some sort of direction in where you want to go. Best way to learn is by example, then apply it to your own.