Skip navigation
hannahmeow
hannahmeow
Currently Being Moderated

putting a template into a wrapper div

Apr 26, 2012 12:49 PM

Tags: #cs5 #help #adobe #div #template #dreamweaver #javascript #css #code #dw

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>

451 Views   3 Replies   Latest reply: Nancy O., Apr 27, 2012 10:56 AM
 
Replies
  • hannahmeow
    Currently Being Moderated
    1. hannahmeow,
    Apr 26, 2012 12:52 PM   in reply to hannahmeow
    Report

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

     
    |
    Mark as:
  • 3DeeGee
    Currently Being Moderated
    2. 3DeeGee,
    Apr 27, 2012 1:36 AM   in reply to hannahmeow
    Report

    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.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Apr 27, 2012 10:56 AM   in reply to 3DeeGee
    Report

    @3DeeGee,

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

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

     


     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points