Skip to main content
T
treddie
Participating Frequently
August 20, 2018
Question

Newbie Problem with Centering a Webpage (Nothing works)

  • August 20, 2018
  • 2 replies
  • 1248 views

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>

<meta charset="utf-8">

<title>Test 1</title>

<link href="file:///C|/Users/Mollodesign/Documents/Test Site/logo.css" >

<link href="file:///C|/Users/Mollodesign/Documents/Test Site/Products_Link.css" >

<link href="file:///C|/Users/Mollodesign/Documents/Test Site/Gallery_Link.css" >

<link href="file:///C|/Users/Mollodesign/Documents/Test Site/Support_Link.css" >

<link href="Products_Link.css" rel="stylesheet" type="text/css">

<link href="Support_Link.css" rel="stylesheet" type="text/css">

<link href="Gallery_Link.css" rel="stylesheet" type="text/css">

<link href="logo.css" rel="stylesheet" type="text/css">

<link href="News_Link.css" rel="stylesheet" type="text/css">

<link href="Contact_Us.css" rel="stylesheet" type="text/css">

<link href="About_MINIU3D.css" rel="stylesheet" type="text/css">

<link href="HomePage_bg.css" rel="stylesheet" type="text/css">

<link href="Angled_Stroke_1.css" rel="stylesheet" type="text/css">

<link href="Angled_Stroke_2.css" rel="stylesheet" type="text/css">

<link href="Angled_Stroke_3.css" rel="stylesheet" type="text/css">

<link href="Angled_Stroke_4.css" rel="stylesheet" type="text/css">

<link href="Angled_Stroke_5.css" rel="stylesheet" type="text/css">

<link href="Headline_Link.css" rel="stylesheet" type="text/css">

<link href="LeftText_Link.css" rel="stylesheet" type="text/css">

<link href="wrapper.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="wrapper">

  <div id="Headline_Link_locator">

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

    </div>

  <div id="LeftText_Link_locator">

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

    </div>

  <div id="Angled_Stroke_5_locator">

    <img src="Angled Stroke.png" alt="Angled Stroke 5" id="Angled_Stroke_5"/>

    </div>

  <!--and many more div tags, here...  -->

   <div id="LeftText_Link_locator">

    <img src="Logo VLoR.png" alt="Company Logo" id="logo">

    </div>

  <div id="HomePage_bg_locator">

    <div><img src="Home Page bg.jpg" alt="HomePage bg" id="HomePage_bg"></div>

    </div>

</div>

</body>

</html>

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

...and the CSS wrapper:

    #wrapper {

        max-width: 725px;

        margin-left: auto;

        margin-right: auto;

    }

    This topic has been closed for replies.

    2 replies

    T
    treddieAuthor
    Participating Frequently
    August 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.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    August 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    ALsp
    ALsp
    Legend
    August 24, 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 .


    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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 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
    O
    osgood_
    Legend
    August 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!

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices