I am trying to make a website for my friend's Graphic Design company.
I keep getting this bug where the <img> and <video> just displays my container without any Images/Video in it just a black box. Not even my alt's?? I've never had this happen before.
I do have quite a lot of stuff going on in my stylesheet; including beizer transformations on the container, would that be a problem as it was working, but I changed the image dimensions.
My question is, how do I debug this/ how do I get it to just display my photos in my container.
Edit: I'm 2nd year CompSci but am new to HTML/CSS
My image and mp4 is in the same directory of my index.html in the img and vids folder:
website/img/Sunburnt.jpg
website/vids/statuspr.mp4
website/index.html
<div class="col project-wrap">
<div class="col__item project">
<div class="project__count"><span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
<a class="project__image noselect" target="_blank" href="#">
<div class="project__image-container plane plane--media">
<!-- The preferred img, mp4s -->
<img src="/img/Sunburnt.jpg" alt="Sunburnt Breakfast Rave" />
<video src="vids/statuspr.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
</div>
</a>
<div class="project__meta">
<h3 class="project__meta-title plane">Canberra Rave Scene</h3>
<div class="project__meta-tags">
<div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
</div>
<div class="reveal"><span>Visuals</span><span>DJ</span>
</div>
</div>
</div>
</div>
</div>
I cant comment so i try as an answer even though its not 100% clear:
Just looking at your code:
you use a / before the img folder only with the image.
If you're not looking at the file from a server, this will give a 404..
debug using F12, and look at network errors or console errors
So I was able to fix this by creating a new container (project__image-container2) which used a less intricate implementation of CSS in my stylesheet.
I also changed up my src from data-src and just including my images and videos in my project. The combination of these two solutions did solve my problem - that I could not display images and videos withing these containers - however, my website now loads said videos and images quite slowly. However that is something I can try and fix later.
<!-- Project 1: Sunburnt Breakfast -->
<div class="section section--work" data-label="Project 01">
<div class="col project-wrap">
<div class="col__item project">
<div class="project__count"> <span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
<a class="project__image noselect" target="_blank" href="website-I-don't-want-the-world-to-know-about">
<div class="project__image-container2 plane">
<video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
<noscript>
<video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
</noscript>
</div>
</a>
<div class="project__meta">
<h3 class="project__meta-title plane">Canberra Rave Scene</h3>
<div class="project__meta-tags">
<div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
</div>
<div class="reveal"><span>Visuals</span><span>DJ</span>
</div>
</div>
</div>
</div>
</div>
<button class="section__nav section__nav--left noselect clickable"><span class="text--giant text--bold"><span>Back</span></span></button>
<button class="section__nav section__nav--right noselect clickable"><span class="text--giant text--bold"><span>Next</span></span></button>
</div>
I hope that this helps anyone facing this niche problem out there. DM me or comment and I will try to help you through it if you are struggling with this issue too.
Thank you to everyone who helped me get here. Love my stackoverflow community !!! Yall the best xx
Related
I downloaded this html5 template for a project https://html5up.net/overflow and I dont know how to put a link for github on the pictures displayed in the gallery (those 8 ) I want that when I click the pic and expand , the next click should sent me to a link and not to scroll over the next or previous picture.I tried to check the code but i found it to complicated for my actual level to figure it out . I am hoping that i can get some help here :) thank you
EDIT: I actualy need help in this part of code
<div class="inner gallery">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/thumbs/Pairs.png" alt="" title="A little game in"/></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Chrome.png" alt="" title="Dressed in Clarity" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/MP3.png" alt="" title="Raven" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Studenti.png" alt="" title="I'll have a cup of Disneyland, please" /></div>
</div>
</div>
When I click them twice I would like to send me to other links on other sites
if im understanding correctly what do you want do this
Change in your code..
Proceed as anticipated
for
Proceed as anticipated
dont forget to remove remove class="..."
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}
I found a lightbox online and copied it into my code.
the first image works perfectly, onclick to show, then click again to close.
but when you click on the second picture it shows the first one again, eventhough i replaced all the sources with another picture. what am i doing wrong? And be gentle, i'm new to all this
<img id="gallery1" src="gallery1.jpg"></img></p>
<div id="light" class="white_content1"></a> <img id="gallery1lb" src="gallery1.jpg"></img></div>
<div id="fade" class="black_overlay1">
</div>
<img id="gallery2" src="gallery2.jpg"></img>
<div id="light" class="white_content2"></a> <img id="gallery2lb" src="gallery2.jpg"></img></div>
<div id="fade" class="black_overlay2">
</div>
I'm using the following code with bootstrap to create a banner directly on top of my page. Problem is, the image is at the the very left corner of my page. As soon as I delete the id='banner' flag, the image starts at the correct point just like the rest of my page. Is it because it's not treated as an bootstrap-span-element anymore? I'm sure there is an easy solution. Thanks for help.
<body>
<div class="container" id="banner">
<div class="row">
<!--span>fdsssssssssssssssssssss</span-->
<img src="images/fcrlogo.png" max-width="100%" max-height="100%" class="span1">
<!-- h1> Your banner </h1 -->
</div>
</div>
I have 3 tabs on my site. Inside 2nd (hidden) div contains a YouTube video in an iframe. When I click on second tab(containing video) video starts playing. On click of either 1st or 3rd tab (containing images) content area still show video.Whereas it should show images for respective tabs. Video is not hiding in Safari 5.1
How can I achieve this?
CODE::
3 tabs content (html)
<div class="view-content clearthis">
<div id="photos">
<div class="nav">
<a class="hide-divs" id="prev" href="#">Prev</a><a id="next" href="#">Next</a></div>
<div id="gallery">
<asp:PlaceHolder ID="phRoomPhotoGallary" runat="server"></asp:PlaceHolder>
</div>
</div>
<div id="video">
<div id="pnlVideo" runat="server">
<iframe id="objVideo" width="667" height="344" src="<%=RoomVideoURL %>" frameborder="0" title="<%=RoomName %>" allowfullscreen></iframe>
</div>
</div>
<div id="floor">
<asp:Image ID="imgFloorPlan" runat="server" Height="344" Width="667" />
</div>
</div>
3 tabs
enter code here
<ul class="clearthis">
<li id="tabPhoto" runat="server"><a id="linkPhotoTab" class="photostab" href="#photos" title="<%=RoomName %>">PHOTOS</a></li>
<li id="tabVideo" runat="server"><a id="linkVideoTab" href="#video" title="<%=RoomName %>">VIDEO</a></li>
<li id="tabFloor" runat="server" style="margin-right: 0px;"><a id="linkFloorTab" href="#floor" title="<%=RoomName %>">FLOOR PLAN</a></li>
</ul>
I've seen some pretty ridiculous answers about attempting to fix this problem in Safari. Instead, try adding:
"wmode=opaque"
as the first GET variable in the url for the youtube video.
(eg: src="http://www.youtube.com/embed/pPBLF2Ffbaw?wmode=opaque&rel=0")
Worked for me in a similar situation.