Comunidad de diseño web y desarrollo en internet online

problemas flotacion

Citar            
MensajeEscrito el 12 Dic 2010 10:59 pm
hola, siempre tuve problemas con la flotacion, creo que es lo que me hace retrasar mas en los trabajos. :roll:
este es mi codigo

Código HTML :

      <div class="color">   
         <div class="flotarizq" id="bienvenida">
            <h2>Bienvenido a Linked Files!</h2>
            <span>La forma más facil de compartir archivos</span>
            <ul>
               <li>Linked Files te ofrece espacio gratuito de 1Gb.</li>
               <li>Ademas podrás compartir tus archivos con otros usuarios.</li>
               <li>Subida de archivos multiples y carpetas.</li>
               <li>Sistema de filtro de descargas.</li>
               <li>Interfaz facil de usar.</li>
            </ul>
         </div>
         <div id="registro">
            <h3>Eres nuevo aqui?<span>mira este tutorial</span></h3>
            <p>Puedes empezar subiendo archivos desde <a href="tutorial.html">Aquí</a></p>
            <p>O puedes crearte una cuenta, para administrar los archivos a tu gusto</p>
            <img src="img/registrarse.png" alt="registro gratuito simple y rapido"/>
         </div>
      </div>
      <div class="limpiar"></div>


</html>


CSS

Código :

body{
   width:980px;
   margin:auto;
   background-color:black;
}
div{
   border:1px solid yellow;
}
#bienvenida{
   width:300px;
}
#registro{
   width:350px;
}
.flotarizq{
   float:left;
}
.limpiar{
   clear:both;
}
.color{
   background-color:green;
}
span{
   color:#5E84D3;
}


1)no entiendo porque estan asi, si le puse float al primero y a los 2 les puse un tamaño para que entren en el div deberia estar al lado!
2)esta bien limpiar la flotacion como hice?

Por luco

Claber

110 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 13 Dic 2010 01:29 am
Para resolver tu problema debes tener los dos divs flotados y el "limpiador" dentro del mismo contenedor , que en tu caso lleva la clase "color". Te paso el código

Código HTML :

<div class="color">
  <div class="flotarizq" id="bienvenida">
    <h2>Bienvenido a Linked Files!</h2>
    <span>La forma más facil de compartir archivos</span>
    <ul>
      <li>Linked Files te ofrece espacio gratuito de 1Gb.</li>
      <li>Ademas podrás compartir tus archivos con otros usuarios.</li>
      <li>Subida de archivos multiples y carpetas.</li>
      <li>Sistema de filtro de descargas.</li>
      <li>Interfaz facil de usar.</li>
    </ul>
  </div>
  <div class="flotarizq" id="registro">
    <h3>Eres nuevo aqui?<span>mira este tutorial</span></h3>
    <p>Puedes empezar subiendo archivos desde <a href="tutorial.html">Aquí</a></p>
    <p>O puedes crearte una cuenta, para administrar los archivos a tu gusto</p>
    <img src="img/registrarse.png" alt="registro gratuito simple y rapido"/> </div>
   <div class="limpiar"></div>
</div>


Saludos!

Por martino

16 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Dic 2010 10:04 pm
muchas gracias!, ya estoy empezando a enterder mejor esto esto de la flotaciones :)

Por luco

Claber

110 de clabLevel



Genero:Masculino  

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.