Tema: Alineaciones y espacios con css
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/02/2013, 00:39
Avatar de nanotime
nanotime
 
Fecha de Ingreso: noviembre-2011
Ubicación: Cd. Guayana
Mensajes: 145
Antigüedad: 12 años, 6 meses
Puntos: 6
Pregunta Alineaciones y espacios con css
Bueno estoy maquetando un esqueleto básico medio responsivo para mostrar algo en poco tiempo, obviamente luego tengo que tratarlo mas, pero esto es algo para dar ideas, nada del otro mundo.

Lo que necesito en este momento es hacer que los cuadrados con la F y la T (correspondientes a tipografias especiales mas adelante) dejen de estar uno debajo del otro. Lo siguiente es poner del lado derecho los circulos de arriba pero sin usar floats, quiero aprender a usar las tecnicas responsivas de una vez y todo lo que consigo con google es un poco viejo o inutil xD. Les muestro lo que tengo hecho en código, es medio desastrozo y cualquier idea o recurso que me den para mejorar a nivel de costumbres es bien recibido.

Por ahora nada mas, esto luego tengo que trabajarlo con 320 and up y leer mas sobre muchas cosas que tengo que aprender, es mi primer trabajo a nivel de front-end y estoy aprendiendo sobre la marcha

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Monociclo</title>
  6.     <link rel="stylesheet" type="text/css" href="css/style.css">
  7. </head>
  8. <body>
  9.     <h1>Monociclo</h1>
  10.     <nav class="navbar">
  11.         <ul>
  12.             <li><p class="circ">S</p></li>
  13.             <li><p class="circ">S</p></li>
  14.             <li><p class="circ">S</p></li>
  15.         </ul>
  16.     </nav>
  17.     <section class="base">
  18.         <div class="div-contenedor">
  19.             <div id="banner"></div>
  20.             <br><br>
  21.             <div id="disco">
  22.                 <p id="disco2"></p>
  23.             </div>
  24.             <div id="reproductor">
  25.                 <audio src=""></audio>
  26.             </div>
  27.         </div>
  28.     </section>
  29.     <aside id="social">
  30.         <ul class="social">
  31.             <li>
  32.                 <p id="twitter">T</p>
  33.             </li>
  34.             <li>
  35.                 <p id="facebook">F</p>
  36.             </li>
  37.         </ul>
  38.     </aside>
  39.     <footer></footer>
  40. </body>
  41. </html>

Código CSS: 
Ver original
  1. .circ{
  2.     width: 40px;
  3.     height: 40px;
  4.     border: 1px solid black;  
  5.     -webkit-border-radius: 70px; 
  6.     border-radius: 70px;
  7.     text-align: center;
  8.  
  9. }
  10.  
  11. .div-contenedor{
  12.     padding: 1em 1em;
  13. }
  14.  
  15. .navbar > ul{
  16.     list-style: none;
  17. }
  18.  
  19. #banner{
  20.     border: 1px solid black;
  21.     border-radius: 1em;
  22.     height: 100px;
  23.     width: 50%;
  24.     margin: 0 auto;
  25.  
  26. }
  27.  
  28. #disco{
  29.    width: 140px;
  30.    height: 140px;
  31.    border: 1px solid black;  
  32.    -webkit-border-radius: 70px; 
  33.    border-radius: 70px;
  34.    margin: 0 auto;
  35. }
  36.  
  37. #disco2{
  38.    width: 20px;
  39.    height: 20px;
  40.    border: 1px solid black;  
  41.    -webkit-border-radius: 70px; 
  42.    border-radius: 70px;
  43.    margin: 60px auto;
  44. }
  45.  
  46.  
  47.  
  48. #twitter{
  49.    width: 140px; 
  50.    height: 140px; 
  51.    border: 1px solid black; 
  52. }
  53.  
  54. #facebook{
  55.    width: 140px; 
  56.    height: 140px; 
  57.    border: 1px solid black; 
  58. }
  59.  
  60. #social > ul{
  61.     display: inline;
  62.     list-style-type: none;
  63. }