Newbie Problem with Centering a Webpage (Nothing works)

Report · Aug 20, 2018

Hello.

I am new to DW, and ran into a problem that is thoroughly covered, yet does not work in my case. I have tried for hours to get this to work. Simply put, I have created a div tag wrapper to go around all of my <body> code. This wrapper is meant to center all of my webpage content on the screen. In the attached code, you can see that I have a lot of div tags, and the final div tag is the wrapper which goes around all of the other div tags. Each div tag contains one webpage object, except for the wrapper which goes around all of them. I have assigned my css file, "wrapper.css" to the HTML code, but nothing happens.

What the heck am I doing wrong?

Thanks for any and all help!

The HTML:

<!doctype html>

<html>

<head>

</head>

<body>

<p id="Headline_Link">WE ARE OPEN FOR BUSINESS! DROP ON BY!</p>

</div>

<p id="LeftText_Link">Full 3D Body Scanning<br>&<br>Crystal Laser Engraving</p>

</div>

</div>

</div>

</div>

</body>

</html>

-----------------------------------

...and the CSS wrapper:

#wrapper {

max-width: 725px;

margin-left: auto;

margin-right: auto;

}

Report · Aug 20, 2018

You have an excessive number of links to CSS files. Why so many?

And some of the links are pointing to FILES on your local machine which nobody can see except you. This is usually a symptom of not working within a defined local site folder.

My advice is to start over with one of the built-in-starter templates.

1. Define your local site folder by going to Site > New Site. Choose a folder or create a new one. For example: C:\MyTestSite\ See screenshots.

2. Go to File > New > Starter Templates. Pick one and hit the Create button.

3. Immediately save your newly created page as index.html. DW will create asssets folders for you inside your local site.

Your page should be centered when previewed in browsers. If not, come back to the forum for further assistance.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 20, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
You have an excessive number of links to CSS files. Why so many?

I think you will find that is the new and 'correct' way of doing things, breaking everything down into short managable components. Look at the newish frontend js frameworks - they seem to have excessive links to all kind of files, beit js, css or some other supporting stuff!

Report · Aug 20, 2018

I work with modules and I assure you I don't maintain 75 separate stylesheets. That's insanity. There's no reason for it.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 20, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
I work with modules and I assure you I don't maintain 75 separate stylesheets. That's insanity. There's no reason for it.

Yeah I think so BUT the progress new breed think its the way to go.....seems the more links you can get into a page these days the more browny points you earn.

Report · Aug 20, 2018

Too many HTTP server requests kills site performance. It's not a good way to build for the modern web.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 20, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
Too many HTTP server requests kills site performance. It's not a good way to build for the modern web.

I somehow believe that is a thing of the past now or never was much of a concern, especially for the small sites we are generally developing. WP has been serving up multiple linked css/javascript files for years and that still supposedly is the No1 website builder. The more plugins used and lets face it WP is a plugin repository the more linked css and js files are generated. I dont suppose many developers will go through and combine them into 1 or 2 files.

Report · Aug 20, 2018

Ok! I think I finally figured it out. I forgot to set position to "absolute" in the css code. Like I had to for every other div tag.

Report · Aug 20, 2018

treddie wrote
I forgot to set position to "absolute" in the css code.

OH NO - don't ever do that!!!!

Positioning primary layouts is pure poison in responsive web design. Never, ever position anything unless you fully understand the consequences. Positioning removes content from the normal document flow which can have disastrous effects on various devices.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 20, 2018

treddie wrote
Ok! I think I finally figured it out. I forgot to set position to "absolute" in the css code. Like I had to for every other div tag.

If you HAVE set all the other <div> tags to have a postion of absolute then you need to set the wrapper to have a position of relative. The <divs> inside IF absolutely positioned will take their co-ordinates from the top/left of the wrapper.................however that is NOT/NEVER the way to build a website.

Report · Aug 21, 2018

I totally agree with Nancy OShea when she states

Too many HTTP server requests kills site performance. It's not a good way to build for the modern web.

as well as

I work with modules

To help you to realise both statements, create a file called styles.css or similar. Then add your stylesheets into that documents as in

/* CSS Document */
@import url('logo.css');
@import url('Products_Link.css');
@import url('Gallery_Link.css');
@import url('Support_Link.css');
@import url('Products_Link.css');
@import url('Support_Link.css');
@import url('Gallery_Link.css');
@import url('logo.css');
@import url('News_Link.css');
@import url('Contact_Us.css');
@import url('About_MINIU3D.css');
@import url('HomePage_bg.css');
@import url('Angled_Stroke_1.css');
@import url('Angled_Stroke_2.css');
@import url('Angled_Stroke_3.css');
@import url('Angled_Stroke_4.css');
@import url('Angled_Stroke_5.css');
@import url('Headline_Link.css');
@import url('LeftText_Link.css');
@import url('wrapper.css');

Then replace all of the links in your main document with

<link href="styles.css" rel="stylesheet">

Wappler, the only real Dreamweaver alternative.

Report · Aug 21, 2018

BenPleysier wrote
I totally agree with https://forums.adobe.com/people/Nancy+OShea when she states
Too many HTTP server requests kills site performance. It's not a good way to build for the modern web.
as well as
I work with modules
To help you to realise both statements, create a file called styles.css or similar. Then add your stylesheets into that documents as in

Says one who uses one call for each DMX script..........hummm........couldnt make this stuff up

Report · Aug 21, 2018

Thanks everyone for the wonderful criticisms! I am new to website building and I will be making my share of newbie errors.

I am going to start from scratch. I hadn't really gone all that deep into it yet anyway. At any rate, I think I corrupted my original site's "home" folder reference. I had changed the default folder midstream and had to replace old references to the new one, but it still wanted to refer to the old one, and I somehow ended up with explicit pathnames to much of the content. So just getting my home base all set up correctly from the start will be a necessity.

Also, I had assumed (incorrectly) that every time you create a piece of content, that it needed it's own .css file. I see now from an example, that one sheet will do, with multiple classes called out in the sheet for the different pieces of content. Is this why the syntax changes from #selectorname to .selectorname?

OH NO - don't ever do that!!!!
Positioning primary layouts is pure poison in responsive web design. Never, ever position anything unless you fully understand the consequences. Positioning removes content from the normal document flow which can have disastrous effects on various devices.

By "positioning" are you referring to centering the layout? It seems like DW defaulted to a left-side position from the start.

Report · Aug 21, 2018

treddie wrote
Also, I had assumed (incorrectly) that every time you create a piece of content, that it needed it's own .css file. I see now from an example, that one sheet will do, with multiple classes called out in the sheet for the different pieces of content. Is this why the syntax changes from #selectorname to .selectorname?

You can combine ALL of your css into one file if you wish, although its not strictly necessary.........just be sensible with the number of files.

# represents an id

There should only ever be one unique id used on each page.

. represents a class

Classes can be used multiple time on each page

treddie wrote
OH NO - don't ever do that!!!!
Positioning primary layouts is pure poison in responsive web design. Never, ever position anything unless you fully understand the consequences. Positioning removes content from the normal document flow which can have disastrous effects on various devices.
By "positioning" are you referring to centering the layout? It seems like DW defaulted to a left-side position from the start.

Absolutely positioning elements can lead you into all kinds of trouble unless you fully understand it. Absolutely positioned elements should be kept to a minimum and used in certain circumsatnce BUT not for the overall main scaffolding of the website

Report · Aug 21, 2018

treddie wrote
By "positioning" are you referring to centering the layout? It seems like DW defaulted to a left-side position from the start.

No. In CSS, there are 4 positions:

Static (default),
relative,
absolute,
fixed

Centering is not a position. It is the product of default static positioning + container width under 100% + margins left & right of auto.

Default static positioning is all you need for 98% of web pages.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 23, 2018

https://forums.adobe.com/people/Nancy+OShea
No. In CSS, there are 4 positions:
Static (default),
relative,
absolute,
fixed

Your point is helpful, but the CSS info not accurate. You forgot "sticky" and static is not really a position. This sometimes happens when we depend on the W3 Schools site (no affiliation with the W3C) instead of the W3C or third-party sites like Mozilla that tend to augment W3C. So... position:

position - CSS: Cascading Style Sheets | MDN

Report · Aug 23, 2018

completly agree to what saif Al, I will add that static is often use to reset a position that has previously been set to relative, absolute, fixed or sticky

Report · Aug 23, 2018

ALsp wrote
You forgot "sticky" and static is not really a position.

Posotion: sticky is fairly new. I confess, I still think of it as a hybrid because it causes an element to initially behave like position:relative until the user scrolls x amount of distance. Then wham, the element snaps into position:fixed. It's often used for top- level site navs and search bars.

Unspecified position = static. It is the default state in all HTML documents. That's my story and I'm sticking to it .

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 23, 2018

When sticky elements become stuck, it behaves with the benefits of fixed positioning, without the usability/accessibility issues. It's really a brilliant addition to the position property. And actually, it doesn't actually work well for top navigation bars.