Duda con Divs! Ayuda

[daemons88]

buenas es para saber si alguien sabe como podría hacer lo del menú, menú otro y contenido como lo puse en la imagen la parte de la cabecera y botonera ya lo hice pero la parte que mencione no se como hacerla si alguien sabe se lo agradecería mucho plix! y gracias!



y no ocupa toda la pantalla esta centrado.

[exxqizofrenicoo]

no entendi muy bien.
si es solo por la forma de crearlo seria algo asi:

<div id="ContenedorBody">
<div id="ContenedorMenus">
<div id="Menu"></div>
<div id="OtroMenu"></div>
</div>
<div id="Contenido"></div>
</div>

ahi tendrias que jugar con los float:left y luego con el clear:both para acabar con los float.
si es porque otro menu vaya hasta el final de contenido ahi es un poco mas complicado ya que con pixeles no vas a poder y con porcentajes tampoco ya que si pones el otro menu al 100% este va a tomar la altura de todo el contenido sin restar la altura del menu.

yo lo que haria seria simular un backgraound de una imagen que este en el contenedor body y lo situas a la izquierda y le pones repeat en y.

pero no entendi mucho lo que queres asi que no te detallo mucho, si podes explica bien si es a medidas o segun el tamaño de la ventana, etc.
Saludos

[daemons88]

Iniciado por exxqizofrenicoo

no entendi muy bien.
si es solo por la forma de crearlo seria algo asi:

<div id="ContenedorBody">
<div id="ContenedorMenus">
<div id="Menu"></div>
<div id="OtroMenu"></div>
</div>
<div id="Contenido"></div>
</div>

ahi tendrias que jugar con los float:left y luego con el clear:both para acabar con los float.
si es porque otro menu vaya hasta el final de contenido ahi es un poco mas complicado ya que con pixeles no vas a poder y con porcentajes tampoco ya que si pones el otro menu al 100% este va a tomar la altura de todo el contenido sin restar la altura del menu.

yo lo que haria seria simular un backgraound de una imagen que este en el contenedor body y lo situas a la izquierda y le pones repeat en y.

pero no entendi mucho lo que queres asi que no te detallo mucho, si podes explica bien si es a medidas o segun el tamaño de la ventana, etc.
Saludos

Hola y gracias por responder, pess a lo que me refiero es a las medidas en css como haría la parte del menú, otro menú y contenido para que me quede así como en la imagen, esto fue lo que intente hacer pero no me queda bien...

Código:

body
{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 12px;
}
#PreEncabezado
{
    background-color: #e8e8e8;
    margin: 0 auto 0 auto;
    text-align: right;
    width: 768px;
}
#Encabezado
{
    background-color: #FFFFFF;
    margin-top: 5;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
#Botonera
{
    background-color: #FFFFFF;
    margin: 0 auto 0 auto;
    padding-top: 1px;
    text-align: left;
    width: 768px;
}
#Menu
{
   
}
#Menu Otro
{
   background-color: #e8e8e8;
    margin: 0 auto 0 auto;
    text-align: right;
    padding-left: 5px;
    width: 195px;
    float: left;
}
#Contenido
{
    background-color: #62baea;
    margin-left: 200px;
    margin-bottom: 0px;
    width: 664px;
}
#PieDePagina
{
    clear: both;
    background-color: #FFFFFF;
}

saludos y gracias!

[exxqizofrenicoo]

lo que deberias hacer es un div que contenga a todos y a este centrarlo.

#ContenedorWeb{
margin:0 auto 0 auto;
text-align:center;
width:768px;
}

de alto no le pones nada ya que se va a estirar segun sus hijos.
despues a los divs que mostras en la imagen no necesitas centrarlos y si ocupan todo el ancho les pones width:100%; = 768px por el padre.

despues el tema de los menu y contenido tenes que hacerlo con la estructura que te puse antes.

[daemons88]

Iniciado por exxqizofrenicoo

lo que deberias hacer es un div que contenga a todos y a este centrarlo.

#ContenedorWeb{
margin:0 auto 0 auto;
text-align:center;
width:768px;
}

de alto no le pones nada ya que se va a estirar segun sus hijos.
despues a los divs que mostras en la imagen no necesitas centrarlos y si ocupan todo el ancho les pones width:100%; = 768px por el padre.

despues el tema de los menu y contenido tenes que hacerlo con la estructura que te puse antes.

gracias de nuevo y el problema esta es en que menú y contenido tienen el fondo azul aparte de que menú tiene unos botones que tienen que ir a la izquierda y menú otro tiene el fondo gris y tendrá otro contenido diferente al de contenido ya te muestro:



así se debería de ver en la pagina web la parte de los menús y contenido pero nose como

y nuevamente gracias y saludos =)

[pann84]

Voy a intentar ser muy gráfica, que normalmente me explico bastante mal. Yo haría algunos divs más que contengan a los otros, por qué, pues porque el padding y el margin pueden generarte problemas de compatibilidad entre navegadores, puedes usarlos obviamente, pero limitar su uso te ahorrará muchos quebraderos de cabeza.

Te pongo una foto de cómo lo veo yo:


El div rosa contendría a todos los demás, lo cual te será útil de cara al centrado en pantalla, el div amarillo contiene menu, otro menu y contenido, y el verde, que a su vez que contiene menu y otro menu. Luego ya colocarlos con float:left

Ahora te pongo el código para hacerlo tal como te digo, modifica medidas y colores a necesidad, que los puse a boleo y casi provocan epilepsia xD

Código:

/* Código CSS*/

body {
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	background: #f9c;
	margin: 0;
	padding: 0;
}
.container {
	width: 955px;
	background: #f09;
	margin: 0 auto; 
}
.cabecera1 {
	width: 955px;
	height: 50px;
	background: #c9f;
}
.cabecera2 {
	width: 955px;
	height: 150px;
	background: #99f;
}
.botonera {
	width: 955px;
	height: 30px;
	background: #09f;
}
.contenido {
	width: 955px;
	height: 538px;
	background: #c9f;
}
.izquierda {
	width: 255px;
	height: 538px;
	background: #ccc;
	float: left;
}
.menu {
	width: 255px;
	height: 138px;
	background: #fff;	
}
.otromenu {
	width: 255px;
	height: 400px;
	background: #ddd;
	float: left;
}
.derecha {
	width: 700px;
	height: 538px;
	background: #000;
	float: left;
}



<!-- Código del XHTML -->

<div class="container">
 
  <div class="cabecera1"></div>
  <div class="cabecera2"></div>
  <div class="botonera"></div>
  <div class="contenido">
    <div class="izquierda">
      <div class="menu"></div>
      <div class="otromenu"></div>
    </div>
    <div class="derecha"></div>
  
  </div>

</div>

Lo he probado en varios navegadores y funciona, ya nos cuentas si te funciona o te sirve

[daemons88]

si me funciona de maravilla muchas gracias =)

oye una pregunta que diferencia tiene poner:

.container {

}

a

#container {

}

PDT: SI ERA CIERTO LO DE LOS COLORES JEJEJ XD

[danico90]

Cuando usas #container es para un id: <div id="container">. Los id son únicos.

Cuando usas .container es para <div class="container">. Las clases se pueden usar muchas veces, pr ejemplo:

Código HTML:

#container {
width:400px;
background:#CCC;
}
 
.item {
width:100%;
background:#F00;
}
 
<div id="container">
   <div class="item">
   </div>
   <div class="item">
   </div>
   <div class="item">
   </div>
</div>
 

[daemons88]

ok muchas gracias a todos!