problema con los height de los divs

vb2005 · #1 (**permalink**) 11/09/2009, 07:42

Buenas, este es un error que desde que estoy tratando de pasarme a esto de los estandares no lo pude resolver, ya pregunté en el foro por algo similar pero para otro diseño, ahora estoy tratando de hacerlo con mi web.

http://l2inside.org/l2/diseno.html

El problema es que como se puede ver, el menu no repite el background de los costados porque su height no aumenta a medida que yo le pongo contenido al del medio.

Debería quedar asi: http://l2inside.org/l2

Espero que me puedan ayudar, desde ya Muchisimas gracias

mayid · #2 (**permalink**) 11/09/2009, 08:42

Veo dos cosas:

Height: 100% en "menu-middle" no va a funcionar, a menos que todos sus contenedores, incluido body, sean de height:100% tambien.

Ademas, tenes : overflow:hidden; que quizas este causando problemas.

No tengo la solucion de estandares, pero podes escribir overflow-x:hidden;

Tambien probar con height: auto;

vb2005 · #3 (**permalink**) 11/09/2009, 09:10

mayid, gracias por tu respuesta, pero sigue todo igual, yo lamentablemente no tengo la capacidad ni la experiencia sufuficiente como para darme cuenta de donde esta el problema....

visitante28 · #4 (**permalink**) 11/09/2009, 09:25

hola

puedes poner el codigo de tu estilo para para ayudarte mejor...

saludos.

kseso? · #5 (**permalink**) 11/09/2009, 10:01

Hola Vb2005
Creo que estás el origen de tus problemas es que estás queriendo hacer con div's (y sólo div's) lo mismo que con tablas y de la misma manera.

Por eso, para hacer tu menú, estás utilizando del orden de 14 ó 15 cajas, cuando con un solo div y una lista (ul/li) podrías conseguirlo.

Te iba a soltar un rollo teórico de cómo conseguirlo, pero creo que es mejor lo siguiente:
Pon la imagen de ese menú (sin trocearla y sin texto alguno sobre ella).
Si puede ser en formato .png y con su máscara, mejor

Un saludo

vb2005 · #6 (**permalink**) 11/09/2009, 16:00

Gracias kseso?

pero como puedes ver el skin es el de mi web vieja, y ya perdí el psd las imágenes que tengo son esas.

como vez no se mucho todavía sobre esto, pero trataré de entender todo lo que me puedan explicar :P

Muchas gracias

kseso? · #7 (**permalink**) 11/09/2009, 17:27

Bueno, veamos a ver si es esto lo que andas buscando, vb2005
Como verás, sólo hay un div y una lista y se utilizan 3 imágenes.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body, html {
    background-color: #000000;
    height: 100%;
    width: 100%;
}
#menu {width: 202px;
  background: transparent url(http://img21.imageshack.us/img21/9074/superior.png) no-repeat;
}
#menu span {
  display: block;
  text-align: center;
  height: 48px;
  line-height: 50px;
  color: #f5f5f5;
}
#menu ul {}
#menu ul li {
  background: transparent url(http://img29.imageshack.us/img29/7453/cuerpo.png) repeat-y;
  list-style-type: none;
  display: block;
  width: 202px;
  text-align: left;
}
#menu ul li a {
  display: block;
  width: 100%;
  padding: 0 0 5px 15px;
  color: #f5f5f5;
  text-decoration: none;
}
#menu ul li.ultimo {background: transparent url(http://img10.imageshack.us/img10/8080/cierre.png) no-repeat 0 bottom; height: 27px; padding:0;}
#menu ul li a:hover {text-decoration: underline;}
</style>
</head>
<body>
<div id="menu">
<span>Categorías</span>
    <ul>
        <li><a href="#" title="item 1">Item 1</a></li>
        <li><a href="#" title="item 2">Item 2</a></li>
        <li><a href="#" title="item 3">Item 3</a></li>
        <li><a href="#" title="item 4">Item 4</a></li>
        <li class="ultimo"><a href="#" title="item 5">Item 5</a></li>
    </ul>
</div>
</body>
</html>

Un saludo

vb2005 · #8 (**permalink**) 12/09/2009, 15:51

wow kseso? !!!! muchisimas gracias!!! eres un genio!

ahora mi problema radica en el bloque principal, porque como puedes ver en la web orignal tanto su ancho como su alto es variable.

Por eso mismo es que buscaba hacer lo mismo en los menús, porque nunca se me repiten las imágenes de los costados para abajo.

Saludos y muchisisimas gracias

kseso? · #9 (**permalink**) 12/09/2009, 18:09

De nada, vb2005. Pero genio es el que con lo que todos conocen y tienen hace algo totalmente novedoso. Yo me limito a aplicar lo que he aprendido de otros.

Bueno, vamos con lo que planteas ahora.
Pero en este caso no hay código personalizado, de momento.
Para la estructura adaptada a la ventana con una anchura mínima puede servirte este ejemplo (es código

)

Para la columna central, o mejor dicho, para los fondos de sus contenidos, creo que puede servirte de ejemplo la página de Pao01
www.autosconarte.com
En concreto, las cajas a fijarse son #contenedorgral y #contenedorpag

Lo intentas, y es caso de que encuentres dificultades ya comentas.

Un saludo.

vb2005 · #10 (**permalink**) 13/09/2009, 15:36

pah la verdad que no tengo como agradecerte, quedó todo barbaro y por primera vez todo me valida!!!

kseso? · #11 (**permalink**) 13/09/2009, 16:52

Hola VB2005
¿Quieres decir que lograste hacer las cajas del bloque central adaptadas a la anchura?
Pues enhorabuena.
Pasé por tu página, pero aun no la has actualizado.
Estaría bien que comentes cuando lo hagas (actualizar el primer enlace que publicaste) o que te explayes algo contando cómo lo has hecho.
Por curiosidad, ya sabes

Un saludo