Foros del Web » Creando para Internet » CSS »

Organización de DIV

Estas en el tema de Organización de DIV en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/09/2010, 15:28
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 3 meses
Puntos: 4
Organización de DIV

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,
  #2 (permalink)  
Antiguo 16/09/2010, 15:45
 
Fecha de Ingreso: junio-2009
Mensajes: 85
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Organización de DIV

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!
  #3 (permalink)  
Antiguo 17/09/2010, 18:15
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 3 meses
Puntos: 4
Respuesta: Organización de DIV

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> 
  #4 (permalink)  
Antiguo 20/09/2010, 10:57
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 3 meses
Puntos: 4
Respuesta: Organización de DIV

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> 

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 16:17.