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>
Related
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 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 create html page called AboutUs.html. I was tasked to complete the page but there is a problem. I want to align the three box in horizontally something like this:
but I try using some CSS code but still could not align in horizontal.
Wrong Output:
I want the first box to be left, for second box to be center and the third box to be right. Can anyone please help me fix this problem.
This is About.html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Two Trees Creative - About Us </title>
<link rel="stylesheet" href="_stylesheets/Css_Reset.css"/>
<link rel="stylesheet" href="_stylesheets/mystyle.css"/>
</head>
<body>
<div id="wrapper">
<header>
<a id="logo" href="#">Two Tree Creative</a>
<nav id="mainNav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="welcome">
<h1>Designing your world</h1>
<p>One pixel at a time</p>
</section>
<section id="about">
<h2>About us</h2>
<article id="about_info">
<p>Two Trees Creative is a full-service graphic design agency based in Ventura, CA. Our goal is to provide elegant work and unsurpassed customer service to our clients in every way.</p>
<h3>Meet Our Team of Creatives</h3>
<p>Collectively we have over 15 years experience in the graphic design industry, and our services include brand identity development, business cards, brochures, flyers, catalogs, and more. Thank you for considering us for your next project, and we hope to hear from you soon.</p>
</article>
<aside id="about_team">
<div class="row">
<div class="image">
<img src="_images/team/alex_morrales.jpg" alt="Alex Morrales" width="150" height="150">
<p>Alex Morrales</p>
</div>
<div class="image">
<img src="_images/team/david_kim.jpg" alt="David Kim" width="150" height="150">
<p>David Kim</p>
</div>
<div class="image">
<img src="_images/team/jenny_tabers.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
</div>
<div class="row"></div>
</aside>
</section>
<footer>
<p>Photoshop adapted from www.lynda.com - Photoshop CC for Web Designed by Justin Seeley</p>
</footer>
</div>
</body>
</html>
For mystyle.css code, under about_team id element i need to code something in order for the 3 box to be align in horizontally.
#wrapper {
max-width: 1280px;
margin: auto;
}
/*header*/
header {
background-color: white;
width:100%;
height: 165px;
text-align: center;
margin-top: 60px;
}
#logo {
background: url(../_images/ttc_logo.png) no-repeat;
width: 85px;
height: 85px;
margin: auto;
margin-bottom: 0px;
display: block;
text-indent: -9999px;
}
#welcome
{
background: url(../_images/banner.jpg);
width:100%;
height:650px;
overflow:hidden;
text-align:center;
color:white;
vertical-align:middle;
}
#welcome h1
{
font-size:4em;
font-family:'Adobe Garamond , serif';
padding-top:200px;
text-transform:uppercase;
}
#welcome p
{
font-size:3em;
font-family:'Adobe Garamond , serif';
font-style:italic;
font-weight:bold;
}
#about
{
margin:auto;
height:550px;
background-image:url(../_images/tree1.gif), url(../_images/tree1.gif);
background-position:-150px, 115%;
background-repeat:no-repeat, no-repeat;
}
#about h2
{
text-align:center;
text-transform: uppercase;
font: 3em 'Adobe Garamond, serif';
font-weight:bold;
padding-top:50px;
margin-bottom:25px;
color:rgb(82, 71,65);
}
#about h3
{
font:36px Arial, sans-serif;
margin-top:60px;
margin-bottom:10px;
color:rgb(134,118,92);
}
#about_info{
float:left;
margin: 0 auto;
padding-top:37px;
width:40%;
height:400px;
padding-left:125px;
}
#about_team
{
float:left;
margin: auto;
height:400px;
padding-top:37px;
padding-left:20px;
}
#mainNav{
width: 680px;
margin: auto;
}
#mainNav ul li {
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
}
#mainNav li a:link{
text-align: center;
display: block;
float: left;
width: 110px;
text-decoration: none;
text-transform: uppercase;
color: #5b866b;
margin: 20px 20px;
height: 20px;
padding: 5px;
border-radius: 5px;
}
#mainNav ul li a:hover,
#mainNav ul li a:focus
{
background: rgb(185,140,72);
color: white;
box-shadow: 2px 3px 4px 0px #CC9933;
}
footer{
background-color: #dee7e1;
text-align:center;
height:20px
padding:20px;
clear:both;
}
https://jsfiddle.net/ow6hc90f/1/
Just add
.image {
float: left;
}
and remove the float from this
#about_team {
/* float:left; */
margin: auto;
height:400px;
padding-top:37px;
padding-left:20px;
}
You can use CSS Flexbox. Make your three .image divs wrap under a parent div (.image-block - in my case).
Look at this Codepen
Something like this:
.image-block {
display: flex;
justify-content: center;
}
.image {
margin-right: 10px;
text-align: center;
}
<div class="image-block">
<div class="image">
<img src="http://placehold.it/200x200" alt="Alex Morrales" width="150" height="150">
<p>Alex Morrales</p>
</div>
<div class="image">
<img src="http://placehold.it/200x200" alt="David Kim" width="150" height="150">
<p>David Kim</p>
</div>
<div class="image">
<img src="http://placehold.it/200x200" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
</div>
Hope this helps!
Add width: 3 times (imageWidth+margin) into #about_team and add width: 150px and display: inline-block into .image. font-size: 0 in #about_team is to remove space between inline-block element, and you need to restore the size in the .image.
#about_team {
width: 480px;
float: right;
font-size: 0;
}
#about_team .image{
display: inline-block;
width: 150px;
margin-right: 10px;
font-size: 14px;
}
<aside id="about_team">
<div class="row">
<div class="image">
<img src="https://avatars3.githubusercontent.com/u/1024025?v=3&s=400" alt="Alex Morrales" width="150" height="150">
<p>Alex Morrales</p>
</div>
<div class="image">
<img src="https://pbs.twimg.com/profile_images/558109954561679360/j1f9DiJi.jpeg" alt="David Kim" width="150" height="150">
<p>David Kim</p>
</div>
<div class="image">
<img src="http://a5.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU0NTIzODQwMDE1.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
<div class="image">
<img src="http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE1ODA0OTcxNjk3OTMxNzg5.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
<div class="image">
<img src="http://i142.photobucket.com/albums/r96/thisdayinmusic/PaulMcCartneyHandsomePaul.png" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
<div class="image">
<img src="http://static.giantbomb.com/uploads/original/8/84561/1465721-georgeharrison.jpg" alt="Jenny Tabers" width="150" height="150">
<p>Jenny</p>
</div>
</div>
</aside>
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;
}
http://i.stack.imgur.com/SEFNd.png
I'm new to HTML5 so my code is likely to be messy, I'm trying to lay out block elements as shown above, but because I've chosen the body to float left it ends up below the slideshow. Here's how I've coded it:
#container {
height: 800px;
width: 985px;
position:relative;
}
<article>
<span class="titlespacer">title text here</span></p>
<ul>
<li class="bodyspacer">Bullet</li>
<span class="bodyspacer"><br>
</span>
<li class="bodyspacer">Bullet</li>
<span class="bodyspacer"><br>
</span>
<li class="bodyspacer">Bullet</li>
<span class="bodyspacer"><br>
</span>
<li class="bodyspacer">Bullet</li>
<span class="bodyspacer"><br>
</span>
<li class="bodyspacer">Bullet</li>
</ul>
<aside>
<div id="slideshow">
<img src="images/polaroid1.jpg" width="320" height="332" class="polaroid">
<img src="images/polaroid2.jpg" width="320" height="332" class="polaroid">
<img src="images/polaroid3.jpg" width="320" height="332" class="polaroid">
</div>
</aside>
</article>
CSS
#slideshow {
height: 332px;
width: 320px;
float: none;
clear:both;
}
.bodyspacer {
font-weight: normal;
font-size: 18px;
font-family: 'droid sans', Arial, Helvetica, sans-serif;
text-align: left;
display: block;
float: left;
width: 460px;
padding-right: 70px;
line-height: 20px;
margin-left: 80px;
padding-left: 5px;
list-style-image: url(../fishing/images/rod.png);
clear: none;
overflow: hidden;
}
.titlespacer {
font-family: 'Arvo', Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: 400;
text-align: center;
display: block;
float: left;
width: 435px;
padding-left: 50px;
padding-right: 50px;
background-repeat: no-repeat;
background-color: #1B378B;
margin-right: 10px;
height: 35px;
color: #FFF;
margin-top: 30px;
padding-top: 10px;
border: 3px double #FFF;
margin-left: 40px;
}
you'll need the following:
your css
#container {
width:960px;
position:relative;
}
header{
float:left;
}
article{
width:600px;
float:left;
}
aside{
width:360px;
float:left;
}
.clear{
clear:both;
}
your html5
<div id="container">
<header>your header</header>
<article>
<section>your content</section>
</article>
<aside>
<div id="slideshow">
<ul>
<li><img src="..."></li>
<li><img src="..."></li>
</ul>
</div>
</aside>
<div class="clear"></div>
<footer>your footer</footer>
</div>
i hope it helped you!