Foros del Web » Creando para Internet » CSS »

Ayuda con Capas... colocar en una línea 2 divs

Estas en el tema de Ayuda con Capas... colocar en una línea 2 divs en el foro de CSS en Foros del Web. Lo admito... soy un dinosaurio de las tablas... estoy aprendiendo a usar los DIVs y ya tengo un problema. me imagino que es una tontería ...
  #1 (permalink)  
Antiguo 04/06/2008, 16:54
 
Fecha de Ingreso: marzo-2008
Mensajes: 342
Antigüedad: 9 años, 8 meses
Puntos: 4
Ayuda con Capas... colocar en una línea 2 divs

Lo admito... soy un dinosaurio de las tablas...

estoy aprendiendo a usar los DIVs y ya tengo un problema. me imagino que es una tontería pero no veo el fallo

ahi va el código
Código PHP:
<div class="middle">
            <? //aqui va contenido central //?>
          <div class="foto"><img src="imagenes/asesoria.png" width="193" height="303" alt="asesoría informática" /><div>
           <div class="resumen">
          texto
            </div>
           <? //fin de contenido central // ?>         
               </div>
el problema es que quiero que los divs se coloquen de forma horizontal uno detras de otro asi:

+---middle-------------+
| [foto][resumen] |
+------------------------+


sin embargo me sale asi

+---middle-------+
| [foto] |
| [resumen |
+------------------+

pongo el código css

Código PHP:
.middle
{

width:800px;
background-color:#00A1DB;
}

.
foto{
padding:0px;
width:193px;
height:303px;
}

.
resumen{

padding-left:15px;
padding-top:15px;
width:550px;
height:320px;
background-image:url(../imagenes/minifondo.png);
background-repeat:no-repeat;} 
Gracias por la ayuda
  #2 (permalink)  
Antiguo 04/06/2008, 17:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Capas... colocar en una línea 2 divs

Puedes añadir:

.foto, .resumen { float: left;}

a tu css.

Mikel.
  #3 (permalink)  
Antiguo 04/06/2008, 17:23
 
Fecha de Ingreso: marzo-2008
Mensajes: 342
Antigüedad: 9 años, 8 meses
Puntos: 4
Respuesta: Ayuda con Capas... colocar en una línea 2 divs

ya lo he colocado y nada... es más middle ha dejado de mostrar su color de fondo.
  #4 (permalink)  
Antiguo 04/06/2008, 17:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Capas... colocar en una línea 2 divs

Middle ha dejado de mostrar su fondo porque como no tiene altura, al tener las capas flotadas dentro no crece para albergar su contenido. Lo que me extraña es que no se hayan colocado una al lado de la otra.

EDITO.

Última edición por Mikmoro; 04/06/2008 a las 17:41
  #5 (permalink)  
Antiguo 04/06/2008, 17:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Capas... colocar en una línea 2 divs

No, no, perdón. Debes poner:

.foto img {float: left;}

No había leido bien tu código.

Mikel.
  #6 (permalink)  
Antiguo 05/06/2008, 02:32
 
Fecha de Ingreso: marzo-2008
Mensajes: 342
Antigüedad: 9 años, 8 meses
Puntos: 4
Respuesta: Ayuda con Capas... colocar en una línea 2 divs

Cita:
Iniciado por Mikmoro Ver Mensaje
No, no, perdón. Debes poner:

.foto img {float: left;}

No había leido bien tu código.

Mikel.
Hola mikel muchas gracias por tu ayuda. de momento con el float en la imagen sale asi:

+---middle-------------+
| [foto]umen] |
+------------------------+

en otras palabras, resumen se pone debajo de foto. ademas fuera hay un div inferior que se ha descuadrado. mando el código completo mejor

Código PHP:
<body>
<div class="contenedor_principal">
    <div class="contenedor_central">
      <div class="cabecera">
           <div class="google_adsense">
                contenido...          
        </div>
            <div class="menu">
                 contenido...
                </div>        
      </div>
 <div class="cuerpo">
            <div class="sup">
            </div>
            <div class="middle">
            <? //aqui va contenido central //?>
          <div class="foto">
           <img... >
          <div>
           <div class="resumen">
            contenido... </div>
           <? //fin de contenido central // ?>         
               </div>
           
            <div class="down">
            </div>
        </div>
    </div>
</div>
<div class="publi">
    contenido...
</div>
</body>
y aqui el css completo:
Código PHP:
body{
padding:0 0 0 0;
border-spacing:0px;
border-top:0px;
border-style:none;
background-color:#CCCCCC;}

.contenedor_principal
{
width:100%;
padding:0 0 0 0;


height:100%;
}

.
contenedor_central
{
position:static;
top:auto;
width:800px;
margin:0 auto;
}

.
cabecera
{
width:800px;
height:251px;
background-image:url(../imagenes/cabecera.png);
background-repeat:no-repeat;
}

.
google_adsense
{
width:480px;
height:60px;
padding-top:130px;
padding-left:60px;
}

.
menu{
padding-top:30px;
margin-left:0px;
padding-left:15px;

}
.
cuerpo{
padding-top:15px;
padding-bottom:0px;
width:800px;
background-color:trasparent;}

.
sup
{
width:800px;
height:15px;
background-image:url(../imagenes/sup.gif);
background-repeat:no-repeat;
}

.
middle
{

width:800px;
background-color:#00A1DB;
}

.
foto{

padding:0px;
width:193px;
height:303px;
}

.
foto img{
float:left;
}

.
resumen{
stress:inherit;
padding-left:15px;
padding-top:15px;
width:580px;
height:320px;
background-image:url(../imagenes/minifondo.png);
background-repeat:no-repeat;}

.
down{
width:800px;
height:15px;
background-image:url(../imagenes/down.gif);
background-repeat:no-repeat;}

.
publi{
padding-top:20px;
position:static;
width:480px;
top:auto;
margin:0 auto;

Muchas Gracias
  #7 (permalink)  
Antiguo 05/06/2008, 18:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Capas... colocar en una línea 2 divs

¿No lo puedes subir a algún sitio? es que sin las imágenes me resulta imposible imaginar qué es lo que estás queriendo hacer.

Mikel.
  #8 (permalink)  
Antiguo 06/06/2008, 11:23
 
Fecha de Ingreso: marzo-2008
Mensajes: 342
Antigüedad: 9 años, 8 meses
Puntos: 4
Respuesta: Ayuda con Capas... colocar en una línea 2 divs

Cita:
Iniciado por Mikmoro Ver Mensaje
¿No lo puedes subir a algún sitio? es que sin las imágenes me resulta imposible imaginar qué es lo que estás queriendo hacer.

Mikel.
te dejo la web aunque ya le he puesto tablas... (que se le va a hacer)

http:///www.carlos-herrera.com/empresas/asesoria.php

un saludo
  #9 (permalink)  
Antiguo 06/06/2008, 11:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Capas... colocar en una línea 2 divs

Bueno, pues si has cambiado de idea no hace falta mucho más.

De todas maneras, eso es bastante sencillo: cuando flotas el elemento de la izquierda, si en el de la derecha sólo va a ir texto no es necesario hacer nada, pero si va a llevar algún tipo de fondo, lo que debes hacer es dar a ese bloque de la derecha un margen izquierdo igual al ancho del bloque de la izquierda más los márgenes que pensaras dejar entre ellos. Es algo muy habitual.

En el caso que nos ocupaba, sería:

.foto img {float: left;}
.resumen {margin-left: 200px;}

Al margen del resto de estilos que tuvieras.

Esto suele hacerse así, pero todo depende de caso concreto para adaptarlo.

Pronto has tirado la toalla.

Mikel.
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:39.