Foros del Web » Creando para Internet » CSS »

Posicionamiento de Imágenes

Estas en el tema de Posicionamiento de Imágenes en el foro de CSS en Foros del Web. Hola, amigos del CSS Estoy tratando de hacer mi primera Web en CSS , desde un Mockup en Photoshop. Quisiera que la Web creada saliera ...
  #1 (permalink)  
Antiguo 11/05/2009, 22:06
Avatar de gel
gel
 
Fecha de Ingreso: julio-2007
Ubicación: Toronto
Mensajes: 76
Antigüedad: 10 años, 5 meses
Puntos: 1
Posicionamiento de Imágenes

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:
<div id="top">
</div><!-- END top background -->
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.
  #2 (permalink)  
Antiguo 11/05/2009, 22:16
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Posicionamiento de Imágenes

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 11/05/2009, 22:26
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Posicionamiento de Imágenes

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!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 11/05/2009, 22:52
Avatar de gel
gel
 
Fecha de Ingreso: julio-2007
Ubicación: Toronto
Mensajes: 76
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: Posicionamiento de Imágenes

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)
  #5 (permalink)  
Antiguo 12/05/2009, 00:59
Avatar de gel
gel
 
Fecha de Ingreso: julio-2007
Ubicación: Toronto
Mensajes: 76
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: Posicionamiento de Imágenes

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);
}
  #6 (permalink)  
Antiguo 12/05/2009, 09:36
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Posicionamiento de Imágenes

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
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #7 (permalink)  
Antiguo 12/05/2009, 14:13
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
De acuerdo Respuesta: Posicionamiento de Imágenes

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

Última edición por adriancitov7; 12/05/2009 a las 14:21
  #8 (permalink)  
Antiguo 13/05/2009, 06:50
Avatar de gel
gel
 
Fecha de Ingreso: julio-2007
Ubicación: Toronto
Mensajes: 76
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: Posicionamiento de Imágenes

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><!-- END btn background -->
</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...
  #9 (permalink)  
Antiguo 13/05/2009, 10:11
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Posicionamiento de Imágenes

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #10 (permalink)  
Antiguo 13/05/2009, 18:43
Avatar de gel
gel
 
Fecha de Ingreso: julio-2007
Ubicación: Toronto
Mensajes: 76
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: Posicionamiento de Imágenes

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!!!!
  #11 (permalink)  
Antiguo 14/05/2009, 14:26
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Posicionamiento de Imágenes

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.

  #12 (permalink)  
Antiguo 07/11/2011, 06:32
 
Fecha de Ingreso: noviembre-2011
Mensajes: 2
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Posicionamiento de Imágenes

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:49.