Los divs me tienen aburrido

sacris1 · #1 (**permalink**) 08/09/2011, 09:24

Hola a todos estoy haciendo una página web para una empresa y tengo un problema con lo que seria la interficie gráfica.

La web consta de diferentes divs
uno principal que va de punta a punta (cabecera)
Debajo de este otro div que tambien va de punta a punta (menú)
Otro div debajo del menú que ocupa más o menos 3 cuartas partes de la página.
Otro div a la derecha del grande este que será como un panel de opciones (dimensiones variables dependiendo del que tiene al lado)

¿Como puedo hacer que el panel de opciones (derecha de todo) sea siempre igual de largo que el de al lado?
Gracias os paso el código para que veais como está la distribución de los divs.

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=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#tota_web {
	margin:auto;
	background-color:#CF6;

	width:1024px;
	height:auto;
	z-index:1;
	display:table;
}

#capsalera{
		width:1024px;
		height:100px;
		background-color:#09F;
		margin-bottom:5px;

	
}
#peu{
		width:1024px;
		margin-top:5px;
		height:30px;
		background-color:#F00;
		margin-bottom:5px;
		float:left;
}

#menu {
	background-color:#C9F;

	padding-left:5px;
	width:1019px;

	overflow:hidden;
	display:compact;
	float:left;
	margin-bottom:5px;
}
#contingut {
	display:table;
	width:900px;
	height:230px;
	background-color:#C3F;
	float:left;
}
#zona_dreta {
	position:relative;
	width:120px;
	background-color:#0FF;
	float:left;
	padding-left:4px;
	display:table-column;
	}

</style>
</head>

<body>
<div id="tota_web">
<div id="capsalera">Cabecera</div>

<div id="menu">    Menú<br />

  </div>
 
  <div id="contingut">
      Contenido

  </div>
<div id="zona_dreta">Menu opciones<br />
  Este tiene que ser igual de largo que el lila
</div>
  
  <div  id="peu">
    <p>pie</p>
    </p>
  </div>

</div>
<br />

</body>
</html>

LhaN · #2 (**permalink**) 08/09/2011, 09:27

jejeje... usando otro div, que usarias de contenedor, el div contenedor de width:100px; por ejemplo, luego los dos de adentro son de width:50%; y width:50%;.

Hidek1 · #3 (**permalink**) 08/09/2011, 09:47

pregunta en el foro de HTML o CSS, o tambien puedes esperar a que un administrador mueva tu tema. ya que esta duda no tiene que ver con PHP.

saludos.

sacris1 · #4 (**permalink**) 08/09/2011, 10:49

Hola LhaN
¿Me podrias poner un ejemplo?
No entiendo que quieres decir porque segun he entendido este div contenedor ya lo tengo se llama "tota_web"dentro de este hay los dos.

MLDGATO · #5 (**permalink**) 08/09/2011, 12:18

Hola Ve si esto te sirve:

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=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#tota_web {
	margin:auto;
	background-color:yellow;

	width:1024px;
	height:auto;
	z-index:1;
	display:table;
}

#capsalera{
		width:1024px;
		height:100px;
		background-color:#09F;
		margin-bottom:5px;

	
}
#peu{
		width:1024px;
		margin-top:5px;
		height:30px;
		background-color:#F00;
		margin-bottom:5px;
		float:left;
}

#menu {
	background-color:#C9F;

	padding-left:5px;
	width:1019px;

	overflow:hidden;
	display:compact;
	float:left;
	margin-bottom:5px;
}
#contingut {
	display:table;
	width:512px;
	height:230px;
	background-color:#C3F;
	float:left;
}
#zona_dreta {
	position:relative;
	width:508px;
	background-color:#0FF;
	float:left;
	padding-left:4px;
	display:table-column;
	height:230px;
	}


</style>
</head>

<body>
<div id="tota_web">
<div id="capsalera">Cabecera</div>

<div id="menu">    Menú<br />

  </div>

  <div id="contingut">
      Contenido

  </div>
<div id="zona_dreta">Menu opciones<br />
  Este tiene que ser igual de largo que el lila
</div>


  
  <div  id="peu">
    <p>pie</p>
    </p>
  </div>

</div>
<br />

</body>
</html>

sacris1 · #6 (**permalink**) 08/09/2011, 15:29

El div de la derecha se tiene que adaptar automaticamente (a lo largo) del de la izquierda.
Esdecir que si escribiendo en el div de la izquierda hace 190px ancho el de la derecha tiene que hacer 190px de ancho también.

DrFaust · #7 (**permalink**) 08/09/2011, 16:19

Crear barras laterales de la misma altura que el contenido es uno de los santos griales del diseño web, y se han escrito infinidad de artículos al respecto.

Acá tenés algunas técnicas:

http://www.ejeliot.com/blog/61

Elfede171 · #8 (**permalink**) 08/09/2011, 16:30

Mirá. Yo trabajo como diseñador web. Como me cansé de usar divs para todo empezé mezclarlos con tablas del tipo <table border="0" cellspacing="0" cellpadding="0">

En tu caso sería borra el contingut y el zona_dreta

Y en su lugar poner una tabla así:

<table width="1020" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="900" height="230"></td>
<td>
</td>
</tr>
</table>

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#tota_web {
	margin:auto;
	background-color:#CF6;

	width:1024px;
	height:auto;
	z-index:1;
	display:table;
}

#capsalera{
		width:1024px;
		height:100px;
		background-color:#09F;
		margin-bottom:5px;

	
}
#peu{
		width:1024px;
		margin-top:5px;
		height:30px;
		background-color:#F00;
		margin-bottom:5px;
		float:left;
}

#menu {
	background-color:#C9F;

	padding-left:5px;
	width:1019px;

	overflow:hidden;
	display:compact;
	float:left;
	margin-bottom:5px;
}
#contingut {
	display:table;
	width:900px;
	height:230px;
	background-color:#C3F;
	float:left;
}
#zona_dreta {
	position:relative;
	width:120px;
	background-color:#0FF;
	float:left;
	padding-left:4px;
	display:table-column;
	height:inherit;
	}

</style>
</head>

<body>
<div id="tota_web">
<div id="capsalera">Cabecera</div>

<div id="menu">    Menú<br />

  </div>
 
<table width="1020" border="0" cellspacing="1" cellpadding="0">
 <tr>
  <td width="900" height="230" valign="top" bgcolor="#0066FF"></td>
  <td valign="top" bgcolor="#C3F">
  </td>
 </tr>
</table>
  
  <div  id="peu">
    <p>pie</p>
    </p>
  </div>

</div>
<br />

</body>
</html>

sacris1 · #9 (**permalink**) 10/09/2011, 03:41

Gracias a todos por vuestras respuestas me han servido de mucho

webosiris · #10 (**permalink**) 10/09/2011, 14:20

Cita:

Iniciado por Elfede171

Mirá. Yo trabajo como diseñador web. Como me cansé de usar divs para todo empezé mezclarlos con tablas del tipo <table border="0" cellspacing="0" cellpadding="0">

lo siento pero eso es simplemente una PÉSIMA idea.
Las tablas están para marcar datos tabulares (osea, datos que normalmente escribirías en una hoja de excel por ejemplo), nada más.

LA solución no es usar tablas. La solución es aprender a hacerlo de la forma correcta, aunque quizás sea el camino más largo en algunos casos puntuales.

furoya · #11 (**permalink**) 11/09/2011, 13:08

Es que a veces no queda otra. Como ya dije alguna vez: a tragar saliva, cerrar los ojos y meter una tabla. Al CSS le falta un método práctico.

Lo que se puede usar es JS.

acerca de dos div

DrFaust · #12 (**permalink**) 12/09/2011, 11:34

Cita:

Iniciado por furoya

Es que a veces no queda otra.

Siempre hay una manera semánticamente correcta.

Además, los menús laterales no van a desaparecer en un futuro próximo. No es como si aprender a maquetar uno sin usar tablas fuera a ser una pérdida de tiempo.

furoya · #13 (**permalink**) 13/09/2011, 11:43

Sí, por supuesto. Siempre que es posible, aliento a todos los novatos (y no tanto) a usar correctamente la semántica. Y hasta las propuestas del W3C.

Cuando no funcionan —algo que cualquier diseñador con creatividad ya comprobó— entonces no nos dejan opción. Pero primero hay que aprender a hacer las cosas bien, y después rompemos las reglas. Supongo que estás reforzando mi punto, porque releí lo que dejé escrito y se entiende perfectamente. Pero comprendo que a los principiantes hay que machacarles las cosas y no arriesgarse a dejarlos que tomen el camino más fácil y cómodo, sino el mejor.

Todos los métodos para lograr lo que pide sacris1 (y cientos más en el Foro y toda la web) son experimentales; para mostrar que de última se puede. Aunque no son prácticos.
Por eso dejé una versión javascript para 2 divs. Es lo más presentable que tenemos.

Saludos

furoya

emprear · #14 (**permalink**) 13/09/2011, 11:57

Cita:

Iniciado por furoya

Es que a veces no queda otra. Como ya dije alguna vez: a tragar saliva, cerrar los ojos y meter una tabla. Al CSS le falta un método práctico.

Lo que se puede usar es JS.

acerca de dos div

Perdón Furoya, cual es la relación del link de ejemplo con el tema actual?
Mi respuesta estaba apuntando a otra cosa, de como cargar el form, o los resultados, use tablas simplemente porque nuestro amigo @francisjavier21 dijo que tenia su página asi estructurada.

Saludos

furoya · #15 (**permalink**) 15/09/2011, 10:36

Tienes toda la razón. Menos mal que en los enlaces pongo también el título de la página, sino van a pensar que estoy fumando tablas ilegales.
La secuencia de mensajes es así, y en la cita ya está corregido el destino del link. (No tengo idea de cómo se me traslinkeó).

Cita:

Iniciado por Elfede171

Mirá. Yo trabajo como diseñador web. Como me cansé de usar divs para todo empezé mezclarlos con tablas del tipo <table border="0" cellspacing="0" cellpadding="0">

Cita:

Iniciado por webosiris

lo siento pero eso es simplemente una PÉSIMA idea.
Las tablas están para marcar datos tabulares (osea, datos que normalmente escribirías en una hoja de excel por ejemplo), nada más.

LA solución no es usar tablas. La solución es aprender a hacerlo de la forma correcta, aunque quizás sea el camino más largo en algunos casos puntuales.

Cita:

Iniciado por furoya

Es que a veces no queda otra. Como ya dije alguna vez: a tragar saliva, cerrar los ojos y meter una tabla. Al CSS le falta un método práctico.

Lo que se puede usar es JS.

acerca de dos div

Cita:

Iniciado por DrFaust

Siempre hay una manera semánticamente correcta.

Además, los menús laterales no van a desaparecer en un futuro próximo. No es como si aprender a maquetar uno sin usar tablas fuera a ser una pérdida de tiempo.

Cita:

Iniciado por furoya

Sí, por supuesto. Siempre que es posible, aliento a todos los novatos (y no tanto) a usar correctamente la semántica. Y hasta las propuestas del W3C.

...

Todos los métodos para lograr lo que pide sacris1 (y cientos más en el Foro y toda la web) son experimentales; para mostrar que de última se puede. Aunque no son prácticos.
Por eso dejé una versión javascript para 2 divs. Es lo más presentable que tenemos.

Cabe aclarar que el pedido original era para el ancho, algo bastante raro, pero después se habló de altura y ahí me prendí con el malogrado ejemplo.

Gracias por avisarme.

Abrazo.

furoya.