Hola compañeros, estoy tratando de centrar la plantilla web con sus imágenes de fondo, pero no consigo realizarlo, las imágenes se centran aunque la inferior del pie,se queda movida.
Se trata de la plantilla gratuíta Beautiful Curves.
Shot at 2012-07-13
Voy a insertar el código a ver qué opináis.
Html:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beautiful Curves</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="left">
<h4>Menú</h4>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://all-free-download.com/free-website-templates/" id="current">Inicio</a></li>
<li><a href="http://all-free-download.com/free-website-templates/">Quienes Somos</a></li>
<li><a href="http://all-free-download.com/free-website-templates/">Servicios</a></li>
<li><a href="http://all-free-download.com/free-website-templates/">Enlaces</a></li>
<li><a href="http://all-free-download.com/free-website-templates/">Contacto</a></li>
</ul>
</div>
</div>
<div id="right">
<h1>Beautiful Curves</h1>
<h2>Curves like Venus</h2>
<h3>Noticias</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>This is a block quote </h3>
<blockquote>
<p>Pellentesque tincidunt ultrices purus. Vivamus aliquam. Praesent commodo, diam quis egestas nonummy, lacus odio luctus elit, non rhoncus nulla tortor quis purus. Duis blandit. Duis porttitor, mauris vitae auctor ornare, ligula nunc faucibus dui, quis porttitor nunc nulla a libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Phasellus imperdiet. Fusce pellentesque risus quis lorem. Etiam pulvinar. Nunc scelerisque libero vel quam. Aenean massa eros, feugiat quis, adipiscing ac, scelerisque non, dui. Nulla ligula.</p>
</blockquote>
<h3>Lorem</h3>
<p>Mauris quis justo nec neque tristique posuere. Praesent rhoncus interdum quam. Vivamus elementum nisi eu leo vestibulum mollis. Nullam pellentesque bibendum purus. Nam hendrerit tincidunt enim. Etiam elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam felis justo, blandit sit amet, viverra non, convallis id, metus. Curabitur ut tellus. Sed pellentesque, est vel ullamcorper hendrerit, leo mi scelerisque elit, non ultrices risus nibh vel pede. Pellentesque gravida odio sed sem. Maecenas dignissim. Mauris nulla. Fusce sodales tellus sed mi. Aliquam convallis ornare velit. Suspendisse imperdiet. Vestibulum tincidunt.</p>
<h3>Morbi feugiat </h3>
<p>Integer porta neque at neque. Nulla viverra orci eget arcu. Morbi feugiat. Proin vestibulum molestie nibh. Duis sodales lorem non est. Etiam eu purus. In ipsum. Duis vel orci ac mauris fringilla faucibus. Pellentesque tempus suscipit risus. In nec nisi. Cras tortor metus, ornare eu, luctus id, dignissim quis, neque. Morbi vulputate, nibh in lobortis volutpat, mi ligula mollis metus, at lobortis est ipsum id mi. Nunc ultricies faucibus tortor. Vivamus dignissim lacus eget est bibendum vulputate. Suspendisse potenti. Quisque sit amet dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div id="footer">
<p>Created by: Dieter Schneider 2007| <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a></p>
</div>
<div align=center>This template downloaded form <a href='http://all-free-download.com/free-website-templates/'>free website templates</a></div></body>
</html>
Código:
/* CSS Document by Dieter Schneider 2006 | www.csstemplateheaven.com */
* {margin: 0;
padding: 0;
}
body {
background-image: url(images/body_tile.jpg);
background-repeat: repeat-y;
font-size: 62.5%;
font-family: Georgia, "Times New Roman", Times, serif;
}
#container {
width: 954px;
font-size: 1.2em;
}
#left {
background-image: url(images/left_bg.jpg);
float: left;
height: 434px;
width: 274px;
padding-top: 275px;
}
#right {
background-image: url(images/right_bg.jpg);
float: left;
width: 590px;
padding-top:150px;
padding-right: 90px;
background-repeat: no-repeat;
}
#footer {
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
height: 100px;
width: 524px;
padding-left: 430px;
padding-top: 28px;
clear: both;
}
#navcontainer { width: 150px; }
#navcontainer ul
{
margin-left: 55px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
}
#navcontainer a:link, #navlist a:visited
{
color: #74752b;
text-decoration: none;
background-image: url(images/bullet.png);
background-repeat: no-repeat;
padding-left: 25px;
padding-bottom: 7px;
font-weight: bolder;
}
#navcontainer a:hover
{
color: #75492b;
background-image: url(images/bullet_hover.png);
background-repeat: no-repeat;
}
p {margin-bottom: 15px;
margin-top: 15px;}
h1 {
text-align: center;
margin-top: -55px;
font-family: "Times New Roman", Times, serif;
font-style: italic;
color: #808D33;
font-size: 2em;
}
h2 {
text-align: center;
margin-top: 7px;
margin-bottom: 40px;
font-family: "Times New Roman", Times, serif;
font-style: italic;
color: #9BA46D;
font-size: 1.2em;
}
h3 {
text-align: left;
font-family: "Times New Roman", Times, serif;
font-style: italic;
color: #98A549;
font-size: 1.5em;
}
h4 {
text-align: left;
font-family: "Times New Roman", Times, serif;
font-style: italic;
color: #808D33;
font-size: 1.5em;
margin-left: 107px;
margin-bottom: 30px;
}
blockquote {
font-style: italic;
border: 1px dotted #98A549;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 15px;
margin-top: 15px;
color: #74752B;
}
a:link {color: #7C8832}
a:visited {color: #74752B}
a:hover {color: #993300}
a:active {color: #993300}
