Centering a Webpage in Dreamweaver
Hi all,
I'm designing a portfolio website, but for some reason one of my pages won't center and I'm not sure what I'm doing wrong.
I have my wrapper set up as follows:
#wrapper {
width: 1000px;
margin: 0 auto;
}
But it still won't center. I can't figure out for the life of my why. Here's the rest of the code (sorry if it's super messy, I'm still learning):
<!doctype html>
<html>
<head>
<!--for older IE-->
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9">
<meta charset="utf-8">
<title>It's me!</title>
<style type="text/css">
#wrapper {
width: 1000px;
margin: 0 auto;
}
/* BEGIN HORIZONTAL DROP-MENU */
nav {
position: relative;
align-content: center;
text-align: center;
margin: 0 auto;
width: 1024px;
top: 0px;
}
nav ul {
margin: 0;
padding: 0
}
nav li {
list-style: none;
font-size: 12px;
float: left;
text-align: center;
}
/**top level menu**/
nav li a {
display: block;
text-decoration: none;
margin-right: 5px; /* space between links */
width: 8em; /* adjust as needed or use auto */
padding: 8px;
font-weight: 400;
line-height: 1.50em;
border-top: none;
color: #FFFFFF;
font-family: indie-flower;
font-style: normal;
font-size: large;
}
/**alternating background colors**/
nav li:nth-child(odd) > a {
background-color: #515151
}
nav li:nth-child(even) > a {
background-color: #797676
}
/**top menu style on mouse over**/
nav li:hover > a{
color: #000000;
background-color: #fbd1d2;
}
/**sub-menu**/
nav li ul {
display: none;
text-align: center;
margin: 0;
padding: 0 1em;
background: none;
}
/**sub-menu, help for older IE**/
nav li:hover ul, nav li.hover ul {
display: block;
position: absolute;
padding: 0;
}
nav li:hover li, nav li.hover li { float: none; }
/**drop-menu style**/
nav li:hover li a, nav li.hover li a {
width: 9em; /* adjust width as needed or use auto */
margin-top: 0;
}
/**drop-menu style on mouse over**/
nav li li a:hover {
background-color: #CBCBCB;
color: #000000;
}
/* Clear floated elements at the end*/
nav:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/**END HORIZONTAL DROP-MENUS STYLES**/
/*Code by http://alt-web.com/DEMOS/CSS-Multi-colored-drop-menu.shtml#*/
body {
background-color: #FFFCCB;
width: 0px;
}
#content {
margin-top: 10px;
margin-right: 44px;
margin-left: auto;
margin-bottom: 0;
background-color: #797676;
width: 984px;
height: 670px;
}
#pictures {
float: left;
}
.portrait {
margin: 20px;
}
#text {
width: 497px;
float: right;
background-color: #D0CFCF;
padding-left: 20px;
margin-right: 40px;
margin-top: 30px;
padding-right: 20px;
}
p {
margin-right: 0px;
font-family: de-walpergens-pica;
font-style: normal;
font-weight: 400;
text-align: center;
font-size: 2.3em;
margin-top: -23px;
}
h1 {
font-family: arizonia;
font-style: normal;
font-weight: 400;
font-size: 6em;
text-align: center;
margin-top: -2px;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/fascinate:n4:default;arizonia:n4:default;indie-flower:n4:default;de-walpergens-pica:n4:default.js" type="text/javascript"></script>
</head>
<body onLoad="MM_preloadImages('images/kawaii_500.png','images/hannah.png')">
<div id="wrapper">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learn about me ▼</a>
<ul><li><a href="#">Portrait</a></li>
<li><a href="#">Alphablog</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</li>
<li><a href="#">Animations ▼</a><ul>
<li><a href="#">GIF</a></li>
<li><a href="#">Alphablogimation</a></li>
</ul>
</li>
<li><a href="#">Visuals ▼</a><ul>
<li><a href="#">Illustrations</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Paintings</a></li></ul></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Stories ▼</a><ul>
<li><a href="#">Fiction</a>
</li>
<li><a href="#">Features</a></li>
<li><a href="#">Published</a></li>
</ul>
</li>
</ul>
</nav><!--end navbar-->
<div id="content">
<div id="pictures">
<div class="portrait"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('itame','','images/kawaii_500.png',1)"><img src="images/hannahukulele500.png" alt="" width="300" height="300" id="itame"></a></div>
<div class="portrait"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ill','','images/hannah.png',1)"><img src="images/portrait.png" alt="" width="300" height="300" id="ill"></a></div>
</div>
<div id="text"><h1>Hannah G.</h1><p>Cal State Fullerton student majoring in print journalism. Aside from an interest in news, I enjoy fiction writing, illustrating, painting and photography. I was also a part of Mt. SAC's engineering research team. I plan to one day report in science and technology.</p></div>
</div>
</div>
</body>
</html>
AdChoices