Problema con código (CSS y HTML)

adr1ana_cs #1 Abr '12

Buenas, a ver si me explico. Necesito insertar (mediante CSS) una imagen encima de otra imagen y el problema es que cuando lo hago, no se hacer que se vea encima, sino que se ve detrás o en otro lado distinto.

Los códigos que estoy utilizando son:

CSS


#background-login
{

background: url("../imagenes/background-login.png");
width:791px;
height:148px;
margin: -130px auto 0 240px;
display:table;

}

#sponsor1
{

background: url("../imagenes/tba.png");
width:190px;
height:95px;
margin: -210px auto 0 auto;
display:table;
float:left;

}

Y después a eso lo llamo con un DIV en HTML (Aqui salen todos los divs de todo lo que llevo hecho)

HTML


<div id="detalles"></div>
	<div id="login"></div>
	<div id="sponsor1"></div>
	<div id="background-login"></div>
	<div id="logotipo"></div>
	<div id="cabecera"></div>

No tengo mucha idea de CSS ni HTML xD el caso es que quiero que se muestre el login encima de background-login.

He editado post, ya solucioné el anterior problema pero sigo teniendo otro xD lo otro consegui que se viera con float:right y me queda bien ahi, pero cuando quiero poner algo a la izquierda no me sirve el float:left, porque no puedo darle márgenes y se ve demasiado a la izquierda.

djtonight #2 Abr '12 fap caster

pero las imagenes donde van?

1 respuesta

adr1ana_cs #3 Abr '12

#2 Es que no se si me se explicar, como te digo yo tengo un diseño hecho en photoshop para una página web, y lo que he hecho son los recortes para ahora ir haciendo que coja forma en CSS, entonces digamos que el "background-login" seria el fondo de "login" ambas son imagenes, una con lo que es el fondo y la otra con lo que son los campos para meter los datos.

Madre mia xD soy imbecil. El error estaba en que no habia puesto "px" en height. como cojones se iba a mostrar asi xD

djtonight #4 Abr '12 fap caster

entonces tendrás que hacer uso de la etiqueta CSS "z-index".
si pudieras poner más código o una captura de lo que quieres hacer a lo mejor me hago una idea mas clara de lo que quieres

1 respuesta

adr1ana_cs #5 Abr '12

#4 He puesto más codigo de exactamente lo que estoy haciendo que he editado post. Lo de las etiquetas Z-index no se ni lo que es xD

Sonos #6 Abr '12 MV Wizard

Con z-index controlas el orden como si fueran capas. Un valor mayor mostrara dicho elemento sobre el resto.
http://www.w3schools.com/cssref/pr_pos_z-index.asp

1 respuesta

adr1ana_cs #7 Abr '12

#6 Vale suena genial eso que me has pasado. Lo que no sé si me va a salir bien, porque imagino que para cada class será un valor distinto de z-index no?

1 respuesta

Sonos #8 Abr '12 MV Wizard

#7 Claro que te saldrá. Solo usalo en las que necesites esa propiedad., pon z-index 2 en la que quieres arriba y 1 en la otra por ejemplo. No estoy en la ofi si no te editaría el código que es mejorable. Con el ipad me da pereza. xd

1 respuesta

adr1ana_cs #9 Abr '12

#8 Vale probaré no obstante he conseguido hacerlo de otra manera, desde el propio html con los divs poniendolos en la misma linea xD

eXtreM3 #10 Abr '12

Para esto en concreto que tú quieres no te hace falta el z-index. Simplemente bastaría añadir float: left a cada capa para que queden una al lado de otra, los pngs con transparencia harán el trabajo restante.

Después de todas las capas pon esto

<div style="clear: both;"></div>

para limpiar flotabilidades (es simplemente un concepto técnico)

1 respuesta

adr1ana_cs #11 Abr '12

#10 Mmm vale, no obstante mas o menos lo conseguí con el float:left y en la otra imagen que tenia que ir al lado no le ponía ningún float, así me salían las dos y solo era jugar con los margenes.

Problema con código (CSS y HTML)

Usuarios habituales

Tags