I am sending a html built email body..
Is there a way to display an alternate text while the images are not yet loaded?
I tried overlapping two divs with img and text, it is working but the problem is that the broken-image icon is showing.
<div style="width:100%;min-height:50px!important;text-align:center;background-color:#eee;border-bottom:solid 2px #aaa">
<div style="min-height:10px"> </div>
<div style="min-height:30px">
<div style='width:200px;margin:0 auto;'>
<a href="http://google.com" target="_blank">
<div style='position:relative;'>
<div style='position:absolute; height:30px;width:200px;z-index:1000;'>
<img height="30" width="200" alt="View Presentation" src="http://www.clker.com/cliparts/X/1/Q/v/b/2/green-button.svg">
</div>
<div style='position:absolute;height:30px;width:200px;background-color:#EEE;'>
Click here to view
</div>
</div>
</a>
</div>
</div>
<div style="min-height:10px"> </div>
</div>
Kindly see my work here..
http://jsfiddle.net/msvillanueva/aYuAd/1/
This jQuery plugin can help you
http://www.appelsiini.net/projects/lazyload
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.
Related
Helle, I am making a website. This is a project for my studies. Since I haven't studied java script yet, I wanted to make a carousel in html en css only. This one works well except that when I press the right/left chevrons, the page scrolls down. I couldn't find where the problem was in my code.
My teacher asked me to come and ask you the question.
I therefore cometo ask you for help in order to find the solution.
Many thanks in advance.
Have a good day.
<body>
<div id="conteItemsCarrusel">
<div class="itemCarousel"id="itemCarousel-1">
<div class="carousel"id="acarrusel-1">
<img src="./image/cuisinier.jpeg" alt="itemCarousel-1">
</div>
<div class="fleche">
<a href="#itemCarousel-3">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-2">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-2">
<div class="carousel"id="acarrusel-2">
<img src="./image/photojpgd.jpg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-1">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-3">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-3">
<div class="carousel"id="acarrusel-3">
<img src="./image/serveur.jpeg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-2">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-1">
<div class="droite">
»
</div>
</a>
</div>
</div>
</div>
</body>
WhyMy page scrolls when I click on the chevrons and I don't know where is the problem in my code
The point of href="#foo" is to link to an element on the page and scroll directly do it.
You are presumably (you didn't include your CSS in your question) using :target to style that element. :target is designed so you can add additional styling to the element to draw more attention to it that it would get from just being at the top of the screen.
You appear to be trying to get the styling of the element linked to element without triggering the primary effect of linking to it.
You can't do that.
If you want a carousel, then use JavaScript. It's the right tool for the job.
All that it displays when I click on it is black background.
Here is my code:
<div class="cbp-item art illustration">
<a class="cbp-caption cbp-lightbox" data-title="Abstract Art Museum" href="https://www.youtube.com/embed/watch?v=LnwPD69Fbh4"> <div class="cbp-caption-defaultWrap">
<img src="assets/images/portfolio/masonry/art.jpg" class="portfolio-thumbnail" alt="" >
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">3D Abstract Museum</div>
<div class="cbp-l-caption-desc">Video</div>
</div>
</div>
</div>
</a>
</div>
I tried to change URL and use embed code. I also tried to research more on it but it kept on showing lightbox for images with code that had modal involved in it. I have seen this code work before without the use of modal but I feel like something else is missing.
I am trying to upload an image using the img tag. But even linking the image correctly it is not rendering on the screen
Here is the code.
<div class="row">
<div class="col-6">
<h2>MUSEUM OF CANDY</h2>
</div>
<div class="col-6">
<img class=" img-fluid" src="imgs/hand2.png" alt="handimage">
</div>
</div>
</section>
Your source location might not be accurately defined. Please check through it once. If your alt information is visible. Then your problem is in source location.
there is a space in the class at the beginning of "; maybe that's the problem :)
The image on my webpage is not properly aligned with the video for some reason. It looks like this: This is the image on my webpage
When I try to shift the picture up, it still does not align properly and jsut shifts everything up. How can I properly align the image and the video.
Here is my code so far:
<div class="col-md-9">
<div id="page-1" class= "page one">
<h2 class="heading">Projects</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">Feb 2020</span>
<h2>CLARITY - NSBE Hacks UofT</h2>
<span class="position"> First place winner and winner of best Google hack</span>
<p> Clarity is a web app catered towards children that struggle with autism. Children with autism have trouble recognising the emotions of other people. Our application listens peoples speech and analyzes the emotions being conveyed in said speech. After the analysis, recommendations are given to the user on how to navigate the situation, in an attempt to make navigating social situations easier. </p>
<img src="/static/images/clarity.png" height = 200px width = 250px>
<video width="300" height="300" controls>
<source src= "/static/video.mp4" type ="video/mp4">
</div>
</div>
Try encapsulating the image and video within their own Bootstrap div. Something like this:
<div class="md-col-6">
<img src="/static/images/clarity.png" height = 200px width = 250px>
</div>
<div class="md-col-6">
<video width="300" height="300" controls>
</div>
This will force the image and video to remain in two columns, and most likely line up with each other. I'd also recommend inspecting the element to see if any padding or margins are causing the misalignment.
The images on my pen http://codepen.io/niffyy/pen/GNzpNW?editors=1100 wont load on a mobile screen.
<div class="row">
<div class="container" id="third">
<p class="para2"> Portfolio </p>
<div class="col-xs-6 col-md-6">
<div><img src="http://i.imgur.com/YiCHp7M.jpg" alt="screenshot"><h5>Simple Nelson Mandela Tribute Page</h5>
</div>
<div><img src="http://i.imgur.com/mMJs4kq.png" alt="screenshot3"><h5> Coming soon!</h5>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div><img src="http://i.imgur.com/z5PtrqQ.jpg" alt="screenshot1"><h5> Portfolio Page</h5>
</div>
<div><img src="http://i.imgur.com/mMJs4kq.png" alt="screenshot2"><h5> Coming soon!</h5>
</div>
</div>
</div>
</div>
<div class="col-xs-6"> <img class="img-responsive" id="me" alt="a picture of me" src="http://i.imgur.com/EWx1Z9x.jpg">
</div>
<--THE CSS-->
#me{
width:100%;
height: auto;
margin-top:45px;
margin-bottom:30px;
border-style: solid;
border-width:5px;
border-radius:20px;
border-color:#FF33CC;
}
I tried changing the format from png to jpeg and also resizing the image before uploading it but it still does not work This also goes for the thumbnails on the website and I am unsure why. I checked the code for mistakes but haven't seen where I am going wrong. It shows fine on desk top.
I was using imgur.com to host my images then hot linking to my page. This is not in their terms of use which is why the images were not loading on my page. In future if anyone has the same issue as me, check that hotlinking is allowed for the image you are trying to use for your page. I switched hosting site to another and now my images work fine.
From the Imgur terms of use:
'We allow hotlinking on forums, but hotlinked images cannot be used as
content for a website, including blog posts, avatars, site elements,
and advertising. You can read our terms of service for more info