Skip navigation
hannahmeow
hannahmeow Calculating status...
Currently Being Moderated

dreamweaver cs5.5 - centering everything in a wrapper div

Apr 26, 2012 2:26 PM

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

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>

1135 Views   3 Replies   Latest reply: hannahmeow, Apr 26, 2012 3:55 PM
 
Replies
  • martcol
    Currently Being Moderated
    1. martcol,
    Apr 26, 2012 2:52 PM   in reply to hannahmeow
    Report

    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

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Apr 26, 2012 2:59 PM   in reply to hannahmeow
    Report

    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/

     
    |
    Mark as:
  • hannahmeow
    Currently Being Moderated
    3. hannahmeow,
    Apr 26, 2012 3:55 PM   in reply to Nancy O.
    Report

    Perfect! thanks so much

     
    |
    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