Almost done with DW made site, can't get it to center with wrapper

HTML & CSS
1

I am an artist, not a web designer . I’m re-doing a multi-page website I made with Dreamweaver over a decade ago for my Stained glass business. It is old code and I am a do it yourself amateur as a web-site maker, but the site pages look good on browsers, links work, text size ok, images and background graphic look good to me. **I’m trying to get one of the pages to center in browser windows **so I can do that with all pages. The site uses absolute position to arrange the photo images of leaded windows and some text boxes. It uses a table for reference links to different gallery and information areas of the site. It uses the built-in Dreamweaver CSS text for style rules.

I have followed a Dreamweaver tutorial on centering the page which basically goes like this: ??? I am trying to put a few lines of code, (1st html then CSS) here but it is not showing up as part of my question. What do I do?

This code looks pretty standard from my inquiries but it is not making the page center in a browser window; the page still hugs the left side. The Dreamweaver community forum, dominated by Nancy O’Shea refuses to help unless I learn the Bootstrap code, and I am not ready for that, having spent many, many hours cleaning up errors on current code and changing some style issues and adding new pages etc.( I actually want to try to learn bootstrap but first want to get my website up in its new form. ) I don’t know what is causing the problem: absolute positioning?, the table?, my background graphic gif? If a helpful person knows why my attempt to center is failing or how to make it work It would mean a lot to me. If it would help I will post the entire block of code for the page.

2

You need to place three backticks ``` on a line above your code, and three on a line below it, to format it. Alternatively, you can highlight the code and use the </> button in the editor window.

1 Like
3

I feel dumb, but I can’t seem to figure out how to edit my original post. However…If I push the pencil icon at top right of my post and then the RAW box, also top right, the code shows up. Perhaps that works for any site user?

4

Press the three dots, then the pencil
image
image

5

Just add the code into a new post down here.:slight_smile:

Do you have a live link to the page as that will be easier for us to debug?

If you have absolutely placed most of the elements on the page then it may be difficult to center unless they have all been absolutely placed from a consistent point. It might be possible to put a wrapper around the whole page (assuming it is built to a specific width) and then you would need a stacking context using position:relative to create the starting point for the absolute elements.

e.g.

.wrapper{
  width:1240px;
  margin:auto;
  position:relative;
}

However, I imagine that your site is very rigid and does not scale for mobile devices or smaller screens (as most web usage these days is via mobile) so it may be time to consider an update to a more modern responsive site. :wink:

6

I have not put the renewed site up. The original site is still online but while it basically works, it is does not show my current revisions, removal of errors etc. I could possibly post this page that I am trying to use as a model for centering with a non linked title and then make the reference available here. But I would prefer not to get feedback about the old site itself.

I will double check, but as far as I can tell all page elements are placed in reference to top left corner and the width is 1240 on all pages.( top, left, width, height) I have some apDivs in the css code which I turned into just absolutely positioned elements on this page after feedback that they(ApDivs) could be a problem. (This current page is my attempt to model a centering solution for the other pages) I don’t know what you mean by a stacking context but will look in my book(HTML,CSS & Javascript in easy steps), and online to see if I can get an understanding.

Even the old site scales nicely on my iPhone. Some text is too small which is something I changed in the new site. The index page is nice on laptop or desktop but not optimal for phone, so I will probably change that.

Hey, Thanks so much for the feedback and I will try uploading the page to my website with a different( unlinked) title.

7

The 3 dots are not appearing on my original post. I only get the link, bookmark, and reply icons. I will try to be back in an hour or 2 with a link to an online version of the page.

Meanwhile here( I hope) Is the code for the entire page

<!DOCTYPE html >

<html lang="en">
<head>
<meta charset="UTF-8">
	<title>residepage7</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style type="text/css">
<!--
#wrapper{
  margin: 0 auto;
  width: 1240px;
}	
body {
    background-repeat: no-repeat;
    background-image: url(brook-reside-long.gif);	
	}
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, Trebuchet;
    font-style: normal;
    font-weight: lighter;
}
h1 {
    font-size: 18px;
    color: #7FA0B0;
}
a:link {
    color: #5795AE;
    text-decoration: none;
}
a {
    font-family: Geneva, Trebuchet;
    font-style: normal;
    font-size: 18px;
}
-->
</style>

</head>
<body>
	<div id ="wrapper">
	
<div style="position: absolute; top: 136px; left: 185px; width: 845px; height: 63px;">
	 <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: 1320px; 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 style="position: absolute; top: 225px; left: 159px; width: 889px; height: 987px; -adbe-c: c"><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 table and 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 style="position: absolute; left: 337px; top: 2097px; width: 549px; height: 299px;"><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 style=" position: absolute; top: 2673px; left: 883px; width: 206px; height: 412px;">
  <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"><a href="prices-services.html"><font color="#99CCFF" size="5" face="Geneva, Arial, Helvetica, sans-serif">services, pricing, works for sale</font></a></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 style="position: absolute; top: 2502px; left: 433px; width: 346px; height: 1242px; -adbe-c: c"><img src="light-wave-web.jpg" width="346" 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>  
	</body>
</html>
8

You have a lot of code that has been deprecated; eg font color, align centre, border color, all of which should be done with CSS.

You should also put your inline CSS in your style sheet.

9

One other question concerns the original language being xhtml and so the top line shows up on many pages this way: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and the title shows up as reside page7.html (XHTML)

Is this an issue of concern?

10

The harsh reality is, all the code and coding style is grossly outdated. You can patch it up and correct as you like for now.
But in the long term you need to start looking at a total re-write using current day HTML and CSS.
The time has long past since mobile use became a majority of web traffic, so modern “responsive design” is a must for any site.
It is probably too big a subject to cover in one post, or even one topic, especially if you are new to the concept, but help is at hand when you need it.
I don’t want to be another “Nancy O’Shea”, but I guess her concern is the old-style, non-responsive coding from the last century, which is why she may insist on Bootstrap. Personally I’m not a fan of Bootstrap, there are better ways to make a modern responsive site, if you want to take the time to learn modern CSS properly, which will empower and educate you far more than learning Bootstrap.

1 Like
11

I gave an example of what I meant and you need position:relative to create the stacking/ positioning context like this:

#wrapper{
  margin: 0 auto;
  width: 1240px;
  position:relative;/* this is the key*/
}

When you place an absolute element on your page its starting position is taken from its nearest positioned ancestor (i.e. relative or absolute not static (the default)). If no such ancestor exists then the starting position is the root element (effectively the body element). That means the top left co-ordinate would be the top left of the viewport window.

When I add position:relative to the wrapper then the wrapper now becomes the stacking/positioning context for all those absolute children. If you move the wrapper then all the absolute children move also. The wrapper gas margin:auto which means it centers in the screen and will drag all those absolute elements with it. I tested with your code and it works as well as can be expected.

As you don;t have the viewport meta tag in place the display will be shrunk down automatically and the only way people can really use the site will be to pinch and zoom. That may be ok for you and if your text is large enough it may suffice but a proper mobile experience will be nothing like that. The browser makes a best guess at the width of your site and scales it smaller until it fits the mobile viewport. Most mobile users don’t want a zoomed down site as indeed you often want larger text on a mobile device that you do on desktop. However that is a question for a whole another thread :slight_smile:

There doesn’t seem to be a lot on that page and it could be recoded responsively quite easily but I realise you may have hundreds of pages like that so may be quite a task.

12

Thanks for the clarity on relative position and how it works to reorient the elements to the wrapper.

I entered the code( ? including the greyed this is the key ?), but when I look at the page in a browser it still hugs the left side. I am starting to feel defeated on my attempt to center the pages and more generally my ability to do any more for now than post what I have and move on. I really cannot thank you enough for your helpfulness and willingness to meet me where I am.
I am going to try your solution on another page or 2 and see what happens.

By the way I meant to get back yesterday but we are having a large snowstorm in VT and the internet was out until a few hours ago.

I do understand what you and others are saying about the need to move to current html standards and I had planned on going through tutorials and trying to do that a few pages at a time. I am 72 and having a harder time learning these things. When I try to read there are always terms and concepts that I am unfamiliar with. I cannot afford right now to hire someone.

13

That is a comment.

2 Likes
14

I copied your code from post 7 and put it in a codepen. I then added the css I showed you above and the page immediately centers.

Here is the codepen.


(Click the Edit on Codepen link in top right corner to see the codepen full size otherwise you won’t see the centering)

It is centred straight away, although I did remove the gap from the id here <div id ="wrapper">. It should be<div id="wrapper"> not <div id ="wrapper"> (note the space after the letters ID. There should be no space after attributes like ID).

The only thing you may need to do because I can’t see your images is that if your image on the body background is also supposed to be aligned with that layout or not. If so then you will need to add background-position:center to the body element.

15

Thank you. I took out the gap between id and =, and then what made the page center was adding the
background-position: center to the body element.

I’m really happy with this and feel only an inch from having the tools to complete this project, but I still have a problem. The background graphic is no longer starting at the top of the page like other elements and it ends halfway down leaving white behind the images and text. The Top of the background graphic has my website name in Calligraphy 421 font and it does not show so I assume the background is shifted upward. Ideas how to get it back aligned with the rest of the page?

16

Use background-position: center top and it will start at the top :slight_smile:

17

OK so I took a guess and changed the background-position: center
to background-position: top and it is now showing the whole background and also centering in the viewport. Yippee!.

For some reason the header is now shifted to the left along with the first image. I will see if I get any problems from just changing the left position in those.

OK I just did that and it did not cause issues so I am going to get to work on my other pages and see how it goes.

I will let you know when I upload the site.