This question already has answers here:
How to overlay images
(11 answers)
Closed 2 years ago.
I need help placing my items. I'm just starting out so I need explanations. What will seem obvious to you, will not necessarily be so for me :) I have a header that I want to improve.
I would like the two images on the right to be superimposed, ie the "reserve" button is above the image.
On the other hand, I would like to get to center the middle image.
I know the styles are overlapping and the changes I tried through the chrome console are not working. I can't impose the style I want and I can't necessarily find the style that blocks me.
If it's possible for you to give me some advice that would be great. Thank you.
The link is : https://hotel-restaurant-la-borie.fr/
HEADER
<div class="site-branding">
<div class="logo-main" style="text-align:left;" >
<h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>
<a href="https://hotel-restaurant-la-borie.fr/" rel="home" class="site-logo"><img id="desktop-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
<img id="retina-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
</a>
<div class="tel-header" >Tel. +33 (0 53 28 97 60</div>
</div>
<div class="form-reservation">
<div class="logo-logis" >
<a href="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4" target="_blank" rel="noopener noreferrer">
<img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg" alt="lien de réservation" style="width: 400px !important;">
</a>
</div>
<div class="group-input" >
<div class="logo-logis" >
<a href="https://www.logishotels.com/fr/hotel/-254254?partid=568&layout=search&ref=r" target="_blank" rel="noopener noreferrer">
<img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/reservez-1.png" alt="lien de réservation" width="112" height="25"></a>
<a href="https://www.logishotels.com/fr/hotel/hotel-la-borie-254254?PARTID=1012&gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB" target="_blank">
<img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"></a>
</div>
</div>
</div>
</div>
If I addtransform: translateX(calc(100% + 10px)) to the "reservez" button it gives me :
I wanted to use the div containing both images and links as you can see on my code and put display : block but it doesn"t work to have it one above the other... The images are included in a link so if I change only the style of the img the stays at his place.
sorry, i should explain better, here is an example of what im saying
<div class="site-branding">
<div class="logo-main" style="text-align:left;" >
<h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>
<a href="https://hotel-restaurant-la-borie.fr/" rel="home" class="site-logo"><img id="desktop-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
<img id="retina-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
</a>
<div class="tel-header" >Tel. +33 (0 53 28 97 60</div>
</div>
<div class="form-reservation">
<div class="logo-logis" >
<a href="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4" target="_blank" rel="noopener noreferrer">
<img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg" alt="lien de réservation" style="width: 400px !important;">
</a>
</div>
<div class="group-input" >
<div class="logo-logis" style="position:relative;height:120px">
<a href="https://www.logishotels.com/fr/hotel/-254254?partid=568&layout=search&ref=r" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:0;left:0;z-index:1">
<img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/reservez-1.png" alt="lien de réservation" width="112" height="25">
</a>
<a href="https://www.logishotels.com/fr/hotel/hotel-la-borie-254254?PARTID=1012&gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB" target="_blank" style="position:absolute;top:0;left:0">
<img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png" >
</a>
</div>
</div>
</div>
</div>
you could translate the image by using css
img{
transform: translateX(calc(100% + 10px))
}
the code move the image to right by 100% + 10px for example
or try to put the two images in the same tag then add to the top reservez button:
bottom:0
z-index:1
this will put it on the bottom and front
Related
This question already has answers here:
place elements with multiple styles overlap [duplicate]
(2 answers)
Closed 2 years ago.
I am looking to update a site. The goal is to put the "reservez" button above the image "logis" My problem is that whatever changes I make I have another style that takes over and my changes do not take effect. So I'm a little desperate and I don't know how to move the 'reservez' element above the image.
Could you help me, I'm just starting out and what may seem obvious to you may not be obvious to me.
Thanks in advance.
What I have :
Actual Images
The code :
<div class="site-branding">
<div class="logo-main" style="text-align: left">
<h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>
<a href="https://hotel-restaurant-borie.fr/" rel="home" class="site-logo"
><img
id="desktop-logo"
src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
alt="Hotel LOGIS LA BORIE en Périgord noir"
width="988"
height="614"
/>
<img
id="retina-logo"
src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
alt="Hotel LOGIS LA BORIE en Périgord noir"
width="988"
height="614"
/>
</a>
<div class="tel-header">Tel. +33 (0 53 28 97 60</div>
</div>
<div class="form-reservation">
<div class="logo-logis">
<a
href="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4"
target="_blank"
rel="noopener noreferrer"
>
<img
src="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg"
alt="lien de réservation"
style="width: 400px !important"
/>
</a>
</div>
<div class="group-input">
<div class="logo-logis">
<a
href="https://www.logishotels.com/fr/hotel/-254254?partid=568&layout=search&ref=r"
target="_blank"
rel="noopener noreferrer"
>
<img
style="width: 105px !important"
src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/reservez-1.png"
alt="lien de réservation"
width="112"
height="25"
/></a>
<a
href="https://www.logishotels.com/fr/hotel/hotel-borie-254254?PARTID=1012&gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB"
target="_blank"
>
<img
style="width: 105px !important"
src="https://hotel-restaurant-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"
/></a>
</div>
</div>
</div>
</div>
What I want is :
Final result I want
Try below CSS in your Style
.logo-logis {
display: flex;
flex-direction: column;
}
I've just tried the CSS code written by #ongtiffany on codepen.io about lightboxes.
The code is great, but if I use it on a standalone test (follows)
<body>
<a class="lightbox" href="#first">
<img src="https://drive.google.com/uc?export=view&id=1cKXuGQzX3t65NoYEKfuI4wBHwxUM9wjH"/>
</a>
<div class="lightbox-target" id="first">
<img src="https://drive.google.com/uc?export=view&id=1cKXuGQzX3t65NoYEKfuI4wBHwxUM9wjH"/>
<a class="lightbox-close" href="#"></a>
</div>
<a class="lightbox" href="#second">
<img src="https://drive.google.com/uc?export=view&id=1kLe9YXiM2XdgwKkATwkhfk6kzdnKIefi"/>
</a>
<div class="lightbox-target" id="second">
<img src="https://drive.google.com/uc?export=view&id=1kLe9YXiM2XdgwKkATwkhfk6kzdnKIefi"/>
<a class="lightbox-close" href="#"></a>
</div>
</body>
</html>
It leaves me a weird "_" symbol between the two pictures.
Can you see it? Any advice to eliminate it?
And one more question? What could it be a way to get a window closing by pressing the "ESC" key?
Try this
a.lightbox{
text-decoration:none;
}
OUTPUT
I would like my div be clickable. but I have tested multi ways that is possible, but it doesn't work fine :
<a href="https://www.telegram.me/shadyab_deal">
<div id="mob_link" class="home_right_banner_mob">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</div>
</a>
Your html is wrong Please used to this
and define your a tag display inline-block;
a{display:inline-block;vertical-align:top;}
<a href="https://www.telegram.me/shadyab_deal">
<div id="mob_link" class="home_right_banner_mob">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</div>
</a>
2nd option is your can used to this valid HTML
#mob_link a{display:block;}
<div id="mob_link" class="home_right_banner_mob">
<a href="https://www.telegram.me/shadyab_deal">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</a>
</div>
Wrapping block level elements with links is allowed in HTML 5. Just do this.
<a href="https://www.telegram.me/shadyab_deal">
<div id="mob_link" class="home_right_banner_mob">
<img width="360px" height="130px" src="http://www.shadyab.com/assests/images/ic_mob_telegram.jpg"/>
</div>
</a>
I'm using Wordpress and I'm having some trouble. I'm trying to put 2 image links next to each other but I don't know how. Here's my code:
<strong>Estado de México:</strong>
<div class="fancybox-hidden" style="display: none;">
<div id="fancyboxID-16" class="hentry" style="width: 600px; height: 600px;">
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d3757.9045747875743!2d-99.090586!3d19.631377!3m2!1i1024!2i768!4f13.1!2m1!1sAv+Jos%C3%A9+L%C3%B3pez+Portillo+La+Magdalena+2+55715+San+Francisco+Coacalco%2C+M%C3%A9x.%2C+M%C3%A9xico!5e0!3m2!1ses!2sus!4v1427995160701" width="600" height="450" frameborder="0"></iframe>
<div>
Vía José López Portillo 128, Local 16, Plaza Los Arcos, Coacalco, Edo. de México
<a href="https://www.facebook.com/TheBeerCompanyAgs" target="_blank">
<img src="/wp-content/uploads/2015/04/face.jpg" alt="" />
</a>
<a href="https://twitter.com/tbc_coacalco" target="_blank">
<img src="/wp-content/uploads/2015/04/tw.jpg" alt="" />
</a>
</div>
</div><!--/id="fancyboxID-16"-->
</div><!--/id="fancybox-hidden"-->
<a class="fancybox-inline" href="#fancyboxID-16">Coacalco</a>
You can see how this looks here (choose Coacalco): http://thebeercompany.albeh.com.mx/sucursales/
I basically want the Twitter button next to the FB one, but I can't.
I'm having a problem with a page. Basically what happens is that the code below in firefox it doesn't display the images, in Chrome it shows the images, but sometimes it doesn't show anything.
The code below should display like an image of a product and below of it, show the name of the product, for example with this:
<div class="bloque_prod">
<a class="texto_bloque_prod" href="<? echo (ROOT.'/respiratoria"')?>"><img style="display: block !important; margin: auto;" src="mw\imagen\productos\categorias\respiratoria.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="<? echo (ROOT.'/respiratoria"')?>">Protección Respiratoria</a></div>
</div>
It should show the "respiratoria.gif" and below it show the text "Protección Respiratoria". And all the products in the code below show be display like in a table.
<div class="cont_menu_izq">
<!-- <a name="Safety" id="ramas" style="color:#D82C17;">Safety:</a> -->
<div class="mini_space"></div>
<!-- LINEA 1 -->
<div class="linea_prod">
<!-- Producto -->
<div class="bloque_prod">
<a class="texto_bloque_prod" href="http://www.elexsa.com/P/respiratoria""><img style="display: block !important; margin: auto;" src="mw\imagen\productos\categorias\respiratoria.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="http://www.elexsa.com/P/respiratoria"">Protección Respiratoria</a></div>
</div>
<!--Fin producto-->
<div class="espacio_bloque_prod"></div>
<!--Producto-->
<div class="bloque_prod">
<a class="texto_bloque_prod" href="http://www.elexsa.com/P/caidas""><img style="display: block; margin: auto;" src="mw\imagen\productos\categorias\caidas.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="http://www.elexsa.com/P/caidas"">Protección Contra Caídas</a></div>
</div>
<!--Fin producto-->
<div class="espacio_bloque_prod"></div>
<!--Producto-->
<div class="bloque_prod">
<a class="texto_bloque_prod" href="http://www.elexsa.com/P/guantes""><img style="display: block; margin: auto;" src="mw\imagen\productos\categorias\guantes.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="http://www.elexsa.com/P/guantes"">Protección para Manos</a></div>
</div>
<!--Fin producto-->
<div class="espacio_bloque_prod"></div>
<!--Producto-->
<div class="bloque_prod">
<a class="texto_bloque_prod" href="http://www.elexsa.com/P/visual""><img style="display: block; margin: auto;" src="mw\imagen\productos\categorias\visual.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="http://www.elexsa.com/P/visual"">Protección Visual</a></div>
</div>
<!--Fin producto-->
</div>
In addition to the other answers posted, I see doubled double quotes on some attributes:
href="http://www.elexsa.com/P/visual"">
http://validator.w3.org/
The W3C Validator service is your friend in cases like this.
Edit: after seeing your PHP code, the aforementioned error is caused by this line:
BAD
<a class="texto_bloque_prod" href="<? echo (ROOT.'/respiratoria"')?>">
GOOD
<a class="texto_bloque_prod" href="<? echo (ROOT.'/respiratoria')?>">
Your src attributes on your image tags have backslashes. They should be using forward slashes. Some browsers handle this for you and others don't.
You have your slashes backwards on your image src properties. Some browsers have tolerence for this, and others not. Either way, it's wrong. :)
src="mw\imagen\productos\categorias\visual.gif"
Should be
src="mw/imagen/productos/categorias/visual.gif"
...for all of your src paths.