Foros del Web » Creando para Internet » CSS »

Como evitar que se superponga el contenido?

Estas en el tema de Como evitar que se superponga el contenido? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/04/2007, 10:30
 
Fecha de Ingreso: junio-2002
Mensajes: 30
Antigüedad: 15 años, 6 meses
Puntos: 0
Como evitar que se superponga el contenido?

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.
__________________
Pepelapeste
  #2 (permalink)  
Antiguo 22/04/2007, 19:35
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: Como evitar que se superponga el contenido?

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
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 23/04/2007, 05:49
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: Como evitar que se superponga el contenido?

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">

<!-- banner con logo -->
<div id="bannerlogo">
......
</div>
<!-- final banner con logo -->

<!-- barra de navegacion horizontal -->
<div id="csshbar">
.........
</div><!-- final de barra de navegacion horizontal -->

<!-- cajas de texto -->
<div id="cajastexto">

<!-- Titulo de la pagina -->
<div id="titpagina">
.....
</div><!-- final Titulo de la pagina -->

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

<!-- caja de texto izq -->
<div id="colizq">
......
</div>
<!-- final caja de texto izq -->

<!-- caja de texto central -->
<div id="colcent">
..........
</div>
<!-- final caja de texto central -->

<!-- caja de texto derecha -->
<div id="colder">
..........
</div>
<!-- final caja de texto derecha -->
</div><!-- este cierra el cuerpocentral -->
<!-- final cajas de texto -->

<!-- pie de pagina -->
<div id="pie">
.........
</div>
<!-- fin pie de pagina -->

</div> <!-- este cierra el cajasypie -->
</div><!-- este cierra el cajastexto -->
</div><!-- este cierra el container -->


</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.
  #4 (permalink)  
Antiguo 23/04/2007, 13:32
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: Como evitar que se superponga el contenido?

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.
  #5 (permalink)  
Antiguo 23/04/2007, 14:04
 
Fecha de Ingreso: junio-2002
Mensajes: 30
Antigüedad: 15 años, 6 meses
Puntos: 0
Re: Como evitar que se superponga el contenido?

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.
__________________
Pepelapeste
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 17:15.