Posicionamiento de Imágenes

gel · #1 (**permalink**) 11/05/2009, 21:06

Hola, amigos del CSS

Estoy tratando de hacer mi primera Web en CSS, desde un Mockup en Photoshop. Quisiera que la Web creada saliera igual de bella como se ve en Photoshop... he visitado varios tutos pero no doy pie con bola para posicionar mi primera imagen que es un Background de los botones de la misma...
HTML:

Cita:

CSS:

Cita:

#top {
width: 303px ;
height: 30px ;
margin: 0 auto;
background: url(images/btn_bg.png);
}

Bueno... el problema es que la imagen nunca va al verdadero TOP... sino que aun deja unos 5 a 10 px de distancia de la parte de arriba... ¿Cómo puedo solucionar este problema y que me vaya justo al tope?

Saludos y gracias de antemano.

David · #2 (**permalink**) 11/05/2009, 21:16

Como sugerencia, puedes agregar directamente el background-image al body (quitándole los márgenes):

Código:

body {
    background-image: url(images/btn_bg.png);
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

De hecho, quitando los márgenes y el padding al body ya debería funcionar aún de la forma como tienes.

Saludos.

Calizman · #3 (**permalink**) 11/05/2009, 21:26

Saludos!!

Seguramente, la solucion que David el Grande te dio, funciona... Pero en estos articulos me gusta recalcar la importancia de el resset que se usa al inicio de la hoja de estilos (CSS)

Al inicio de todo, siempre recuerda poner esto:

* {
margin: 0px;
padding: 0px;
}

En donde * representa un elemento cualquiera y funciona siempre poniendo los margenes a 0. Esto seguramente, te ayudará a solucionar tu problema.

Hasta Luego!!

gel · #4 (**permalink**) 11/05/2009, 21:52

Perfecto.. Muchas gracias.. ¡ya di en el clavo!
Ahora prosigo más tranquilo... y me verán preguntando a menudo.
Muchas gracias a los dos, pues las dos respuestas fueron acertadas. Un abrazo y hasta la próxima (que es muy pronto)

gel · #5 (**permalink**) 11/05/2009, 23:59

Disculpen,
pero ahora el problema es que no logro posicionar la imagen al centro de la página

Cita:

#top {
width: 307px ;
height: 29px ;
margin: 0 auto;
background: url(images/btn_bg.png);
}

David · #6 (**permalink**) 12/05/2009, 08:36

Debería funcionar, hay que ver qué otros elementos tienes en la página.

Yo sigo pensando que sería mejor poner el fondo directamente en el body, así, para centrarlo, sólo tienes que usar el background-position

adriancitov7 · #7 (**permalink**) 12/05/2009, 13:13

para posiciona el fondo en el centro de ese div #top

background: url(images/btn_bg.png); no-repeat center center;

PD: o cambiar el primer center por top para que usted lo pueda poner en parte superior pero horizonalmente centrado

gel · #8 (**permalink**) 13/05/2009, 05:50

Bueno esto es mi primer intento y en lo que ando mal:

HTML

Cita:

<html>

<head>

<title> First CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

<ul id="nav">
<li></li>
</ul>

<div id="btn">
</div>
</body>

</html>

CSS

Cita:

*{
margin: 0 ;
padding: 0 ;
}

body {
font-size: 62%;
font-family: Helvetica, sans-serif;
background: url(images/body_bg.jpg) repeat-x top #1b1b1b;
height: 100%;
margin: 0;
padding: 0;
width: 0;

}

#btn {
width: 302px ;
height: 30px ;
margin: 0 auto;
background: url(images/btn_bg.png);

}

La imagen de los botones no se posiciona en el centro como es que lo deseo y sigue teniendo un espacio de unos 7 pixels de tope de la página...

David · #9 (**permalink**) 13/05/2009, 09:11

Es muy importante que elijas un DOCTYPE adecuado para tu documento. Ya que de la forma como estás haciendo el navegador entra en modo de compatibilidad (quirks mode).

Y, el botón no se centra debido a que le estás dando al body ancho 0 (width: 0); el espacio de 7 pixels que mencionas es por esa lista (<ul>) que está ocupando espacio.

gel · #10 (**permalink**) 13/05/2009, 17:43

Hmmm... Bueno, creo que debo preguntar, ante todo, si los que pasan por acá conocen algunas buenas Páginas de Tutoriales para CSS... partiendo del posicionamiento. Ya que debo aprender el CSS como un niño de teta... poco a poco. Como ya dije antes.. todo parte de imágenes cortadas desde un Mockup.
Gracias por la ayuda!!!!

jomaruro · #11 (**permalink**) 14/05/2009, 13:26

Hola:

En este mismo foro tienes dos aportes muy interesantes de Mikmoro.

El primero pequeña guía de migración a XHTML+CSS.

Y su segunda parte guía de migración a XHTML+CSS - Parte II.

Y para tener a mano es muy útil este manual de www.librosweb.es

Saludos.

lucasagudelo · #12 (**permalink**) 07/11/2011, 06:32

Hola chicos! Me gustaría hacer una pregunta: tengo un dominio con fordward Masking a mi wordpress.com.(el gratis. y estaba posicionando las imagenes muy bien… pero un día mande un enlace desde .wordpress.com y las imágenes bajaron.
Es posible que goolge pensara que era contenido duplicado porque encontró el .com y el wordpress.com?
Yo además le pongo a todas la imagenes las palabras claves todas las veces… eso puede ser también el problema?
mil y mil gracais