I feel like I'm beating the same drum over and over, but if I don't
ask questions, I'll never learn. It seems as though I can make a
fixed-width layout quite easily if I move all of my content to the
very left of the browser window without centering it and having auto
margins. But if I don't center it, it looks stupid on resolutions
higher than 800x600 because then there is empty space on the right.
(See the following website -
http://start.verizon.net/vzn.isp/welcome.htm?ver=13567& - for an
example of this.) I think the fixed-width layout is fine but having
it auto-centered would be best. On the higher resolutions, the white
space would be evenly divided on each side of the content rather than
on one side of it. On the 800x600 resolution the page would fit into
the entire window. What is best for the website viewer?
What I'm questioning most is this concept of absolute positioning.
Why have it? It seems useless if you're trying to design your page
for all these resolutions. For example, if you go to my main web
page,
http://www.bryanrmeyer.net, and change the text size, you'll see
that in the middle column, the text and picture overlaps the "Modified
Date" text. I understand what is happening, but how then does
absolute positioning help me? For my new webpage,
http://www.bryanrmeyer.net/newpage, I attempted to use the absolute
divs to place the image buttons in a container and then place that
container in a relative div so that the buttons could be placed over
the header graphic. However, I can't get the "Archives" button over
the header graphic. The snippet of code is below.
body {
background-color: #c9c9c9;
scrollbar-base-color:#718292;
background-image: url(
http://www.bryanrmeyer.net/newpage/Images/header.jpg);
background-position: 50% 0%;
background-repeat: no-repeat;
}
div.archives {
position: absolute;
top: 140px;
left: 130px;
}
div.content2 {
position: relative;
top: 5%;
left: 10%;
}
<div class="content2">
<div class="archives">
<a href="Archives" onMouseOver=onImage("archives");
onMouseOut=offImage("archives")>
<img src="Images/archives_off.jpg" alt="Archives" name="archives"
border=0>
</div>
</div>
This is really frustrating, but I really want to understand how this
works. I just am getting confused with the positioning.
Thanks for any suggestions you could provide.
Bryan