Centering layers in browser window

M

mspain77

Registered
I am updating my site (see 'Googleability' below if you can help), and I originally used 'tables' for the four pages. I have recently added text to my index page to assist with search engine recognition, so I converted the index.htm from 'table's to 'layers' so that I could nest the layer with the copy to align relative the parent layer.
That works fine now, but now I can't find where to set the entire page to align middle relative to the size of the window. My other 3 pages center and stay centered as you change the browser window. They are all still 'tables'. I reviewed the code and all the alignment/position tags, but I can't fix it.
Any takers on that one? ;) Thanks guys.
 
Howdy! I don't think layers can be read by all browsers. Tables are okay, but have you tried CSS? Dreamweaver does CSS very well.

If you want to have all your content in a container (like this site, when the browser window expands and contracts the container is the content that stays in the middle.
More on CSS Containers: http://www.elated.com/articles/css-positioning/
 
Did you check out my link? I already have that in place for everything BUT the text on the home page. Again, I went back to tables, but the text is in a layer.
Can I not have both? What to do?
 
Read the site link I sent you. It talks about absolute vs. relative positioning. Layers combine when you output your html and can have unexpected results. As I said before you need a 'container' for all the content on the page, set a certain way in CSS, so that it will all stay centered.
 
I did read the appropriate section of the link. I also did a help search in Dreamweaver 8 for 'containers' and for 'css containers', but it came up empty as far as those terms.
I have NO coding experience aside from learning as I go, and I've only done two sites in my life. What might be clear as day to someone like you in that link is a little confusing to me.
Believe me, I have tried inserting different tags, values etc. all over the place but when I preview in browser it doesn't change what I need.
 
Here's the basic method of centering the design space in a browser using CSS:

1. Have a global container div.
2. Make that div the width of the desired design space.
3. Set the div's position attribute to "relative".
4. Set the div's left and right margins to "auto".
5. Place everything else, relatively or absolutely positioned, within that div.

#2 guarantees that anything positioned inside the global container will calculate its location relative to the container. #3 guarantees that the container centers.

See here for an example.

I can't think of a situation where this wouldn't work.
 
Nato-
PLEASE do not mistake my posts for being heated ones. I am not upset; I am only trying to give you the most accurate idea of my knowledge base so that we don't go back and forth to no avail.
My point was that when it shows an example of the code used, I don't know exactly WHERE to put the code, what values need to be changed, etc.
I also am not opposed to reading up and learning. That's what I did to get my site this far, and I think it's pretty good for just jumping into it blind. My education at Fresno State left much to be desired as far as web design (we only had 1 class–not the best graphic design school.)
I generally ONLY post here when I have tried to figure something out on my own and can't seem to do so. I always google questions looking for answers, do a 'view source' of websites that display the actions I want and look through the code very carefully. I am only looking for a more direction than a link. I can usually find that on my own, though many of your links (i.e. Google Webmasters) have been very helpful. :)
 
mspain77, read my last post. You can easily fix your site using this method. Right now you have several divs as the top-level elements on the page; the only real correction you need to make is to place these in a global container, as I did in the example I provided, and then position that global container on the page.
 
Thanks a bunch Bill, and you too Nato. You've always helped a great deal.
Bill-
I will address that issue tonight, as I am on my way to Petco Park for a college gameday. ;) I feel a lot better hearing you say that I am close and just need to contain the elements. I haven't quite understood what i've read so far, but I'm confident I will figure it out. Thanks again for you help. ;)
 
mspain77 said:
Nato-
PLEASE do not mistake my posts for being heated ones. I am not upset; I am only trying to give you the most accurate idea of my knowledge base so that we don't go back and forth to no avail.
My point was that when it shows an example of the code used, I don't know exactly WHERE to put the code, what values need to be changed, etc.
I also am not opposed to reading up and learning. That's what I did to get my site this far, and I think it's pretty good for just jumping into it blind. My education at Fresno State left much to be desired as far as web design (we only had 1 class–not the best graphic design school.)
I generally ONLY post here when I have tried to figure something out on my own and can't seem to do so. I always google questions looking for answers, do a 'view source' of websites that display the actions I want and look through the code very carefully. I am only looking for a more direction than a link. I can usually find that on my own, though many of your links (i.e. Google Webmasters) have been very helpful. :)
Click to expand...

Mike, just joking with you. No worries. When I help here at macosx.com I tread a fine line between teaching how to fish and just giving out a fish. I only have time to teach how to fish, really, since I'm so busy myself. That's why I couldn't provide the exact html code but references to it.

If you want more detailed help, you might post in the 'Join Our Team' area and then someone can lead you through the container code step by step...
 
billbaloney said:
3. Set the div's (global container) position attribute to "relative".

#3 guarantees that the container centers.
Click to expand...

Actually, there's no need for #3 at all. Just extra code.


Code
Code: 
<html>
     ...
     <body>
          <div id="container">
               ...your content...
          </div>
     </body>
</html>

CSS
Code: 
#container {
     width: 38em;  /*(whatever size you want the area to be)*/
     margin: 0 auto;   /*(no top/bottom margin, auto left/right margins)*/
     }
 
Sorry; both references were one number off. #3 allows you to set absolute positions of child elements within the container div. #4 centers the container div horizontally.

That position: relative is necessary, though, in order to contain absolutely-positioned elements. See here (with position: relative) versus here (without).
 
Yes, BUT absolute positioning with a container is bad practice and should be avoided as much as possible. Causes too many issues with accessibility and layout control when things (screen size, font sizes, etc.) are changed from what the designer used.
 
I don't agree with that as a blanket statement. For instance, absolute positioning any elements using relative measurement units will address most problems related to positioning and font size. This applies to any styling that specifies spacing with units.

The thrust of the accessibility initiative is how the page renders in the absence of any CSS support at all, not about discussions of absolute vs. float, which you will probably not find mentioned in the WAI literature.

As a matter of fact, the main WAI working document CSS Techniques for Web Content Accessibility Guidelines 1.0 says simply this:

Layout, positioning, layering, and alignment should be done through style sheets (notably by using CSS floats and absolute positioning)
Click to expand...

There are many situations where absolute positioning within a div is (a) not at all affected by screen or font size and (b) necessary to implement a design. If you're paid to implement a design, you don't reply, "I can't do this; there's one aspect of the design that will be impossible to render without violating the WAI." And if you're working with a good designer, you and the designer alter the design as necessary to make sure the content elements of the site are accessible.

If a few pieces need to be absolutely positioned, and they render coherently without CSS at all, *and* you can see them as well on a small screen as on a large one, then don't get hung up on blanket recommendations that don't seem to apply to your situation.
 
I think I figured it out. I have to use a span class inside a div class so it doesn't truncate the container. (I wasn't able to define a div class for a text item so I used span instead and it then put the correct css style on the text inside the container I wanted, if that makes sense!)
 
You must log in or register to reply here.
Back
Top