I am new to using CSS to create a webpage layout. I am trying to figure out
how to go about putting sections in a container closer together.

To be specific. I have a container that wraps around 1 column and 3 rows. But
with not specifying any location, padding, margin, float..ect, I find that each
row sits 20-30 pixels away from the row above it. The header is at the top,
the next row (navigation bar) sits approx. 20 pixels below it, the main content
row sits another 20 pixels below the navigation bar row...and this continues
down to the footer.

I can bring them all up flush against the next using negative top margins, but
for some reason, as a non-developer, that just doesn't seem correct. Is this
what you have to do, or what is the correct method of bringing each row inside
the #container flush with the row above and below it?

I have attached the .css. I will attached the main Template code in a reply
since it is only letting me supply one section of attached code.

Thanks in advance,


@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text
is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #FFFFFF;
}

/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default
fonts size, they are more unpredictable. Used correctly, they are also more
accessible for those that need larger fonts size since the line length remains
proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body
element. If you decrease the text size overall by using a font-size: 80% on the
body element or the #container, remember that the entire layout will downsize
proportionately. You may want to increase the widths of the various divs to
compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on
the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is
given an 85% font size), this will proportionately change each of the divs
overall size. You may want to adjust based on your final font sizing.
*/
.oneColElsCtrHdr #container {
width: 42em;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the
page */
border: 2px solid #F0C6D4;
text-align: left;
background-color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
}
.oneColElsCtrHdr #header {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
margin: 0px;
width: 100%;
float: left;
}
.oneColElsCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the
element away from the edges of the div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
}
.oneColElsCtrHdr #NavBar {
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
margin: 0px;
background-image: url(Images/NavBar/NavBarButton%20copy.gif);
background-repeat: repeat-x;
margin-top: 0px;
float: left;
width: 100%;

}

.oneColElsCtrHdr #mainContent {
background: #FFFFFF;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-right: 0px;
padding-left: 0px;
float: left;
width: 100%;
}
.oneColElsCtrHdr #footer {
height: 40px;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: #DFB8C5;
width: 100%;
float: left;
}
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will
avoid the possibility of margin collapse - a space between divs */
padding: 0; /* padding on this element will create space, just as the the
margin would have, without the margin collapse issue */
}

Control the top/bottom margins of the tags - but DO NOT use negative
margins. In other words, in this code -

<div>
<p>Line 1</p>
<p>Line 2</p>
</div>

You will see a space between the two lines that is equal to the larger of
the bottom margin or the top margin either specified or inherited by the
respective <p> tags.

With this CSS -

p { margin:0; }

you will see that space vanish.

Make sense?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"pghtech" <webforumsuser@macromedia.com> wrote in message
news:fqrllm$lu7$1@forums.macromedia.com...
>I am new to using CSS to create a webpage layout. I am trying to figure
>out
> how to go about putting sections in a container closer together.
>
> To be specific. I have a container that wraps around 1 column and 3 rows.
> But
> with not specifying any location, padding, margin, float..ect, I find that
> each
> row sits 20-30 pixels away from the row above it. The header is at the
> top,
> the next row (navigation bar) sits approx. 20 pixels below it, the main
> content
> row sits another 20 pixels below the navigation bar row...and this
> continues
> down to the footer.
>
> I can bring them all up flush against the next using negative top margins,
> but
> for some reason, as a non-developer, that just doesn't seem correct. Is
> this
> what you have to do, or what is the correct method of bringing each row
> inside
> the #container flush with the row above and below it?
>
> I have attached the .css. I will attached the main Template code in a
> reply
> since it is only letting me supply one section of attached code.
>
> Thanks in advance,
>
>
> @charset "utf-8";
> body {
> font: 100% Verdana, Arial, Helvetica, sans-serif;
> margin: 0;
> text-align: center; /* this centers the container in IE 5* browsers. The
> text
> is then set to the left aligned default in the #container selector */
> color: #000000;
> background-color: #FFFFFF;
> }
>
> /* Tips for Elastic layouts
> 1. Since the elastic layouts overall sizing is based on the user's default
> fonts size, they are more unpredictable. Used correctly, they are also
> more
> accessible for those that need larger fonts size since the line length
> remains
> proportionate.
> 2. Sizing of divs in this layout are based on the 100% font size in the
> body
> element. If you decrease the text size overall by using a font-size: 80%
> on the
> body element or the #container, remember that the entire layout will
> downsize
> proportionately. You may want to increase the widths of the various divs
> to
> compensate for this.
> 3. If font sizing is changed in differing amounts on each div instead of
> on
> the overall design (ie: #sidebar1 is given a 70% font size and
> #mainContent is
> given an 85% font size), this will proportionately change each of the divs
> overall size. You may want to adjust based on your final font sizing.
> */
> .oneColElsCtrHdr #container {
> width: 42em;
> margin: 0 auto; /* the auto margins (in conjunction with a width) center
> the
> page */
> border: 2px solid #F0C6D4;
> text-align: left;
> background-color: #FFFFFF;
> padding-left: 10px;
> padding-right: 10px;
> }
> .oneColElsCtrHdr #header {
> padding-top: 0px;
> padding-right: 0px;
> padding-bottom: 0;
> padding-left: 0px;
> margin: 0px;
> width: 100%;
> float: left;
> }
> .oneColElsCtrHdr #header h1 {
> margin: 0; /* using padding instead of margin will allow you to keep the
> element away from the edges of the div */
> padding-top: 0px;
> padding-right: 0;
> padding-bottom: 0px;
> padding-left: 0;
> }
> .oneColElsCtrHdr #NavBar {
> padding-top: 0px;
> padding-right: 20px;
> padding-bottom: 0px;
> padding-left: 20px;
> margin: 0px;
> background-image: url(Images/NavBar/NavBarButton%20copy.gif);
> background-repeat: repeat-x;
> margin-top: 0px;
> float: left;
> width: 100%;
>
> }
>
> .oneColElsCtrHdr #mainContent {
> background: #FFFFFF;
> padding-top: 0px;
> padding-bottom: 0px;
> margin-top: 0px;
> padding-right: 0px;
> padding-left: 0px;
> float: left;
> width: 100%;
> }
> .oneColElsCtrHdr #footer {
> height: 40px;
> padding-top: 0;
> padding-right: 0px;
> padding-bottom: 0;
> padding-left: 0px;
> background-color: #DFB8C5;
> width: 100%;
> float: left;
> }
> .oneColElsCtrHdr #footer p {
> margin: 0; /* zeroing the margins of the first element in the footer will
> avoid the possibility of margin collapse - a space between divs */
> padding: 0; /* padding on this element will create space, just as the the
> margin would have, without the margin collapse issue */
> }
>

I do in the sense that I am setting behavior of the <P> tag by what you stated
{ margin: 0}.

But can you tell me what currently is making each Division (DIV) show space as
I have put margins as "0" but maybe thats where I am missing the link in what
you are saying?

Let's see your code, please.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"pghtech" <webforumsuser@macromedia.com> wrote in message
news:fqrqh1$r5m$1@forums.macromedia.com...
>I do in the sense that I am setting behavior of the <P> tag by what you
>stated
> { margin: 0}.
>
> But can you tell me what currently is making each Division (DIV) show
> space as
> I have put margins as "0" but maybe thats where I am missing the link in
> what
> you are saying?
>
>
>