3 Replies Latest reply: Apr 26, 2012 3:55 PM by hannahmeow RSS

    dreamweaver cs5.5 - centering everything in a wrapper div

    hannahmeow Community Member

      How do i get this webpage (the first code) to look like the other (second code)? Also, in dreamweaver code view my thumbnails appear diferrent to in IE view. in DW there is just a list of 'Optional caption'. where as in IE they appear as thumbnails (how i want it to look). Perhaps there is some sort of error in my code. can anyone see what i have done wrong? thanks

       

       

       

      <!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>Untitled Document</title>

       

       

      <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

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

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

      </head>

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

      <body>

      <div id="wrapper">

      <img src="product and website photos/header.png" width="1064" height="116" alt="header" />

       

       

      <!--begin menu -->

      <ul id="MenuBar1" class="MenuBarHorizontal">

      <li><a href="#home.html">Home</a></li>

      <li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>

      <li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>

      <li><a href="bwt.html">Tops</a></li>

      <li><a href="bws.html">Skirts/Shorts</a></li>

      <li><a href="bwl.html">Trousers/Leggings</a></li>

      <li><a href="bwa.html">Accessories</a></li>

      <li><a href="bwd.html">Dresses</a></li></ul></li>

      <li><a href="#" class="MenuBarItemSubmenu">Men</a>

        <ul>

          <li><a href="#">Tops</a></li>

          <li><a href="#">Bottoms</a></li>

          <li><a href="#">Accessories</a></li>

        </ul>

      </li>

      <li><a href="#">Semi-Unique</a></li>

      </ul>

      </li>

      <li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>

      <li><a href="t-shirt shop.html">Men</a></li>

      <li><a href="t-shirt shop.html">Women</a></li>

      <li><a href="t-shirt shop.html">Unique</a></li>

      </ul></li>

      <li><a href="clearance.html">Clearance</a></li>

      <li><a href="#">About</a></li>

      </ul>

       

       

      <img src="product and website photos/dreadmadeby.png" alt="DREADAD" width="1064" height="561" />

       

       

      <div id="footer">

      <p>&copy; 2012 your footer text goes here

      </p> <!--end footer --></div>

       

       

      <!--end wrapper --></div>

      <script type="text/javascript">

       

       

      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

       

       

      </script>

       

       

       

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

       

       

       

      <!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>Untitled Document</title>

       

       

      <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

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

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

      </head>

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

      <body>

      <div id="wrapper">

      <img src="product and website photos/header.png" width="1064" height="116" alt="header" />

       

       

      <!--begin menu -->

      <ul id="MenuBar1" class="MenuBarHorizontal">

      <li><a href="#home.html">Home</a></li>

      <li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>

      <li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>

      <li><a href="bwt.html">Tops</a></li>

      <li><a href="bws.html">Skirts/Shorts</a></li>

      <li><a href="bwl.html">Trousers/Leggings</a></li>

      <li><a href="bwa.html">Accessories</a></li>

      <li><a href="bwd.html">Dresses</a></li></ul></li>

      <li><a href="#" class="MenuBarItemSubmenu">Men</a>

        <ul>

          <li><a href="#">Tops</a></li>

          <li><a href="#">Bottoms</a></li>

          <li><a href="#">Accessories</a></li>

        </ul>

      </li>

      <li><a href="#">Semi-Unique</a></li>

      </ul>

      </li>

      <li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>

      <li><a href="t-shirt shop.html">Men</a></li>

      <li><a href="t-shirt shop.html">Women</a></li>

      <li><a href="t-shirt shop.html">Unique</a></li>

      </ul></li>

      <li><a href="clearance.html">Clearance</a></li>

      <li><a href="#">About</a></li>

      </ul>

      <style type="text/css" media="all">

       

       

      body {

      margin:0;

      padding:0;

      font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";

      }

       

       

      /**this styles the page wrapper**/

      #wrapper {

      width: 97%; /**adjusts to viewport width**/

      min-width: 600px; /**smallest width possible**/

      max-width: 1280px; /**largest width possible**/

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

      background: #FFF;

      text-align:center;

      }

       

       

      /**this styles image container**/

      #thumbs p {

      float:left;

      width: 180px;

      height: 12.5em;

      margin: 10px;

      padding: 10px;

      border: 1px solid silver;

      /**this styles caption text**/

      font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;

      color: #666;

      text-align:center;

      }

       

       

      /**recommend using same size images**/

      #thumbs img {

      width:  160px; /**adjust width to photo**/

      height: 120px; /**adjust height to photo**/

      margin-bottom: 1.5em;

       

       

      /**CSS3 drop shadows**/

      -moz-box-shadow: 5px 5px 5px #666;

      -webkit-box-shadow: 5px 5px 5px #666;

      -khtml-box-shadow: 5px 5px 5px #666;

      box-shadow: 5px 5px 5px #666;

      }

       

       

      /**float clearing**/

      .clearing {

      clear:left;

      height:1px;

      width: 100%;

      }

       

       

      </style>

       

       

       

       

       

       

       

       

       

       

      <div id="wrapper">

      <h2> </h2>

      <div id="thumbs">

        <p><br>

      Optional captions

      </p>

       

       

      <p><br>

      Optional captions

      </p>

       

       

      <p><br>

      Optional captions</p>

       

       

      <p><br>

      Optional captions</p>

       

       

      <p><br>

      Optional captions</p>

       

       

      <p><br>

      Optional captions

      </p>

       

       

      <p><br>

      Optional captions</p>

       

       

      <p><br>

      Optional captions</p>

       

       

      <p><br>

      Optional captions</p>

       

       

      <p><br>

      Optional captions</p>

       

       

      <p><br>

      Optional captions</p>

       

       

      <p><br>

      Optional captions</p>

       

       

      <!--end thumbs --> </div>

       

       

      <!--IMPORTANT! clear floats after thumbs div-->

      <hr align="center" noshade class="clearing">

       

       

      <p> </p>

       

       

       

       

      <!--end wrapper --> </div>

       

       

      <!--remove Myfooter from your web page --><!--end Myfooter -->

       

       

      <div id="footer">

        <p>&copy; 2012 your footer text goes here

      </p> <!--end footer --></div>

       

       

      <!--end wrapper --></div>

      <script type="text/javascript">

       

       

      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

       

       

      </script>

        • 1. Re: dreamweaver cs5.5 - centering everything in a wrapper div
          martcol Community Member

          Are you copying code exactly as it is in your page?  If so, it's looking a bit jumbled up to me.  It would be very much easier if the pages were live (uploaded to your host) and you could link to them.

           

          At the end of your page you should have </body> and </html> closing tags which I can't see  and it looks like some stuff that belongs in the head of e page have strayed I.e. the CSS.

           

          The thing that centres an element is giving it left and right margin of auto and a width.  You can see that commented in the code.  For it to work the div elements will have to be properly formed and properly nested.

           

          Martin

          • 2. Re: dreamweaver cs5.5 - centering everything in a wrapper div
            Nancy O. CommunityMVP

            Try this:

             

             

            <!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>Untitled Document</title>
            
            <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
            <link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
            <link href="main.css" rel="stylesheet" type="text/css" /> 
            <link href="style2.css" rel="stylesheet" type="text/css" />
            
            <!--embedded styles for this page only-->
            <style type="text/css">
            body {
            margin:0;
            padding:0;
            font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
            }
            
            #wrapper {
            width: 1064px;
            margin: 0 auto; /**with width, this centers page on screen**/
            background: #FFF;
            text-align:center;
            }
            
            /**this styles image container**/
            #thumbs p {
            float:left;
            width: 180px;
            height: 12.5em;
            margin: 5px;
            padding: 10px;
            border: 1px solid silver;
            /**this styles caption text**/
            font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
            color: #666;
            text-align:center;
            }
            
            /**recommend using same size images**/
            #thumbs img {
            width:  160px; /**adjust width to photo**/
            height: 120px; /**adjust height to photo**/
            margin-bottom: 1.5em;
            /**CSS3 drop shadows**/
            -moz-box-shadow: 5px 5px 5px #666;
            -webkit-box-shadow: 5px 5px 5px #666;
            -khtml-box-shadow: 5px 5px 5px #666;
            box-shadow: 5px 5px 5px #666;
            }
            
            /**float clearing**/
            #thumbs:after{
            clear:left;
            display:block;
            visibility:hidden;
            height:0;
            font-size:0;
            content: " ";
            }
            </style> 
            </head>
            <body>
             <div id="wrapper">
             <img src="product and website photos/header.png" width="1064" height="116" alt="header" />
             <!--begin menu -->
             <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="#home.html">Home</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>
            <li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>
            <li><a href="bwt.html">Tops</a></li>
            <li><a href="bws.html">Skirts/Shorts</a></li>
            <li><a href="bwl.html">Trousers/Leggings</a></li>
            <li><a href="bwa.html">Accessories</a></li>
            <li><a href="bwd.html">Dresses</a></li></ul></li>
            <li><a href="#" class="MenuBarItemSubmenu">Men</a>
            <ul>
            <li><a href="#">Tops</a></li>
            <li><a href="#">Bottoms</a></li>
            <li><a href="#">Accessories</a></li>
            </ul>
            </li>
            <li><a href="#">Semi-Unique</a></li>
            </ul>
            </li>
            <li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>
            <li><a href="t-shirt shop.html">Men</a></li>
            <li><a href="t-shirt shop.html">Women</a></li>
            <li><a href="t-shirt shop.html">Unique</a></li>
            </ul></li>
            <li><a href="clearance.html">Clearance</a></li>
            <li><a href="#">About</a></li>
            </ul>
            
            <h2>Heading 2 </h2>
            <div id="thumbs">
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <p>[insert image]<br />
            Optional captions
            </p>
            
            <!--end thumbs --></div>
            
            <div id="footer">
            <p>&copy; 2012 your footer text goes here</p>
            <!--end footer --></div>
            
            <!--end wrapper --></div>
            
            <script type="text/javascript">
            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
            </script>
            </body>
            </html>
            

             

             

             

            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists 

            http://alt-web.com/

            http://twitter.com/altweb

            http://alt-web.blogspot.com/

            • 3. Re: dreamweaver cs5.5 - centering everything in a wrapper div
              hannahmeow Community Member

              Perfect! thanks so much