Foros del Web » Creando para Internet » CSS »

Duda con Divs! Ayuda

Estas en el tema de Duda con Divs! Ayuda en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/08/2010, 17:03
 
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 10 meses
Puntos: 0
Duda con Divs! Ayuda

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.

Última edición por daemons88; 02/08/2010 a las 17:28
  #2 (permalink)  
Antiguo 02/08/2010, 20:15
 
Fecha de Ingreso: enero-2009
Ubicación: Uruguay
Mensajes: 121
Antigüedad: 8 años, 11 meses
Puntos: 4
Respuesta: Duda con Divs! Ayuda

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
__________________
www.sandant.com - Blog de Programacion y mucho mas

WWW.SPEDEVIGNER.COM SE DEJARA DE USAR EN UN MES
  #3 (permalink)  
Antiguo 03/08/2010, 07:28
 
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Duda con Divs! Ayuda

Cita:
Iniciado por exxqizofrenicoo Ver Mensaje
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!
  #4 (permalink)  
Antiguo 03/08/2010, 11:50
 
Fecha de Ingreso: enero-2009
Ubicación: Uruguay
Mensajes: 121
Antigüedad: 8 años, 11 meses
Puntos: 4
Respuesta: Duda con Divs! Ayuda

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.
__________________
www.sandant.com - Blog de Programacion y mucho mas

WWW.SPEDEVIGNER.COM SE DEJARA DE USAR EN UN MES
  #5 (permalink)  
Antiguo 03/08/2010, 13:50
 
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Duda con Divs! Ayuda

Cita:
Iniciado por exxqizofrenicoo Ver Mensaje
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 =)
  #6 (permalink)  
Antiguo 03/08/2010, 14:54
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Duda con Divs! Ayuda

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
  #7 (permalink)  
Antiguo 05/08/2010, 08:13
 
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Duda con Divs! Ayuda

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
  #8 (permalink)  
Antiguo 05/08/2010, 10:34
Avatar de danico90  
Fecha de Ingreso: febrero-2009
Ubicación: San José, Costa Rica
Mensajes: 148
Antigüedad: 8 años, 10 meses
Puntos: 13
Respuesta: Duda con Divs! Ayuda

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:
Ver original
  1. #container {
  2. width:400px;
  3. background:#CCC;
  4. }
  5.  
  6. .item {
  7. width:100%;
  8. background:#F00;
  9. }
  10.  
  11. <div id="container">
  12.    <div class="item">
  13.    </div>
  14.    <div class="item">
  15.    </div>
  16.    <div class="item">
  17.    </div>
  18. </div>
  #9 (permalink)  
Antiguo 05/08/2010, 11:26
 
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Duda con Divs! Ayuda

ok muchas gracias a todos!

Etiquetas: Ninguno
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 19:16.