Getting my PSD into a good website

**Kathranis** · 10-16-2009, 12:57 PM

Hey everyone,

I've spend hours browsing the internet, and I've asked on multiple forums before, and I really hope this'll be the last one, because I'm dying to get this working.

I've made my lay-out in photoshop (it still needs some minor tweaking, but I can do it later), and I really want to get this into a decent HTML webpage, I am using Dreamweaver because my HTML coding skills are really really low (I know only the easiest basics).

I am in my first year of studying mediagraphics, and unforunately they'll only teach me real webdesign in my third year, they only teach me the very basics with Dreamweaver now..

Anyway, here is my lay-out, could anyone give me easy and detailed steps on how to get this into a website? I've used tons of tutorials but I can never get it to work with my lay-out.

http://img97.imageshack.us/img97/9859/layout.png

I got kinda far, I installed my lay-out (without buttons or logo), as my page's background, to make it able to write text in the white area. Now I am having problems with adding the buttons, they teached me to use Div tags at school.
Here is a screenshot.
http://img269.imageshack.us/img269/6...mastertalk.png
How can I place a new div tag for my buttons only, next to the logo tag? If I place the buttons in the same div tag as the logo, they will be places at the wrong place, on top of the transparancy part, and the wooden background won't fit.

Sorry, I tried my best to explain, I'm really new in this. I don't know any coding, English is not my native language (am 16 and from Holland), and this needs to be turned in next week, it's holidays right now so I can't ask my teacher..

I appreciate any help!

**MDwebdev85** · 10-16-2009, 01:05 PM

http://www.webmaster-talk.com/website-design-forum/165519-12-psd-to-html-tutorials.html

**Kathranis** · 10-16-2009, 01:07 PM

The link doesnt work.. And I've tried a lot of tutorials as I said, I'd like some personal help.. I guess the only thing I need to know right now is how to get my buttons on there..

**pbmedia** · 10-16-2009, 03:01 PM

Link is down, but just go there directly its very useful...

**LadynRed** · 04:20 PM

Link fix -
http://www.webmaster-talk.com/websit...tutorials.html

Quote:

How can I place a new div tag for my buttons only, next to the logo tag?

Float the logo.
Add the div and float it either right or left too.

**Kathranis** · 10-16-2009, 04:23 PM

I'm sorry to bother but I've seen those tuts before, I think I just need some personal help, about turning on the float thing, I'll give it a go now, thanks a load!

**Kathranis** · 10-16-2009, 04:25 PM

Thanks you so much Lady in red, all I have to do now is at the Divs for my buttons, I hope it'll work!

**LadynRed** · 10-16-2009, 04:30 PM

You really want to put your navigation into an unordered list, not just stick 'em inside a div. If you use the <ul>, you don't even need the extraneous div, you can just float the <ul> and style it and it's contents as needed.

**Kathranis** · 10-16-2009, 06:49 PM

Okay, I made them buttons and the logo, and I made a new div for my text, the problem is, it appears on a different area in firefox, here's two screenshots:

**LadynRed** · 10-17-2009, 12:35 PM

What you're seeing is margin collapse, which is NOT a bug. Add padding-top: 1px to the div that your menu div sits inside of and that should fix the problem.

Do NOT rely on what DW is showing you, it is not accurate.

**Kathranis** · 10-17-2009, 01:51 PM

Sorry to bother, but in what div do I have to add a margin-top +1pix? The one of the logo, the text, or the div for the buttons? (I have one div that has all buttons in it)

Thanks in advance and the effort so far! You've been great help!

**LadynRed** · 10-17-2009, 02:07 PM

Not margin-top, PADDING-TOP: 1px.

I assume your menu div is INSIDE another div ? If yes, than add the 1px top padding that THAT div (not the menu div)

**Kathranis** · 10-17-2009, 03:09 PM

I'm sorry, I'm a tad confused..
I've got these divs:
Container: This is the div that basicly covers the whole website, and I gave it the wood and white area as background. According to my schoolbooks I had to make this Div in order to center the website
Logo: Obviously my logo
Buttons: See the name
Content: Well, I made this div inside the white area, unfortunately this one doesnt work

**Kathranis** · 10-17-2009, 07:26 PM

Quote:

Originally Posted by Kathranis

I'm sorry, I'm a tad confused..
I've got these divs:
Container: This is the div that basicly covers the whole website, and I gave it the wood and white area as background. According to my schoolbooks I had to make this Div in order to center the website
Logo: Obviously my logo
Buttons: See the name
Content: Well, I made this div inside the white area, unfortunately this one doesnt work

Nevermind, got it to work! Thank you Ladynred, you're a lifesaver!

**LadynRed** · 10-18-2009, 07:39 PM

Good, glad you got it worked out