separación uniforme entre todos los divs

navarone86 · #1 (**permalink**) 12/01/2012, 13:51

hola a todos

intento crear una plantilla tal que esta:

soy bastante torpe con los css y los estilos, pero al menos me apaño para situar cada div donde le corresponde usando la propiedad float

lo que quiero es que todos los divs que se ven estén separados entre si, por unos 10px, tal y como he intentado representar en el dibujo

el problema es que si pongo margin: 10px a los div, el resultado que tengo son 20px de separación en los lugares donde los divs se "tocan" y 10 en los bordes

además, mi intención es darles ancho a los div mediante porcentajes, y pero al añadir los margin, al pasarse de 100%, me mete los divs debajo

esto que pretendo no es nada del otro mundo, y por eso creo que debería haber alguna manera facilísima y rápida de hacerlo que yo desconozco

¿que propiedad debería usar?

un saludo y muchas gracias

C2am · #2 (**permalink**) 12/01/2012, 15:09

Dale un margen izquierdo a cada div, pero no el derecho (o al revés), en consecuencia se situaran a 10px del div que tengan a su izquierda, o en su defecto a 10px del lado izquierdo del contenedor.
Saludos

PD: muestra el código que estas usando para lograrlo (html y css)

navarone86 · #3 (**permalink**) 12/01/2012, 16:26

ahora mismo mi código es el siguiente:

Código HTML:

Ver originalCopiar<html>
<head>
    <link type="text/css" rel="stylesheet" href="styles.css"/>
</head>
<body>
    <div id="cabecera">
        cabecera
    </div>
    <div id="menu">
        menu
    </div>
    <div id="botones">
        botones
    </div>
    <div id="contenido">
        contenido
    </div>
</body>
</html>

Código CSS:

Ver originalCopiar#cabecera{
    height: 80px;
    background-color: green;
}
#menu{
    float: left;
    height: 80px;
    width: 15%;
    background-color: yellow;
}
 
#botones{
    height: 40px;
    width: 85%;
    float: left;
    background-color: red;
}
#contenido{
    height: 80px;
    width: 85%;
    float: left;
    background-color: blue;
}

lo que me gustaría tener (lo ideal) sería algo que me permita añadir más divs a la plantilla, sin tener que definir un class específico para ellos

es decir, conseguir con un solo class que todos los div queden separados 10 px entre ellos o los laterales

igual pido demasiado, como ya he dicho, estoy muy verde en cuanto a css

un saludo

C2am · #4 (**permalink**) 12/01/2012, 17:17

Con esto:

Código CSS:

Ver originalCopiardiv {margin:10px 10px 0 0}

le declaras un margin arriba de 10px, derecha:10px, abajo:0px, izquierda:0px.
Para que no te pierdas se lee como el reloj (en sentido horario comenzando por arriba).

Prueba con algo de trampa ya que le baje el width a contenido y botonera al 80%

Saludos

PD: me parece que te va a traer dolores de cabeza si en tu maquetación tienes más div dentro de los que ya tienes, debido a que a estos también se les asignara ese margen de 10px, pero ya es tu decisión.

navarone86 · #5 (**permalink**) 13/01/2012, 03:42

muchísimas gracias por responder, creo que he conseguido lo que quería (aunque dejando de lado la idea de usar un único class)

el resultado es este, aunque hay cosas que no entiendo:

Código HTML:

Ver originalCopiar<html>
<head>
    <link type="text/css" rel="stylesheet" href="styles.css"/>
</head>
<body>
    <div id="cabecera">
        cabecera
    </div>
    <div id="menu">
        menu
    </div>
    <div id="botones">
        botones
    </div>
    <div id="contenido">
        contenido
    </div>
</body>
</html>

Código CSS:

Ver originalCopiar#cabecera{
    height: 80px;
    background-color: green;
}
 
#menu{
    float: left;
    height: 80px;
    width: 15%;
    background-color: yellow;
    margin: 1% 1% 0 0
}
 
#botones{
    height: 40px;
    width: 84%;
    float: left;
    background-color: red;
    margin: 1% 0 0 0
}
 
#contenido{
    height: 80px;
    width: 84%;
    float: left;
    background-color: blue;
    position:relative;
    margin: 1% 0 0 0
}
 
body{
    margin: 1%;
}

si el margin del body me mete 1% a la izquierda y a la derecha, ya tengo 2
si el menu tiene 15% de ancho, tengo 17
más el 1% entre menu y contenido, 18

como es posible que para que todo encaje perfectamente, tenga que poner 84% a contenido?

PD: no conocía esa web, muy útil, gracias de nuevo ;)

juanito1712 · #6 (**permalink**) 13/01/2012, 05:57

por experiencia propia...
los porcentajes apestan (por lo menos cuando los combinas con tamaños absolutos)

prueba algo de este estilo a ver si te gusta

Código:

#cabecera{
    position:absolute;
    height: 80px;
top:10px;
left:10px;
right:10px;
    background-color: green;
}
 
#menu{
    position:absolute;
    top: 100px;
    width: 200px;
left:10px;
bottom:10px;
    background-color: yellow;
    
}
 
#botones{
position:absolute;
    height: 40px;
top:100px;
left:210px;
right:10px;
    background-color: red;
}
 
#contenido{
    top:200px;
   left:210px;
   right:10px;
bottom:10px;
    background-color: blue;
    position:absolute;
}
 
body , html{
   margin:0;
   padding:0;
   position:relative;
}

de este modo todo encaja como un guante y se redimensiona de lujo

espero no haberme rallado ya que lo he escrito aquí directamente

un saludo

navarone86 · #7 (**permalink**) 13/01/2012, 10:44

gracias por el consejo

si que es cierto que el margin que estoy poniendo queda mejor si es algo fijo (10px), así al redimensionarlo horizontalmente, el diseño no varia verticalmente

por otra parte, no quería poner ningún elemento con ancho con tamaño absoluto, pensando que esto era una buena práctica, pero empiezo a pensar que no tiene porque ser así. en mi caso, creo que el menú quedaría mejor si le pongo un ancho constante, no? decirme si me equivoco

además, me he dado cuenta que al ponerle padding a los divs, me varía el tamaño de los divs ya que el div contenido me salta a la linea siguiente. el padding hay que sumarlo al ancho que le haya dado a mi div?

y por último, si como puedo darle a un div el ancho "restante" de pantalla?

un saludo

juanito1712 · #8 (**permalink**) 13/01/2012, 10:50

todo depende de que quieres que se estire y que no

fijate en el ejemplo que te he dado, son todo tamaños absolutos pero con "truco"

fijate en la cabecera por ejemplo

le de dado un tamaño de alto absoluto de 80 y luego posiciones absolutas:
10 por arriba 10 desde la izquierda y 10 desde la derecha entonces según se estire su contenedor (en este caso body) la cabecera se estirará a lo ancho con el

y tu menu... seguramente quieras que sea de un ancho fijo pero que se estire hacia abajo segun tenga espacio

pues 10 desde la izquierda 100 desde arriba (contando los 80 de la cabecera y los 20 de los 2 margenes) y 10 desde abajo, entonces ya le das un ancho fijo, ya que seguramente no querras que se ensanche el menu...

espero haberme explicado bien ;)

juega con los valores que te he dado para comprenderlo

coje contenedor dale right: 20 y mira, luego right:30 y encoje y agranda la ventana para verlo en acción

C2am · #9 (**permalink**) 13/01/2012, 19:13

Hola
No comparto lo de posicionamiento absoluto, a menos que sea la única forma de ubicar una caja en un punto determinado. Para mí lo mejor es el posicionamiento relativo o el estatico (por defecto) para el tipo de maquetación que estamos analizando.

En un rato me siento y armo un ejemplo.

Saludos

juanito1712 · #10 (**permalink**) 14/01/2012, 03:16

eso me parece que es según el resultado quiera el.

por el primer ejemplo que nos ha pasado parece que quiere algo reajustable en lugar de algo estático.

seguramente mi ejemplo falla en la parte inferior que estaría limitada al borde de la ventana, pero para eso simplemente con no darle los valores bottom creo que bastaría

pero a ver el ejemplo que nunca está de mas

navarone86 · #11 (**permalink**) 15/01/2012, 07:52

bueno, ya he dado con la solución que en mi caso necesito:

la cabecera se queda con width: 100%

el menú se queda con ancho fijo: 180px y float: left

y a los botones y contenido solo tengo que ponerles overflow: hidden

no se exactamente que es lo que hace, creo que simplemente oculta a la vista lo que va detrás de alguna otra capa, pero vamos, que es una mala deducción

por tanto mi código queda así:

http://jsfiddle.net/UCW7J/

además, como quiero que tanto el div de los botones como el de contenido, se ajuste al alto de su contenido (valga la redundancia), puedo quitar el ancho que he puesto para el ejemplo y usar la misma clase para los 2 divs

todo perfecto ;)

espero que le sirva a alguien más

un saludo y gracias por vuestra ayuda

C2am · #12 (**permalink**) 15/01/2012, 15:32

Cita:

y a los botones y contenido solo tengo que ponerles overflow: hidden

no se exactamente que es lo que hace, creo que simplemente oculta a la vista lo que va detrás de alguna otra capa

http://www.librosweb.es/referencia/css/overflow.html

Saludos