I am editing a WordPress widget's HTML.
I copied directly from the original code adding social media links and 1 additional social media section, copied from the first section, and changed only the names and links.
Whenever I checked it I get the following errors:
End of file seen and there were open elements
Unclosed element
See enclosed image.
HTML Errors
Here is the code ( WordPress widget HTML do not require; Doctype, title, header, etc ):
<div class="ce-team">
<figure>
<img src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png" alt="team">
</figure>
<h3>
Anthony Gigante
</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome incredible obstacles, succeeded, and at the same time inspiring others.
</p>
<div class="team-socials">
<i class="cl-icon-facebook"></i><i class="cl-icon-instagram"></i>
<i class="cl-icon-instagram"></i><i class="cl-icon-youtube"></i>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i></a>
</div>
I'm sure I'm missing something obvious. Your help is greatly appreciated.
Thank you!
Paula
The problem is that the first DIV is missing closing, Putting the closing DIV tag at the end of the code should fix the problem.
<div class="ce-team">
<figure>
<img
src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png"
alt="team"
/>
</figure>
<h3>Anthony Gigante</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome
incredible obstacles, succeeded, and at the same time inspiring others.
</p>
<div class="team-socials">
<a href=" https://ourfightingspirit.com/staff/anthony-gigante">
<i class="cl-icon-facebook"></i
></a>
<a href="Facebook—https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="Instagram—https://www.instagram.com/ourfightingsprit/">
<i class="cl-icon-youtube"></i
></a>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i
></a>
</div>
</div>
But closing the DIV is a bit confusing, as there are two possibilities to close the div tag. If the first option doesn't work well, try the following code. This closes the DIV before the second DIV
<div class="ce-team">
<figure>
<img
src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png"
alt="team"
/>
</figure>
<h3>Anthony Gigante</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome
incredible obstacles, succeeded, and at the same time inspiring others.
</p>
</div>
<div class="team-socials">
<a href=" https://ourfightingspirit.com/staff/anthony-gigante">
<i class="cl-icon-facebook"></i
></a>
<a href="Facebook—https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="Instagram—https://www.instagram.com/ourfightingsprit/">
<i class="cl-icon-youtube"></i
></a>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i
></a>
</div>
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
Recently I ran into a weird bug where characters get shuffled/mixed when the page is loaded, not everytime but once every few loads you will see it. Kindof like a fouc except it only goes away on reload. I was wondering if someone has ever seen something like this before and can explain to me why this happens and how to solve it or prevent it from happening. For so far I couldn't reproduce this error in any browser but the original samsung browser.
The first word in the image should be ' contact', second one 'inschrijven'.
HTML:
<div class="cta-widget">
<a class="cta-link" href="#">
<i class="fa fa-phone"></i>
<p>Contact</p>
</a>
</div>
<div class="cta-widget">
<a class="cta-link" href="#">
<i class="fa fa-pencil-square-o"></i>
<p>Inschrijven</p>
</a>
</div>
<div class="cta-widget">
<a class="cta-link" href="#">
<i class="fa fa-user"></i>
<p>Team</p>
</a>
</div>
The only css used for just the text is
.c2aArea .cta-link p {
line-height: 1.2em;
margin-bottom: 0;
}
I'm having trouble getting my image link to work when someone presses the picture button, and I'm not sure why. It works on my phone and my computer, but it doesn't work on other people's computer for some reason. Please let me know what I need to do to get this fixed.
Thank you.
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;" target="_top">
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" /> </a></div>
</div>
The code should be like this, you don't need to set target while adding link to mailto, the code should be like this
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;>
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" />
</a>
</div>
The markup of your code is worng. May be it's the problem.
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;" target="_blank">
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" />
</a>
</div>
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!
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/