2 Replies Latest reply on Aug 24, 2014 12:25 PM by Nancy OShea

    Help with centering V.2

    Alex4555 Level 1

      Didn't seem to work last time ben . I basically want to have everything stored inside my div tag be kindof cluped together like this site. There is a background and there are the things on top of the background that all adjust to the page together. How they adjust is they all stay centered until it hits the left edge then the page collapses.

       

      Sorry if this question is confusing.

       

       

       

      <!doctype html>

      <html>

      <head>

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

       

       

      <title>sharepage</title>

      </head>

       

       

      <body>

      <div class ="header"> </div>

      <div class ="underline"> </div>

      <div class ="secondheader"> </div>

      <div class ="secondunderline"> </div>

      <div class ="thirdunderline"> </div>

      <div class="vertical-line"> </div>

      <div style="text-align: center; margin-top 100px;">

      <div class="content">

      <div class= "button">

      <input class="center6" type="image" name="imageField" id="imageField" src="file:///C|/Users/alex/Desktop/WebsiteProject/images/searchbutton.png">

      <input class="center" type="image" name="imageField" id="imageField" src="file:///C|/Users/alex/Desktop/WebsiteProject/images/banner1.png">

      <input class="center2" type="image" name="imageField" id="imageField" src="file:///C|/Users/alex/Desktop/WebsiteProject/images/banner2.png">

      <input class="center3" type="image" name="imageField" id="imageField" src="file:///C|/Users/alex/Desktop/WebsiteProject/images/banner3.png">

      <input class="center4" type="image" name="imageField" id="imageField" src="file:///C|/Users/alex/Desktop/WebsiteProject/images/banner4.png">

      <input class="center5" type="image" name="imageField" id="imageField" src="file:///C|/Users/alex/Desktop/WebsiteProject/images/banner5.png">

      <input class="textbox" type="text" name="lastname">

      <input class="box" type="text" name="textfield" id="textfield"

      </div>

      </div>

       

       

      </body>

       

       

      </html>

       

       

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

       

       

       

      body {

        margin: 0

      }

       

       

      .header{

          margin: 0;

        padding: 0;

        background: #fcfcfc;

          position:absolute;

          left: 0;

          right: 0;

          height:48px;   

      }

       

       

      .underline{

          margin: 0;

        padding: 0;

        background: #d0d0d0;

          position:absolute;

          top: 47px;

        left: 0;

          right: 0;

          height: 1px;   

      }

       

       

      .secondheader{

        margin: 0;

        padding: 0;

        background: #fcfcfc;

          position:absolute;

          top: 80px;

        left: 0;

          right: 0;

          height: 35px

      }

       

       

      .secondunderline{

       

       

        margin: 0;

        padding: 0;

        background: #d0d0d0;

          position:absolute;

          top: 80px;

        left: 0;

          right: 0;

          height: 1px

       

       

      }

       

       

      .thirdunderline{

       

       

        margin: 0;

        padding: 0;

        background: #d0d0d0;

          position:absolute;

          top: 115px;

        left: 0;

          right: 0;

          height: 1px

      }

       

       

      /* div.vertical-line{

        width: 1px;

        background-color: black;

        height: 35px;

        position:absolute;

        top: 80px;

        left: 272px;

        right: 0;

      } */

       

       

      .center {

          margin: 0;

          position: absolute;

          top: 87.7px;

          left: 180px;

          margin-left: -.5em;

          margin-top: -.5em;

      }

       

       

      .center2 {

          margin: 0;

          position: absolute;

          top: 87.7px;

          left: 680px;

          margin-left: -.5em;

          margin-top: -.5em;

      }

       

       

      .center3 {

          margin: 0;

          position: absolute;

          top: 87.7px;

          left: 1050px;

          margin-left: -.5em;

          margin-top: -.5em;

      }

       

       

      .center4 {

          margin: 0;

          position: absolute;

          top: 87.7px;

          left: 1300px;

          margin-left: -.5em;

          margin-top: -.5em;

      }

       

       

      .center5 {

          margin: 0;

          position: absolute;

          top: 87.7px;

          left: 1600px;

          margin-left: -.5em;

          margin-top: -.5em;

      }

       

       

      .box {

        padding: 5px;

         -webkit-box-sizing: border-box;

          -moz-box-sizing: border-box; 

          box-sizing: border-box;

        width: 447px;

        height: 26px;

        top: 10px;

          left: 500px;

        position: absolute;

        background: #ffffff;

        border-style: solid;

          border-width: 1px;

        border-color: #d0d0d0

      }

       

       

      .center6 {

          margin: 0;

          position: absolute;

          top: 16.6px;

          left: 960px;

          margin-left: -.5em;

          margin-top: -.5em;

      }

        • 1. Re: Help with centering V.2
          BenPleysier Adobe Community Professional & MVP

          Copy and paste the following into a new document and view in your favourite browser.

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Untitled Document</title>
          <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
          <script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
          <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
          </head>
          
          <body>
          <div class="container">
              <div class="row">
                  <div class="span6">
                      <h2>Heading</h2>
                      <hr>
                      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                  </div>
                  <div class="span6">
                      <h2>Heading</h2>
                      <hr>
                      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                  </div>
              </div>
          </div>
          </body>
          </html>
          

           

          The above was made in two seconds using the Bootstrap extension that I mentioned in your previous post.

          1 person found this helpful
          • 2. Re: Help with centering V.2
            Nancy OShea Adobe Community Professional & MVP

            Position:absolute in primary layouts is pure poison.  And it's totally ill-suited for use in Responsive Web Designs.  That's why you're having such a hard time with this.  Get rid of positioning.  You don't need it.  Oh and negative margins are a really bad idea, too.  Stay away from positioning until you fully understand its consequences.  Here's why: http://www.apptools.com/examples/pagelayout101.php

             

            Going forward, learn to use CSS floats, margins & padding without the negative values.

             

             

            Nancy O.

            1 person found this helpful