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 05-22-2010, 09:42 PM   #1
Chapo
Chapo's Avatar
 
Join Date: Jun 2008
Posts: 567
Default Dreamweaver Layout Temmplate Issues

Ok.. i wanted to understand and learn how to build a CSS Layout the right way so i opened a Layout Template in DW called "2 column fixed, sidebar, header and footer". But now i'm more confused than ever before.
  • the header does not have any width, height, floating and positioning, so i don't know how or why its at the top and why its size.
  • the footer also has the same, no sizes, positioning, floating, so no clue why or how its at the bottom.
  • The Sidebar and Content are the only ones with the Width, but i don't know how Content got its position but i guess because Sidebar has a float to the left.
I really want to know and learn this, why some Divs have some specific positions and sizes if i don't see them at the CSS.

Here is the site of the Layout:

http://www.imperiografico.com
__________________
People laugh at me because i'm different, but i laugh at people because they are all the same
Chapo is offline   Reply With Quote
Old 05-22-2010, 10:44 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

The overall width is set on the container div (.twoColFixLtHdr #container).
Code:
.twoColFixLtHdr #container { 
width: 780px;
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
If there is no width set to a div than it will take by default a 100% width of the space/div where it is placed in. In this case the header and footer will take than the width of the container (780px).

In most of my layouts I don't use a position at all. I decide the positions of the elements with floats, margins and paddings and of course the natural document flow.

Last edited by gentleone; 05-22-2010 at 10:48 PM..
gentleone is offline   Reply With Quote
Old 05-22-2010, 10:51 PM   #3
Chapo
Chapo's Avatar
 
Join Date: Jun 2008
Posts: 567
Default

So no width and it will be 100%, thats nice. But what about the specific Positioning of the Divs like header and footer, why or how is header on top and footer at bottom ? I don't see no rules on CSS to make this happen.
__________________
People laugh at me because i'm different, but i laugh at people because they are all the same
Chapo is offline   Reply With Quote
Old 05-22-2010, 11:02 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

The header is the first div in the container, so it will naturally sit nicely at the top. The sidebar is the second div (in the container) with a fixed width and a float left and because the header will fill up the whole width of the container the sidebar will drop below the header. The main content div (3rd div) has a left margin of 250px (margin: 0 0 0 250px) so this will shift up because of the float left of the sidebar underneath the header and nect to the sidebar.
The 4th and last div, the footer, has no room anymore to go underneath the header or next to the main content div, so it will naturally drop below.
gentleone is offline   Reply With Quote
Old 05-22-2010, 11:08 PM   #5
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Forgot to mention. There is no height set to all the divs. The content in them will dictate the heights.
gentleone is offline   Reply With Quote
Old 05-22-2010, 11:15 PM   #6
Chapo
Chapo's Avatar
 
Join Date: Jun 2008
Posts: 567
Default

So it also has to do something with the Z-Index ? What div goes first, second, last....?

Is there a way to put Auto Margins but Vertical ? The right and left margins works fine with auto, i open and close my browser and its always center horizontaly, but what if i want it also vertically centered, i add the top and bottom auto margins but doesnt work, how can i do this ?
__________________
People laugh at me because i'm different, but i laugh at people because they are all the same

Last edited by Chapo; 05-22-2010 at 11:19 PM..
Chapo is offline   Reply With Quote
Old 05-22-2010, 11:18 PM   #7
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by Chapo View Post
So it also has to do something with the Z-Index ? What div goes first, second, last....?
No it has nothing to do with z-indexes. Z-indexes works only on absolute positioned divs. It has simply all to do with the natural document flow
gentleone is offline   Reply With Quote
Old 05-22-2010, 11:36 PM   #8
Chapo
Chapo's Avatar
 
Join Date: Jun 2008
Posts: 567
Default

Thanx for the help, it was huge.

One more thing...Is there a way to put Auto Margins but Vertical ? The right and left margins works fine with auto, i open and close my browser and its always center horizontaly, but what if i want it also vertically centered, i add the top and bottom auto margins but doesnt work, how can i do this ?
__________________
People laugh at me because i'm different, but i laugh at people because they are all the same
Chapo is offline   Reply With Quote
Old 05-22-2010, 11:43 PM   #9
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by Chapo View Post
Thanx for the help, it was huge.

One more thing...Is there a way to put Auto Margins but Vertical ? The right and left margins works fine with auto, i open and close my browser and its always center horizontaly, but what if i want it also vertically centered, i add the top and bottom auto margins but doesnt work, how can i do this ?
In this case you need two absolute positioned divs to center it horizontally and vertically on the screen.
http://www.kirkdesigns.co.uk/vertica...-div-using-css
gentleone is offline   Reply With Quote
Old 05-23-2010, 12:25 AM   #10
Chapo
Chapo's Avatar
 
Join Date: Jun 2008
Posts: 567
Default

Ok... i almost almost got it with your help... the only thing now is my footer, it will not go down...

take a look.... http://www.imperiografico.com

Is there also another way to send a div all the way to the bottom to be a footer ?
__________________
People laugh at me because i'm different, but i laugh at people because they are all the same
Chapo 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 12:00 AM.


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