Skip to main content
J
jonabark
Known Participant
March 28, 2024
Question

Centering my website (web pages) in browser window

  • March 28, 2024
  • 1 reply
  • 863 views

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">&nbsp;</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>



    This topic has been closed for replies.

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    March 28, 2024

    There too many things wrong with the code. Just to name a few

    • there are two body tags, one inside the other
    • use of position absolute (AP)
    • setting heights
    • small screens not catered for
    • use of tables for layout
    • and more

     

    Please remember that the webiste will more than likely be viewed in a mobile device. Setting heights and positions will not facilitate the different screen sizes.

     

    To give you a leg up, I have quickly created some code for you to work with. The code is based on Bootstrap v5.3, so you will need to go to their website to learn more.

     

    <!doctype html>
<html lang="en">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
</head>

<body>
    <div class="container">
        <div class="row mt-5">
            <div class="col text-center">
                <h1 class="h4">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>
        <div class="row mt-5">
            <div class="col">
                <img src="ladder-of-angels.jpg" width="884" height="830" alt="" class="d-block mx-auto img-fluid">
                <p class="text-center mt-2 mb-0">LADDER OF ANGELS</p>
                <p>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)</p>
            </div>
        </div>
        <div class="row mt-5 align-items-center">
            <div class="col">
                <img src="portrait-of-young-woman.jpg" width="440" height="753" alt="" class="d-block mx-auto img-fluid">
                <p class="text-center mt-2">PORTRAIT OF A YOUNG WOMAN<br> Original stained glass art by Joseph Tracy of Brookside Glassworks (sold)</p>
            </div>
            <div class="col">
                <p class="fst-italic">portrait of a young woman</p>
                <p>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.</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

     

    Although I have included "mailto:brook7@sover.net" in the code, my advice is to use a contact form instead.

     

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    J
    jonabarkAuthor
    Known Participant
    March 29, 2024

    The doubled body tag was not in the original code. It was a result of trying to follow instructions for centering the page in a browser. It eliminated the error message but does not look right and what I did failed to center the page. All of the bolded text could be eliminated to see where I was before trying to center the site. That is what I would like to do. I have over 30 pages I need to center, and learning the language and approach you are recommending  is not something I'm ready for right now.  I may well move in that direction next , and I see the points you are making but for now I would  appreciate some help on the centering question. 

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 29, 2024

    You need to go to school on fundamentals first.  You can't learn anything useful from copying & pasting spurious bits of code from all over the Internet if you don't understand what any of it means. That's a recipe for failure.

     

    Start here:  Read chapters, do code exercises and take quizzes at the end.
    - https://www.w3schools.com/html/
    - https://www.w3schools.com/css/

    Once you get the HTML content performing right, you can worry about how it looks with CSS styles.

     

    See this example of a horizontally & vertically centered page.

    https://jsfiddle.net/NancyO/pqhoc5r3/5/

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices