PDA

View Full Version : Dreamweaver Layout Temmplate Issues


Chapo
05-22-2010, 08:42 PM
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

gentleone
05-22-2010, 09:44 PM
The overall width is set on the container div (.twoColFixLtHdr #container).

.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.

Chapo
05-22-2010, 09:51 PM
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.

gentleone
05-22-2010, 10:02 PM
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
05-22-2010, 10:08 PM
Forgot to mention. There is no height set to all the divs. The content in them will dictate the heights.

Chapo
05-22-2010, 10:15 PM
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 ?

gentleone
05-22-2010, 10:18 PM
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 ;)

Chapo
05-22-2010, 10:36 PM
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 ?

gentleone
05-22-2010, 10:43 PM
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/vertically-and-horizontally-center-div-using-css

Chapo
05-22-2010, 11:25 PM
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 ?

gentleone
05-22-2010, 11:34 PM
add clear: both; to the CSS rule of #footer

and you can remove all the z-index: 1;. Z-indexes work only on elements with position absolute.

Chapo
05-22-2010, 11:43 PM
WoW.... that was AwSoMe ...!!!! Now i created my first real Layout without absolute positioning.... thanx..!!!

When i added the clear both to the footer, i lost my top margin... supose to happen?

www.imperiografico.com

Did you created that site you send me ... www.kirk..? (http://www.kirk..?)
do you have facebook or msn ?

Thanx very much... really helped me out...!!!
Now i canfix this site: www.newcondado.com (http://www.newcondado.com) .. looks bad on IE 7 and below

gentleone
05-23-2010, 09:18 AM
The top-margin on the footer doesn't do anything, because of the float left on the sidebar. Floats means that you take a div/element out of the natural flow, so you can't control them with top-margins on elements below that floated element. The otherway around like you did now by giving the sidebar a bottom-margin of 25px does work, but if the footer was also a floated element than not.

That site is not mine, no... I was just lazy to write the code myself, so I quickly googled for it.

gentleone
05-23-2010, 09:37 AM
Here is a good read about the float property than you understand it a bit more and you can find out what kind of effects it can have on your layout and how to solve them.
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/