3 Replies Latest reply on Apr 25, 2010 11:37 AM by Nancy OShea

    text layout problem

    lukasdp

      I apologize for the plethora of stupid questions I am about to ask - I am brand new to dreamweaver and atempting to design a very simple website layout for myself. My most glaring problem is this: I wish for text to be in the centre of the webpage and I wish it to stay there. I have drawn an apDiv in the centre of the page and added my text. As you most likely have guessed, as soon as I rezise my browser the background floats under the text.

      How can I fix the text so it moves with the browser and stays in the centre?

      thanks everyone. here is my code thus far.

      ~L

       

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <title>home</title>

      <style type="text/css">

      <!--

      body {

      background-repeat: no-repeat;

      background-image: url(webpageB.jpg);

      background-position: center;

      background-attachment: fixed;

      }

      #text {

      left:369px;

      top:283px;

      width:260px;

      height:132px;

      z-index:1;

      margin-top: 270px;

      margin-left: 360px;

      clip: rect(auto,auto,auto,auto);

      }

      -->

      </style></head>

       

      <body bgcolor="#666666">

      <div id="text">

        <div align="center">

          <p>lukas peters photography</p>

      </div>

      </div>

      <p>                                                                   </p>

      <p>                      </p>

      </body>

      </html>

        • 1. Re: text layout problem
          Nancy OShea Adobe Community Professional & MVP

          1) To horizontally center your web site, use default CSS positioning (which is no positioning at all). APDivs cannot be centered.

           

          2) Define a container width in pixels, ems or percentages.

           

          3) Add margin-left and margin-right of auto (browser default).

           

           

          CSS:

           

          body {

          width: 900px;

          background: #666 url(webpageB.jpg) no-repeat center fixed;

          margin: 0 auto; /**centers on screen**/

          text-align: center; /**centers older browsers**/

          }


          #text {

          background: #FFF;

          color: #000;

          width: 300px;

          margin: 0 auto;

          }

           

           

          HTML:

          <body>

          <div id="text">

          <h1>Heading 1</h1>

          <h2>Heading 2</h2>

          <p>Your text goes here</p>

          </div>   <!--end of #text-->

          </body>

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          1 person found this helpful
          • 2. Re: text layout problem
            lukasdp Level 1

            hi thanks for the response, I don't know anything about code so when it comes to pasting that into my website, I tried and it seemed to make a big mess of things. All I need is for whatever text I add to stay where I put it and not move around the site when I resize the browser.

            how do I "define a container width" as you suggested?

            thanks for your patience,

            ~L

            • 3. Re: text layout problem
              Nancy OShea Adobe Community Professional & MVP
              I don't know anything about code...

              That's like trying to drive a car while wearing a blindfold. 

               

              HTML & CSS Tutorials - http://w3schools.com/

               

              Open a NEW, blank HTML page.  In code view, replace the exisitng code with the following markup:

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <title>Untitled Document</title>
              <style type="text/css">
              
              body {
              width: 900px;
              background: #666 url(webpageB.jpg) no-repeat center fixed;
              margin: 0 auto; /**centers on screen**/
              text-align: center; /**centers older browsers**/
              }
              
              #text {
              background: #FFF;
              color: #000;
              width: 600px;
              margin: 0 auto;
              }
              </style>
              </head>
              
              <body>
              <div id="text">
              <h1>Heading 1</h1>
              <h2>Heading 2</h2>
              <p>Paragraph text goes here.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, neque sed euismod euismod, massa augue tempus arcu, ac faucibus eros orci a magna. <br />
              </p>
              </div>   <!--end of #text-->
              </body>
              </html>
              
              

               

              Text is centered.

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com