Centering a layer within a page?

[larman]

I am building a webpage where I decided to put all text and images within a
layer. I am creating a webpage very similiar to caffezingaro.com. I am pretty
new at this and truly trying to learn code instead of just building from the
split screen. My idea is to isolate the paragraph and pics in the layer and
center everything for ease of reading on all browsers and I have centered the
header and top banner pic. The <p> color is also different then the page
color which again is similiar to the zingaro page. Any help would be greatly
appreciated. I am learning this pretty quickly but my only drawback has been
the whole lining up process. Thanks all.

Larry

 

[larman]

Two more questions and I will leave all alone for the rest of the day!! How
do I put color to the left and right of the text that I just centered and how
do I spruce up my Nav bar to get rid of the blue text. Tom thank you so
much!! This is such a great resource.

One more. What would you really use layers for other than photos?

 

[larman]

Tom,

Thank you so much for all your help. Two more questions and I will leave you
alone. How would I change nav colors as far as the blue default on nav text.
I actually built it as follows:

<div id="navigation">
<div align="center">
<span class="style1"><a href="index.htm">|Home</a>|
<a href="baristas.htm">Baristas|</a>|
<a href="coffee.htm">Coffee</a>|
<a href="desserts.htm">Desserts</a>|
<a href="art.htm">Art</a>|
<a href="music.htm">Music</a>|
<a href="contacts.htm">Contact</a>|</span></div>
</div>

AND how do I bring the center all the way up to the top and bottom of the
webpage.

Thanks again and have a great rest of the weekend.

 

[Viken Karaguesian]

Tom,

I don't understand this code :>( If you could expand on this a bit, I
would appreciate it. Some points of interest for me:

1) Why position:relative? Wouldn't it be enough to just set the width and
right/left margin to auto?

2) Why is this code (below) placed inside a comment? Are you trying to hide
it from another browser?

<style type="text/css">
<!--
body {
text-align:center;
}
#wrapper {
text-align:left;
width:740px;
margin:0 auto;
position:relative;
}
-->
</style>

3) Same question about this code:

</div><!-- /wrapper -->
</body>

I'm no expert, but I have a more-than-basic understanding of CSS and HTML. I
can't quite figure out the purpose behind this code. If you could explain
the concept behind this code, I'd appreciate it. The more I learn, the
happier I am :>)

 

[Viken Karaguesian]

See below :>)

| I don't understand this code :>( If you could expand on this a bit, I
| would appreciate it. Some points of interest for me:
|
| 1) Why position:relative? Wouldn't it be enough to just set the width
and
| right/left margin to auto?

A relatively positioned page element is *not* removed from t­he flow of
the
code on the page, so it will use thespot where it would have­ appeared
based
on its position in the code as its zero point reference. If­ you then
supply
top, right, bottom, or left positions to the style for this ­element,
those
values will be used as offsets from its zero point.

I understand the concept of Relative vs. Absolute positioning - my question
was: why use position:relative *at all*? Why not just use:

#wrapper {
text-align: left;
width: 740px;
margin: 0 auto;
}

The OP originally said he wanted to put all images and text inside a layer
(div). So, this is a situation where I would normally not think of using
position:relative or position:absolute. Since he's putting all the text and
images in the div, then the div would be the first line of code and not need
any positioning. It does not matter if it's removed from the flow or not
since, in this case, it's being used as the main container. Of course, I
haven't seen his site to know for sure. The way he describes it makes it
seem like the main container and, therefore, first block of code.

Since I wouldn't have thought of using position:relative, I thought you may
have used it for another reason that was not so obvious for me - a hidden or
little-known benefit, perhaps.

| 2) Why is this code (below) placed inside a comment? Are you trying to
hide
| it from another browser?
---snip---

Just an old style block that I have in FrontPage code snipets...
And yes it was to hide it from older browsers that couldn't handle CSS.

OK. Just wondering :>)

I need to update that - - Most are using newer than browser 4 now. 8)

| 3) Same question about this code:
|
| > </div><!-- /wrapper -->
| > </body>

This is just a comment so that you can keep track of the end of the
wrapper.

I should have realized that. :>0 I usually use <!-- Close Wrap Div -->

 

[larman]

When inserting padding in the text part of a page how do you block it from
padding your banner and nav site that is sitting on top? Thanks for the help.

 

[larman]

Again thank you so much for all your help. All you have sebt me has worked
perfect. A couple weird things I noticed is in firefox the center does not
go all the way to the top or bottom. Although I know there are differences in
browsers I probably can do something to correct it.

Also is there something that can be done to make sure when someone sees your
webpage that the font you code on the pages is what they see? I noticed in
trial it defaults to the font set on the browser.

Again your help is so appreciated. I actually have built quite a few
webpages but know I am going back and doing them the RIGHT way by learning
CSS.

 

[Ronx]

Making the #wrapper a relatively positioned container has the
additional benefit that all absolutely positioned layers inside the
#wrapper will take their zero point from wherever the top-left corner
of the #wrapper is, rather than the top-left of the browser viewport.
Thus absolutely positioned elements will correctly move with the rest
of the page content as the viewport is expanded/contracted (subject to
other conditions being met.)

 

[Ronx]

A couple weird things I noticed is in firefox the center does not

go all the way to the top or bottom. Although I know there are
differences in
browsers I probably can do something to correct it.

If you have used Tom's #wrapper method, it works perfectly in all
modern browsers (and NN4). There is probably an error on the page, or
something at the bottom that is outside the #wrapper div. URL?

 

[Murray]

Tom:

I see that I have helped you a bit with this! 8)

 

[Murray]

LOL! Only those with broadband! 8)

 

[Murray]

Oh, I use KeyText (http://www.mjmsoft.com) - couldn't live without it!

 

[Murray]

Yep - that one's the bomb....

 

[Murray]

I have about 20 pages of them! 8)