Buenas compañeros..
Aun no controlo muy bien el tema de las capas... para la maquetacion del sitio web..
y nose que pasa que no se me pega bien la web por el bottom me deja un espacio, por lo demas creo que bien
os adjunto el code aver si alguna me puede hechar una mano.
muchas gracias por adelantao
Código:
<html>
<head>
<style>
body {
background-color: white;
}
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header{
height: 100px;
}
#logos {
float: left;
width: 429px;
height: 100%;
background-image: url(images/fondoLogos.png);
}
#menu {
float: right;
width: 531px;
height: 100%;
background-color: white;
background-repeat: no-repeat;
}
#contenido {
clear: both;
margin-top: 10px;
background-color: white;
height: 400px;
}
#contenidoLeft {
float: left;
height: 100%;
width: 600px;
background-image: url(images/dianaLeft.png);
}
#contenidoRight {
float: right;
height: 100%;
width: 350px;
background-image: url(images/contenidoRight.jpg);
}
#pie {
clear: both;
height: 250px;
margin-top: 10px;
background-color: #373837;
}
#pieLeft {
height: 100%;
float: left;
width: 340px;
}
#pieCenter {
height: 100%;
float: left;
margin-left: 10px;
width: 300px;
}
#pieRight {
height: 100%;
margin-left: 10px;
width: 300px;
float: left;
}
#faldon {
clear: both;
height: 45px;
width: 100%;
background-color:#E4E4E4; /* Color de fondo */
border-bottom: 2px solid;
bottom:0px;
}
#firma {
height: 100%;
width: 250px;
float: left;
margin-top: 18px;
font-family: Arial;
font-size: 9pt;
}
#links {
height: 100%;
width: 710px;
float: left;
font-family: Verdana;
}
#links ul li {
display: inline;
padding: 2px 7px; /*Separar el texto*/
margin: 5px; /* Separar los botones */
background-color:#E4E4E4; /* Color de fondo */
}
#links ul li:hover {
background-color:#CCCCCC; /* Color de fondo sobre el boton */
cursor: pointer; /* cambiar el aspecto del puntero */
}
p.titulo {
color: #E0FFD9;
padding-left: 15px;
padding-top: 10px;
font-family: Arial;
font-size: 16pt;
}
p.texto {
color: #3ac11f;
padding-left: 15px;
padding-top: 10px;
font-family: Arial;
font-size: 14px;
}
a:link {
color: green;
text-decoration: none;
}
a.faldon:link {
color: black;
text-decoration: none;
}
a.faldon:hover {
color: black;
text-decoration: none;
}
a.faldon:active {
color: black;
text-decoration: none;
}
a.faldon:visited {
color: black;
text-decoration: none;
}
</style>
<body>
<div id="wrapper">
<div id="header">
<div id="logos">
</div>
<div id="menu">
<a href="#"><img border="0" src="images/linkInicio.jpg" /></a>
<a href="#"><img border="0" src="images/linkClasificaciones.jpg" /></a>
<a href="#"><img border="0" src="images/linkNormas.jpg" /></a>
<a href="#"><img border="0" src="images/linkEventos.jpg" /></a>
</div>
</div>
<div id="contenido">
<div id="contenidoLeft">
</div>
<div id="contenidoRight">
</div>
</div>
<div id="pie">
<div id="pieLeft">
<p class="titulo">Últimos resultados</p>
<p class="texto">
Seguramente más de una vez has<br />
pensado en presentar una reclamación<br />
por un servicio deficiente en un<br />
comercio, con una agencia de viajes,<br />
una compañía aérea, o por qué no,<br />
en tu Ayuntamiento o Diputación.<br />
Muchos de estos lugares disponen de<br />
</p>
</div>
<div id="pieCenter">
<p class="titulo">Resultados anteriores</p>
<p class="texto">
Seguramente más de una vez has<br />
pensado en presentar una reclamación<br />
por un servicio deficiente en un<br />
comercio, con una agencia de viajes,<br />
una compañía aérea, o por qué no,<br />
en tu Ayuntamiento o Diputación.<br />
Muchos de estos lugares disponen de<br />
</p>
</div>
<div id="pieRight">
<p class="titulo">Enlaces</p>
</div>
</div>
<div id="faldon">
<div id="firma">
Dardos Barcelona 2011 ::
</div>
<div id="links">
<ul>
<li><a class="faldon" href="">Inicio</a></li>
<li><a class="faldon" href="">Clasificaciones</a></li>
<li><a class="faldon" href="">Jornadas</a></li>
<li><a class="faldon" href="">Eventos</a></li>
<li><a class="faldon" href="">Calendario</a></li>
<li><a class="faldon" href="">Galeria</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>