Organización de DIV

Rankxerox1984 · #1 (**permalink**) 16/09/2010, 14:28

Hola a todos:
Estoy empezando en esto y en una página que estoy organizando con DIV de CSS que están posicionados con pixeles en la posición Top, necesitaria que, para un contenedor determinado, este se desplazara hacia arriba o abajo segun la longitud del texto del contenedor superior.
En estos momentos lo tengo fijado a una posición común para todos pero en los casos que el texto es "corto" queda demasiado espacio.
¿Como debería hacerlo?

Gracias,

bambuweb · #2 (**permalink**) 16/09/2010, 14:45

Lo mejor sería que postees el codigo HTML y CSS que usaste, para que podamos ayudarte a partir de lo que estas armando!

Saludos!

Rankxerox1984 · #3 (**permalink**) 17/09/2010, 17:15

Pues tambien tienes razón. Allá va Es un poco largo (lo siento). De entrada quisiera que no se pisaran los unos a los otros, además el panel de noticias deberia quedar arriba del todo ocupando todo el ancho de la página y debajo como en un triptico deberia quedar menu general,panel principal y panel add sense. Debajo de panel principal y adaptándose a la longitud de su texto vendria Mapa funcional.El probelma principal es con el mapa funcional lo otro podria dejarlo bien determinando posiciones fijas peor estoy encascquillado y no encuentro eltruco. gracias por adelantado.
Se admiten críticas ci¡onstructivas al código escrito que seguro es mejorable (lo sé

)
Bueno allá va el CSS:

Código:

/*Texto por defecto*/ 

   body {height: 1280px;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color: #666;font-

size:11pt;}
   h1 {color: Grey}

/*Tamaño de la página*/


/*Panel de Noticias*/

#Panel_Noticias{position: fixed;left: auto; width:1195px; margin:5px 5px 5px 5px;height:100px;}
#Panel_Noticias{background-color: #f9f9f9;}

/*Caja de Menú derecha*/ 

#Menu_General {position:fixed; width:145px; border1px solid grey; background: margin: 105px 2px 2px 2px;float; left;background:#f9f9f9; color: grey;}
#inicio_idx {...}
#registro_idx {...}
#mapaweb_idx {...}

/*panel principal*/ 


#Panel_principal { position:fixed; left: 300px; width:675px;height:auto; margin:5px 5px 5px 5px;text-align: Left;}
#Panel_principal h1{...}
#Panel_principal h3{...}
#Panel_principal p{...}

/*panel Add-Sense*/

#Add_Sense {position:fixed; Left: 1000px; width:200px; margin:5px 5px 5px 5px; padding:auto}


/*Mapa Funcional*/


#caja_tabla {position:fixed;left: 350px; width: 475px; margin:5px 5px 5px 5px;;padding:auto;background:grey; color: white}
#Encabezado {position:absolute;top: 0px; left: 0px;width: 475px; padding:auto;text-align: Center;background: grey;font-size:18px;font-weight: bold;}
#Caja1{position:absolute;top: 62px; left: 0px;width: 475px;}
#Caja2{position:absolute;top: 113px; left: 0px;width:475px;}
#Caja3{position:absolute;top: 164px; left: 0px;width: 155px;}
#Caja4{position:absolute;top: 164px; left: 160px;width:155px;}
#Caja5{position:absolute;top: 164px; left: 320px;width:155px;}
#Caja6{position:absolute;top: 215px; left: 0px;width:475px;}
#Caja7{position:absolute;top: 266px; left: 0px;width:155px;}
#Caja8{position:absolute;top: 266px; left: 160px;width:155px;}
#Caja9{position:absolute;top: 266px; left: 320px;width:155px;}

y el HTML:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head >

   <!--Aquí se indica donde está la hoja de estilos CSS -->

   <link type="text/css" rel="stylesheet" href="estilos.css">


   <!--Aquí se indican los estilos CSS particulares de esta hoja CSS -->

   <style></style>
   
   <meta http-equiv="Content-Type"content=" text/html;charset=utf-8"/>
   <title>titulo</title>

  
</head >

<body>

  
   <div id="Panel_Noticias">

     

<P>noticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnotic

iasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnoticiasnotic

iasnoticiasnoticiasnoticiasnoticias</p>
    </div>

   <!--Menu de enlaces-->

   <div id="Menu_General">
      <div id="inicio_idx"
      <p>Inicio</div>
      <div id="registro_idx"
      <p>Registro</p></div>
      <div id="mapaweb_idx"
      <p></p></div>
    </div>

   <!--Aquí va el cuerpo de la web, esto es un comentario -->
  
   <div id="Panel_principal">

        <h1>Panel Principal</h1><br />
        <h2>Subtitulo</h2>
      	<h3>otro subtitulo</h3>
        

<p>textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotex

totextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotext

otextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto

textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextot

extotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextote

xtotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotex

totextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotext

otextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto

textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextot

extotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextote

xtotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotex

totextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotext

otextotextotextotextotextotextotextotextotextotextotextotextotextotexto
        </p>
 </div>


  

   <div id="Add_Sense">
    

<p>adsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsense

adsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseads

enseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsens

eadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsenseadsensead

senseadsenseadsenseadsenseadsenseadsenseadsense
    </p>

   </div>

 	
<p>	
<div id="caja_tabla">

<div id="Encabezado">
<p>Encabezado</p>
</div >
<div id="Caja1">
<p>Caja1</p>

</div >
<div id="Caja2">
<p>Caja2</p>

</div >
<div id="Caja3">
<p>Caja3</p>

</div >
<div id="Caja4">
<p>Caja4</p>

</div >
<div id="Caja5">
<p>Caja5</p>

</div >
<div id="Caja6">
<p>Caja6</p>

</div >
<div id="Caja7">
<p>Caja7</p>

</div >
<div id="Caja8">
<p>Caja8</p>

</div >
<div id="Caja9">
<p>Caja9</p>

</div >
</div >


</p>

</p>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><
	
	</body>
</html>

Rankxerox1984 · #4 (**permalink**) 20/09/2010, 09:57

Hooola de nuevo:

Después de estar atormentado con el asunto durante un tiempo, he llegado a la conclusión de que con saber como adaptar un Div a la altura del superior en función de la longitud de su texto es suficiente.
Adjunto de nuevo el codigo de mi interés (que seguro que tiene algún error

)

Gracias por la ayuda

Código:

/*panel principal*/ 


#Panel_principal { position:Absolute; left: 300px; width:700px;height:auto; margin:105px 5px 5px 5px;text-align: Left;}
#Panel_principal h1{...}
#Panel_principal h3{...}
#Panel_principal p{...}

/*Mapa Funcional*/


#caja_tabla {position:fixed;left: 350px; width: 475px; margin:700px 5px 5px 5px;;padding:auto;background:grey; color: white}
#Encabezado {position:absolute;top: 0px; left: 0px;width: 475px; padding:auto;text-align: Center;background: grey;font-size:18px;font-weight: bold;}
#Caja1{position:absolute;top: 62px; left: 0px;width: 475px;}
#Caja2{position:absolute;top: 113px; left: 0px;width:475px;}
#Caja3{position:absolute;top: 164px; left: 0px;width: 155px;}
#Caja4{position:absolute;top: 164px; left: 160px;width:155px;}
#Caja5{position:absolute;top: 164px; left: 320px;width:155px;}
#Caja6{position:absolute;top: 215px; left: 0px;width:475px;}
#Caja7{position:absolute;top: 266px; left: 0px;width:155px;}
#Caja8{position:absolute;top: 266px; left: 160px;width:155px;}
#Caja9{position:absolute;top: 266px; left: 320px;width:155px;}

y el HTML

Código HTML:

<p>	
<div id="caja_tabla">

<div id="Encabezado">
<p>Encabezado</p>
</div >
<div id="Caja1">
<p>Caja1</p>

</div >
<div id="Caja2">
<p>Caja2</p>

</div >
<div id="Caja3">
<p>Caja3</p>

</div >
<div id="Caja4">
<p>Caja4</p>

</div >
<div id="Caja5">
<p>Caja5</p>

</div >
<div id="Caja6">
<p>Caja6</p>

</div >
<div id="Caja7">
<p>Caja7</p>

</div >
<div id="Caja8">
<p>Caja8</p>

</div >
<div id="Caja9">
<p>Caja9</p>

</div >
</div >


</p>

</p>

<br/><br/><br/><br/><br/>
	
	</body>
</html>