[SOLUCIONADO] Alineaciones y espacios con css

nanotime · #1 (**permalink**) 22/02/2013, 00:39

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<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Monociclo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <h1>Monociclo</h1>
    <nav class="navbar">
        <ul>
            <li><p class="circ">S</p></li>
            <li><p class="circ">S</p></li>
            <li><p class="circ">S</p></li>
        </ul>
    </nav>
    <section class="base">
        <div class="div-contenedor">
            <div id="banner"></div>
            <br><br>
            <div id="disco">
                <p id="disco2"></p>
            </div>
            <div id="reproductor">
                <audio src=""></audio>
            </div>
        </div>
    </section>
    <aside id="social">
        <ul class="social">
            <li>
                <p id="twitter">T</p>
            </li>
            <li>
                <p id="facebook">F</p>
            </li>
        </ul>
    </aside>
    <footer></footer>
</body>
</html>

Código CSS:

Ver original.circ{
    width: 40px;
    height: 40px;
    border: 1px solid black;  
    -webkit-border-radius: 70px; 
    border-radius: 70px;
    text-align: center;
 
}
 
.div-contenedor{
    padding: 1em 1em;
}
 
.navbar > ul{
    list-style: none;
}
 
#banner{
    border: 1px solid black;
    border-radius: 1em;
    height: 100px;
    width: 50%;
    margin: 0 auto;
 
}
 
#disco{
   width: 140px;
   height: 140px;
   border: 1px solid black;  
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   margin: 0 auto;
}
 
#disco2{
   width: 20px;
   height: 20px;
   border: 1px solid black;  
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   margin: 60px auto;
}
 
 
 
#twitter{
   width: 140px; 
   height: 140px; 
   border: 1px solid black; 
}
 
#facebook{
   width: 140px; 
   height: 140px; 
   border: 1px solid black; 
}
 
#social > ul{
    display: inline;
    list-style-type: none;
}

pzin · #2 (**permalink**) 22/02/2013, 06:49

No sé si entendí bien lo que quieres hacer.

Para lo de la T y la F que comentas, si quieres que estén uno al lado del otro —que entiendo como contrario a uno debajo del otro— pues tendrías que flotarlos, ponerlos como elementos en linea o bloques en linea (inline-block).

Y lo de los círculos o no lo entendí muy bien o es la misma cosa. No sé si me perdí algo, pero ¿qué hay de malo en flotar las cosas?

nanotime · #3 (**permalink**) 22/02/2013, 09:40

Leí que flotar las cosas hacía que todo se descuadrara, por eso preguntaba.

Con respecto a los recuadros de abajo, ya les he puesto display: none; y nada, display: horizontal y nada, también inline y nada. Probé inline-block y nada!!! ¿Será problema de la sintaxis?

pzin · #4 (**permalink**) 22/02/2013, 10:04

Cita:

Iniciado por nanotime

Leí que flotar las cosas hacía que todo se descuadrara, por eso preguntaba.

Dondequiera que hayas leído tal barbaridad, hazte un favor y no vuelvas a leer nada de por ahí. Flotar elementos es justamente para colocar las cosas en horizontal.

Cita:

Iniciado por nanotime

Con respecto a los recuadros de abajo, ya les he puesto display: none; y nada, display: horizontal y nada, también inline y nada. Probé inline-block y nada!!! ¿Será problema de la sintaxis?

display:none es para ocultar y display:horizontal no existe.

Flota los elementos sin miedo. Si te da problemas, que puede ser, vuelves y comentas. De todas formas tienes articulos interesantes sobre posicionar elementos de forma flotada para entender un poco mejor.

nanotime · #5 (**permalink**) 22/02/2013, 10:56

De verdad mil gracias, ese artículo me hizo la vida mas simple