Foros del Web » Creando para Internet » CSS »

Acomodar contenido en un div

Estas en el tema de Acomodar contenido en un div en el foro de CSS en Foros del Web. que tal forer@s aqui traigo esta duda, quiero lograr algo asi: actualmente esta asi: el de la izquierda es una imagen, en el centro ira ...
  #1 (permalink)  
Antiguo 29/12/2011, 13:57
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 14 años, 6 meses
Puntos: 23
Acomodar contenido en un div

que tal forer@s

aqui traigo esta duda, quiero lograr algo asi:



actualmente esta asi:



el de la izquierda es una imagen, en el centro ira ya sea una imagen o un banner en flash y el de la derecha sera texto e imagen, ademas quisiera darle la capacidad de que se "reajuste" el tamaño en cualquier resolución y navegador.

este es mi código CSS y HTML:

Código PHP:
#cabecera{
    
background#07aeb4;
    
height180px;
    
overflowhidden;
    
_height:  1%;    
}

#cabecera_inicio{
    
backgroundurl("../images_fondo/header.png"black repeat-x;
    
height40px;
}

#cabecera_inicio .logo{
    
height140px;
    
float:left;
}

#cabecera_inicio .banner{
    
width:40%;
    
height:100px;
    
float:left;
}

#cabecera_inicio .info{
    
fontGeorgia"Times New Roman"Timesserif;
    
font-weight:bolder;
    
color:#FFF;
    
float:right;
    
text-align:right;

Código HTML:
<div id="cabecera">
	<div id="cabecera_inicio">
		<img src="images_fondo/logo.png" class="logo">
                <img src="publicidad/banner.png" class="banner">
                <span class="info">
        	       TEXTO POR EL MOMENTO
               </span>
	</div>
</div> 
Que propiedades debo añadir o quitar para lograr lo que deseo?


Gracias por su ayuda
  #2 (permalink)  
Antiguo 30/12/2011, 10:06
Avatar de Karmac  
Fecha de Ingreso: agosto-2011
Ubicación: Bilbao
Mensajes: 196
Antigüedad: 13 años, 3 meses
Puntos: 34
Respuesta: Acomodar contenido en un div

Yo lo haría así:

Código HTML:
Ver original
  1. <!-- Contenedor General -->
  2. <div class="container">
  3.     <!-- Contenedor de los dos primeros bloques -->
  4.     <div class="content-left">
  5.         <!-- Los dos bloques -->
  6.         <div class="logo"></div>
  7.         <div class="banner"></div>
  8.     </div>
  9.     <!-- Tercer bloque -->
  10.     <div class="content-right">
  11.         <div class="info"></div>
  12.     </div>
  13. </div>

Las propiedades:
* float: left; --> content-left, logo
* float: right; --> content-right, banner

Para que los tamaños se ajusten utiliza porcentajes. Saludos.
  #3 (permalink)  
Antiguo 30/12/2011, 10:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Acomodar contenido en un div

¿El esquema que busca es un centrado múltiple con independencia del contenido?:
Centrado en la horizontal de los tres elementos.
Centrado también en la vertical de los tres elementos respecto a la ventana.
Alineación media entre sí de los tres elementos en caso de que sean de distinta altura.

Y todo ello, sin conocer a priori ni contenido de las cajas, ni por lo tanto su altura. Y evitando solapamientos en caso de hacer más pequeña la ventana. También evitar que haya partes del contenido que queden inaccesibles al reducirla (por usar márgenes negativos para el centrado vertical). Evitando no se que cosas más...

Bueno, tampoco es tanto pedir.

Veamos a ver si lo siguiente le sirve de base:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  4. <title>Kseso? Jugando con css</title>
  5. <style type="text/css">
  6.  * {
  7.     margin: 0;
  8.     padding: 0;
  9.     border: 0;
  10.     position: relative;
  11. }
  12. html, body {
  13.   height: 100%;
  14.   background: #cdcdcd;
  15. }
  16.  
  17. .contenedor {
  18.   text-align: center;
  19.   background: #c0c0c0;
  20.   height: 100%;
  21. }
  22.  
  23. .contenedor:before {
  24.   content: '';
  25.   display: inline-block;
  26.   height: 100%;
  27.   vertical-align: middle;
  28.   margin-right: -0.25em;
  29.  }
  30.  
  31. .centrado {
  32.   display: inline-block;
  33.   vertical-align: middle;
  34.   width: 25%;
  35.   min-width: 200px;
  36.   padding: 10px 1%;
  37.   margin: 15px 1%;
  38.   border: #a0a0a0 solid 1px;
  39.   background: #f5f5f5;
  40.   text-align: left;
  41.   box-shadow: 0 0 10px 10px rgba(0,0,0,.2)
  42. }    
  43. </head>
  44. <div class="contenedor">
  45.    
  46.     <div class="centrado">
  47.         <h1>Título</h1>
  48.         <p>Lorem ipsum dolor sit amet consectetuer lorem Vestibulum nunc pellentesque Aliquam. Accumsan rhoncus nibh libero eu ornare eleifend sit nunc Curabitur massa. Justo orci id convallis Vestibulum augue lacus Pellentesque at ac est. Eros Suspendisse semper augue sit et pharetra mus In tortor Sed. Consectetuer volutpat eget sem nisl Curabitur rutrum hac nulla sit fringilla. Duis wisi justo velit magna Mauris Lorem nulla Phasellus sit lobortis. Quis elit ipsum Lorem dis Fusce justo ipsum semper dictumst Proin. Et augue sed id est et ac ut.</p>
  49.       <p>Vel sit tellus ac nunc ipsum elit semper mauris tellus senectus. Augue elit urna nibh Curabitur velit tempus Vestibulum ligula wisi.</p>
  50.     </div>
  51.    
  52.     <div class="centrado">
  53.         <h2>Segundo título</h2>
  54.         <p>Vel sit tellus ac nunc ipsum elit semper mauris tellus senectus. Augue elit urna nibh Curabitur velit tempus Vestibulum ligula wisi.</p>
  55.     </div>
  56.    
  57.     <div class="centrado">
  58.         <h3>Otro Encabezamiento</h3>
  59.         <p>Lorem ipsum dolor sit amet consectetuer lorem Vestibulum nunc pellentesque Aliquam. Accumsan rhoncus nibh libero eu ornare eleifend sit nunc Curabitur massa. Justo orci id convallis Vestibulum augue lacus Pellentesque at ac est. Eros Suspendisse semper augue sit et pharetra mus In tortor Sed. Consectetuer volutpat eget sem nisl Curabitur rutrum hac nulla sit fringilla. Duis wisi justo velit magna Mauris Lorem nulla Phasellus sit lobortis. Quis elit ipsum Lorem dis Fusce justo ipsum semper dictumst Proin. Et augue sed id est et ac ut.</p>
  60.     </div>
  61.    
  62. </div>
  63. </body>
  64. </html>
Pista para adaptarlo a su cabecera:
Dele una altura a contenedor ( y lógicamente, haga que su contenido no supere dicha altura)

Créditos: En base a una realización de Chris Coyier.
  #4 (permalink)  
Antiguo 30/12/2011, 12:52
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 14 años, 6 meses
Puntos: 23
Respuesta: Acomodar contenido en un div

Gracias a los dos por contestar

La verdad estuve buscando varios ejemplos e intente adaptarlos pero no me funcionaban la mayoría.

Karmac, adapte lo que me propusiste y fue con la opción que me gusto más ya que logre que quedará acomodado más o menos como quería, lo que no se es que tanto se afecte en resoluciones menores.

kseso?, tambien trate de adaptar tu ejemplo, pero la verdad no entendí la idea, ya que lo que resulta es un texto con tres elementos desplegados hacia abajo, lo que yo necesito es que esten hacia la horizontal de la vantana, tal vez, como te digo no capte la idea.

Finalmente el css lo deje así, aunque acepto sugerencias y correcciones:

Código PHP:
#cabecera{
    
background#07aeb4;
    
height180px;
    
text-align:center;
    
overflowhidden;
    
_height:  1%;
/*    display:block;*/
}

#cabecera_inicio{
    
backgroundurl("../images_fondo/header.png"black repeat-x;
    
height40px;
}

#cabecera .logo{
    
height140px;
    
float:left;
    
padding-top:1%;
    
padding-left:10%;
    
margin-left2%;
        
}

#cabecera .banner{
    
width:40%;
    
height:100px;
    
float:left;
    
padding-top:2%;
    
margin-left2%;
}

#cabecera .info{
    
font-familyComic Sans MSGeorgiaHelveticaTimesserif;
    
font-weight:bolder;
    
font-size14px;
    
color:#FFF;
    
float:left;
    
text-align:right;
    
padding-top:3%;
    
margin-left2%;
}

#cabecera .clima{
/*    padding-top:1%;*/
    
margin:2%;
    
float:right;

Como podrán ver trate de poner porcentajes lo más que pude, según yo para que se reajuste a cada resolución pero no se si eso sea lo ideal o funcione correctamente.

Gracias

Etiquetas: acomodar, contenido, html, tamaño, fondo
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 21:10.