Les muestro lo que pasa:
CLICK PARA VER
Les dejo la hoja de estilo y el html.
HTML:
Código HTML:
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- Nombre del Sitio: Dr. Ezequiel Díaz Desarrollado por: Silverleaf Software Creado: Última Actualización: Copyright: 2010 --> <!-- Inicio HTML --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <!-- Inicio HEAD --> <head> <!-- Meta --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- Título de la Web --> <title>Comunicación Médica | Ezequiel Díaz</title> <!-- Hojas de Estilo --> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <!-- Frameworks JavaScripts --> <script type="text/javascript" src="js/"></script> </head> <!-- Inicio BODY --> <body> <!-- Inicio Contenedor Global --> <div id="contenedor"> <!-- Header --> <div id="header"> <!-- Header width=960px --> <div id="header-top" class="center"> <!-- Logo --> <div id="logo" class="left"> <img alt="Logo" src=""> <h1>Dr. Ezequiel Díaz</h1> <p>consultoría y comunicación médica</p> </div> <!-- Menú --> <div id="menu" class="left"> <img alt="Menú" src=""> </div> <!-- Redes Sociales --> <div id="social" class="left"> <img alt="Facebook" src=""> <img alt="Linkedin" src=""> <img alt="Twitter" src=""> </div> </div> <!-- Fin Headerin 900px --> <div id="header-bottom" class="center"></div> </div> <!-- Fin Header --> <div class="clear"></div> <!-- Contenido Principal --> <div id="contenido" class="center"> <h1>Contenido PPAL</h1> </div> </div> <!-- Fin Contenedor --> <!-- Inicio Footer --> <div id="footer"> <h1>FOOTER</h1> </div> </body> <!-- Fin BODY --> </html> <!-- Fin HTML -->
CSS:
Código HTML:
body {
background-color:#FFF;
}
body, p, td, th, li {
font-family: Arial, Helvetica, sans-serif;
font-size:.875em;
line-height:1.5em;
color:#000000;
}
#contenedor {
width: 100%;
height: 100% auto;
background-color: #88e8da;
}
p {
margin: 0 0 1em 0;
}
/*--- Estilos de los Vinculos ---*/
a:link, a:visited {
color: #B1DA67;
}
a:hover, a:active {
color: #5C8127;
text-decoration: none;
}
h1 {
color: #5C8127;
margin: .825em 0 .5em 0;
font-size: 2.125em;
}
h2 {
color: #5C8127;
margin: .825em 0 .5em 0;
font-size: 1.75em;
}
h3 {
color: #5C8127;
margin: .825em 0 .5em 0;
font-size: 1.5em;
}
h4 {
color: #5C8127;
margin: .825em 0 .5em 0;
font-size: 1.25em;
}
h5 {
color: #5C8127;
margin: .825em 0 .5em 0;
font-size: 1.125em;
}
h6 {
color: #5C8127;
margin: .825em 0 .5em 0;
font-size: 1em;
}
ul {
margin-left: 25px;
list-style-type: none;
}
ol {
margin-left: 25px;
}
blockquote {
margin: 0 0 18px 18px;
color:#666666;
font-style: italic;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
/* Definiciones Standards */
.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.small {font-size:.625em;}
.large {font-size:1em;}
.soft {color:#D3D3D3;}
.hide {display:none;}
p.last {margin-bottom:0px;}
.center {margin: 0 auto;}
/* Header */
#header {
width:100%;
height:352px;
background: url("img/header-bg.jpg") repeat-x;
}
#header-top {
width: 960px;
height: 78px;
}
/* Isologotipo y Slogan */
#logo {
width: 660px;
}
/* Menu */
#menu {
width: 150px;
}
/* Redes Sociales */
#social {
width: 110px;
height: 65px;
padding: 10px 0 0 40px;
}
#social img {
width: 20px;
height: 20px;
margin: 15px 5px 0 0;
}
/* Header Bottom*/
#header-bottom {
width: 960px;
height: 274px;
}
/* Contenido Principal */
#contenido {
width: 960px;
height: 100px;
background-color: #CCC;
}
/* Footer */
#footer {
clear: both;
width: 100%;
height: 200px;
background-color: #dfdfdf;
}
#footer p {
font-size:.625em;
}
