View Full Version : Two different coloured panels on page

10-22-2012, 05:35 PM
I don't know how else to describe it, but how do I design a page in Dreamweaver with two different coloured panels (like the attachment)

10-22-2012, 05:36 PM
Well I can't seem to upload the attachment, so try this link instead http://www.longacre-bb.co.uk/

10-22-2012, 06:28 PM
Can you be a bit more specific with what you mean with 'panels'? Even the link didn't help me to figure out what you mean.

10-22-2012, 06:57 PM
Simmonds, if you view the source of the page, you'll find this:


10-22-2012, 07:34 PM
By "panels" I mean the coloured parts of the ...body? There is a sandy colour across the top (with the logo in), then the main part of the page is white, then there is also a brown strip at the bottom with the home | tariffs | rooms | contact links. I guess you do it with bg coour in page properties - but how?

10-23-2012, 10:21 AM
The one at the top is a header (div) that fills the full width of the browser window and give it a background color or a repeating gradient background image like they have. The same goes for the one at the bottom, the footer (div).

These are just div's (block-level element) which will by default fill the available width of the browser window.

10-23-2012, 04:24 PM
Excellent. Thankyou. I've spent this afternoon playing with divs, and I think I'm getting the hang of it. I'm a novice, and I've never used css before, but I'd LOVE to learn. I've got my top panel, and the body, and the footer ...... next question is, how do I put a logo (or image) and text or navigation where I want it on the top panel, to make a banner (like the website link I posted earlier).

10-23-2012, 05:10 PM
Do you mean how do I build a web page?

You really need to spend some time learning HTML and CSS, get a basic grounding and then try and build your page otherwise you could end up pulling your hair out.

To get you started, I'll deal with the logo.

Firstly it depends on the logo. Is it just text or will it require an image?

If it requires an image then there are a couple of different ways.

I used to use an <h1>My Company</h1> and then use CSS to replace this text with a background image but whether your company name should be an h1 is for debate.

I personally now just have my logos as inline images.

For the design that you linked to I would probably just absolutely position it. Within the header.

You can do this by:

/*This may be a div with an ID of header*/
header {
position: relative; /*This sets a positioning context*/
/*Your other styles*/

#logo {
position: absolute;
left: 50px;
top: 50px;

This video shows you more.