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.
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;
}
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
Hiya people i was hoping for some help for no reason the controls on chrome do not appear but they do on mozilla and IEcrappycrap do you have any idea about what could do it , i'm using a 360VR player (Bitmovin) dunno if it could have a link but when i take off the bitmovin player embed in a div , the controls works ...
<body onload="Onload()">
<div id="background">
<img id="bg" class="bg" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Bg_m.jpg" style="position:absolute;"/>
<img id="redirection" class="redi" onclick="Redirection()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/btn_1.gif" style="cursor:pointer;position:absolute;"/>
</div>
<div id="container">
<a href="javascript:;" onClick="Bandeau(1);" > <img id="bandeau_top" class="bandeau" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Pub_haut_m.jpg" style="position:absolute;"/></a>
<img id="Fleche_G" class="fleche" onclick="Left()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/fleche_gauche_m.png" style="position:absolute;"/>
<img id="Fleche_D" class="fleche" onclick="Right()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/fleche_droite_m.png" style="position:absolute;"/>
<div class="content">
<div class="player-wrapper">
<div id="playerDiv">
//bitmovinplayerembed here
</div>
</div>
</div>
<iframe name="__bkframe" height="0" width="0" frameborder="0" style="display:none;position:absolute;clip:rect(0px 0px 0px 0px)" src="about:blank"></iframe>
<video id="video1" controls preload="none" onclick="Stop()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/ours.mp4" style="position:absolute;"></video>
<img id="Video_played" class="Video" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/dark.gif" style="position:absolute;"/>
<div id="Choix">
<a href="javascript:;" onClick="Play(1);" > <img id="Vid_1" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette1_produit1_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play(2);" ><img id="Vid_2" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette2_produit2_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play(3);" ><img id="Vid_3" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette3_film_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play(4);" ><img id="Vid_4" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette4_betisier_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play360(360);" ><img id="Vid_5" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette5_360_m.jpg" style="position:absolute;"/></a>
<img id="text_video" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/text360_m.png" style="position:absolute;"/>
</div>
<div id="Jeu_container">
<img id="Jeu_played" class="Jeu" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Jeu_m.jpg" style="visibility:hidden;position:absolute;"/>
<iframe id="iframe" src="http://www.jeubignoel.com/"></iframe>
</div>
<a href="javascript:;" onClick="Bandeau(2);" ><img id="bandeau_bot" class="bandeau" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Pub_bas_m.jpg" style="position:absolute;"/></a>
<p id="mention2">
Big = grand
</p>
<p id="mention">
</p>
<img id="track" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/BlindSpot/Desktop/empty.png" style="position:absolute;">
</div>
The Bitmovin Player explicitly hid Chrome's native video element controls using CSS. Instead of hiding just the one of the used video element, it did this for all video elements on the website. This has been fixed in version 7 of the player, so you should not experience this problem anymore with the latest stable version.
so im designing a website using html, php, all that fun stuff & im trying to make facebook, twitter, youtube & instagram links that will open a new tab and take you to the website. but at the moment the URL is going to localhost/horizonphotography/www.facebook.com instead of opening the new tab and THEN going to www.facebook.com.
heres my HTML
<div class="social">
<a href="www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
<a href="www.twitter.com" target="_blank">
<img border="0" alt="twitter" src="img/twitter.png" width="50" height="50">
</a>
<a href="www.youtube.com" target="_blank">
<img border="0" alt="youtube" src="img/youtube.png" width="50" height="50">
</a>
<a href="www.instagram.com" target="_blank">
<img border="0" alt="instagram" src="img/instagram.png" width="50" height="50">
</a>
</div>
and my css 'if' required.
.social {
position: fixed;
bottom: 0;
right: 7%;
width: 300px;
}
thanks in advance!
Try using a protocol like http:// or // to external links like this :
<a href="http://www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
See this good answer on SO : https://stackoverflow.com/a/8951636/6028607
You need to specify the protocol, or put // at the start of the href attribute. For example:
http://www.youtube.com
Or
//www.youtube.com
Awesome, needed to identify the protocol as suggested. working well now! thanks everyone!
php
<a href='.$row5['url'].'"><img src="../asset/view-as-pdf.jpg"
width="94" height="94" /></a>
html
<center>
<a href="http://tools.com/com/fli7ppdf/K171/157/Kap157_E/files/kap157_en.pdf"">
<img src="asset/view-as-pdf.jpg" height="94" width="94" />
</a>
</center>
after click image, it not open url, but view image. how to fix it
<center><a
href="http://kstools.com/com/flippdf/K11/15/Kap15_E/files/kap15_en.pdf""><a
target="_blank" href="asset/view-as-pdf.jpg"><img
src="asset/view-as-pdf.jpg" height="94" width="94"></a></a></center>
Here you are closing a twice.
Your code should like this ,
<center><img src="asset/view-as-pdf.jpg" height="94" width="94"></center>
HTML
<center>
<a href="http://kstools.com/com/flippdf/K11/15/Kap15_E/files/kap15_en.pdf"">
<img src="asset/view-as-pdf.jpg" height="94" width="94" />
</a>
</center>
Remove anchor tag which has link of the image.