Como evitar que se superponga el contenido?

Pepelapeste · #1 (**permalink**) 22/04/2007, 09:30

Hola a todos

Tengo un problema con los div de una pagina, tengo una plantilla en la que uso diferentes div con posición absolute en diferentes lugares de la pagina en, alguno de ellos pongo imágenes o texto que ocupan siempre el mismo lugar pero en otros pongo texto y si el texto es mas extenso el div se expande y el texto pisa el contenido que esta en el de abajo,

que propiedad deveria agregarles para que no se superpongan y puedan arrastrar al resto hacia abajo ?.

Gracias.

Gorowin.

PatomaS · #2 (**permalink**) 22/04/2007, 18:35

Hola

Puedes usar el max-width, pero no todos los navegadores lo entienden.

Otra forma es que uses overflow: auto u overflow: scroll, de esa manera, si pones más contenido aparecerán barras de desplazamiento.

Otra forma, es que cuides el contenido de forma que no supere el nivel o ancho que determines.

Otra forma es que reduzcas un poco la letra.

Hay muchas maneras.

Felicidad

JHMorales · #3 (**permalink**) 23/04/2007, 04:49

Hola:
yo tengo un caso parecido pero al contrario, lo que yo quiero es que el div que se viera afectado por que otro se le ponga encima en vez de quedarse quieto se desplace hacia abajo, como evitándolo. He probado de mil maneras y el afectado se emperra en quedarse quieto

. La estructura es así:
<body>
<div id="container">


<div id="bannerlogo">
......
</div>



<div id="csshbar">
.........
</div>


<div id="cajastexto">


<div id="titpagina">
.....
</div>

<div id="cajasypie">
<div id="cuerpocentral">


<div id="colizq">
......
</div>



<div id="colcent">
..........
</div>



<div id="colder">
..........
</div>

</div>



<div id="pie">
.........
</div>


</div> 
</div>
</div>

</body>

y el css es:

* {
padding: 0;
margin: 0;
z-index: 1;
}

body {
margin: 0px auto;
background-color: #D3E8FF;
background-image: url(images/bannerlogofondo.jpg);
background-position: top;
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container {
top: 0px;
width: 750px;
margin: 0px auto;
}

#bannerlogo {
position: absolute;
top: 0px;
margin: 0px auto;
}

/* barra de navegacion horizontal */
...............

/* cajas de texto centrales */
#cajastexto {
position: relative;
width: 750px;
top: 135px;
}

#titpagina {
position: relative;
top: 0px;
width: 600px;
text-align: center;
font-size: 14pt;
color: #0060AF;
left: 0px;
}
#cajasypie {
width: 750px;
position: relative;
}

/* caja de texto izquierda */
#colizq {
position: absolute;
left: 0px;
background-color: white;
width: 240px;
min-height: 370px;
height: 370px;
padding: 15px 9px 5px 30px;
margin: 0px;
font-size: 6pt;
text-align: left;
width/* */:/**/240px;
width: /**/240px;
}
div[id] #colizq {
height:auto;
}

*html #colizq {
width: 240px;
padding: 15px 12px 5px 30px;
}
/* fin caja de texto izquierda */

/* caja de texto central */
#colcent {
position: absolute;
left: 290px;
background-color: white;
width: 240px;
padding: 15px 9px 5px 30px;
margin: 0px;
font-size: 6pt;
text-align: left;
min-height: 370px;
height: 370;
}
#colcent {
width/* */:/**/240px;
width: /**/240px;
}
div[id] #colcent {
height:auto;
}

*html #colcent {
width: 240px;
padding: 15px 12px 5px 30px;
}
/* fin caja de texto central */

/* caja de texto derecha */
#colder {
position: absolute;
left: 585px;
background-color: white;
width: 150px;
padding: 0;
margin: 0px;
font-size: 6pt;
text-align: left;
min-height: 370px;
height: 370px;
}
#colder {
width/* */:/**/150px;
width: /**/150px;
}
div[id] #colder {
height:auto;
}

*html #colder {
width: 150px;
padding: 0;
}
/* fin caja de texto derecha */
/* fin cajas de texto centrales */

/* pie de pagina */
#pie {
position: absolute;
top: 1em;
width: 750px;
margin: 0px auto;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000066;
padding-top: 2em;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 2;
}
#pie a {
padding-left: 10px;
display: inline;
}
/* fin pie de pagina */

pués bien, el que me pone problema es el div pie, que no hay manera de que se quede después de la tres cajas centrales de texto, las cuales están metidas dentro de un div que es cuerpocentral. El div pie siempre se queda en relación al inicio del div cajasypie (en donde está metido con el div cuerpocentral), aunque le ponga position:relative para que se posicione de forma relativa (después) del div cuerpocentral. En donde puede estar el error? Lo que busco es poder dejar el pie a 1em del cuerpocentral, sea cual sea el tamaño que tenga este según lo que contenga cualquiera de las 3 columnas o el tamaño de letra que le pongan.

Gracias. Jorge H.

JHMorales · #4 (**permalink**) 23/04/2007, 12:32

Hola:
como he seguido con las pruebas tomé una solución radical, mandé a tomar viento fresco todas esas position:absolute y demás cosas que me anquilosaban la estructura, ahora todo va float y width en % y va de cine, incluso en el puñetero IE. Ya les contaré cuando termine este calvario. Suerte, Jorge H.

Pepelapeste · #5 (**permalink**) 23/04/2007, 13:04

Gracias a todos.

Bueno yo por el momento le puse la solucion propuesta por PatomaS overflow: auto, no queda de lo mas lindo pero de ese modo me permite poner mas contenido y eso es bueno para el sitio.

Ahora tengo otro tema con los menu, pero lo pongo en otro post.

Gracias a todos por su tiempo.