Foros del Web » Creando para Internet » CSS »

Auto agrandado de div en función de otro div

Estas en el tema de Auto agrandado de div en función de otro div en el foro de CSS en Foros del Web. Buenas! Estoy empezando a diseñar una página personal. Como no domino css, lo que hice fue descargarme una plantilla con las típicas secciones (cabecera, 3 ...
  #1 (permalink)  
Antiguo 10/04/2010, 04:55
Avatar de Samie  
Fecha de Ingreso: mayo-2009
Mensajes: 27
Antigüedad: 8 años, 7 meses
Puntos: 2
Auto agrandado de div en función de otro div

Buenas!
Estoy empezando a diseñar una página personal. Como no domino css, lo que hice fue descargarme una plantilla con las típicas secciones (cabecera, 3 columnas y pie) para personalizarlas.

Para las columnas laterales he diseñado un fondo que resulte "curioso".

Entonces ahora lo que estoy tratando es de poner una imágen de fondo en cada columna, de forma que quedecon un diseño curioso.
Aunque no está ni empezada, la he subido para que podais ver la estructura

[URL="http://a.hostzi.com/"]http://a.hostzi.com/[/URL]

Como pongo en la página, lo que trato de conseguir es que la columna de la página se agrande (con su imagen de fondo) para que cubra el alto de la columna central.

Decir que el fondo de la columna está constituido en realidad por tres imágenes (margen izquierdo y superior, derecho y la parte de abajo)

Agradecería cualquier ayuda.
Muchas gracias!

Adjunto el codigo css y html


HTML:

Código HTML:
<!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>
<link type="text/css" href="1-3col.css" rel="stylesheet" media="screen" />
<title>No.1 :: CSS Template :: XTML 1.0 Transitional</title>
<link rel="shortcut icon" href="http://monorom.com/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
	<div id="banner" >
	  <div align="left">
	    <h2><a href="http://www.intensivstation.ch">LOGO</a> </h2>
	  </div>
	  <h1 align="left">Inicio</h1>
  </div>
	<div id="left">
		<h3>&nbsp;</h3>  
	  <div class="ArticleBody">AquÃ* va el menú </div>		
		<div class="ArticleFooter"> 
		<p>&nbsp;</p>
		
		</div>
				
  </div>
  

<div id="right">
		<h2>&nbsp;</h2>
		
  </div>	
	<div id="content">
	  <p>El Contenido va aquÃ*</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>pongo &lt;br / &gt; de prueba</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>y más</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>el último <br /> La idea seria que la columna que tengo a la izquierda (y otra mas que va a la derecha) se auto agrandara ajustandose al largo de esta
 para que no quedaran desiguales  </p>
	</div>
 	<div id="footer"><h1>&nbsp;</h1>
 	</div>
</div>
</body>
</html> 

CSS:
Código CSS:
Ver original
  1. /* *** css by miss monorom www.intensivstation.ch *** */
  2. /* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */
  3.  
  4. body {
  5. background-color: #e1ddd9;
  6. font-size: 11px;
  7. font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  8. color:#564b47;
  9. padding:0;
  10. margin:0;
  11. }
  12. a {color: #DB7093;}
  13. a:visited {color:#DB7093;}
  14. a:hover {color: #564b47;}
  15. a:active { color:#000000;}
  16.  
  17. h1 {
  18. font-size: 11px;
  19. background-color: #FFFFFF;
  20. border-top:1px solid #564b47;
  21. border-bottom:1px solid #564b47;
  22. padding:5px 15px;
  23. margin:0 }
  24.  
  25. h2 {
  26. font-size:20px;
  27. font-weight: normal;
  28. padding: 5px 10px;
  29. margin:0;}
  30.  
  31. img.download {vertical-align:middle;}
  32.  
  33. /* ----------container to center the layout-------------- */
  34. #container {
  35.     width: 750px;
  36.     margin-bottom: 0;
  37.     background-color: #FFFF99;
  38.     margin-top: 0;
  39.     margin-right: auto;
  40.     margin-left: auto;
  41. }
  42.  
  43. /* ----------banner for logo-------------- */
  44. #banner {
  45. background-color: #FFFF99;
  46. text-align: right;
  47. padding: 0px;
  48. margin: 0px;
  49. }
  50. #banner img {padding:10px 0px;}
  51.  
  52. /* -----------------content--------------------- */
  53. #content {
  54. background-color: #ffffff;
  55. padding: 0px;
  56. margin: 0 185px 0 180px;
  57. }
  58. div#content {
  59. min-height:485px;
  60. height:expression(this.scrollHeight > 600 ? "auto":"600px");
  61. }
  62.  
  63. p, pre{
  64. padding: 5px 10px;
  65. margin:0px;
  66. }
  67.  
  68. /* --------------left navi------------- */
  69. #left {
  70. background: url(imagenes/custom_corners_topleftG2.gif) top left no-repeat;
  71. float: left;
  72. width: 180px;
  73. margin: 0;
  74. padding: 0;
  75. }
  76.  
  77. #left h3 {
  78. background: url(imagenes/custom_corners_topright2.gif) top right no-repeat;
  79. padding:15px;
  80.  
  81. margin:0 0 0 140px;
  82. font-size:1.2em;
  83. width:auto;
  84.  
  85. }
  86. div.ArticleBody {
  87.   background: url(imagenes/custom_corners_rightborder.gif) top right repeat-y;
  88.   padding:15px;
  89.   margin-top:-3.8em;
  90.   margin-left:0em;
  91.   width:auto;
  92.  /*La magia de este diseño está aquí, esta propiedad hace que no bailen las secciones como ocurria antes */
  93.   height:430px;
  94.   }
  95.  
  96. #right {
  97. float: right;
  98. width: 40px;
  99. margin: 0 100px;
  100. padding: 0;
  101. }
  102.  
  103.  
  104.  
  105. div.ArticleFooter {
  106.   background: url(imagenes/custom_corners_bottomleft2.gif) bottom left no-repeat;
  107.   width:auto;
  108.   }
  109.  
  110. div.ArticleFooter p {
  111.   background: url(imagenes/custom_corners_bottomright2.gif) bottom right no-repeat;
  112.   padding:15px;
  113.   margin:-2em 0 0 0;
  114.   width:auto;
  115.   }
  116.  
  117. /* -----------footer--------------------------- */
  118. #footer {
  119. clear: both;
  120. margin: 0;
  121. padding: 0;
  122. text-align: right;
  123. }

Etiquetas: auto
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




La zona horaria es GMT -6. Ahora son las 11:17.