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>
Related
I am trying to implement a fixed header on a relatively simple site I am working on. It works on every page except one with an image gallery I have co-opted where the fixed header appears behind the photos in the gallery. I have tried setting the z-index property but it is either not working or I don't quite understand how it works. Any help would be much appreciated.
CSS:
#charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
.clr{
clear: both;
}
.parallax {
background-image: url("../images/bg.jpg");
height: 1080px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
a{
text-decoration: none;
color:#000000;
}
a:hover{
color:#FF0004;
}
a:active{
color:#000000;
}
a:visited{
color:#000000;
}
.main-header{
background-color: #ffffff;
line-height: 1;
}
.main-header h1{
color: #F800FF;
font-size: 9vw;
padding: 0;
}
.navbar{
background-color:#BCBCBC;
color:#FFFFFF;
width:100%;
line-height: normal;
padding: 1vw;
}
.navbar ul{
padding: 0px;
list-style: none;
}
.navbar li{
display:inline;
}
.navbar a{
color: #FFFFFF;
text-decoration: none;
vertical-align: middle;
font-size: calc(10px + .6vw);
padding: 1.5vw;
}
.navbar a:hover{
*/border-top: #F800FF solid thick;*/
}
.footer-bar{
background-color:#BCBCBC;
color:#FFFFFF;
line-height: normal;
padding-top: 1vw;
padding-bottom: 1vw;
margin-top: 2vw;
}
.footer-bar ul{
padding: 0px;
list-style: none;
}
.footer-bar li{
display:inline;
margin-left: .5vw;
margin-right: .5vw;
}
body{
margin: 0;
/*background-image: url("");
background-size:cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;*/
background-color: #ffffff;
color: #000000;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 18px;
font-weight: normal;
line-height: 1.6em;
}
h1{
color:#000000;
font-size: 3vw;
padding-bottom: .5em;
padding-top: 1.5em;
}
h2{
font-size: 2vw;
color:#000000;
padding-bottom: .5em;
padding-top: .5em;
}
h3{
font-size: 2vw;
color:#000000;
padding-bottom: .5em;
padding-top: .5em;
}
.container{
}
.container{
width: 80%;
margin: auto;
text-align: center;
}
.container-h{
width: 95%;
margin: auto;
text-align: center;
}
.container-f{
width: 95%;
margin: auto;
text-align: center;
}
.box-1{
background-color: #ffffff;
color: #000000;
/*opacity: 0.9;*/
/*filter: alpha(opacity=90);*/
padding: 10px;
margin: 20px 0;
}
.categories{
background-color:#00FFE8;
color:#000000;
/*opacity: 0.9;*/
/*filter: alpha(opacity=90);*/
border: 10px solid #000000;
padding: 10px;
}
.categories ul{
padding: 0;
list-style: none;
}
.categories li{
padding-bottom: 4px;
border-bottom: 2px #000000 dashed;
}
/*FOR CSS IMAGE GALLERY*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.heading {
text-align: center;
font-size: 2.0em;
letter-spacing: 1px;
padding: 40px;
color: white;
}
.gallery-image {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-image img {
height: 250px;
width: 350px;
transform: scale(1.0);
transition: transform 0.4s ease;
}
.gallery-image-c img {
height: 350px;
width: 350px;
transform: scale(1.0);
transition: transform 0.4s ease;
}
.img-box {
box-sizing: content-box;
margin: 10px;
height: 250px;
width: 350px;
overflow: hidden;
display: inline-block;
color: white;
position: relative;
background-color: white;
}
.img-box-c {
box-sizing: content-box;
margin: 10px;
height: 350px;
width: 350px;
overflow: hidden;
display: inline-block;
color: white;
position: relative;
background-color: white;
}
.caption {
position: absolute;
bottom: 5px;
left: 20px;
opacity: 0.0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.transparent-box {
height: 250px;
width: 350px;
background-color:rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s ease;
}
.transparent-box-c {
height: 350px;
width: 350px;
background-color:rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s ease;
}
.img-box:hover img {
transform: scale(1.1);
}
.img-box-c:hover img {
transform: scale(1.1);
}
.img-box:hover .transparent-box {
background-color:rgba(0, 0, 0, 0.5);
}
.img-box-c:hover .transparent-box-c {
background-color:rgba(0, 0, 0, 0.5);
}
.img-box:hover .caption {
transform: translateY(-20px);
opacity: 1.0;
}
.img-box-c:hover .caption {
transform: translateY(-20px);
opacity: 1.0;
}
.img-box:hover {
cursor: pointer;
}
.img-box-c:hover {
cursor: pointer;
}
.caption > p:nth-child(2) {
font-size: 0.8em;
}
.opacity-low {
opacity: 0.5;
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<div class="container-h">
<h1>HEADING</h1>
</div>
</header>
<nav class="navbar" id="myNavbar">
<div class="container">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
</nav>
<div class="box-1">
<div class="container">
<div class="gallery-image">
<a href="images/bandpics/promo1.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/promo1.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p></p>
<p class="opacity-low"></p>
</div>
</div>
</div></a>
<a href="images/bandpics/poster.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/poster.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/promo2.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/promo2.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/promo3.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/promo3.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band1.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band1.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band2.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band2.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band1.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band1.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band3.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band3.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/falling.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/falling.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/terrorpromo.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/terrorpromo.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/mirror.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/mirror.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/promo4.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/promo4.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
</div>
</div>
</div>
<div class="clr"></div>
<footer class="footer-bar">
<div class="container-f">
<ul>
<li><img src="images/socialmedia/instagram.png" alt="Instagram" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/facebook.png" alt="Facebook" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/twitter.png" alt="Twitter" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/spotify.png" alt="Spotify" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/apple.png" alt="Apple Music" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/youtube.png" alt="YouTube" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/soundcloud.png" alt="Soundcloud" style="width: calc(20px + 2vw)"</li>
</ul>
</div>
</footer>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("myNavbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
Unless I misunderstood your question, but if you add z-index: 1: to navbar class it seems to fix your problem.
.navbar {
z-index: 1;
}
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>
So I have 3 images wrapped inside a div, and I've used both float: left; and "pull-left" to try and get the images to align next to each other, but they won't for some reason. They were aligned side by side before I added a jQuery cycle plugin to make the images into individual slide shows that fade in/out images (in the #Slideshow div), after I added the script they stacked on top of each other, I have no idea how to fix this.
/*style sheet*/
#Backg
{
background-image: url("Graphics/ravenna.png");
background-repeat: repeat;
height: 100%;
}
/*Biggest Container and Pattern Backg*/
#PrimaryC {
padding: 10px;
background-image: url("Graphics/paper_fibers.png");
background-repeat: repeat;
height: 100%;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
#Header /*Retro Games Arcade Logo*/
{
height: 100px;
width: 100%;
background-image: url("Graphics/SiteLogo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.Content /*Holds Arcade Photo and Text in 2 columns*/
{
width: 100%;
height: 500px;
background-color: white;
resize: both;
border-radius: 0px 25px 25px 25px;
border: 1px solid white;
}
#HeaderText /*Title*/
{
font-family:'Rokkitt', serif;
font-size: 35px;
color: black;
text-decoration: underline;
padding-right: 20px;
}
#RegularText /*Main Text Body*/
{
font-family:'Rokkitt', serif;
font-size: 18px;
padding-right: 20px;
}
.dropcap
{ float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
#Arcade /*Arcade Photo*/
{
width: 100%;
}
/*Navigational Buttons*/
.post-content
{
font-family:'Didact Gothic', sans-serif;
font-size: 150%; /*20px*/
top: 120px;
left:15px;
position: relative;
letter-spacing: 2px;
}
#RightRow
{
Position: relative;
}
.centerBlock
{
position: relative;
top: -200px;
padding-left: 10px;
}
#slideshow img
{
float: left;
margin-right: 25px;
margin: 0;
position: relative;
}
#slideshow
{
margin:auto;
}
#keyframes slideshow
{
0% {background-color: white;]
50% {background-color: red;}
}
}
.col-md-12
{
position: relative;
}
.footer-basic-centered{
background-color: #683025;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: center;
font: normal 18px sans-serif;
box-shadow: 0 5px 5px -5px black;
padding: 15px;
margin-top: 80px;
}
.footer-basic-centered .footer-company-motto{
color: white;
font-size: 24px;
margin: 0;
font-family:'Rokkitt', serif;
}
.footer-basic-centered .footer-company-name{
color: #8f9296;
font-size: 14px;
margin: 0;
}
.footer-basic-centered .footer-links{
list-style: none;
font-weight: bold;
color: #ffffff;
padding: 35px 0 23px;
margin: 0;
font-family: 'Didact Gothic', sans-serif;
}
.footer-basic-centered .footer-links a{
display:inline-block;
text-decoration: none;
color: inherit;
}
#media (max-width: 600px) {
.footer-basic-centered{
padding: 35px;
}
.footer-basic-centered .footer-company-motto{
font-size: 18px;
}
.footer-basic-centered .footer-company-name{
font-size: 12px;
}
.footer-basic-centered .footer-links{
font-size: 14px;
padding: 25px 0 20px;
}
.footer-basic-centered .footer-links a{
line-height: 1.8;
}
}
/*Desktop*/
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 22px;
position: relative;
top: -360px;
}
/*Tablet Devices*/
#media (min-width: 768px) and (max-width: 969px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
top: -270px;
font-size: 50%;
}
}
/*Mobile Devices*/
#media(max-width: 767px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
font-size: 20%;
top: auto;
}
.post-content
{
top: 20px;
font-size: 80px;
}
.Content
{
height: 600px;
}
}
/*1200*/
#media (min-width: 970px) and (max-width: 1119px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 25px;
position: relative;
top: -310px;
font-size: 60%;
}}
}
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="Styles.css" />
<!--Main Style Sheet-->
<link rel="stylesheet" href="bootstrap.min.css" />
<!--Bootstrap Style Sheet-->
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css' />
<!--Fonts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript"> <!--Image Fade Script-->
$(document).ready(function() {
$('.Slot').cycle({
fx: 'fade'
});
});
</script>
<title>Retro Games Arcade</title>
</head>
<body>
<div id="Backg">
<div id="PrimaryC" class="container">
<!--Primary Container-->
<div id="Header">
<!--Site Logo-->
</div>
<div class="Content">
<!--Main Content Container-->
<div class="row">
<!--Row 1-->
<div class="col-sm-6">
<!--Left Col-->
<img src="Graphics/Arcade.png" id="Arcade" class="hidden-xs" />
<div class="caption post-content">
<div id="Home">home</div>
<!--Home Button-->
<div id="Stock">stock</div>
<!--Stock Button-->
<div id="AboutUs">about us</div>
<!--About Us Button-->
<div id="ContactUs">contact us</div>
<!--Contact Us Button-->
</div>
</div>
<div class="col-sm-6" id="RightRow">
<!--RightCol-->
<p id="HeaderText">Welcome to the Retro Games Arcade</p>
<p id="RegularText">
<span class="dropcap">H</span>ere you can find a treasure of Retro Video Games, sell your unwanted hardware/software;
and also have our professional team repair any damaged hand-held gaming devices.
<br />
<br />We have one of the biggest collectecions of Retro Video Games in the UK, and have genres ranging from Puzzle
Games and Platformers, to Roleplaying Games and Stratgey Games.
<br />
<br />Our staff have over 100 years combined experience of playing retro video games and a professional certified
Nintendo technician, so if you want a recommendation for your
<br />sons birthday present, or you need to get your old GameCube repaired; we are your guys.</p>
</div>
</div>
<div class="col-md-6">
<div id="slideshow" class="centerBlock hidden-xs hidden-sm hidden-md">
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG1.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L1.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG2.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L2.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG3.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L3.png" width="158" height="162">
</div>
</div>
</div>
</div>
<div class="row">
<!--Row 3-->
<div class="col-md-12">
<img src="Graphics/Aracde3.png" id="Vector" class="img-responsive center-block" class="hidden-xs" />
</div>
</div>
</div>
</div>
<footer class="footer-basic-centered">
<p class="footer-company-motto">Expand Your Retro Playground.</p>
<p class="footer-links">
Home ·
Stock ·
About Us ·
Contact Us</p>
<p class="footer-company-name">Retro Games Arcade ɠ2015</p>
</footer>
</div>
</div>
</body>
</html>
Very difficult to read through that code, so I'm not sure if I'm targeting the right area.
I'm assuming you want these images to be in-line:
<div class="col-md-6">
<div id="slideshow" class="centerBlock hidden-xs hidden-sm hidden-md">
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG1.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L1.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG2.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L2.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG3.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L3.png" width="158" height="162">
</div>
</div>
</div>
Just use bootstrap:
<div class="col-md-6">
<div class="col-md-4">
*images*
</div>
<div class="col-md-4">
*images*
</div>
<div class="col-md-4">
*images*
</div>
</div>
I am new to the CSS and HTML world and am struggling with my content overlapping whenever I resize my browser. If someone could take a look at my code and help me understand how to fix this issue that would help a lot! Thank you!
HTML:
<!doctype html>
<html>
<head>
<link href="java.js" rel="alternate stylesheet" type="text/javascript">
<link href="stylessheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<link href="gallery/src/paintwithlight/lightbox.css" rel="stylesheet">
<title>Neon Angels</title>
</head>
<body class="fix">
<div id="wrapper">
<div class="section black" id="section1">
<h2 id="welcome">The Neon Angels Welcome You!
<img src="wingslogo.svg" alt="" id="top">
<img src="wingslogo.svg" alt="" id="top2">
</h2>
<p>
<img src="wings.jpg" alt="wings" width="750" id="wings">
</p>
<ul class="nav">
<li>About Us</li>
<li>Painting with Light</li>
<li>Portraits</li>
<li>Nature</li>
<li>Contact Us</li>
</ul>
<div class="mouse">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</div>
</div>
<div class="section about" id="section2">
<h2 id="abouthead">About the Neon Angels</h2>
<p id="about">
The Neon Angels specialize in painting with light photography. We absolutely love that our job consist of playing in the dark with glow sticks for hours. Our motto at Neon Angels is: "Even when it gets dark do not forget that you can glow". We are a unique company that loves abstract art, but we also do nature photography and portraits. Below you will find a video showing the process of how we work.
</p>
<iframe width="620" height="415" src="https://www.youtube.com/embed/Xzjy6kTZxW0" frameborder="0" allowfullscreen></iframe>
<ul class="nav">
<li>Welcome</li>
<li>Painting with Light</li>
<li>Portraits</li>
<li>Nature</li>
<li>Contact Us</li>
</ul>
<div class="mouse">
<div class="mouse-icon" >
<span class="mouse-wheel" id="blackmouse"></span>
</div>
</div>
</div>
<div class="section paint" id="section3">
<h2 id="painthead">Painting with Light</h2>
<p id="painting">
Painting with light is an art that takes time and rhythm. Normally we handle our sessions jamming out to music because it requires a type of rhythmic nature that only arises like when music is involved. Please feel free to look through any of our pictures and if you too would like a painting session please visit our contact page.
</p>
<div id="paintpic">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/angelin.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/abstract.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/anna.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/blue_light.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/butterfly.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/clash.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/craze.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/flower.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/greenswirl.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/halfcircle.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/mindblown.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/mystic.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/radiation.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/rainbow.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/stuckcircle.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/swirl.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/whitelight.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/wings.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/yellow-blue.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/zeus.jpg" width="300" height="200">
</div>
<ul class="nav">
<li>Welcome</li>
<li>About Us</li>
<li>Nature</li>
<li>Portraits</li>
<li>Contact Us</li>
</ul>
<div class="mouse">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</div>
</div>
<div class="section nature" id="section4">
<h2 id="naturehead">Nature</h2>
<p id="nature">
The reason why Neon Angels takes on nature photography is to always find the most unique perspectives. There are many places on Earth that the human eye neglects to see and that is where photography comes in.
</div>
<ul class="nav">
<li>Welcome</li>
<li>About Us </li>
<li>Painting with Light</li>
<li>Portraits</li>
<li>Contact Us</li>
</ul>
<div class="mouse">
<div class="mouse-icon" >
<span class="mouse-wheel" id="blackmouse"></span>
</div>
</div>
</div>
<div class="section portraits" id="section5">
<h2 id="portraithead">Portraits</h2>
<p id="port">
Neon Angels Photography would love to capture you in the light. </br>
Please check out our portraits for what we could do for you!
</p>
<div id="portpic">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0679.jpg" width="200" height="300">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0789.jpg" width="200" height="300">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0793.jpg" width="200" height="300">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_3202.jpg" width="200" height="300">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_0986.jpg" width="300" height="200">
<img class="gallery" src="gallery/src/Portraits/JPEG/IMG_4945.jpg" width="200" height="300">
</div>
<ul class="nav">
<li>Welcome</li>
<li>About Us</li>
<li>Painting with Light</li>
<li>Nature</li>
<li>Contact Us </li>
</ul>
<div class="mouse">
<div class="mouse-icon">
<span class="mouse-wheel"></span>
</div>
</div>
</div>
<div class="section contact" id="section6">
<h2 id="contacthead">Contact Neon Angels</h2>
<p id="paracontact">
The Neon Angels take pride in delivering the most unique photographs around and we would love to have you as a client. Please contact Neon Angels for any quetions about paint with light photography or a consult. Thank you!
</p>
<div id="last">
<img class="gallery" src="gallery/src/paintwithlight/JPEG/anna.jpg" width="900" height="700">
</div>
<p> Phone Number: 859-772-2156
</br>
Email: neonangels#gmail.com
</p>
<ul class="nav">
<li>Welcome</li>
<li>About Us</li>
<li>Painting with Light</li>
<li>Nature</li>
<li>Portraits</li>
</ul>
<div class="mouse">
<div class="mouse-icon" >
<span class="mouse-wheel" id="blackmouse"></span>
</div>
</div>
</div>
<footer> <div id="parawork"><i>Copyright © May 2nd, 2016</i> | <i>Neon Angels Photography</i></div> <img src="wingslogo-white2.svg" alt="" id="bottom">
<img src="wingslogo-white2.svg" alt="" id="bottom2">
</br>
<i>Email: neonangelsphotography#gmail.com</i>
</br>
</br>
<i> Phone Number: 859-772-2156</i>
</footer>
</div>
<script src="gallery/src/js/lightbox.js"></script>
</body>
</html>
CSS:
#charset "utf-8";
*{
margin:0;
padding:0;
}
body{
font-family:aguafina-script;
font-size: 34px;
font-style: italic;
letter-spacing:-1px;
}
#wrapper{
width: 100%;
margin: 0 auto;
}
.section{
text-shadow: 1px 1px 2px #f0f0f0;
text-align: center;
}
#top{
width: 100px;
height: 100px;
float: right;
}
#top2{
width: 100px;
height: 100px;
float: left;
}
#port{
margin-left: 300px;
margin-right: 300px;
padding-top: 25px;
}
#paracontact{
margin-left: 300px;
margin-right: 300px;
padding-top: 25px;
}
.section p#about{
color:#000000;
}
.section h2#abouthead{
background:#00FFE3;
padding: 50px;
}
.section h2#naturehead{
background:#00FFE3;
padding: 50px;
color: black;
}
.section #welcome{
background: #00FFE3;
color:#000000;
border-bottom: thick solid #00FFE3;
border-bottom-width: 30px;
padding-top: 10px;
}
.black{
height: 1200px;
background: black;
}
.contact{
background: #00FFE3;
color:#000000;
border-bottom: thick solid #00FFE3;
border-bottom-width: 30px;
padding-top: 10px;
letter-spacing: .25px;
line-height: 40px;
}
.nature{
height: 1600px;
background: #00FFE3;
color:#000000;
border-bottom: thick solid #00FFE3;
border-bottom-width: 30px;
padding-top: 10px;
letter-spacing:.25px;
line-height: 40px;
}
.about{
color:#000;
background:#00FFE3;
height: 1400px;
letter-spacing: .25px;
line-height: 40px;
}
#about{
margin-left: 300px;
margin-right: 300px;
padding-top: 25px;
}
#painthead{
padding: 50px;
}
#contacthead{
margin: 50px;
}
#nature{
margin-left: 300px;
margin-right: 300px;
padding-top: 25px;
}
.paint{
height: 1700px;
background: black;
color: white;
line-height: 40px;
}
#paintpic{
padding-left: 250px;
padding-right:250px;
padding-bottom:50px;
}
#portpic{
padding-left: 250px;
padding-right:250px;
padding-bottom:50px;
padding-top: 50px;
}
#natpic{
padding-left: 250px;
padding-right:250px;
padding-bottom:50px;
padding-top:50px;
}
.portraits{
background: #000000;
color: white;
height: 1400px;
letter-spacing: .25px;
line-height: 40px;
}
#painting{
margin-right: 300px;
margin-left: 300px;
padding-bottom: 75px;
letter-spacing: .25px;
}
iframe{
margin-top: 50px;
margin-bottom: 60px;
border:thick solid #FF0086;
border-width: 30px;
}
.nav{
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.black ul li{
white-space: nowrap;
display:inline;
color:#aaa;
float:left;
}
.black ul li a{
padding:0px 10px;
color:#f0f0f0;
white-space: nowrap;
}
.black ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
white-space: nowrap;
}
.about ul li{
display: inline;
color:#aaa;
padding:2px;
}
.about ul li a{
color:#000000;
}
.about ul li a:hover{
text-decoration: none;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
color:#FF8A91;
}
#portraithead{
padding: 50px;
}
.nature ul li{
float:left;
padding:2px;
margin:5px;
color:#aaa;
}
.nature ul li a{
display:block;
color:#222;
}
.nature ul li a:hover{
text-decoration:none;
color:#000;
}
.portraits ul li{
padding: 5px;
margin:5px;
display:inline;
color:#aaa;
float:left;
}
.paint ul li a{
color:#f0f0f0;
}
.paint ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
}
.paint ul li{
padding: 5px;
margin:5px;
display:inline;
color:#aaa;
float:left;
}
.portraits ul li a{
color:#f0f0f0;
}
.portraits ul li a:hover{
text-decoration: none;
color: #80F9FF;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
}
.contact ul li{
padding: 5px;
margin:5px;
display: inline;
color:#aaa;
float:left;
margin-top: 80px;
}
.contact ul li a{
color:#000000;
}
.contact ul li a:hover{
text-decoration: none;
font-style: normal;
font-weight: 400;
font-family: aguafina-script;
color:#FF8A91;
}
.mouse{
margin-top: 10%;
margin-bottom:20%;
margin-left:50%;
width: 100px;
}
.mouse-icon{
width: 25px;
height: 45px;
border: 2px solid white;
border-radius: 15px;
cursor: pointer;
position: relative;
text-align: center;
}
.mouse-wheel{
height: 6px;
margin: 2px auto 0;
display: block;
width: 3px;
background-color: white;
border-radius: 50%;
-webkit-animation: 1.6s ease infinite wheel-up-down;
-moz-animation: 1.6s ease infinite wheel-up-down;
animation: 1.6s ease infinite wheel-up-down;
}
#blackmouse{
background-color:#000000;
}
#-webkit-keyframes wheel-up-down {
0%
{
margin-top: 2px;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
margin-top: 20px;
opacity: 0;
}
}
#-moz-keyframes wheel-up-down {
0% {
margin-top: 2px;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
margin-top: 20px;
opacity: 0;
}
}#keyframes wheel-up-down {
0% {
margin-top: 2px;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
margin-top: 20px;
opacity: 0;
}
}
footer{
background-color:black;
text-align:center;
color: white;
padding: 30px;
height: 200px;
font-size:20px;
}
#bottom{
width: 100px;
height: 100px;
float: right;
}
#bottom2{
width: 100px;
height: 100px;
float: left;
}
#parawork{
margin-top: 50px;
}
#last{
padding-top: 50px;
padding-bottom: 50px;
}
I posted the part about your responsive video yesterday. Maybe you didn't see the code, I'll look after I see my kids for a while at the rest of what you have there
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</div>
I have created a webpage,which look like this
I have to display a image gallery in the yellow mark which I have made. I haved tried everything but it comes below the footer. Can I get some idea how can I achieve this?
here is my code
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index_style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li>Login</li>
<li>or</li>
<li>Register</li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li>Men's Clothing</li>
<li>Men's Accesories</li>
<li>Women's Clothing</li>
<li>Women's Accesories</li>
<li>Baby Products</li>
</ul>
</div>
<div class="extra">
<img src="extra.png">
<img src="extra1.png">
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<img src="face.png">
<img src="tweet.png">
<img src="you.png">
</footer>
</div>
</body>
</html>
******CSS
body {
//overflow: hidden;
background-color: #d0e4fe;
//background-image: url("background.jpg");
font-family: "Book Antiqua",Times New Roman, Georgia, Serif;
}
.nav
{
border-style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left
{
float:left
}
.pull-right
{
float:right
}
.clear
{
clear:both;
}
.container
{
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color:#bbb;
}
.extra0{
background-color: #555;
width: 250px;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata-head
{
font-size: 18px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color:#555;
border-right-color: #555;
border-top-color: #555;
}
.cata
{
color: #b3c0c8;
list-style-image: url("list.png");
line-height: 2.333em;
}
.foot
{
background:#ffab62;
width:100%;
height:30px;
position:absolute;
bottom:0;
left:0;
padding-left: 15px;
padding-bottom: 5px;
}
b
{
color: firebrick;
}
.extra
{
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main
{
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border:3px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
I have added some extra div to float the element. here is the link below http://codepen.io/anon/pen/yYwVLM
HTML
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li>Login</li>
<li>or</li>
<li>Register</li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<div class="pull-left">
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li>Men's Clothing</li>
<li>Men's Accesories</li>
<li>Women's Clothing</li>
<li>Women's Accesories</li>
<li>Baby Products</li>
</ul>
</div>
<div class="extra">
<img src="extra.png">
<img src="extra1.png">
</div>
</div>
<div class="pull-left">
ADD GALLERY HERE <br>
<img src="http://placehold.it/500x200">
<img src="http://placehold.it/500x200">
<img src="http://placehold.it/500x200">
</div>
<div class="clear"></div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="clear"></div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<img src="face.png">
<img src="tweet.png">
<img src="you.png">
</footer>
</div>
CSS
body {
overflow: hidden;
background-color: #d0e4fe;
background-image: url("background.jpg");
font-family: "Book Antiqua",Times New Roman, Georgia, Serif;
}
.nav
{
border-style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left
{
float:left;
}
.pull-right
{
float:right;
}
.clear
{
clear:both;
}
.container
{
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color:#bbb;
}
.extra0{
background-color: #555;
width: 250px;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata-head
{
font-size: 18px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color:#555;
border-right-color: #555;
border-top-color: #555;
}
.cata
{
color: #b3c0c8;
list-style-image: url("list.png");
line-height: 2.333em;
}
.foot
{
background:#ffab62;
width:100%;
height:30px;
position:absolute;
bottom:0;
left:0;
padding-left: 15px;
padding-bottom: 5px;
}
b
{
color: firebrick;
}
.extra
{
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main
{
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border:3px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
i changed you html structure i.e
Created one div with class gallery and put all images inside that div
in your html your images doesn't have any parent. if you use parent then it will help to move all chilled according to parent.
Note : see result in full screen
<div class="container">
<div class="extra0">
</div>
<div class="gallery">
<!---all imaged-->
</div>
</div>
body {
//overflow: hidden;
background-color: #d0e4fe;
//background-image: url("background.jpg");
font- amily: "Book Antiqua", Times New Roman, Georgia, Serif;
}
.nav {
border - style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left {
float: left
}
.pull-right {
float: right
}
.clear {
clear: both;
}
.container {
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color: # bbb;
width: 100 %;
display: inline-block;
}
.extra0 {
background-color: #555;
width: 20%;
display: inline-block;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata - head {
font-size: 18 px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color: #555;
border-right-color: #555;
border-top-color: #555;
}
.cata {
color: #b3c0c8;
list-style - image: url("list.png");
line-height: 2.333em;
}
.foot {
background: #ffab62;
width: 100%;
height: 30px;
position: fixed;
bottom: 0;
left: 0;
padding-left: 15px;
padding-bottom: 5px;
}
b {
color: firebrick;
}
.extra {
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main {
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border: 3 px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a: hover img {
border: 1 px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
.gallery {
width: 75%;
display: inline-block;
}
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li>Login</li>
<li>or</li>
<li>Register</li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="container">
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li>Men's Clothing</li>
<li>Men's Accesories</li>
<li>Women's Clothing</li>
<li>Women's Accesories</li>
<li>Baby Products</li>
</ul>
</div>
<div class="gallery">
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</div>
<div class="extra">
<img src="extra.png">
<img src="extra1.png">
</div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<img src="face.png">
<img src="tweet.png">
<img src="you.png">
</footer>
</div>
I have add some new div and css here is link check : http://codepen.io/anon/pen/BobQzo
body {
//overflow: hidden;
background-color: #d0e4fe;
//background-image: url("background.jpg");
font-family: "Book Antiqua",Times New Roman, Georgia, Serif;
}
.nav
{
border-style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left
{
float:left
}
.sidebar {
float: left;
width: 250px;
}
.pull-right
{
float:right
}
.clear
{
clear:both;
}
.container
{
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color:#bbb;
}
.gallery {
float: left;
width:80%;
margin-bottom: 40px;
}
.extra0{
background-color: #555;
width: 250px;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata-head
{
font-size: 18px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color:#555;
border-right-color: #555;
border-top-color: #555;
}
.cata
{
color: #b3c0c8;
list-style-image: url("list.png");
line-height: 2.333em;
}
.foot
{
background:#ffab62;
width:100%;
height:30px;
position:fixed;
bottom:0;
left:0;
float: left;
padding-left: 15px;
padding-bottom: 5px;
}
b
{
color: firebrick;
}
.extra
{
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main
{
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border:3px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index_style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li>Login</li>
<li>or</li>
<li>Register</li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="sidebar">
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li>Men's Clothing</li>
<li>Men's Accesories</li>
<li>Women's Clothing</li>
<li>Women's Accesories</li>
<li>Baby Products</li>
</ul>
</div>
<div class="extra">
<img src="extra.png">
<img src="extra1.png">
</div>
</div>
<div class="gallery">
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<img src="face.png">
<img src="tweet.png">
<img src="you.png">
</footer>
</div>
</body>
</html>
there is two div one sidebar and gallery
I think you can use position absolute and give the top & left for your div.
.img{
position: absolute;
top: 30px;
left: 30px;
}