logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-22-2012, 06:35 PM   #1
K.Simmonds
 
Join Date: Apr 2006
Location: Yorkshire
Posts: 206
Default Two different coloured panels on page

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)
__________________
Keith Simmonds
K.Simmonds is offline   Reply With Quote
Old 10-22-2012, 06:36 PM   #2
K.Simmonds
 
Join Date: Apr 2006
Location: Yorkshire
Posts: 206
Default

Well I can't seem to upload the attachment, so try this link instead http://www.longacre-bb.co.uk/
__________________
Keith Simmonds
K.Simmonds is offline   Reply With Quote
Old 10-22-2012, 07:28 PM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-22-2012, 07:57 PM   #4
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Simmonds, if you view the source of the page, you'll find this:
http://www.longacre-bb.co.uk/images/topbg.gif

.
domedia is offline   Reply With Quote
Old 10-22-2012, 08:34 PM   #5
K.Simmonds
 
Join Date: Apr 2006
Location: Yorkshire
Posts: 206
Default

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?
__________________
Keith Simmonds
K.Simmonds is offline   Reply With Quote
Old 10-23-2012, 11:21 AM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-23-2012, 05:24 PM   #7
K.Simmonds
 
Join Date: Apr 2006
Location: Yorkshire
Posts: 206
Default

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).
__________________
Keith Simmonds
K.Simmonds is offline   Reply With Quote
Old 10-23-2012, 06:10 PM   #8
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

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:

Code:
/*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.

https://vimeo.com/35435777
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:48 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com