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>
Related
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 have put a banner at the top of my website and I have tried to add a hyperlink to the whole div as follows:
<div id="banner" onclick="location.href='http://www.heavenlygardens.org.uk/';" style="cursor: pointer;">
It doesn't work but you can see it here: http://www.heavenlygardens.org.uk/maps/6/index3_new.html
Any ideas?
To achieve expected result,use below option
1.Stack banner front using z-index:9999
<div id="banner" onclick="location.href='http://www.heavenlygardens.org.uk/';" style="cursor: pointer;z-index:9999">
This works for me:
<div onclick="location.href='http://www.google.com/';" style="cursor:pointer;">
<img src="//path-to-image.jpg" alt="description of image" />
</div>
However, unless you have a good reason for doing this in JavaScript, plain HTML would be a better option.
<a href="http://www.google.com">
<img src="//path-to-image" alt="description of image"/>
</a>
I've coded http://www.meghanbustardphotography.com/home/ and have linked each image to a different page (html code below). However, only the first link in each row is functioning. How can I fix this?
<div class="row" class="aligncenter">
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/09/colin-karlee-abbotsford-backyard-wedding/">
<div id="colinkarlee"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/09/andrew-rebecca-whytecliff-park-engagement/">
<div id="andrewrebecca"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/05/justin-hilary-south-bonson-wedding-2/">
<div id="justinhilary"></div>
</a>
</div>
<div class="row" class="aligncenter">
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/07/greg-amanda-beach-grove-wedding/">
<div id="gregamanda"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/10/cory-nicole-fort-langley-little-white-house-wedding/">
<div id="corynicole"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2013/09/mike-renae-whonnock-lake-portraits/">
<div id="mikerenae"></div>
</a>
</div>
<div class="row" class="aligncenter">
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/08/david-gastown-portraits/">
<div id="david"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/09/brent-stephanie/">
<div id="brentstephanie"></div>
</a>
<a target="_blank" href="http://www.meghanbustardphotography.com/blog/2014/08/sean-brittany-langley-golf-centre-wedding/">
<div id="seanbrittany"></div>
</a>
</div>
By taking a look at your real page, only 1st column has < div > inside < a >< /a >
<a href="http://www.meghanbustardphotography.com/blog/2014/09/colin-karlee-abbotsford-backyard-wedding/" target="_blank">
<div id="colinkarlee"></div>
</a>
For 2nd and 3 column, I see the < div >(s) are outside of < a >< /a >. That's the reason why they are not clickable
<div id="andrewrebecca"></div>
<div id="justinhilary"></div>
Put <div id == ... >
INTO <a target .. /a>
I did it and the links worked after that.
I can provide pictures if you don't know what I mean
You have a bunch of <p> links in your view page source code that do not have closing </p> tags associated with them. Try taking those out and see if that helps.
Also, check out the order of the <a> and <div> tags in your actual code. They're not matching what you pasted in your question.
I think it might wordpress not processing/showing your HTML directly. Try these:
https://wordpress.org/plugins/insert-php/
https://wordpress.org/plugins/allow-php-in-posts-and-pages/
I have the following code.
I cannot understand why after the image (videoCmera_icon.png) it puts and underscore.
I find that this happens only when I have
style="display:inline;
Here is the code:
<div id='HomeVideo1' style="display:inline;">
<a href="#">
<img src="images/videoCamera_icon.png" border="0">
</a>
<a href="#" style="text-decoration: none">
<span class="text3">View Video</span>
</a>
</div>
Inline elements will respect whitespace between their child elements. So the whitespace between the <img> and the closing </a> tag shows up as a space (with an underline because it's part of a link).
Removing the whitespace between the <img> and its <a> tags helps:
<div id='HomeVideo1' style="display:inline;">
<img src="images/videoCamera_icon.png" border="0" />
<span class="text3">View Video</span>
</div>
http://jsfiddle.net/5abbx/
I have an instance of CKEditor running to edit small parts of a website. The original HTML is:
<div class="slide slideleft">
<a href="#" class="slidelefta">
<img src="img/left.png" alt="previous" />
</a>
</div>
<div class="slide slidemid noauto" style="height: auto; text-align: center;">
<a href="#" class="sliderighta">
<img src="img/main_item.png" alt="item" />
</a>
</div>
<div class="slide slideright">
<a href="#" class="sliderighta">
<img src="img/right.png" alt="next" />
</a>
</div>
now, when I load it into CKEdit (inside a <textarea>, all correctly encoded with PHP's htmlspecialchars() method), it replaces all my carefully crafted DIVs and styles with the following:
<p><img alt="previous" src="img/left.png" /></p>
<p><img alt="burg.ring1" src="img/main_item.png" /></p>
<p><img alt="next" src="img/right.png" /></p>
which of course totally ruins the page's layout. Can CKEditor somehow be set to not do that?
Thank you!
Since CKEditor 4.1 the Advanced Content Filter feature is enabled. You need to configure it in order to have your HTML passing the validation. See my previous answer here: CKEditor strips inline attributes.