I just made a 2nd or 3rd failed try at properly entering code to center my web pages in browser windows. Part of the difficulty seems?? to my limited understanding to be that the methods described picture an arrangement of HTML and CSS that looks different from what I have where I have used the built-in CSS coding that you get in Dreamweaver by going to the Page Properties menu under File. This makes it diffcult or impossible to place the suggested body wrapper and CSS auto margin code so it works and centers the page as desired.
Since I have not yet uploaded my new site I do not know how to present the code so you might see where I am off. Or perhaps there is a better approach to the problem you could suggest.
For a first try to show my most recent attempt I will enter the relevant sections of code and below that the entire code for the page in question. If there is a better way to do this please let me know. relevant code is bolded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>residepage7</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<style type="text/css">
<!--
#apDiv1 {
position: absolute; .......
#apDiv6 {
position: absolute;
width: 200px;
height: 160px;
left: 920px;
top: 3500px;
}
body {
background-repeat: no-repeat;
}
body.content-wrapper {
margin-right: auto;
margin-left: auto;
max-width: 1240px;
}
a:link {
color: #8CBEC9;
text-decoration: none; ............
...
</div>
</body></body>
</html>
ENTIRE PAGE BELOW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>residepage7</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<style type="text/css">
<!--
#apDiv1 {
position: absolute;
width: 845px;
height: 63px;
z-index: 1;
left: 185px;
top: 143px;
}
#apDiv2 {
position: absolute;
width: 889px;
height: 987px;
z-index: 2;
left: 159px;
top: 225px;
}
#apDiv3 {
position: absolute;
left: 388px;
top: 2097px;
width: 549px;
height: 299px;
z-index: 1;
}
#apDiv4 {
position: absolute;
width: 377px;
height: 1366px;
z-index: 3;
left: 403px;
top: 2523px;
}
#apDiv5 {
position: absolute;
width: 206px;
height: 412px;
z-index: 1;
left: 883px;
top: 2673px;
}
#apDiv6 {
position: absolute;
width: 200px;
height: 160px;
left: 920px;
top: 3500px;
}
body {
background-repeat: no-repeat;
}
body.content-wrapper {
margin-right: auto;
margin-left: auto;
max-width: 1240px;
}
a:link {
color: #8CBEC9;
text-decoration: none;
}
body,td,th {
font-family: Verdana, Geneva, Trebuchet;
font-style: normal;
font-size: 18px;
color: #7FA0B0;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #CC0003;
}
a:active {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-family: Geneva, Verdan, Trebuchet;
font-style: normal;
font-weight: lighter;
}
h1 {
font-size: 18px;
color: #7FA0B0;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body background="brook-reside-long.gif">
<body>
<div class= "content wrapper">
<div id="apDiv1">
<h1>JOSEPH TRACY *<a href="mailto:brook7@sover.net">@</a> * BROOKSIDE GLASSWORKS *<a href="tel:18026941590"> 802-694-1590</a> *WINDOWS GALLERY * PAGE 7</h1></div>
<div style="position: absolute; top: 1251px; left: 327px; width: 440px; height: 795px;"><img src="portrait-of-young-woman.jpg" width="440" height="753" alt=""/>
<figcaption><div align="center">PORTRAIT OF A YOUNG WOMAN<br> Original stained glass art by Joseph Tracy of Brookside Glassworks (sold)</div></figcaption></div>
<div style="position: absolute; top: 1462px; left: 839px; width: 251px; height: 537px; -adbe-c: c"><em>portrait of a young woman</em><br><br>
The feminine and masculine, male and female run through so many life forms and through any real attempt to understand our existance.This work reflects some imaginative attempt in the direction.<br><br>
We live in the same world of real and imaginary houses, of candles and the moon, winged things, waves, leaves, conflict and communion. Yet male and female differ as the 2 unique poles of ceative momentum. So much is common. So much separates us. So much connects us.</div>
<div id="apDiv2"><img src="ladder-of-angels.jpg" width="884" height="830" alt=""/><figcaption><div align="center">LADDER OF ANGELS<br>This is the first window where the composition began by arranging glass on a light tableand not by drawing. There are several chunks of thick dalles de vere glass included and the painted glass is from a painting by Fra Lippo Lippi. Original stained glass art by Joseph Tracy of Brookside Glassworks (sold)</div></figcaption></div>
<div id="apDiv3"><img src="Maura-detail.gif" width="540" height="296" alt=""/><figcaption>This is a detail of a window for my friend Maura Hawkins made from hers sons' children's art and some photos of Eli, Stuart, and Wyatt. Original stained glass art by Joseph Tracy </figcaption></div>
<div id="apDiv4"><img src="light-wave-web.jpg" width="371" height="1242" alt=""/><figcaption><div align="center">LIGHT WAVE<br>22" x 75" including frame. This window traces back to living in Arcata CA, close to the ocean, with a theme of waves, particles and wave forms in oceanic colors. <font color="#CCCC99">WFS*</font> by Joseph Tracy</div></figcaption></div>
<div id="apDiv5">
<table width="217" height="387" border="1">
<tr>
<td width="150" height="22" bordercolor="#006666" bgcolor="#000D2A"><a href="index.html"><font color="#99CCFF" size="5" face="Geneva, Arial, Helvetica, sans-serif">brookside home</font></a></td>
</tr>
<tr>
<td bordercolor="#006666" bgcolor="#000D2A"><a href="restore1.html"><font color="#99CCFF" size="5" face="Geneva, Arial, Helvetica, sans-serif">conservation </font></a></td>
</tr>
<tr>
<td height="57" bordercolor="#006666" bgcolor="# #000D2A"><a href="drawpage1.html"><font color="#99CCFF" size="5" face="Geneva, Arial, Helvetica, sans-serif">glass designs, other media</font></a></td>
</tr>
<tr>
<td bordercolor="#006666" bgcolor="#000D2A"><a href="fusepage1.html"><font color="#99CCFF" size="5" face="Geneva, Arial, Helvetica, sans-serif"> fused glass bowls jewelry etc.</font></a></td>
</tr>
<tr>
<td bordercolor="#006666" bgcolor="#000D2A"><a href="churchpage1.html"><font color="#99CCFF" size="5" face="Geneva, Arial, Helvetica, sans-serif">faith based work</font></a></td></tr>
<tr>
<td bordercolor="#006666" bgcolor="#041021"><a href="studentgallery1.html"><font color="#99CCFF" size="5" face="Geneva, Arial, Helvetica, sans-serif">student work</font></a></td></tr>
<tr>
<td bordercolor="#006666" bgcolor="#000D2A"><a href="resume1.html"><font color="#99CCFF" size="5" face="Geneva, Arial, Helvetica, sans-serif">resume</font></a></td>
</tr>
<tr>
<td bordercolor="#006666" bgcolor="#000D2A"> </td>
</tr>
<tr>
<td bordercolor="#006666" bgcolor="#000D2A"><a href="residepage8.html"><font color="#99CCFF" size="5" face="Geneva, Arial, Helvetica, sans-serif">next page (8) windows gallery</font></a></td>
</tr>
</table></div>
<div style="position: absolute; top: 3687px; left: 911px; width: 200px; height: 232px; -adbe-c: c">
<div align="center"><font color="#CCCC99"> *WFS= Work For Sale or Gallery Display</font></div></div>
<div id="apDiv6">
<table width="200" border="2" cellspacing="2">
<tbody><tr>
<td bordercolor="#006666" bgcolor="#041021"><a href="residepage8.html"><font color="#99CCFF" size="4" face="Geneva, Arial, Helvetica, sans-serif">NEXT PAGE (8)</font></a></td></tr>
<tr>
<td bordercolor="#006666" bgcolor="#041021"><a href= "prices-services.html"><font color="#99CCFF" size="4" face="Geneva, Arial, Helvetica, sans-serif">NEW WINDOWS + WINDOW PRICES</font></a></td></tr>
<tr>
<td height="35" bordercolor="#006666" bgcolor="#041021"><a href="index.html"><font color="#99CCFF" size="4" face="Geneva, Arial, Helvetica, sans-serif">BROOKSIDE INDEX HOME PAGE</font></a></td>
</tr></tbody>
</table></div>
</div>
</body></body>
</html>
8
Replies
AdChoices