Foros del Web » Creando para Internet » CSS »

Con float y Clear no consigo lo que quiero

Estas en el tema de Con float y Clear no consigo lo que quiero en el foro de CSS en Foros del Web. Hola a todos y todas: Estoy presentando los datos para construir una ficha de susuario y lo organizo mediante DIV y float. Trataré de explicar ...
  #1 (permalink)  
Antiguo 19/03/2011, 18:54
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 3 meses
Puntos: 4
Con float y Clear no consigo lo que quiero

Hola a todos y todas:

Estoy presentando los datos para construir una ficha de susuario y lo organizo mediante DIV y float. Trataré de explicar el Layout que deseo obtener.

Hay un tilulo de ficha que ocupa todo el ancho del contenedor
debajo tenemos una foto alineada con float:Left que ocupa varias líneas y un 25% del ancho del contenedor.
A su lado las líneas se deberían poner unas debajo de otras pero al lado de la foto siguiendo este flujo

titulotitulotitulotitulotitulotitulotitulotituloti tulo

FotoFoto nombre apellido apellido
FotoFoto MailMailMailMailMail
FotoFoto DirecciónDirecciónDirección
FotoFoto Telefono
FotoFoto

Os pongo el html/CSS por si me podéis orientar (Lo he resumido lo qmejor que he podido para no aburrir)

Código HTML:
<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>

   <title><?php include('phpBits/GoogleBot_TIT.php'); ?></title>

   <meta name="description=" content="<?php include('phpBits/GoogleBot_MET.php'); ?>">

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

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

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

   <style>

/*Fichas*/

			#BOXFicha0{border:1.5px;float:left;width:100%;padding:0.5%;z-index:5;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;font-size:2.5em; color:FireBrick;text-align: Center;font-weight: bold;line-height: auto;}
			#BOXFicha0{font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;font-size:1.5em; color:FireBrick;text-align: Center;font-weight: bold;line-height: auto;}
			#BOXFicha1 img{border:1.5px;width:25%;float:left;padding: 0.5%;z-index:5;}
			#BOXFicha2{width:100%;float:left;width:auto;padding: 0.5%;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;font-size:1.5em;color: FireBrick}
			#BOXFicha3 {float:left;width:auto;padding: 0.5%;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;font-size:1.5em;color: FireBrick}
			

</style>
  
</head >

<body>


	?>
				<div id="BOXFicha0">
				<?php
				$form="Estos son los datos registrados del usuario";
				echo $form;
				?>
				</div>
				<div id="BOXFicha1">
				<?php
				echo '<img src="'.$Foto.'" width="25%" height="25%">'; 
				?>
				</div>
				<div id="BOXFicha3">
				<?php
				echo $Nombre;
				?>
				</div>
				<div id="BOXFicha3">
				<?php
				echo $Apellido1;
				?>
				</div>
				<div id="BOXFicha3">
				<?php
				echo $Apellido2;
				?>
				</div>
				<div id="BOXFicha2">
				<?php
				echo $mailUSER;
				?>
				</div>

	
</body>
</html> 
Muchas gracias por la ayuda
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #2 (permalink)  
Antiguo 19/03/2011, 23:37
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: Con float y Clear no consigo lo que quiero

Hola Rankxerox1984, no se si entendí bien lo que quieres, si lo que quieres es esto:



Este es el codigo:

Código PHP:
<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>

   <title><?php include('phpBits/GoogleBot_TIT.php'); ?></title>

   <meta name="description=" content="<?php include('phpBits/GoogleBot_MET.php'); ?>">

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

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

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

   <style>

/*Fichas*/

            #BOXFicha0{
                border:1.5px;
                float:left;
                width:100%;
                padding:0.5%;
                z-index:5;
                font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;
                font-size:2.5em; 
                color:FireBrick;
                text-align: Center;
                font-weight: bold;
                line-height: auto;
                }
            #BOXFicha0{
                font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;
                font-size:1.5em; 
                color:FireBrick;
                text-align: Center;
                font-weight: bold;
                line-height: auto;
                }
            #BOXFicha1 img{
                border:1.5px;
                width:25%;
                float:left;
                padding: 0.5%;
                z-index:5;
                }
            #BOXFicha2{
                width:100%;
                clear: both;
                width:auto;
                padding: 0.5%;
                font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;
                font-size:1.5em;
                color: FireBrick;
                }
            #BOXFicha3 {
                float:left;
                width:auto;
                padding: 0.5%;
                font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;
                font-size:1.5em;
                color: FireBrick
                }
                
                #cont {
                    float: left;
                }
            

</style>
  
</head >

<body>
<?php
$Nombre 
"Elber";
$Apellido1 "Gomez";
$Apellido2 "Torba";
$mailUSER "[email protected]";
$direccion "av siempre viva";
$telefono "5555555";
    
?>
                <div id="BOXFicha0">
                <?php
                $form
="Estos son los datos registrados del usuario";
                echo 
$form;
                
?>
                </div>
                <div id="BOXFicha1">
                <?php
                
echo '<img src="'.$Foto.'" width="25%" height="25%">'
                
?>
                </div>
                <div id="cont">
                <div id="BOXFicha3">
                <?php
                
echo $Nombre;$Apellido1;$Apellido2;
                
?>
                </div>
                <div id="BOXFicha3">
                <?php
                
echo $Apellido1;
                
?>
                </div>
                <div id="BOXFicha3">
                <?php
                
echo $Apellido2;
                
?>
                </div>
                <div id="BOXFicha2">
                <?php
                
echo $mailUSER;
                
?>
                </div>
                <div id="BOXFicha2">
                <?php
                
echo $direccion;
                
?>
                </div>
                <div id="BOXFicha2">
                <?php
                
echo $telefono;
                
?>
                </div>
                
                </div>


</body>
</html>
Si no era lo que necesitabas, se un poco más especifico.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #3 (permalink)  
Antiguo 19/03/2011, 23:58
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Con float y Clear no consigo lo que quiero

Te dejo un ejemplo más simple, donde el texto si se extiende mucho hacia abajo envolverá a la imagen.
Es solo para que veas que no hacen faltas tantos div.
Y deberías crear un div llamado Ficha donde pones el tipo de fuente y demás estilos generales, porque si observas repites casi lo mismo en cada #BOXficha.
Código HTML:
Ver original
  1. <style type="text/css">
  2. <!--
  3. .foto {float:left;}
  4. -->
  5. </head>
  6.  
  7.  
  8. <div id="Ficha">
  9.     <h2 id="Titulo">
  10.     Titulo
  11.     </h2>
  12.    
  13.     <img class="foto" src="imagenes/muestra.jpg" />
  14.    
  15.     <div id="datos">
  16.     NOMBRE<br />
  17.     Mail<br />
  18.     Direccion<br />
  19.     Telefono
  20.     </div>
  21.  
  22. </div>
  23.  
  24. </body>
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: float
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 08:52.