View Full Version : Problem: Divide image sections using <div>

03-03-2008, 10:18 PM
I'm starting to learn some more serious web development, using dreamweaver, and I've got a problem I'm not sure how to solve. I ve been following a div/css/tableless tutorial to create a web page, but there are some things I can't manage to adapt to my own site.
I have created a big image I woould like to use as a background for the index page. The screen size then should be limited to that image, the entire image, no more and no less. And over that image I want to add in very specific points (points I already painted when creating the image) links, and in another point, a login table. For clarification, see the simplified attached image: that represents a single jpg file I've made. In the two black rectangles I would like to include links to other pages within the site, and the red rectangle representas a login form.

I wonder if to represent this division within the page div elements are the proper approach, and if so how should I face this problem.
Should I divide the entire document with many div elements or just make 3 single div elements for the two black bars and the red rectangle?
Should the image I made be set as a background image for the page, or should I create a div elements including the entire page and then attach the image there?
I hope somebody can throw some light here...

03-03-2008, 10:58 PM
Hi Viktor,
You don't need a background image, because all your block are of solid color. I would make a page wrapper with the gray background color of the website, and then male 3 more div's for each of the blocks, each with their own background color.

03-04-2008, 12:07 AM
Thanks for the reply--!
But I think I wasn't able to explain myself properly.. the image I attached before is just a simple image, not the one I want to use in my page. The one I want to use is a far more complex photoshopped image with fades, pictures and stuff. I just made that one before to keep it simple, my problem is that i want to have that image in the background, and it will in fact be pretty much the entire page (the rest of the page just includes some login box and links to stuff like "help - about us - contact" etc. I could include the original image if it's still unclear (I am kind of embarrassed tho, since it's also the first kind of thing i've "photoshopped" in my life and i guess not very good)...

03-05-2008, 12:08 PM
There's a good tutorial here... (http://www.alistapart.com/articles/practicalcss/)

Hope people don't mind the cross-pollination ! :)

03-06-2008, 03:11 PM
Thanks, I've been reading and trying myself what was written there, but I am still unable to solve my problem.. I'm going to try to understand better how <div> works, maybe then..

03-06-2008, 03:19 PM
<div> doesn't 'work' in any specific way. It's simply a container that you can put your data into. It's a hook that you can apply CSS to, simply as that. It's a block element as opposed to a SPAN which is an inline element. I think you might need to read an introduction to web pages that explains what HTML and CSS is, because unless you know what the languages are for, you're always are going to be stuck in not understanding what is going on. :)