Centrar un DIV

kiM- · #1 (**permalink**) 26/02/2013, 12:04

Buenas, probablemente este tema esté repetido hasta la saciedad pero tengo un problema, no se me centra un div, es decir, quiero centrar el div #contenedor TOTALMENTE, es decir, que TODO vaya en el centro, pero no lo consigo, os dejo el código:

Cita:

<!DOCTYPE html>
<html>
<head>
<title> Prueba Title </title>
<//---Aquí van metas---//>
<//---Link a la hoja de estilos---//>
<style>
#contenedor { margin: auto;}
#cuerpo {width: 700px; float:left;}
#menu {width: 260px; float:left;}
</style>
</head>
<body>
<div id="contenedor"
<div id="logo"><img src="logo.png"></img></div>
<div id="menu">MENU</div>
<div id="cuerpo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus arcu, sagittis sit amet commodo nec, ultrices sed sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu tortor erat, ut mollis ipsum. Duis et odio id tellus tristique suscipit. In condimentum egestas sem. Nullam rhoncus bibendum metus a interdum. Aliquam tellus nulla, tincidunt ac vehicula vitae, facilisis eget lectus. Nam rhoncus posuere consectetur. Maecenas sit amet nisi vitae mauris ultricies commodo at bibendum sapien. Cras dictum erat eget nisi iaculis posuere.</div>
<div id="footer"><img src="footer.png"></img></div>
</div>
</body>
</html>

Saludos y gracias!

hugo_acosta · #2 (**permalink**) 26/02/2013, 12:48

Tienes que completar la etiqueta: <div id="contenedor">

kiM- · #3 (**permalink**) 26/02/2013, 13:30

Cierto... pero aún así no se centra :\... qué puedo estar haciendo mal?

pitufoweb · #4 (**permalink**) 26/02/2013, 13:39

Tienes que darle un ancho.

#contenedor { margin: auto; width:960px; }

Saludos

kiM- · #5 (**permalink**) 26/02/2013, 13:52

Cierto, muchisimas gracias, ahora me surge otra duda; Me gustaría pegar el div menú a la parte de arriba ya que cuando le pongo un fondo al div se nota la separación entre la cabezera y el menú (un espacio blanco), he probado con margin, padding.. y nada, cómo podría solucionarlo?

Código:

Cita:

<!DOCTYPE html>
<html>
<head>
<title> Prueba Title </title>
<//---Aquí van metas---//>
<//---Link a la hoja de estilos---//>
<style>
#contenedor {width: 960px; margin-left:auto; margin-right:auto;}
#cuerpo {width: 700px; float:left; margin:0; padding:0;}
#menu {width: 260px; float:left; background-image:url('bg_menu.png'); margin:50; padding:0;}
</style>
</head>
<body>
<div id="contenedor">
<div id="logo"><img src="logo.png"></img></div>
<div id="menu">MENU</div>
<div id="cuerpo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus arcu, sagittis sit amet commodo nec, ultrices sed sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu tortor erat, ut mollis ipsum. Duis et odio id tellus tristique suscipit. In condimentum egestas sem. Nullam rhoncus bibendum metus a interdum. Aliquam tellus nulla, tincidunt ac vehicula vitae, facilisis eget lectus. Nam rhoncus posuere consectetur. Maecenas sit amet nisi vitae mauris ultricies commodo at bibendum sapien. Cras dictum erat eget nisi iaculis posuere.</div>
<div id="footer"><img src="footer.png"></img></div>
</div>
</body>
</html>

pitufoweb · #6 (**permalink**) 26/02/2013, 17:04

Tal ves hay algún otro elemento que no lo deja estar pegado la aparte de arriba. Así como lo tienes ahora, no creo que tengas ese problema.

Saludos

Bandit · #7 (**permalink**) 26/02/2013, 17:11

Hola kiM-:
Si quieres separar el logo del menú, adiciona al CSS del DIV logo: margin-bottom: 10px; o el valor que necesitas que se separe.

Espero haberte sido de ayuda.

kiM- · #8 (**permalink**) 27/02/2013, 10:29

El problema es que precisamente no quiero que haya espacio, si pongo 10px pues se separa más, pero si pongo 0 se queda igual, con el pequeño espacio blanco debajo del logo, en cambio si pongo -10 si se junta, pero no creo que esa medida sea la correcta, cuál puede ser el problema?

Aparte, otra duda que me surge, he puesto:

Cita:

html{height:100%;}
body {height:100%; margin:0; padding:0;}

Para que el div menú y cuerpo tengan un ancho del 100% y se pueda ver el fondo, y para que la web no tenga ningún espacio arriba y abajo, pero resulta que abajo sí que tiene espacio :\ qué puede ser?

saludos y gracias!

Bandit · #9 (**permalink**) 27/02/2013, 10:49

Para empezar con height 100% estás refiriendo a la altura de la página y no el ancho.
Te entendí mal sobre la separación del logo con el menú, si no le pones margin-bottom: 10px; debería estara pegado los 2 div.
Porque no muestras el link de tu página para poderla ver.

Espero haberte sido de ayuda.

kiM- · #10 (**permalink**) 27/02/2013, 11:30

Vale, he hecho un sitio y lo he subido:

http://testweb23.comeze.com/

Como podrás observar hay un pequeño espacio blanco debajo del logo, encima del menú y las noticias, no lo consigo quitar y he usado el margin-bottom: 0px pero nada :\...

Y también hay otro espacio al final de la página, se supone que con el margin: 0 en body se debería quitar pero no, solo se ha quitado el de encima, alguna solución para ambas dudas?

saludos y gracias!

pzin · #11 (**permalink**) 27/02/2013, 11:42

Yo creo que el problema va a ser esta licencia:

Código HTML:

Ver original<img src="logo.png"></img>

Que debería de ser:

Código HTML:

Ver original<img src="logo.png" />

O también (ya que es HTML5)

Código HTML:

Ver original<img src="logo.png">

kiM- · #12 (**permalink**) 27/02/2013, 11:49

Qué va, lo he cambiado y nada, los espacios continúan, no entiendo que es lo que me estoy olvidando o que no estoy poniendo, no logro quitar los espacios :\

pzin · #13 (**permalink**) 27/02/2013, 11:58

Cita:

Iniciado por kiM-

Qué va, lo he cambiado y nada, los espacios continúan, no entiendo que es lo que me estoy olvidando o que no estoy poniendo, no logro quitar los espacios :\

La cosa es porque es un elemento en linea, pero no debería de causar ese espacio. De todas formas, poniendo la imagen como bloque a la fuerza desaparecerá ese espacio.

Código CSS:

Ver originaldiv#logo img {
  display: block;
}

O le especificas la altura a div#logo.

kiM- · #14 (**permalink**) 27/02/2013, 12:05

A ver, a qué te refieres con un elemento en línea?

Otra cosa, por qué añadir el display:block a "div#logo" y no a #logo sin más? no se puede?

Y una última pregunta, ese código es "limpio" o es algún hack/apaño/trick?

Saludos!

pzin · #15 (**permalink**) 27/02/2013, 12:10

Cita:

Iniciado por kiM-

A ver, a qué te refieres con un elemento en línea?

A un elemento cuyo valor display es igual a inline o inline-block. Como en el código fuente hay saltos de línea, se crea un espacio. Por ejemplo, el caso más usual y gráfico, es cuando escribes un texto en dos líneas, aunque no pongas espacio de la primera a la segunda linea se crea un espacio igualmente. Pues con los elementos en linea pasa lo mismo.
¡Pero! Y aquí lo extraño y lo que no me explico, esto suele ocurrir cuando hay dos elementos en línea seguidos, y no es el caso ya que luego viene el cierre de div.

Cita:

Iniciado por kiM-

Otra cosa, por qué añadir el display:block a "div#logo" y no a #logo sin más? no se puede?

Es lo mismo. Yo tengo la manía de poner el elemento junto al id o la clase en el selector. Da igual como lo pongas.

Cita:

Iniciado por kiM-

Y una última pregunta, ese código es "limpio" o es algún hack/apaño/trick?

Bueno, vista la explicación de arriba yo diría que es bastante limpio, ¿no?

kiM- · #16 (**permalink**) 27/02/2013, 12:22

Es decir, que el espacio blanco solo debería estar si hago un salto de línea <br> o algo similar, no? Vamos, que como no hay salto de línea y está todo "junto" ese espacio no debería existir, correcto? Entonces por qué está ahí? Quizás me he liado con tu explicación o no la he entendido bien. Quizás haber puesto un div debajo de otro ha hecho que aparezca ese espacio?

Respecto al tema del "div#logo", he puesto el display:block en #logo y no ha pasado absolutamente nada, ha seguido igual, en cambio poniendo div#logo si que ha desaparecido el espacio, a qué se debe?

Saludos y gracias por responder!

pzin · #17 (**permalink**) 27/02/2013, 12:38

No tiene nada que ver con br... Da igual.

Cita:

Iniciado por kiM-

Respecto al tema del "div#logo", he puesto el display:block en #logo y no ha pasado absolutamente nada, ha seguido igual, en cambio poniendo div#logo si que ha desaparecido el espacio, a qué se debe?

En principio es lo mismo. Lo único que puede haber pasado es que tengas otra regla sobre #logo en algún momento después en tu CSS, por eso parece que no haya hecho nada —ya que aplica luego la otra regla—, y luego al ser más específico (ver especifidad CSS) este prevalezca.

kiM- · #18 (**permalink**) 27/02/2013, 12:56

Es decir, tendría que borrar la regla que está por encima para que la otra funcionase, no? Pero yo en ese código lo veo todo bien ordenado y no veo nada que obstruya alguna otra regla, le he quitado los floats y aún así sigue igual :\

Bandit · #19 (**permalink**) 28/02/2013, 11:30

Hola kiM-:
Una forma sería así:

Código HTML:

Ver original<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-family: Arial; color:#FFF;
        width: 100%;
    }
    #contenedor{margin: 0 auto; width: 960px;}
    header{background-image: url(img/logo.png); height: 250px;}
    nav{background-image:url('img/bg_menu.png');height: 830px; float: left; width: 260px}
    article{background-image:url('img/bg_news.png'); color: #FFF; float: left; height: 830px; width: 700px;}
    </style>
</head>
<body>
    <div id="contenedor">
        <header></header>
        <section>
            <nav>MENÚ</nav>
            <article>
                <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus arcu, sagittis sit amet commodo nec, ultrices sed sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu tortor erat, ut mollis ipsum. Duis et odio id tellus tristique suscipit. In condimentum egestas sem. Nullam rhoncus bibendum metus a interdum. Aliquam tellus nulla, tincidunt ac vehicula vitae, facilisis eget lectus. Nam rhoncus posuere consectetur. Maecenas sit amet nisi vitae mauris ultricies commodo at bibendum sapien. Cras dictum erat eget nisi iaculis posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus arcu, sagittis sit amet commodo nec, ultrices sed sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu tortor erat, ut mollis ipsum. Duis et odio id tellus tristique suscipit. In condimentum egestas sem. Nullam rhoncus bibendum metus a interdum. Aliquam tellus nulla, tincidunt ac vehicula vitae, facilisis eget lectus. Nam rhoncus posuere consectetur. Maecenas sit amet nisi vitae mauris ultricies commodo at bibendum sapien. Cras dictum erat eget nisi iaculis posuere.</p>
            </article>
        </section>
        <div id="footer"><img src="img/footer.png" /></div>
    </div> 
</body>
</html>

Espero haberte sido de ayuda.