Acomodar contenido en un div

catpaw · #1 (**permalink**) 29/12/2011, 13:57

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;
    height: 180px;
    overflow: hidden;
    _height:  1%;    
}

#cabecera_inicio{
    background: url("../images_fondo/header.png") black repeat-x;
    height: 40px;
}

#cabecera_inicio .logo{
    height: 140px;
    float:left;
}

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

#cabecera_inicio .info{
    font: Georgia, "Times New Roman", Times, serif;
    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

Karmac · #2 (**permalink**) 30/12/2011, 10:06

Yo lo haría así:

Código HTML:

Ver original<!-- Contenedor General -->
<div class="container">
    <!-- Contenedor de los dos primeros bloques -->
    <div class="content-left">
        <!-- Los dos bloques -->
        <div class="logo"></div>
        <div class="banner"></div>
    </div>
    <!-- Tercer bloque -->
    <div class="content-right">
        <div class="info"></div>
    </div>
</div>

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

Para que los tamaños se ajusten utiliza porcentajes. Saludos.

kseso? · #3 (**permalink**) 30/12/2011, 10:32

¿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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
<style type="text/css">
 * {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}
html, body {
  height: 100%;
  background: #cdcdcd;
}
 
.contenedor {
  text-align: center;
  background: #c0c0c0;
  height: 100%;
}
 
.contenedor:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; 
 }
 
.centrado {
  display: inline-block;
  vertical-align: middle;
  width: 25%;
  min-width: 200px;
  padding: 10px 1%;
  margin: 15px 1%;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
  text-align: left;
  box-shadow: 0 0 10px 10px rgba(0,0,0,.2)
}    
</style>
</head>
<body>
<div class="contenedor">
    
    <div class="centrado">
        <h1>Título</h1>
        <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>
      <p>Vel sit tellus ac nunc ipsum elit semper mauris tellus senectus. Augue elit urna nibh Curabitur velit tempus Vestibulum ligula wisi.</p>
    </div>
    
    <div class="centrado">
        <h2>Segundo título</h2>
        <p>Vel sit tellus ac nunc ipsum elit semper mauris tellus senectus. Augue elit urna nibh Curabitur velit tempus Vestibulum ligula wisi.</p>
    </div>
    
    <div class="centrado">
        <h3>Otro Encabezamiento</h3>
        <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>
    </div>
    
</div>
</body>
</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.

catpaw · #4 (**permalink**) 30/12/2011, 12:52

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;

    height: 180px;

    text-align:center;

    overflow: hidden;

    _height:  1%;

/*    display:block;*/

}

 
#cabecera_inicio{

    background: url("../images_fondo/header.png") black repeat-x;

    height: 40px;

}

 
#cabecera .logo{

    height: 140px;

    float:left;

    padding-top:1%;

    padding-left:10%;

    margin-left: 2%;

        

}

 
#cabecera .banner{

    width:40%;

    height:100px;

    float:left;

    padding-top:2%;

    margin-left: 2%;

}

 
#cabecera .info{

    font-family: Comic Sans MS, Georgia, Helvetica, Times, serif;

    font-weight:bolder;

    font-size: 14px;

    color:#FFF;

    float:left;

    text-align:right;

    padding-top:3%;

    margin-left: 2%;

}

 
#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