Here you go. I based everything on percentages, so it should scale nicely in any size window or screen. The logo will also scale, but should look pretty good no matter what shape someone's screen is. I put in a ton of comments.
If you'd like to see where a div or table's exact boundaries are, just change the border width. I put zero-pixel borders on a few things (they're marked with comments) for just this purpose.
I still had to use a single-cell table for the 'lorem ipsum' paragraph, because vertical centering is impossible otherwise. But you'll see how little code I had to use, both for the table and for the CSS overall. Took maybe an hour.
Two attachments on this post. The first is a screenshot. The second is a background wallpaper for the links, which should be copied to the same directory as the existing wallpaper. Hope this helps...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sample with CSS - version 2</title>
<style type="text/css" media="screen">
<!--
body
{
padding: 0;
margin: 0;
background-color: #666;
background-image: url(images/common/pattern.jpg);
color: #000;
text-align: center;
}
#contents
{
/* The new positioning is based on the browser window, so it scales. */
position: fixed; /* fixed relative to the screen - doesn't move, and it
takes its position based on the window instead of another element */
top: 6%; /* I'll try to stick to percentages for layout, for scalability */
left: 8%;
/* To make it appear centered (it isn't), I double the above values and subtract them from 100 to get the sizes. */
height: 88%; /* 100 minus 12 (which is double the value for 'top') */
width: 84%;
padding: 0px; /* remove padding to simplify the process */
background-color: #E8E3BF;
color: #000;
text-align: left;
z-index: 1; /* puts it 'behind' everything else */
}
#logodiv {/* contains the logo */
border: 0px solid blue; /* to see the box, change '0' to '1' */
position: fixed;
top: 6%; /* same as the content box */
left: 8%; /* same as the content box */
width: 41%; /* half of the content box's width, minus 1% as a fudge factor */
height: 60%; /* arbitrarily chosen to leave space in the content box - play with this number */
z-index: 2; /* puts it 'in front' of the content box */
}
img.logopicture { /* This is the new style for the logo image. */
position: absolute; /* positions it based on the containing element */
height: 90%; /* instead of padding, I make it 90% of the box's height and width and divide
the remainder by 2 to get the top and left values - same thing I did with div.contents */
width: 90%;
top: 5%;
left: 5%;
}
#loremdiv {/* contains the 'lorem ipsum' paragraph */
/* I copied this code from #logodiv, then all I did was change 'left' to 'right' so it's positioned from the
right edge of the window */
border: 0px solid green; /* to see the box, change '0' to '1' */
position: fixed;
top: 6%; /* same as the content box */
right: 8%; /* same value as 'left' on #logodiv */
width: 41%; /* half of the content box's width, minus 1% as a fudge factor */
height: 60%; /* arbitrarily chosen to leave space in the content box - play with this number */
z-index: 2; /* puts it 'in front' of the content box */
}
table.loremtable { /* A single-cell table for the 'lorem ipsum' paragraph.
I used this because vertical centering is completely impossible
without tables (until browsers start supporting css vertical-align). */
border: 0px solid blue; /* to see the table, change '0' to '1' */
position: absolute; /* position based on #loremdiv */
/* height, width, top, and right copied from height, width, top, and left from img.logopicture */
height: 90%;
width: 90%;
top: 5%;
right: 5%; /* used right instead of left */
}
h1
{
color: #333;
background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
p
{
color: #333;
background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
p.text1 {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
text-align: center;
}
#nav{ /* the patterned container for the links */
border: 0px dotted black;
position: fixed;
left: 8%; /* same as #contents */
width: 84%; /* same as #contents */
bottom: 14%; /* This ensures that the links will show up just above the bottom of the content box. */
background-color: #666;
background-image: url(images/common/pattern-faded.jpg);
z-index: 3; /* puts this 'in front' of the content box, the logo, and 'lorem ipsum' */
}
p.navparagraph { /* A centered paragraph that holds all the links. */
font-weight: bold; /* I made the links bold for easier reading. */
text-indent: 0in;
text-align: center;}
span.navlink {
padding: .2in; /* for some breathing room */}
.navlink a{
color: #2A2B38;
font-size:11px;
font-family:"Century Gothic", Verdana, Arial, sans-serif;
}
.navlink a:hover{
color: #2A2B38;
}
.navlink a:link, .navlink a:visited { /* removed most of the styling for this */
text-decoration: none;
}
.navlink a:hover {
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="contents">
<!-- For purposes of the code, the content doesn't have to
actually be inside this div to look like it's inside - everything just sits 'in front' of this box. -->
</div>
<div id="logodiv">
<img class="logopicture" src="riviera_logo_main.jpg" alt="Riviera South Beach">
<!-- I removed height and width from the image - I'll use CSS for that, so I added a class -->
</div>
<div id="loremdiv">
<table class="loremtable">
<tr><td>
<p class="text1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur wisi mi,
rutrum sit amet, viverra vel, sodales vitae, magna. Donec tempus felis
sit amet eros. Nam urna. Duis vel orci. Mauris placerat elit id mauris.
Nullam sagittis tincidunt dolor. Nunc odio magna, porta eu, ullamcorper
ac, volutpat eget, nunc. Quisque tempus leo at augue. Etiam feugiat
massa in sem. Quisque nec diam. Nunc tempus wisi nec risus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. In auctor. Donec imperdiet ante in metus. Curabitur
felis nisl, placerat non, mollis eget, ullamcorper sit amet, metus. In
hac habitasse platea dictumst. Nam interdum urna ut sapien. Nulla
facilisi. Mauris ut velit. Proin non arcu.
</p>
</td></tr>
</table>
</div>
<div id="nav">
<p class="navparagraph">
<span class="navlink"><a href="http://riverahotelsouthbeach.com/allie/index.html">HOME</a></span>
<span class="navlink"><a href="http://riverahotelsouthbeach.com/allie/aboutus.html">ABOUT US</a></span>
<span class="navlink"><a href="http://riverahotelsouthbeach.com/allie/reservations.html">RESERVATIONS</a></span>
<span class="navlink"><a href="http://riverahotelsouthbeach.com/allie/location.html">LOCATION</a></span>
<span class="navlink"><a href="http://riverahotelsouthbeach.com/allie/rooms.html">ROOMS</a></span>
<span class="navlink"><a href="http://riverahotelsouthbeach.com/allie/amenities.html">AMENITIES</a></span>
<span class="navlink"><a href="http://thechesterfieldhotel.com/spa/" target="_blank">SPA</a></span>
<span class="navlink"><a href="http://riverahotelsouthbeach.com/allie/virtualtour.html">VIRTUAL TOUR</a></span>
<span class="navlink"><a href="http://riverahotelsouthbeach.com/allie/contactus.html">CONTACT US</a></span>
</p>
</div>
</body>
</html>