CSS and DIV - How to center a webpage
This problem make me crazy.
I really don't understand what's wrong into this code:
MARKUP:
<body onload="randomBg();">
<div class="wrapper">
<div class="menu">
<a href="http://www.fabiomancin.com/marble.html">Marble</a>
<a href="http://www.fabiomancin.com/eggstatt.html">Eggstatt</a>
<a href="http://www.fabiomancin.com/milano.html">Milano</a>
<a href="http://www.fabiomancin.com/motors.html">Motors</a>
<a href="http://www.fabiomancin.com/places.html">Places</a>
<a href="http://www.fabiomancin.com/protagonisti.html">Portraitures</a>
<a href="http://www.fabiomancin.com/vendemmia.html">Vendemmia</a>
<a href="http://www.fabiomancin.com/venice.html">Venice</a>
<a href="http://www.fabiomancin.com/visions.html">Berlin</a>
<a href="http://www.fabiomancin.com/visions.html">Praha</a>
<a href="http://www.fabiomancin.com/visions.html">Wien</a>
<a href="http://www.fabiomancin.com/visions.html">Visions</a>
<a href="http://www.flickr.com/photos/nextimages/show" target="_blank" title="Flickr Photostream">Flickr</a>
<a href="http://it.linkedin.com/in/fabiomancin" target="_blank" title="Online Resume">Linkedin</a>
<a href="mailto: info@fabiomancin.com">Contact me</a>
</div>
<div class="gallery">
<a href="images/visions/00.jpg" rel="lightbox[visions]"><img src="images/visions/00.jpg" width="75" height="75" alt="" /></a>
<a href="images/visions/01.jpg" rel="lightbox[visions]"><img src="images/visions/01.jpg" width="75" height="75" alt="" /></a>
<a href="images/visions/02.jpg" rel="lightbox[visions]"><img src="images/visions/02.jpg" width="75" height="75" alt="" /></a>
<a href="images/visions/03.jpg" rel="lightbox[visions]"><img src="images/visions/03.jpg" width="75" height="75" alt="" /></a>
<a href="images/visions/04.jpg" rel="lightbox[visions]"><img src="images/visions/04.jpg" width="75" height="75" alt="" /></a>
<a href="images/visions/05.jpg" rel="lightbox[visions]"><img src="images/visions/05.jpg" width="75" height="75" alt="" /></a>
<a href="images/visions/06.jpg" rel="lightbox[visions]"><img src="images/visions/06.jpg" width="75" height="75" alt="" /></a>
</div>
<div class="footer">Fabio Mancin 2010 - 2011 | All Rights reserved.
Reproduction, storage or trasmission in every means is forbidden without a Written Explicit Permission.
</div>
</div>
</div>
</body>
</html>
CSS:
div.wrapper{
width: 800px;
height: 100%;
margin:auto;
}
Normally using this rule I center everything in a webpage.
simply is align menu at center and rest of the page at left, with no chance to move it.
This "restyle" of the website is not published, that's why I've uploaded directly the code.
Any suggestions about hoe to solve it?..
I've checked other solution, and reconfigured the the css more times using ID selector, Class and other bad codes, without a solution.
My doubt is that there's a conflict in the css, but I don't have found it.
Here below the entire CSS:
h1 {
width:850px;
height:40px;
}
h2 {
font: arial, helvetica;
font-family: sans-serif;
color: #FFF;
text-transform:uppercase;
text-decoration:none;
text-shadow:3px 3px 3px #000;
text-align: justify;
position: absolute;
width: 800px;
height:40px;
margin:auto;
top:340px;
}
p {
font: arial, helvetica;
font-family: sans-serif;
color: #FFF;
text-transform:uppercase;
text-decoration:none;
text-shadow:2px 2px 2px #000;
text-align:justify;
position: absolute;
width: 800px;
height::170px;
margin:auto;
top:380px;
}
div.wrapper{
width: 800px;
height: 100%;
margin:auto;
}
a {
text-decoration: none;
color: #CCC;
}
a img {
border-width: 0;
}
div.menu {
width: 800px;
height: 100px;
color: #000;
text-decoration: none;
text-transform: uppercase;
text-align: left;
font: helvetica;
font-family:Arial, Helvetica, sans-serif;
font-size: 30px;
background-color: #FFF;
}
a:hover {
color: #CF0;
}
a:active {
color: #CCC;
}
div.gallery {
Background-color: #FFF;
top: 560px;
text-align: center;
width: 800px;
height: 200px;
margin-left: auto;
margin-right: auto;
position:absolute;
left: 20px;
}
div.footer{
font-size: 12px;
font: arial, helvetica;
font-family: sans-serif;
color: #000;
text-align: justify;
text-transform: lowercase;
text-decoration:none;
position: absolute;
width: 800px;
height: 100px;
position: absolute;
margin-left: auto;
margin-right: auto;
top: 750px;
left: 20px;
background-color: #FFF;
}
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: 0px; }
#outerImageContainer{ position: relative; background-color: none; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
/*#imageContainer>#hoverNav{ left: 0;}*/
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/) right 15% no-repeat; }
#imageDataContainer {display:none!important;}
/*#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }*/
/*#imageData{ padding:0 10px; color: #666; }
/*#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
/*#imageData #caption{ font-weight: bold; }
/*#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
/*#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}*/
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
#age {
font-size: 50px;
}
Sorry for the long thread.
Fabio
CSS Codes
Reply With Quote
Bookmarks