[SOLUCIONADO] ¿Cómo poner una imagen en el borde del container? como en esta web...

[Tonimn]

Me refiero a como lo que aparece en esta página, el lazito es una imagen que sale del contenedor ¿cómo se puede hacer eso? gracias.


http://www.cakeshautecouture.com/

[Carlangueitor]

La forma más fácil es un margin derecho con valor negativo. Aunque bien puedes ver el código que usan en esa página.

Saludos

[DoctorHTML]

Te paso el código.

HTML:

Código HTML:

<div id="lazo_p"></div>
 

CSS:

Código CSS:

#lazo_p {
    background-image: url("../images/lazo_1.png");
    height: 43px;
    left: 967px;
    position: absolute;
    top: 133px;
    width: 69px;
    z-index: 3;
}
 

¡Un saludo!

[fbugian]

Otra opción es que hagas el dibujo en un espacio más pequeño que el container. Es decir lo armas en png dejando los margenes vacíos. De esta manera, la imagen png final tiene el tamaño completo del container pero la parte visible (el dibujo propiamente) al ser más pequeña arma este efecto. Yo lo armo así por lo menos. Saludos y espero te sirva.

[Tonimn]

Pues pruebo de colocar el lazo en la esquina del menú y no me sale bien.


Resulta que queda bien colocadito en su sitio pero a la que muevo el container el lazo se queda quieto y claro, se desplaza de su sitio ¿cómo puedo hacer para que se mueva junto al container en esa posición?
Pongo el código que estoy haciendo mal...


#lazo {
background-image: url(lazo.png);
height:62px;
left:1250px;
position:absolute;
top:96px;
width:80px;
z-index:3;




Tengo el body, wrapper y container así:

body {
margin-top:0;

}

#wrapper{
width:100%;
text-align:center;
margin-top:0;

}

#container{
width:1024px;
margin-left:auto;
margin-right:auto;
border:4px #FF33FF solid;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
}

O igual lo coloco en un sitio donde no debería en el html:
<div id="wrapper">
<div id="lazo"></div>
<div id="container">

[Tonimn]

Sigue siendo imposible para mí.
No hay manera.
En Safari sí logro que me funcione con este código pero no en el resto de navegadores porque el lazo no se mueve junto al resto de las imágenes si agrando o muevo la página.

HTML
<div id="lazo_p"></div>

CSS
#lazo { width:80px; height:62px;
background-image:url('images/lazo.png');
position:absolute;
top: 100px;
left: 1011px;

}

[Tonimn]

LLevo más de 2 meses con la misma duda y no veo por internet nada que conteste exactamente a lo que digo.

[pitufoweb]

Iniciado por Tonimn

LLevo más de 2 meses con la misma duda y no veo por internet nada que conteste exactamente a lo que digo.

Si hubieras consultado algún manual de CSS, hubieras resuelto tu duda en 5 minutos.

http://librosweb.es/css/capitulo_5/p..._absoluto.html

Por tanto, si se quiere posicionar un elemento de forma absoluta respecto de su elemento contenedor, es imprescindible posicionar este último. Para ello, sólo es necesario añadir la propiedad position: relative, por lo que no es obligatorio desplazar el elemento contenedor respecto de su posición original.

Saludos

[Tonimn]

Gracias por el comentario pero no es así.
Sí he consultado montones de libros, tutoriales, manuales... Muchas horas. Y aunque he aprendido muchas cosas sigo sin tener esto claro.
Mira, ahora lo tengo así:
Html
<div id="lazo"></div>
CSS
#lazo {
background-image:url('images/lazo.png');
position:relative;
top: 433px;
left: 444px;
}

Yo creo que igual el fallo está en el Html porque el CSS lo he modificado mínimo 200 veces y no hay manera. Siempre o da la tara de la imagen que adjunto o el lazo no se mueve en su sitio junto al resto.
El <div id="lazo"></div> lo tengo en el Html en el body dentro de container antes del header, menu, otros y footer.
Y lo máximo que me aproximo es lo de esta imagen que me sale mal el container por arriba(tengo un fondo degradado) si quito el lazo la parte blanca queda arriba del todo.

[pitufoweb]

Creo que no comprendiste...


Te dejo un ejemplo:

Código HTML:

.contenedor {position:relative;}
.lazo {position:absolute; right:0; top:0;}


<div class="contenedor">
  <div class="lazo">
  </div>
</div> 

Saludos



Saludos

[Tonimn]

No, no sirve. Sigo con el mismo problema de que se ve el degradado por encima del fondo blanco, como que el degradado baja el container en lugar de quedar en el top.

#lazo {
background-image:url('images/lazo.png');
position:absolute;
top: 444px;
right: 333px;
}

#container
{position:relative;
width:1124px; height:880px; margin:0 auto; margin-top:0px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-webkit-box-shadow: -1px -4px 23px 9px rgba(255, 141, 148, 0.77);
box-shadow: -1px -4px 23px 9px rgba(255, 141, 148, 0.77);

}

[pitufoweb]

Creí que tu problema era para posicionar el lazo.


Para ver cual es el problema con el degradado es necesario que pongas todo el código que estas usando (HTML y CSS) y/o pongas la URL de tu web.




Saludos

[Tonimn]

El html es demasiado largo para este foro dice el mensaje.
Pongo el CSS y bueno, la web es www.cuptaste.es que está a medias.

CSS


html,

body {
MARGIN: 0;
height: 100%;
background-image: -webkit-gradient(linear, center top, center bottom, from(#f2eae6), to(#e051cb));
background-image: -webkit-linear-gradient(top, #f2eae6, #e051cb);
background-image: -moz-linear-gradient(top, #f2eae6, #e051cb);
background-image: -o-linear-gradient(top, #f2eae6, #e051cb);
background-image: -ms-linear-gradient(top, #f2eae6, #e051cb);
background-image: linear-gradient(top, bottom, #f2eae6, #e051cb);

}



#container
{position:relative;
width:1124px; height:880px; margin:0 auto; margin-top:0px;


border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-webkit-box-shadow: -1px -4px 23px 9px rgba(255, 141, 148, 0.77);
box-shadow: -1px -4px 23px 9px rgba(255, 141, 148, 0.77);




}


#header
{ width:1124px; height:100px; background-color:white; background-image:url('images/logo.png'); background-repeat:no-repeat;background-position:center;

border-radius: 50px 50px 0px 0px;
-moz-border-radius: 50px 50px 0px 0px;
-webkit-border-radius: 50px 50px 0px 0px;
border: 2px;

}

#menu
{ width:1124px; height:40px; background-color:#FF33CC;

}

#menu table tr td {
height:40px;
color: #FFF;
text-align: center;
}





#container .mainframe
{ width: 800px; height:737px; float:left; background-color:red;
background-image: -webkit-gradient(linear, center top, center bottom, from(#f2eae6), to(#e051cb));
background-image: -webkit-linear-gradient(top, #f2eae6, #e051cb);
background-image: -moz-linear-gradient(top, #f2eae6, #e051cb);
background-image: -o-linear-gradient(top, #f2eae6, #e051cb);
background-image: -ms-linear-gradient(top, #f2eae6, #e051cb);
background-image: linear-gradient(to bottom, #f2eae6, #e051cb);
}



#container .thumbnails
{ float:left; width:324px; height:737px;
background-image: -webkit-gradient(linear, center top, center bottom, from(#f2eae6), to(#e051cb));
background-image: -webkit-linear-gradient(top, #f2eae6, #e051cb);
background-image: -moz-linear-gradient(top, #f2eae6, #e051cb);
background-image: -o-linear-gradient(top, #f2eae6, #e051cb);
background-image: -ms-linear-gradient(top, #f2eae6, #e051cb);
background-image: linear-gradient(to bottom, #f2eae6, #e051cb);
}

/* container INMA PEQUE*/

#container .inmapeque
{ float:left; width:1124px; height:737px;
background-image:url('images/INMA2.jpg');

}



.thumbnailimage
{ float:left; padding:7px;}



.large_thumb
{float:left; position: relative; width:64px; height:64px; padding:0px 10px 0px 0;}

img.large_thumb_image
{position:absolute; left:5px; top:4px;}

.large_thumb_border
{width:64px; height:64px; background:url('images/interface/thumb_border.png'); position:absolute; }




.large_thumb_shine
{width:54px; height:54px; background:url('images/interface/shine.png'); position:absolute; background-position:-150px 0; left:5px; top:4px; background-repeat:no-repeat;}

/*brillo de fotos pequeñas*/

.thumb_container
{ width:64px; height:64px; background-image:url('images/interface/thumb_holder.png'); }



#largephoto
{ width: 600px; height:560px; margin-top:78px; margin-left:auto; margin-right:auto;
-moz-border-radius: 10px; -webkit-border-radius: 10px; }




#largetrans
{ width: 600px; height:560px;}

/*foto grande sombras marco background-image:url('images/interface/main_bg_trans.png'); -moz-border-radius: 10px; -webkit-border-radius: 10px;*/

.large_image
{ display:none}

#containertitle


/*texto pequeño titulito{ position:absolute; margin-top:0px; margin-left:40px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-shadow: 0px 1px 2px #fff;}*/


/*texto bajo fotos grandes
#largecaption
{ text-align: center; height:100px; width:100%; background-color:#111; position:absolute; width: 444px;
margin-top:270px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px; display:none; color:#fff; font-size:30px; font-family:Arial; letter-spacing:-1px; font-weight:bold}*/

#largecaption .captionContent { padding:5px;}


/*#largecaption .captionShine
{ background:url('images/interface/bigshine.png'); position:absolute; width: 444px; height: 100px; background-position:-150px 0;background-repeat:no-repeat;}*/


#loader { width:150px; height:150px;background-image:url('images/interface/loader.gif'); background-repeat:no-repeat; position:absolute;}

#lazo { width:80px; height:62px;
background-image:url('images/lazo.png');
position:relative;
top: 100px;
left: 1011px;

}

#footer{
width:100%;
background-color:#CC3399;
color:#FFFFFF;
heigth:3px;
text-align:center;
clear:both;
border-radius: 0px 0px 50px 50px;
-moz-border-radius: 0px 0px 50px 50px;
-webkit-border-radius: 0px 0px 50px 50px;
}

[pzin]

No haz hecho mucho caso a lo que te han dicho.

Lo primero es que necesitas que tu contenedor tenga una posición diferente a la de por defecto, que es estática, entonces tu contenedor quedará de esta forma:

Código CSS:

#container {
  position: relative;
  width: 1124px;
  height: 880px; 
  margin: 0 auto;
  margin-top: 0px;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -webkit-box-shadow: -1px -4px 23px 9px rgba(255, 141, 148, 0.77);
  box-shadow: -1px -4px 23px 9px rgba(255, 141, 148, 0.77);
}
 

Realmente es sólo añadir la posición relativa.

Luego, tu div#lazo tiene que tener una posición absoluta y especificar dónde lo quieres exactamente:

Código CSS:

#lazo {
  position: absolute;
  top: 100px;
  right: -40px;
  width: 80px;
  height: 62px;
  background-image: url('images/lazo.png');
}
 

Esto de arriba quedaría en el archivo styles.css en la linea #159. Lo comento porque en la linea #55 del mismo archivo tienes esto, que deberías de eliminar:

Código CSS:

#lazo {
  background-image: url('images/lazo.png');
  position: absolute;
  top: 433px;
  left: 444px;
}
 

[pitufoweb]

Tal parece que no le has aplicado los cambios a la web...El CSS que muestras aquí, no es igual que el de la web.



Saludos

[Tonimn]

Sí, el de la web está por actualizar.

Muchísimas gracias por vuestra ayuda.
Se ve muy fácil, no entiendo cómo me he liado tanto. Vuelvo a repasarlo todo bien porque de lo que se trata es de entenderlo y repito que muchísimas gracias.
Lo marco como solucionado.