Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Como hacer que se ajuste el background del contenedor a 3 columnas

 Estas en el tema de Como hacer que se ajuste el background del contenedor a 3 columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/12/2011, 15:59
 
Fecha de Ingreso: julio-2011
Mensajes: 14
Antigüedad: 12 años, 9 meses
Puntos: 0
Pregunta Como hacer que se ajuste el background del contenedor a 3 columnas
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
  #2 (permalink)  
Antiguo 01/01/2012, 06:21
Avatar de Karmac  
Fecha de Ingreso: agosto-2011
Ubicación: Bilbao
Mensajes: 196
Antigüedad: 12 años, 8 meses
Puntos: 34
Respuesta: Como hacer que se ajuste el background del contenedor a 3 columnas
Prueba a poner:
Código HTML:
<div style="clear: both;"></div>
Eso debería ir justo detrás de #derecha, dentro de #contenedor. Cuando utilizas floats siempre suele pasar eso, así que tendrás que colocar debajo un elemento con clear: both para fixearlo.

Saludos.
  #3 (permalink)  
Antiguo 01/01/2012, 11:13
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Como hacer que se ajuste el background del contenedor a 3 columnas
@ferdan_2193, en primer lugar Bienvenido a FDW.
Yo más bien te diria que rehagas tu proyecto desde cero, tenes numerosos errores y exceso de código. Te propongo este modelo para trabajar (cuidado, es un modelo, seguramente tendrás que trabajar sobre anchos de columnas y otros detalles.
Para el menú, te sugiero que busques alguna guia de como hacer un menu con listas+css y sprites para los rollover.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. div#centrar{
  10. width: 900px;
  11. margin: 0 auto;
  12. }
  13. div.cabecera{
  14. width: 100%;
  15. border: solid 0px #000;
  16. height: 170px;
  17. background: url('http://dl.dropbox.com/u/20611864/web/imagenes/cabecera.jpg');
  18. position: relative;
  19. }
  20. .fl{
  21. float: left;
  22. height: 111px;
  23. position:absolute; top:50%;left: 10px;
  24. margin-top:-55px;
  25. }
  26. .fr{
  27. float: right;
  28. height: 150px;
  29. position:absolute; top:50%;right: 10px;
  30. margin-top:-75px;
  31. }
  32. div.menu {
  33. width: 900px;
  34. height: 29px;
  35. margin: 0 auto;
  36. overflow: auto;
  37. background-color: #333;
  38. clear: both;
  39. }
  40. .izquierda, .centro, .derecha {
  41. float: left;
  42. width: 33%;
  43. height: 400px;
  44. } 
  45. .pie {
  46. width: 100%;
  47. height: 50px;
  48. background-color: #666;
  49. margin-top: 20px;
  50. }
  51. .limpiar {
  52. clear: both;
  53. }
  54. /*]]>*/
  55. </style>
  56. </head>
  57. <body>
  58. <div id="centrar">
  59.  
  60. <div class="cabecera">
  61. <img src="http://dl.dropbox.com/u/20611864/web/imagenes/logoev.png" alt="" class="fl"/>
  62. <img src="http://dl.dropbox.com/u/20611864/web/imagenes/fmstyle.png" alt="" class="fr"/>
  63. </div>
  64. <div class="menu">Menú con listas + sprites para el efecto hover</div>
  65. <div class="izquierda">Izquierda</div>
  66. <div class="centro">Centro</div>
  67. <div class="derecha">Derecha</div>
  68. <div class="limpiar"><!-- rompemos los floats para agregar un pie --></div>
  69.  
  70. <div class="pie">
  71. PIE
  72. </div>
  73. </div> <!-- fin centrado -->
  74. </body>
  75. </html>

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 01/01/2012, 20:02
 
Fecha de Ingreso: diciembre-2011
Ubicación: Santiago
Mensajes: 13
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Como hacer que se ajuste el background del contenedor a 3 columnas
el contenedor principal en vez de tenerlo con margin: 0 auto; colocale un float:left; y el margin cambialo a gusto para que no quede pegado con el contenedor lado 1, para que quede en buena posicion entre contenedores lo mejor sería tener el código así:

Código: 
#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 20px 0 20px;
float:left;
font-size:12px;

}

#contenedor #derecha{
width:200px;
float:right;
}
revisa si te resulta con esas pequeñas modificaciones
  #5 (permalink)  
Antiguo 02/01/2012, 15:01
 
Fecha de Ingreso: julio-2011
Mensajes: 14
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Como hacer que se ajuste el background del contenedor a 3 columnas
Pues antes que nada muchas gracias a los que respondieron y ya volvi a maquetar la pagina porqu habia cosas que me faltaban, agarre consejos de todos y si me ayudo bastante, gracias si yo puedo colaborar en este foro lo hare. no use sprites porke no tengo idea como hacerlo pero checare tutoriales a ver que pasa.Gracias
  #6 (permalink)  
Antiguo 02/01/2012, 16:04
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Como hacer que se ajuste el background del contenedor a 3 columnas
Aqui te dejo un uso de sprites muy básico, ya que la imagen tiene solo 2 posiciones, pero para el boton de un menu, es suficiente
http://foros.emprear.com/css/over_input/over_input.html
se puede hacer para cualquier elemento de bloque
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: capas, divs, html, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:45.