Mi problema es el siguiente ....
Me estoy haciendo mi propia web (al fin ... ), la cuestion es que a mi me enseñaron HTML con tablas y siempre he tenido compañeros y jefes q usan tablas, la cuestion es que ahora por mi propia cuenta me he puesto con divs ... y francamente, van genial, pero esto que intento no me sale.
En la web hay una especie de banner centrado de 779px lo que quiero es que el background a cada lado de este banner sea diferente.
Con tablas lo haría con td width 100% a cada lado, pero con divs eso como que no sale ....
Lo he conseguido a base de probar para FF y Safari, pero para variar IE ... nadaaaaaaaa, de todas formas no se si la solucion a la que he llegado es la correcta dada mi falta de experiencia con divs ...
esto es lo que he hecho, solo pongo la parte que interesa, lo del banner ...
XHTML .....
Código :
<div id="banner"> <div id="bannerizquierda"></div> <div id="bannercentral"> <div id="botones"><ul> <li class="porfolio"><a href="index.html">Porfolio</a></h2></li> <li class="blog"><a href="index.php" class="blogcolor">Blog</a></li> <li class="contacto"><a href="index.php" class="contactocolor">Contacto</a></li> </ul> </div> </div> </div>
CSS
Código :
#banner{
width: 100%;
height: 250px;
background-color: #FFFFFF;
clear: left;
float: left;
background-image: url("images/fondo_banner_der.gif");
background-repeat: repeat-x;
}
#bannerizquierda{
height: 250px;
width: 50%;
background-image: url("images/fondo_banner_izq.gif");
background-repeat: repeat-x;
background-color: #FFFFFF;
clear: left;
float: left;
}
#bannercentral{
width: 779px;
height: 250px;
background-image: url("images/fondo_banner_central.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
margin: auto;
position: relative;
}
#botones{
clear:both;
position: absolute;
}
.porfolio a{
clear: left;
float: left;
width: 246px;
height: 26px;
background-color: transparent;
background-image: url("images/btn_porfolio.jpg");
background-repeat: no-repeat;
margin: 14px 10px 0px 10px;
padding-top: 4px;
color: #e9cba8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
font-weight: 100;
}
.porfolio a:hover{
background-image: url("images/btn_porfolio_hover.jpg");
color: #9b7d5a;
}
.blog a{
width: 246px;
height: 26px;
background-color: transparent;
background-image: url("images/btn_blog.jpg");
background-repeat: no-repeat;
float: left ;
margin: 14px 0;
padding-top: 4px;
color: #cfc4cc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
font-weight: 100;
position: absolute;
}
.blog a:hover{
background-image: url("images/btn_blog_hover.jpg");
color: #81767e;
}
.contacto a{
width: 246px;
height: 26px;
background-color: transparent;
background-image: url("images/btn_contacto.jpg");
background-repeat: no-repeat;
float: right;
margin: 14px 10px 0px 256px;
padding-top: 4px;
color: #c3d0df;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
font-weight: 100;
position: absolute;
}
.contacto a:hover{
background-image: url("images/btn_contacto_hover.jpg");
color: #728194;
}Gracias amigos ....
