Hola. buenas tardes, espero puedan ayudarme
lo que pasa es que estoy armando una web por lo pronto en puro diseño y lo que pasa es que tengo un contenedor y 3 columnas
Código:
#cabeceraa {
text-align:left;
width: 900px ;
margin-left: auto ;
margin-right: auto ;
}
#contenedor{
text-align:left;
width:900px;
margin-left:auto;
margin-right:auto;
position:relative;
margin-top:195px;
background-image:url(http://dl.dropbox.com/u/20611864/web/imagenes/background.jpg) ;
height:auto;
}
#contenedor #lado1{
float:left;
width:200px;
font-size:12px;
}
#contenedor #principal{
width:460px;
margin: 0 auto;
font-size:12px;
}
#contenedor #derecha{
width:200px;
float:right;
}
y tengo el codigo html
Código:
<!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=iso-8859-1" />
<title>Estacion Verbal Web</title>
<link rel="shortcut icon" href="http://dl.dropbox.com/u/20611864/ev.ico" />
<link rel="stylesheet" href="Estilos/cabeceraymenu.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="Estilos/index.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="Estilos/fondo.css" TYPE="text/css" MEDIA="screen">
<style type="text/css">
body {
text-align:center; /*IE5 no centra con margenes auto pero text-align:center; alineará los DIV's superiores*/
min-width:900px; /*Agregar un min-width tan ancho como el del contenedor*/
margin: 0;
padding: 0;
height: 100%;
}
img.nohover {
border:0; opacity:0
}
img.hover {
border:0;display:none
}
A:hover img.hover {
display:inline
}
A:hover img.nohover {
display:none
}
</style>
<script src="http://code.jquery.com/jquery-1.7.1.js" language="javascript"></script>
<script>
$(document).ready(function(){
$("#reg").hide();
$("#noreg").click(function(){
$("#reg").hide("slow");
})
$(".regb").click(function(){
$("#reg").show("slow");
})
});
</script>
</head>
<body>
<div id="cabeceraa">
<div class="cabecera">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/cabecera.jpg" />
</div>
<div class="logoev">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/logoev.png" />
</div>
<div class="logofm" style="width:70%; height:auto;">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/fmstyle.png" />
</div>
<div class="menu">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/lineamenu.jpg" />
</div>
<div class="inicio">
<a href="http://www.estacionverbal.nixiweb.com">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/INICIO.jpg" class="nohover"/ >
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/INICIO.jpg" class="hover"/ >
</a>
</div>
<div class="noticias">
<a href="http://www.estacionverbal.nixiweb.com">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/noticias.jpg" class="nohover" / >
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/noticias.jpg" class="hover"/ ></a>
</div>
<div class="beats">
<a href="http://www.estacionverbal.nixiweb.com">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/beats.jpg" class="nohover" / >
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/beats.jpg" class="hover"/ ></a>
</div>
<div class="musica">
<a href="http://www.estacionverbal.nixiweb.com">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/musica.jpg" class="nohover" / >
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/musica.jpg" class="hover"/ ></a>
</div>
<div class="maquetas">
<a href="http://www.estacionverbal.nixiweb.com">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/maquetas.jpg" class="nohover" / >
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/maquetas.jpg" class="hover"/ ></a>
</div>
<div class="radio">
<a href="http://www.estacionverbal.nixiweb.com">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/radio.jpg" class="nohover" / >
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/radio.jpg" class="hover"/ ></a>
</div>
<div class="contacto">
<a href="http://www.estacionverbal.nixiweb.com">
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/contacto.jpg" class="nohover" / >
<img src="http://dl.dropbox.com/u/20611864/web/imagenes/contacto.jpg" class="hover"/ ></a>
</div>
</div>
<div id="contenedor">
<div id="lado1">
<div id="ses" style="font-size:12px; text-align:center;">
<br>
<b>Iniciar sesion</b>
<br>
<div id="sesion" >
<br>
<form name="login_user" action="login.php" method="post" />
<dt><label>Nick:</label></dt>
<input type='text' name='nick' /><br /><br />
<dt><label>Contraseña:</label></dt>
<input type="password" name='pass' /><br /><br />
<input type="submit" name="login" style="width:70px;" tabindex="6" value="Entrar" />
<input type="reset" name="Limpiar" style="width:70px;" tabindex="6" value="Limpiar" />
</form>
<br>
<a class="regb" href="#">Registrarse</a>
</div>
</div>
</div>
<div id="principal" >
<div id="registro" style="font-size:12px">
<br>
<a class="regb" href="#">Registrarse</a>
<br>
<div id="reg" style="background-image:url(http://dl.dropbox.com/u/20611864/web/imagenes/imagenregistro.jpg)">
<br>
<br>
Favor de ingresar los datos de registro de Estacion Verbal Web.
<br>
<div align="right" width="440px">
<br>
<form name="registrar" action="registro.php" method="post" onsubmit="return validar()" />
<label>Nick:</label>
<input type='text' name='nick' /><br /><br />
<label>E-mail:</label>
<input type='text' name='mail' /><br /><br />
<label>Contraseña:</label>
<input type="password" name='pass' /><br /><br />
<label>Confirmar Contraseña:</label>
<input type="password" name='conf_pass' /><br /><br /><br /><br />
<input type="submit" name="registro" style="width:100px;" tabindex="6" value="Registrar" />
<input type="reset" name="Limpiar" style="width:100px;" tabindex="6" value="Limpiar" />
</form>
<br>
<a href="login.php">Identificarse</a>
</div>
<br>
Usted acepta las POLITICAS DE USO de Estacion Verbal Web al dar click en registrar.
<br>
<br>
<br>
<a id="noreg" href="#">Cancelar registro</a>
</div>
</div>
<br>
</div>
<div id="derecha">
</div>
</div>
<div id="pie">
</div>
</body>
</html>
y el problema que tengo es que el background del contenedor no se ajusta al "lado1" , cuando se le da click en registrar Que esta en div principal, el background crece, y si le das cancelar registro el background vuelve a hacerse chico, y no cubre lo que es el logueo, que se supone que esta dentro de el contenedor, lo que yo quiero es que si pongo algo el background del contenedor se ajuste ya sea si la pongo en "lado1", "principal", "derecha" para que quede uniforme, intente ponerle background a los divs pero se ve diferente y no se ve la linea, espero puedan ayudarme si no entienden aqui dejo la pagina y denle click en registrar, para que vean como funciona . Gracias
http://dl.dropbox.com/u/20611864/web/index.html