El código:
Cita:
El div "headerbg" es el "contenedor" que contiene dos varios divs en float left y right recpectivamente, y tiene un fondo, pero no se me ve. He probado con overflow:auto; pero aparecen unas barras de desplazamiento si el contenido se sale y yo quiero que esas barras no aparezcan, los demás atributos de overflow no me van o no se ajustan al alto de los divs en float. ¿Hay alguna otra forma de que se muestre el fondo?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website 2.0</title>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
}
#contenedor {
width: 960px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #999;
border-left-color: #999;
}
#headerbg {
width: 960px;
background-image: url(header.png);
background-repeat: no-repeat;
}
#logo {
width: 450px;
float: left;
}
#form_pass {
width: 510px;
float: right;
background-image: url(bgform.png);
height: 170px;
background-repeat: no-repeat;
background-position: center;
}
#form1 {
padding-left: 40px;
padding-top: 70px;
}
input#areatxt {
background-color: #E9E9E9;
border: 0px;
opacity: 0.7;
}
input#button1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-image: url(bgmenu2.png);
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border: 0px;
font-weight: bold;
color: #FFF;
opacity: 0.7;
}
input#veryf {
opacity: 0.7;
}
#menu_contenedor {
width: 955px;
float: left;
margin-left: 5px;
}
.menu_blue {
float: left;
}
.menu_blue a {
background-image: url(bgmenu.png);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
font-weight: bold;
color: #FFF;
text-decoration: none;
text-shadow: 0.1em 0.1em #333;
padding: 5px;
float: left;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="headerbg">
<div id="logo"><img src="fxlogo.png" width="400" height="158" /></div>
<div id="form_pass">
<form id="form1" name="form1" method="post" action="">
<label for="areatxt"></label>
<input type="text" name="areatxt" id="areatxt" />
<label for="areatxt2"></label>
<input type="password" name="areatxt2" id="areatxt" />
<input type="submit" name="button1" id="button1" value="Iniciar Sesión" />
<input type="checkbox" name="veryf" id="veryf" />
<label for="veryf"></label>
</form>
</div>
<div id="menu_contenedor">
<div class="menu_blue"><a href="#">Noticias</a></div>
<div class="menu_blue"><a href="#">Descargas</a></div>
<div class="menu_blue"><a href="#">Comunidad</a></div>
<div class="menu_blue"><a href="#">Chat</a></div>
<div class="menu_blue"><a href="#">Quiénes Somos</a></div>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website 2.0</title>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
}
#contenedor {
width: 960px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #999;
border-left-color: #999;
}
#headerbg {
width: 960px;
background-image: url(header.png);
background-repeat: no-repeat;
}
#logo {
width: 450px;
float: left;
}
#form_pass {
width: 510px;
float: right;
background-image: url(bgform.png);
height: 170px;
background-repeat: no-repeat;
background-position: center;
}
#form1 {
padding-left: 40px;
padding-top: 70px;
}
input#areatxt {
background-color: #E9E9E9;
border: 0px;
opacity: 0.7;
}
input#button1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-image: url(bgmenu2.png);
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border: 0px;
font-weight: bold;
color: #FFF;
opacity: 0.7;
}
input#veryf {
opacity: 0.7;
}
#menu_contenedor {
width: 955px;
float: left;
margin-left: 5px;
}
.menu_blue {
float: left;
}
.menu_blue a {
background-image: url(bgmenu.png);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
font-weight: bold;
color: #FFF;
text-decoration: none;
text-shadow: 0.1em 0.1em #333;
padding: 5px;
float: left;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="headerbg">
<div id="logo"><img src="fxlogo.png" width="400" height="158" /></div>
<div id="form_pass">
<form id="form1" name="form1" method="post" action="">
<label for="areatxt"></label>
<input type="text" name="areatxt" id="areatxt" />
<label for="areatxt2"></label>
<input type="password" name="areatxt2" id="areatxt" />
<input type="submit" name="button1" id="button1" value="Iniciar Sesión" />
<input type="checkbox" name="veryf" id="veryf" />
<label for="veryf"></label>
</form>
</div>
<div id="menu_contenedor">
<div class="menu_blue"><a href="#">Noticias</a></div>
<div class="menu_blue"><a href="#">Descargas</a></div>
<div class="menu_blue"><a href="#">Comunidad</a></div>
<div class="menu_blue"><a href="#">Chat</a></div>
<div class="menu_blue"><a href="#">Quiénes Somos</a></div>
</div>
</div>
</div>
</body>
</html>
P.D: Me acabo de dar cuenta de que al pulsar los links aparecen unas barras de scroll muy feas y el contenido es estira.. ¿Qué ocurre exactamente?
Saludos y gracias!
