I'm making a Gallery page on my web site (project) and I've put <a target="_blank"but I don't like It :P. So I've remembered on some sites there is like pop-up window with picture and when you click on left or right side of the picture it slides to the next or previous picture. Best way to explain it is showing you LINK. Thanks in advance.
EDIT Click on those pictures under the Skins!!!!
body {
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/e4/98/1a/e4981a3dd4aa2fa6f0bc84cde9087c7a.jpg");
background-attachment: fixed;
box-sizing: border-box;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-right: solid rgb(200, 101, 103);
border-left: solid rgb(200, 101, 103);
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#header {
height: 50px;
box-sizing: border-box;
width: auto;
}
#navigacija {
right: 20px;
left: 20px;
height: 50px;
overflow: hidden;
text-align: right;
background-color: #089DE3;
z-index: 9999;
box-sizing: border-box;
border-radius: 25px;
position: fixed;
border-top: solid rgb(200, 101, 103);
border-bottom: solid rgb(200, 101, 103);
}
.navitem {
background: #089DE3;
color: white;
line-height: 50px;
font-size: 30px;
font-family: "Fjalla One";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
box-sizing: border-box;
}
.home:hover {
background: #00C5CD;
box-sizing: border-box;
}
.gallery:hover {
background: #00C5CD;
box-sizing: border-box;
}
.contact:hover {
box-sizing: border-box;
background: #00C5CD;
}
.info:hover {
box-sizing: border-box;
background: #00C5CD;
}
.active {
background-color: #00C5CD;
box-sizing: border-box;
}
h1 {
text-align: center;
font-family: "Jockey One";
font-size: 100px;
color: white;
}
div.galerija {
margin-left: 10px;
margin-right:32px;
margin-bottom:10px;
border: 1px solid rgb(200, 101, 103);
float: left;
width: 300px;
}
div.galerija:hover {
border: 1px solid white;
}
div.desc {
padding: 10px;
text-align: center;
color: black;
background-color: white;
font-size: 20px;
font-family:"Jockey One";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GALLERY</title>
<link rel="stylesheet" href="Gallery.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
<a href="Home.html">
<div class="navitem home"><strong>HOME</strong></div>
</a>
<a href="Gallery.html">
<div class="navitem gallery active"><strong>GALLERY</strong></div></a>
<div class="navitem contact"><strong>CONTACT</strong></div>
<div class="navitem info"><strong>INFO</strong></div>
</div>
</div>
<h1><strong>GALLERY</strong></h1>
<div class="galerija">
<a target="_blank" href="http://www.downvids.net/video/bestimages/img-aatrox-the-darkin-blade-196.jpg">
<img src="http://www.downvids.net/video/bestimages/img-aatrox-the-darkin-blade-196.jpg" alt="Aatrox" width="300" height="200">
</a>
<div class="desc">Aatrox, the Darkin Blade</div>
</div>
<div class="galerija">
<a target="_blank" href="https://i.ytimg.com/vi/xE4e_cLMgjU/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/xE4e_cLMgjU/maxresdefault.jpg" alt="Ahri" width="300" height="200"></a>
<div class="desc">Ahri, the Nine-Tailed Fox</div>
</div>
<div class="galerija">
<a target="_blank" href= "https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Akali_0.jpg ">
<img src="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Akali_0.jpg " alt="Akali" width="300" height="200"></a>
<div class="desc">Akali, the Fist of Shadow</div>
</div>
<div class="galerija">
<a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg" alt="Alistar" width="300" height="200"></a>
<div class="desc">Alistar, the Minotaur</div>
</div>
<div class="galerija">
<a target="_blank" href="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Amumu_0.jpg">
<img src="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Amumu_0.jpg" alt="Amumu" width="300" height="200"></a>
<div class="desc">Amumu, the Sad Mummy</div>
</div>
<div class="galerija">
<a target="_blank" href="http://static.lolskill.net/img/skins/1215/anivia_0.jpg">
<img src="http://static.lolskill.net/img/skins/1215/anivia_0.jpg " alt="Anivia" width="300" height="200"></a>
<div class="desc">Anivia, the Cryophoenix</div>
</div>
<div class="galerija">
<a target="_blank" href="http://media-titanium.cursecdn.com/loldiffs/AirClientDiff_1_28_2013_2_28_PM/images/Annie_Splash_0.jpg">
<img src="http://media-titanium.cursecdn.com/loldiffs/AirClientDiff_1_28_2013_2_28_PM/images/Annie_Splash_0.jpg" alt="Annie" width="300" height="200"></a>
<div class="desc">Annie, the Dark Child</div>
</div>
<div class="galerija">
<a target="_blank" href="http://images2.wikia.nocookie.net/__cb20101005190542/leagueoflegends/images/c/c0/Ashe_OriginalSkin.jpg">
<img src="http://images2.wikia.nocookie.net/__cb20101005190542/leagueoflegends/images/c/c0/Ashe_OriginalSkin.jpg" alt="Ashe" width="300" height="200"></a>
<div class="desc">Ashe, the Frost Archer</div>
</div>
<div class="galerija">
<a target="_blank" href="http://s.lolstatic.com/site/mount-targon/079694fdf251b5e7de788d9ab439d401d31ae160/img/champions/aurelion-sol/aurelion-sol-splash-fallback.jpg">
<img src="http://s.lolstatic.com/site/mount-targon/079694fdf251b5e7de788d9ab439d401d31ae160/img/champions/aurelion-sol/aurelion-sol-splash-fallback.jpg" alt="Aurelion Sol" width="300" height="200"></a>
<div class="desc">Aurelion Sol, the Star Forger</div>
</div>
<div class="galerija">
<a target="_blank" href="https://assets.vg247.com/current//2015/09/league_of_legnds_azir.jpg">
<img src="https://assets.vg247.com/current//2015/09/league_of_legnds_azir.jpg" alt="Azir" width="300" height="200"></a>
<div class="desc">Azir, the Emperor of the Sands</div>
</div>
<div class="galerija">
<a target="_blank" href="http://news.cdn.leagueoflegends.com/public/images/pages/2015/breveal/img/Bard_Splash_WP.jpg">
<img src="http://news.cdn.leagueoflegends.com/public/images/pages/2015/breveal/img/Bard_Splash_WP.jpg" alt="Bard" width="300" height="200"></a>
<div class="desc">Bard, the Wandering Caretaker</div>
</div>
<div class="galerija">
<a target="_blank" href="http://static.lolskill.net/img/skins/1215/blitzcrank_0.jpg">
<img src="http://static.lolskill.net/img/skins/1215/blitzcrank_0.jpg" alt="Blitzcrank" width="300" height="200"></a>
<div class="desc">Blitzcrank, the Great Steam Golem</div>
</div>
<div class="galerija">
<a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_0.jpg">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_0.jpg" alt="Brand" width="300" height="200"></a>
<div class="desc">Brand, the Burning Vengeance</div>
</div>
<div class="galerija">
<a target="_blank" href="http://na.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/b-splash.jpg?itok=vJzNVWjn">
<img src="http://na.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/b-splash.jpg?itok=vJzNVWjn" alt="Braum" width="300" height="200"></a>
<div class="desc">Braum, the Heart of the Freljord</div>
</div>
<div class="galerija">
<a target="_blank" href="https://img.clipartfox.com/5633c6d56bed03beb9292dd8c7f26199_-league-of-legends-and-caitlyn-league-of-legends-clipart_1215-717.jpeg">
<img src="https://img.clipartfox.com/5633c6d56bed03beb9292dd8c7f26199_-league-of-legends-and-caitlyn-league-of-legends-clipart_1215-717.jpeg" alt="Caitlyn" width="300" height="200"></a>
<div class="desc">Caitlyn, the Sheriff of Piltover</div>
</div>
<div class="galerija">
<a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg">
<img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg" alt="Camille" width="300" height="200"></a>
<div class="desc">Camille, the Steel Shadow</div>
</div>
</body>
</html>
You need to search for a lightbox gallery JavaScript plugin.There's a lot of them out there.
The one used on the example you gave is named Colorbox. Here you'll find more information about it: http://www.jacklmoore.com/colorbox/
Colorbox is based on jQuery library, so you'll need to use booth.
If you only need the gallery and you dont want to use jQuery you can give a try to jsLightbox http://jslightbox.felixhagspiel.de/ which is a pure JavaScript based gallery.
Here is a crude looking but functional example of a image gallery that pops up in a modal:
var images = $('.slideshow img');
var numImages = $('.slideshow img').length - 1;
var modalButton = $('.modal-button');
var prev = $('.prev');
var next = $('.next');
var num = 0;
modalButton.on('click', function() {
$('.slideshow').toggleClass('active');
})
prev.on('click', function() {
images.removeClass('active');
num--;
if (num < 0) {
num = numImages;
}
images.eq(num).addClass('active');
});
next.on('click', function() {
images.removeClass('active');
num++;
if (num > numImages) {
num = 0;
}
images.eq(num).addClass('active');
});
* {
box-sizing: border-box;
}
.content {
width: 100%;
max-width: 1024px;
min-height: 100vh;
margin: 0 auto;
position: relative;
text-align: center;
background-color: gray;
}
.modal-button {
padding: 10px;
position: relative;
border: 2px solid green;
background-color: #fff;
z-index: 3;
}
.modal-button:hover {
cursor: pointer;
}
.slideshow {
display: none;
flex-direction: column;
justify-content: center;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2;
}
.slideshow.active {
display: flex;
}
.image-container {
margin: 0 auto;
}
.image-container img {
display: none;
}
.image-container img.active {
display: inline;
}
.slideshow-controls {
width: 350px;
margin: 0 auto;
padding: 20px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background-color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content">
<a class="modal-button">Click here to toggle slideshow</a>
<section class="slideshow">
<div class="image-container">
<img class="active" src="http://placehold.it/350x350/000/bae">
<img src="http://placehold.it/250x150/fff/58b">
<img src="http://placehold.it/350x200/333/aeb">
<img src="http://placehold.it/400x150/666/33c">
</div>
<div class="slideshow-controls">
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
</section>
</section>
Related
I'm making a text editor with a sidd nav-var. When the mouse hovers on the nav-bar its width increases and the editor width decreases. But the width of the editor doesn't change even when the width variable created by me is changing.
Here is my program:
#import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght#200&display=swap');
:root {
--nav-btn-width: 40px;
--nav-width: calc(100% - 60px);
}
* {
z-index: 1;
}
body {
padding: 0;
margin: 0;
background-color: #c73737;
}
#navbar {
position: absolute;
height: 100%;
width: 50px;
max-width: 200px;
background-color: #0068ad;
display: flex;
flex-direction: column;
transition: 0.35s ease-in-out;
padding-top: 10px;
box-sizing: border-box;
z-index: 2;
}
#navbar:hover {
width: 200px;
border-radius: 0 10px 10px 0;
--nav-btn-width: 190px;
--nav-width: calc(100% - 210px);
}
.nav-btn {
width: var(--nav-btn-width);
height: 40px;
background-color: rgb(0, 184, 70);
margin: 5px;
cursor: pointer;
border-radius: 50px;
transition: 0.35s ease-in-out;
box-sizing: border-box;
display: flex;
flex-direction: row;
padding-left: 7.5px;
overflow: hidden;
user-select: none;
z-index: 10;
}
.nav-btn:hover {
background-color: rgb(0, 255, 98);
}
#signout {
position: absolute;
bottom: 10px;
}
.nav-text {
position: relative;
top: 10px;
font-size: 12pt;
font-family: 'JetBrains Mono', monospace;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
#editor {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: var(--nav-width);
background-color: rgb(78, 78, 78);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="body-container" style="width: 100vh;height:100vh">
<div id="navbar">
<div id="create" class="nav-btn">
<img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
<div id="create-text" class="nav-text">Create</div>
</div>
<div id="files" class="nav-btn">
<img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
<div id="files-text" class="nav-text">My Files</div>
</div>
<div id="feed" class="nav-btn">
<img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
<div id="feed-text" class="nav-text">Feed</div>
</div>
<div id="challenges" class="nav-btn">
<img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
<div id="challenges-text" class="nav-text">Challenges</div>
</div>
<div id="leaderboard" class="nav-btn">
<img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
<div id="leaderboard-text" class="nav-text">Leaderboard</div>
</div>
<div id="notification" class="nav-btn">
<img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
<div id="notification-text" class="nav-text">Notifications</div>
</div>
<div id="chat" class="nav-btn">
<img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
<div id="chat-text" class="nav-text">Dev Chat</div>
</div>
<div id="settings" class="nav-btn">
<img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
<div id="settings-text" class="nav-text">Settings</div>
</div>
<div id="signout" class="nav-btn">
<img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
<div id="signout-text" class="nav-text">Sign out</div>
</div>
</div>
<div id="editor"></div>
</div>
<!-- include script.js and styler.js -->
<script src="script.js"></script>
<script src="styler.js"></script>
<script>
</script>
</body>
</html>
As you can see there is a 10px gap b/w the nav-bar and the editor and I have also updated the values when it is hovered. But when the nav-bar is hovered the width of the editor doesn't change.
Similar question: link
I have also tried what is mentioned in the Similar question but still it doesn't work...
The variable --nav-btn-width works as intended but the variable --nav-width doesn't work even though both are literally the same usages.
On the hover you are defining a variable that only has scope within the navbar element.
To define a variable for the editor element select on navbar hover plus editor, this will select for the editor element which comes immediately after the navbar.
#import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght#200&display=swap');
:root {
--nav-btn-width: 40px;
--nav-width: calc(100% - 60px);
}
* {
z-index: 1;
}
body {
padding: 0;
margin: 0;
background-color: #c73737;
}
#navbar {
position: absolute;
height: 100%;
width: 50px;
max-width: 200px;
background-color: #0068ad;
display: flex;
flex-direction: column;
transition: 0.35s ease-in-out;
padding-top: 10px;
box-sizing: border-box;
z-index: 2;
}
#navbar:hover {
width: 200px;
border-radius: 0 10px 10px 0;
--nav-btn-width: 190px;
}
#navbar:hover + #editor {
--nav-width: calc(100% - 210px);
}
.nav-btn {
width: var(--nav-btn-width);
height: 40px;
background-color: rgb(0, 184, 70);
margin: 5px;
cursor: pointer;
border-radius: 50px;
transition: 0.35s ease-in-out;
box-sizing: border-box;
display: flex;
flex-direction: row;
padding-left: 7.5px;
overflow: hidden;
user-select: none;
z-index: 10;
}
.nav-btn:hover {
background-color: rgb(0, 255, 98);
}
#signout {
position: absolute;
bottom: 10px;
}
.nav-text {
position: relative;
top: 10px;
font-size: 12pt;
font-family: 'JetBrains Mono', monospace;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
#editor {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: var(--nav-width);
background-color: rgb(78, 78, 78);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="body-container" style="width: 100vh;height:100vh">
<div id="navbar">
<div id="create" class="nav-btn">
<img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
<div id="create-text" class="nav-text">Create</div>
</div>
<div id="files" class="nav-btn">
<img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
<div id="files-text" class="nav-text">My Files</div>
</div>
<div id="feed" class="nav-btn">
<img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
<div id="feed-text" class="nav-text">Feed</div>
</div>
<div id="challenges" class="nav-btn">
<img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
<div id="challenges-text" class="nav-text">Challenges</div>
</div>
<div id="leaderboard" class="nav-btn">
<img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
<div id="leaderboard-text" class="nav-text">Leaderboard</div>
</div>
<div id="notification" class="nav-btn">
<img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
<div id="notification-text" class="nav-text">Notifications</div>
</div>
<div id="chat" class="nav-btn">
<img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
<div id="chat-text" class="nav-text">Dev Chat</div>
</div>
<div id="settings" class="nav-btn">
<img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
<div id="settings-text" class="nav-text">Settings</div>
</div>
<div id="signout" class="nav-btn">
<img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
<div id="signout-text" class="nav-text">Sign out</div>
</div>
</div>
<div id="editor"></div>
</div>
<!-- include script.js and styler.js -->
<script src="script.js"></script>
<script src="styler.js"></script>
<script>
</script>
</body>
</html>
I have given header, a menu bar and a hero image, after that created image gallery using lightbox. I have create 4 columns with 3 images each, but in the lightbox gallery it's showing 3 columns with 4 images each.
I have given new row called My Videos but the css taking the previous row into consideration not the new one. I placed a video but it's not moving according to the margins given.
Lastly, my footer is not showing up..
<!doctype html>
<html>
<head>
<title> Project One </title>
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/main.css">
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox.css">
</head>
<body>
<header>
<div class="header-section">
<div class="header-logo">
<h1> Superstar </h1>
</div>
<div class="header-right">
<p> Plot No.33,Mahalaxmi Nagar, Vizianagaram-535 002.<br>
email:saisankarmandala#gmail.com.
</p>
</div>
</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="container"></div>
<div class="hero-text">
<h1> I am Creative </h1>
</div>
<div class="row">
<h1> My Gallery </h1>
</div>
<div class="col col-md-8-pushdown-sm">
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb1.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb1a.jpg" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb2.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb2a.jpg" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb3.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb3a.jpg" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5a.png" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10.jpeg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10a.jpeg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12a.png" alt="thumb" width="200" height="200"></a>
</div>
</div>
</div>
<div class="row">
<div class="heading">
<h1> My Videos </h1>
</div>
</div>
<div class="column">
<div class="video-area">
<video height="150" width="200" controls>
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid1.mp4" type="video/mp4" >
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid2.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="clearfix"></div>
<footer>
<p>© 2021, All rights reserved </p>
</footer>
<script type="text/javascript" src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox-plus-jquery.js"></script>
</body>
</html>
This is my CSS Code
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
}
/*styling the header section */
.header-section {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid purple;
background-color: purple;
margin-bottom: 0;
overflow: auto;
}
/* divide the header area into two and make width adjustments */
.header-logo {
width: 66%;
float: left;
flex: 1;
}
h1 {
font-family: Helvetica, arial, sans-serif;
font-size: 300%;
color: #fff;
font-weight: bold;
padding: 10px 0px 0px 40px;
box-sizing: border-box;
}
.header-right {
width: 34%;
float: right;
flex: 1;
}
p {
font-size: 110%;
font-weight: bold;
color: #fff;
padding: 40px 0px 0px 150px;
box-sizing: border-box;
}
nav li {
list-style: none;
float: left;
display: inline;
margin-top: -5px;
}
nav {
float: left;
margin-top: 0px;
bottom-border: none;
border-top: 0px solid purple;
width: 100%;
background-color: purple;
width: 100%;
height: 42px;
overflow: hidden;
}
nav a {
color: white;
text-decoration: none;
}
nav a {
display: inline;
font-family: Helvetica, arial, sans-serif;
text-decoration: none;
padding: 10px 20px;
border: 1px solid white;
border-bottom: 1px;
border-spacing: 3px;
background-color: purple;
color: white;
margin-right: 2px;
margin-top: -2px;
}
/* hero image area */
.container {
max-width: 100%;
margin-top: 45px;
background-image: url('C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/nude.jpg');
height: 75%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}
/* hero text on the image */
.hero-text {
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: purple;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 80%;
padding: 30px;
text-align: center;
}
/* row heading */
.row h1 {
margin-top: -10px;
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: #fff;
background-color: purple;
}
/* image gallery settings */
.column {
display: flex;
align-items: stretch;
column-gap: 20px;
}
.thumbnails img {
float: left;
width: 25%;
margin: 0 auto;
display: block;
max-width: 100%;
padding: 10px 20px 10px 30px;
margin-left: 40px;
margin-right: 10px;
margin-bottom: 15px;
transitiion: all 2s ease-in-out;
border: 1px solid grey;
box-sizing: border-box
}
.thumbnails img:hover {
transform: rotate(2deg);
box-shadow: 0 0 7px rgba(0, 0, 0, .5);
opacity: 1;
transform: scale(1)rotate(2deg);
.thumbnails:hover img {
opacity: .5;
transform: scale(.92);
}
.row::after {
content: "";
clear: both;
display: table;
}
.heading h1 {
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: purple;
}
.video-area video {
margin: 0 auto;
display: block;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
}
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
}
/*styling the header section */
.header-section {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid purple;
background-color: purple;
margin-bottom: 0;
overflow: auto;
}
/* divide the header area into two and make width adjustments */
.header-logo {
width: 66%;
float: left;
flex: 1;
}
h1 {
font-family: Helvetica, arial, sans-serif;
font-size: 300%;
color: #fff;
font-weight: bold;
padding: 10px 0px 0px 40px;
box-sizing: border-box;
}
.header-right {
width: 34%;
float: right;
flex: 1;
}
p {
font-size: 110%;
font-weight: bold;
color: #fff;
padding: 40px 0px 0px 150px;
box-sizing: border-box;
}
nav li {
list-style: none;
float: left;
display: inline;
margin-top: -5px;
}
nav {
float: left;
margin-top: 0px;
border-bottom: none;
border-top: 0px solid purple;
width: 100%;
background-color: purple;
width: 100%;
height: 42px;
overflow: hidden;
}
nav a {
color: white;
text-decoration: none;
}
nav a {
display: inline;
font-family: Helvetica, arial, sans-serif;
text-decoration: none;
padding: 10px 20px;
border: 1px solid white;
border-bottom: 1px;
border-spacing: 3px;
background-color: purple;
color: white;
margin-right: 2px;
margin-top: -2px;
}
/* hero image area */
.container {
max-width: 100%;
margin-top: 45px;
background-image: url('C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/nude.jpg');
height: 75%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}
/* hero text on the image */
.hero-text {
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: purple;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 80%;
padding: 30px;
text-align: center;
}
/* row heading */
.row h1 {
margin-top: -10px;
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: #fff;
background-color: purple;
}
/* image gallery settings */
.column {
display: flex;
align-items: stretch;
column-gap: 20px;
}
.thumbnails img {
float: left;
width: 25%;
margin: 0 auto;
display: block;
max-width: 100%;
padding: 10px 20px 10px 30px;
margin-left: 40px;
margin-right: 10px;
margin-bottom: 15px;
transition:all 2s ease-in-out;
border: 1px solid grey;
box-sizing: border-box
}
.thumbnails img:hover {
transform: rotate(2deg);
box-shadow: 0 0 7px rgba(0, 0, 0, .5);
opacity: 1;
transform: scale(1)rotate(2deg);
}
.thumbnails:hover img {
opacity: .5;
transform: scale(.92);
}
.row::after {
content: "";
clear: both;
display: table;
}
.heading h1 {
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: purple;
}
.video-area video {
margin: 0 auto;
display: block;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
}
<!doctype html>
<html>
<head>
<title> Project One </title>
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/main.css">
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<div class="header-section">
<div class="header-logo">
<h1> Superstar </h1>
</div>
<div class="header-right">
<p> Plot No.33,Mahalaxmi Nagar, Vizianagaram-535 002.<br>
email:saisankarmandala#gmail.com.
</p>
</div>
</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="container"></div>
<div class="hero-text">
<h1> I am Creative </h1>
</div>
<div class="row">
<h1> My Gallery </h1>
</div>
<div class="col col-md-8-pushdown-sm">
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5a.png" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5a.png" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10.jpeg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10a.jpeg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12a.png" alt="thumb" width="200" height="200"></a>
</div>
</div>
</div>
<div class="row">
<div class="heading">
<h1> My Videos </h1>
</div>
</div>
<div class="column">
<div class="video-area">
<video height="150" width="200" controls>
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid1.mp4" type="video/mp4" >
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid2.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="clearfix"></div>
<footer>
<p>© 2021, All rights reserved </p>
</footer>
<script type="text/javascript" src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox-plus-jquery.js"></script>
</body>
</html>
I using backend language php (laravel) and front end html + css;
I make reaction box. Bottom have image for reaction. Top the upper part increases according to the ratio.
I want like this;
https://i.hizliresim.com/YdbYqz.png
But actual;
https://i.hizliresim.com/JV20ao.png
My codes;
https://jsfiddle.net/63yusufsari63/wfh5zexm/
.reaction-box {
text-align: center;
padding: 10px;
}
.reaction-box a {
text-decoration: none;
font-weight: bold;
color: #fc5bb6;
}
.reaction-box a:hover {
opacity: 0.6;
}
.reaction-in-box {
float: left;
width: auto;
}
.reaction-range {
margin: 1px 4px;
background-color: #fc5bb6;
}
.reaction-description {
background-color: #f4f6f6;
padding: 5px;
}
.reaction-description img {
display: block;
width: 50px !important;
height: 50px !important;
margin: 0 auto 5px auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<a href="#" title="name" class="reaction-in-box text-center">
<span>Rate</span>
<div class="reaction-range" style="height: 50px; bottom: 0;"></div>
<div class="reaction-description">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
Name
</div>
</a>
<a href="#" title="name" class="reaction-in-box text-center">
<span>Rate</span>
<div class="reaction-range" style="height: 20px; bottom: 0;"></div>
<div class="reaction-description">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
Name
</div>
</a>
<a href="#" title="name" class="reaction-in-box text-center">
<span>Rate</span>
<div class="reaction-range" style="height: 40px; bottom: 0;"></div>
<div class="reaction-description">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
Name
</div>
</a>
My Problem
I want to make text-box/a box over an image with div, i already tried this but why it can't.
My code goes here:
HTML/CSS :
.main{
position: relative;
margin: 8;
}
.main img{
position: relative;
height: 510px;
width: 100%;
}
.main-content{
position: absolute;
background: white;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>PokeMart</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<img src="valor.png">
<h3>PokeMart</h3>
<h4>Login</h4>
<h4>Register</h4>
</div>
<div class="main">
<img src="bg.jpg" />
<div class="main-content">Text</div>
</div>
<div class="footer">
<h5>Pokemart established 2017, powered by Pokemon Company</h5>
<h5>Copyright © 2017 LL. All Right Reserved.</h5>
<div class="contact">
<img src="facebook.png" width="25" height="25">
<img src="google.png" width="25" height="25">
<img src="twitter.png" width="25" height="25">
<img src="github.png" width="25" height="25">
<img src="instagram.png" width="25" height="25">
</div>
</div>
</body>
</html>`
CSS code just the floating div, I have tried Display: Inline-block still don't work.
You're using absolute positioning but not directing where the content should be placed. Try using top,left,right,bottom to adjust the content position.
top:20%;
right:100px;
.main {
position: relative;
margin: 8;
}
.main img {
position: relative;
height: 510px;
width: 100%;
}
.main-content {
position: absolute;
top: 20%;
right: 100px;
background: white;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>PokeMart</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<img src="valor.png">
<h3>PokeMart</h3>
<h4>Login</h4>
<h4>Register</h4>
</div>
<div class="main">
<img src="http://via.placeholder.com/9000x500" />
<div class="main-content">Text</div>
</div>
<div class="footer">
<h5>Pokemart established 2017, powered by Pokemon Company</h5>
<h5>Copyright © 2017 LL. All Right Reserved.</h5>
<div class="contact">
<img src="facebook.png" width="25" height="25">
<img src="google.png" width="25" height="25">
<img src="twitter.png" width="25" height="25">
<img src="github.png" width="25" height="25">
<img src="instagram.png" width="25" height="25">
</div>
</div>
</body>
</html>`
.wrap {
border: 1px solid #000;
position: relative;
max-width: 450px;
}
.wrap img {
border: 1px solid #000;
display: block;
width: 100%;
box-sizing: border-box;
}
.wrap .overlay {
border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
}
.wrap .overlay .box {
margin: auto;
background-color: #FFF;
border: 1px solid #000;
padding: 40px;
}
<div class="wrap">
<img src="http://www.telegraph.co.uk/content/dam/gaming/2017/10/10/Pokemon-Halloween_trans_NvBQzQNjv4BqZPnXlBHEdt8AtjizIYNgmRSlK0RKxqt6w8JJghUtSuI.jpg?imwidth=450">
<div class="overlay">
<div class="box">box</div>
</div>
</div>
I have a page on my site that uses an iframe to display another file on the server, everything looks good except for this issue:
https://www.dropbox.com/s/dyez8mbeb792udg/2016-03-08-1639-59.flv?dl=0
Here is my code for the page showing the iframe:
<!DOCTYPE html>
<html>
<head>
<title>Online FoodTube - Home</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</head>
<body>
<div id="MasterHead-Container">
<img title="Online FoodTube Home" src="foodtube.png" width="80.5" height="32">
<!--<a id="TitleUrl" href="ayy">ayy</a>
<a id="UserUrl" href="ayy">ayy</a>-->
</div>
<iframe id="VideoIframe" src="new/index.php" onload="resizeIframe(this)"></iframe>
<div id="MasterFooter-Container">
<img title="Online FoodTube Home" src="foodtube.png" width="80.5" height="32">
<span id="MasterFooter-Thanks">Thank you for visiting Online FoodTube.</span>
<br>
<a id="SimpleUrl" href="copyright">Copyright Info</a>
<span id="UrlSpacer">--</span>
<a id="SimpleUrl" href="ayy">The Author</a>
<span id="UrlSpacer">--</span>
<a id="SimpleUrl" href="/">StratHaxxs Co. Home</a>
</div>
</body>
</html>
Here is the iframe php file code:
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<div id="test" style="" ></div>
</div>
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
They both use the same exact style sheet:
* {
font-family: Verdana, Arial, sans-serif;
}
body {
background-color: #fff;
cursor: default;
}
h1 {
font-size: 15pt;
}
p {
font-size: 10pt;
}
#MasterHead-Container {
background: #fff;
border-bottom: 1px solid #e8e8e8;
min-width: 0;
padding-bottom: 8px;
padding-top: 7px;
position: relative;
}
#MasterFooter-Container {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
background: #fff;
border-top: 1px solid #e8e8e8;
min-width: 0;
padding-top: 10px;
}
#MasterFooter-Thanks {
position: relative;
top: -10%;
}
#TitleUrl {
color: #167ac6;
text-decoration: none;
}
#TitleUrl:hover {
text-decoration: underline;
}
#UserUrl {
color: #767676;
text-decoration: none;
}
#UserUrl:hover {
color: #167ac6;
text-decoration: none;
}
#SimpleUrl {
color: #767676;
text-decoration: none;
color: #666;
font-size: 11px;
font-weight: 500;
}
#SimpleUrl:hover {
color: #167ac6;
text-decoration: underline;
}
#UrlSpacer {
color: #666;
font-size: 11px;
font-weight: 500;
}
#VideoThumbnail {
position: relative;
height: 110px;
width: 196px;
}
#VideoTime {
font-size: 15px;
background-color: #000;
color: #fff !important;
height: 14px;
opacity: .75;
filter: alpha(opacity=75);
padding-bottom: 4px;
position: absolute;
bottom: 0;
right: 0;
}
#VideoContainer {
display: inline-block;
}
#VideoIframe {
height: 100%;
width: 100%;
display: block;
border: none;
}
Please help me fix this.
Since we don't have a way to inspect this with a devtool, the only thing that I see would be to add vertical-align:top; to #VideoContainer.
Also you have to change id="VideoContainer" to class="VideoContainer" since ID are unique. Every ID should appear only once, if it appears more than once, switch the id for a class.