3 Replies Latest reply on Apr 27, 2012 10:56 AM by Nancy OShea

    putting a template into a wrapper div

    hannahmeow Level 1
    hannahmeow Apr 26, 2012 12:49 PM

      I have used on of Nancy's templates and i'm wanting to put what i have taken inside one of my web pages, which is all inside a wrapper div.

       

      Here is the page:

      (the template is to go just above the footer)

       

       

       

      <!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>

       

       

      <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: putting a template into a wrapper div
          hannahmeow Level 1
          hannahmeow Apr 26, 2012 12:52 PM (in response to hannahmeow)

          and here is the template...

          i have had no trouble simply copying this into my webpage html, however i want it in the wrapper. also how do i center the thumbnails after? as they are all to the left.

           

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><link rel="stylesheet" type="text/css" href="//s7.addthis.com/static/r07/widget081.css" media="all">

          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

           

           

           

           

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

           

           

          body {

          margin:0;

          padding:0;

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

          }

           

           

          #wrapper {

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

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

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

          margin: 0px 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;

          }

           

           

          #thumbs img {

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

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

           

           

           

           

          }

           

           

          .clearing {

          clear:left;

          height:0px;

          width: 100%;

          }

           

           

          </style>

           

           

          <div id="wrapper">

           

           

          <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>

           

           

          <!--end wrapper -->

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

           

           

           

           

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

           

           

          <!--end floatRight -->

          • 2. Re: putting a template into a wrapper div
            3DeeGee Level 2
            3DeeGee Apr 27, 2012 1:36 AM (in response to hannahmeow)

            There is chunks of code missing from what you've posted so far! making it hard to help. I can see a problem before you get any further with 2 div's having the ID of 'wrapper'.

            If you post the complete code for both pages I'll gladly help you put things in order.

            • 3. Re: putting a template into a wrapper div
              Nancy OShea Adobe Community Professional & MVP
              Nancy OShea Apr 27, 2012 10:56 AM (in response to 3DeeGee)

              @3DeeGee,

              This is a duplicate post that was already answered in another thread.

              http://forums.adobe.com/message/4363879#4363879