I have added fancy box to my gallery of images, and by default there is space on the left and right of each image, but none on top and bottom. I've tried to add padding by using CSS but nothing changes.
This is what I did:
#fancy {
padding-top: 25px;
padding-bottom: 25px;
}
This is the HTML:
<div id="fancy" class="container ">
<div class="page-title">
<h1>Church <span>Visit</span></h1>
</div>
<a rel="gallery" title="Takoosh Hovsepian speaking at Skyline Church with Jim Garlow & Dr. James Dobson" class="fancybox" href="images/gallery/church_visit/770 x 510_pic2.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic2.jpg" alt=""/></a>
<a rel="gallery" title="Leading worship at Calvary Church Pennsylvania " class="fancybox" href="images/gallery/church_visit/770 x 510_pic3.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic3.jpg" alt=""/></a>
<a rel="gallery" title="Joseph Hovsepian speaking at Downey, CA Christian school" class="fancybox" href="images/gallery/church_visit/770 x 510_pic4.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic4.jpg" alt=""/></a>
<a rel="gallery" title="Andre Hovsepian speaking at youth conference" class="fancybox" href="images/gallery/church_visit/770 x 510_pic6.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic6.jpg" alt=""/></a>
<a rel="gallery" title="Takoosh Hovsepian speaking at Open Doors women conference in Netherlands" class="fancybox" href="images/gallery/church_visit/770 x 510_pic5.jpg"><img src="images/gallery/church_visit/thumbs/220x132_pic5.jpg" alt=""/></a>
</div>
I've also tried to change the padding on jquery.fancybox.css , and still nothing changes. I am not sure if I am adding padding in the wrong place, or the issue is something else.
Here is my gallery
Try this:
#fancy{
margin-top: 25px;
margin-bottom: 25px;
}
Related
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
I am trying to reduce the width of a piece of text under an image that only takes up about 50% of the screen, so I've tried using style = width:50% but for some reason, the width stays the same. Here is the output I get. I want it so that the caption is neatly contained under the image. What am I doing wrong?
My code:
<div class="text-center">
<h1>Evelyn Lauder </h1>
<h5 class="font-italic"> 1936-2011</h5>
<img src=h ttp://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg alt="Evelyn Lauder" </img> <br>
</div>
<div style= width: 50%; class="text-center font-italic">
<h7> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
</div>
Your error would be revealed if you had used a validator.
<div style = width: 50%; class = "text-center font-italic">
Quotes around attribute values are required if the attribute value contains space characters.
<div style="width: 50%;" class="text-center font-italic">
NB: You have a number of other errors that the validator will point you towards.
Follow this piece of code.
<div class = "text-center">
<h1 >Evelyn Lauder </h1>
<h5 class = "font-italic" > 1936-2011</h5>
<img src = "http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt = "Evelyn Lauder"> <br>
<div style="width: 50%;margin: 0 auto;"><h7 > "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7> </div>
</div>
Add style to div. Hope it helps.!
I think you are looking for this.
Apply display:inline-block to your caption text. That's it :)
<div class="text-center">
<h1>Evelyn Lauder </h1>
<h5 class="font-italic"> 1936-2011</h5>
<img src=http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg alt="Evelyn Lauder" </img> <br>
</div>
<h7 style="width:50%; display:inline-block; font-style:italic;" class="text-center"> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
I have a problem with only ONE picture in a list of pictures, when picture is showing up in "offline mode" but not after uploading to the hosting. I used same code for every article or picture on the site. Every picture is made and saved in the same way as others. I'm completely at a loss (or blind) so I decided to ask you. Thanks for every help.
Here is the used code:
<div class="row">
<div class="6u">
<section class="special">
<a target="_blank" href="pdf/minidis.pdf" class="image fit"><img src="images/minidis.jpg" alt="" /></a>
<h3>MINIDIS ADXpert</h3>
<p>Přenosný a automatický destilační přístroj</p>
<ul class="actions">
<li><a target="_blank" href="pdf/minidis.pdf" class="icon fa fa-file-pdf-o major small"></a></li>
</ul>
</section>
</div>
<div class="6u">
<section class="special">
<a target="_blank" href="pdf/ad6.pdf" class="image fit"><img src="images/ad6.jpg" alt="" /></a>
<h3>AD-6</h3>
<p>Automatický destilační přístroj pro stanovení destilační křivky</p>
<ul class="actions">
<li id="skok3"><a target="_blank" href="pdf/ad6.pdf" class="icon fa fa-file-pdf-o major small"></a></li>
</ul>
</section>
</div>
U can see a problem here:
Website
It's about article named "AD-6"
Remove this inline style from your image tag{display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 0px 0px;}
Solved
Image contains "ad" in its name and "ad-blocker" blocks this image as ad.
Thank you guys for help!
http://www.capitalregionceremonies.net/
On the bottom of the front-page, i'd like to put the weddingwire award block in the center of the 2 other badges but I can't seem to find a way. Any help would be appreciated! Thanks.
Your markup seems a bit odd, I'm not sure if you are entering code in your CMS or the source files. Regardless, you should be able to attain the layout you want with this sort of code structure below.
If you are not familiar with CSS, and have no idea how to add the first block of code, you can edit it at Appearance > Customize > CSS in WordPress (reference), or you could just add them inline to your elements instead (not recommended but may be easier depending on your abilities).
.column-left {
float: left;
width: 33%;
}
.column-right {
float: right;
text-align: right;
width: 33%;
}
.column-center {
display: inline-block;
text-align: center;
width: 33%;
}
<div class="column-left">
<a href="http://www.theknot.com/marketplace/reverend-ronald-hunt-capital-region-ceremonies-rotterdam-ny-550208?utm_source=vendor_website&utm_medium=banner&utm_term=6d82f360-5321-42a9-bd35-a16c012a8cd4&utm_campaign=vendor_badge_assets">
<img src="http://www.capitalregionceremonies.net/wp-content/uploads/2016/01/ASI_2-e1452633825381.png" alt="As Seen in The Knot Magazine" width="75" height="150" border="0">
</a>
</div>
<div class="column-center">
<div class="ww-bca-2014 ww-reset">
<a class="ww-bca-top" title="Weddings, Wedding Venues" href="http://www.weddingwire.com">
<br>
</a>
<a class="ww-bca-top" href="http://www.weddingwire.com">
<img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-top.png" alt="Weddings, Wedding Venues" width="124" height="33">
</a>
<a class="ww-bca-bottom" title="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html">
<br>
</a>
<a class="ww-bca-bottom" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html">
<img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-bottom.png" alt="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" width="124" height="92">
</a>
<p></p>
<div class="ww-clear"></div>
</div>
</div>
<div class="column-right">
<a href="http://www.celebrantinstitute.org" target="_blank">
<img src="http://www.celebrantinstitute.org/logo/life-cycleLogo-5-2010.gif" alt="Celebrant USA Foundation and Institute" border="0">
</a>
</div>
I haven't tested it in all browsers but this should do it. Just wrap the elements you are trying to line up in a div
<div>
<div style="float: left">
<a style="" href="http://www.theknot.com/marketplace/reverend-ronald-hunt-capital-region-ceremonies-rotterdam-ny-550208?utm_source=vendor_website&utm_medium=banner&utm_term=6d82f360-5321-42a9-bd35-a16c012a8cd4&utm_campaign=vendor_badge_assets"><img src="http://www.capitalregionceremonies.net/wp-content/uploads/2016/01/ASI_2-e1452633825381.png" alt="As Seen in The Knot Magazine" width="75" height="150" border="0"></a>
</div>
<div style="float: right;">
<img src="http://www.celebrantinstitute.org/logo/life-cycleLogo-5-2010.gif" alt="Celebrant USA Foundation and Institute" border="0">
</div>
<div class="ww-bca-2014" style="">
<a class="ww-bca-top" title="Weddings, Wedding Venues" href="http://www.weddingwire.com"><br>
</a>
<a class="ww-bca-top" href="http://www.weddingwire.com"><img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-top.png" alt="Weddings, Wedding Venues" width="124" height="33"></a><a class="ww-bca-bottom" title="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html"><br>
</a>
<a class="ww-bca-bottom" href="http://www.weddingwire.com/reviews/celebrant-ronald-hunt-rotterdam/402496f5dd9397b7.html"><img class="alignnone" src="//www.weddingwire.com/assets/badges/BCA-2014/BCA_2014-badge-bottom.png" alt="Celebrant Ronald Hunt Reviews, Best Wedding Officiants in Albany, Saratoga Springs, Adirondacks - 2014 Couples' Choice Award Winner" width="124" height="92"></a>
<p></p>
</div>
</div>
Here is my jsfiddle: http://jsfiddle.net/4478bs0L/
I need to place download button underneath of image at left side.
For that, here is my html:
<div><img src="9780143332497.jpg" alt="">
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
If i add caption class to the button and set text-align:center; it didn't working.
Can anyone please help me? Thanks in advance.
Option1: Add a <br/> between both images.[Apparently, your button is also an image]. Sometimes the simplest answer is the easiest.
<img src="image1" alt="">
<br/>
<a href="image2" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
Option 2: enclose your button inside a <div> [ block element]
<div>
<a href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" style="display:block"alt="Download"/>
</a>
</div>
Option 3: add inline css property display:block to the anchor tag containing your button[inline css would override the myButton class property which is making it appear on the same line]
<a href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" style="display:block;width:60px" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
Cheers!!
just use a <br> after the image and before the button
<div><img src="9780143332497.jpg" alt="">
<br>
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
FIDDLE DEMO
Yes I did it .... implement this code...
<div class="wrap">
<div class="london-olympic">
<h1>Playng To Win</h1>
<span class="span">Author: Saina Nehwal.</span>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_jumbo_share"></div>
<div><img src="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" alt="">
<a style="position:absolute; margin-left: -140px; top: 450px;" href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
</div>
<Br><br>
<p>. . . being a player from India defines who I am. When I play, it's for my parents, my coach, and my country.'</p>
<p>Meet Saina Nehwal-India's star badminton player and World Number 4, Padma Shri and Khel Ratna awardee, the girl who brought laurels to India by winning an Olympic medal at the age of twenty-two. In this fascinating memoir, she talks about her childhood and growing-up years; her relationship with the most important people in her life; the ups and downs of her celebrated career, from district level wins to the Olympics; and the sacrifices needed to succeed in any sport. She also reveals little-known facts and offers a peek into her many avatars-daughter, sister, student, and the regular girl behind the badminton prodigy.</p>
<p>Find out what a typical day in Saina's life is like-rigorous training, a strict diet, and no parties or sleepovers. But it's not all work and no play; Saina loves to shop, eat ice cream (post wins only), and play games on her iPad!</p>
<p>With candid photographs and badminton tips from the pro herself, this book showcases the making of a badminton champ-in her own words.</p>
</div>
</div>
Use this code
<div>
<img src="9780143332497.jpg" alt="">
</div>
<div>
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
</div>