Hi am trying make this web page but am facing this problem am using inline block but its not making a new line it just keep on going in a straight line i need it to make a newline once it reaches MainPage padding limit how can i do this i thought inline automatically makes a newline
Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#MainPage {
padding-left: 230px;
padding-right: 230px;
}
body > #body-container {
height: auto;
min-height: 100%;
}
.pageData {
display: table;
table-layout: fixed;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.PageInner {
display: table-row;
}
.PageCard {
margin: 0 0 10px;
border: 0;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.gridItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
width: 196px;
word-wrap: break-word;
}
#Pagebox {
border-bottom: 1px solid #e2e2e2;
padding-left: 18px;
padding-right: 18px;
}
.UL-Slider {
width: 100%;
overflow: visible;
position: relative;
left: 0;
white-space: nowrap;
font-size: 0;
vertical-align: top;
-moz-transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
}
.MovieItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
width: 196px;
word-wrap: break-word;
}
.Video-CFix {
font-size: 11px;
color: #767676;
position: relative;
}
.LockUp-Thumbnail {
margin-bottom: 4px;
}
.VideoThumb {
font-size: 0;
}
.VideoTitle {
margin-right: 20px;
font-size: 13px;
margin-bottom: 1px;
max-width: 196px;
}
</style>
</head>
<body>
<div id="body-container">
<div id="MainPage">
<div class="pageData">
<div class="PageInner">
<div class="PageCard">
<div class="gridItem">
<div id="Pagebox">
<ul class="UL-Slider">
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
Movie
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
Movie
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
Movie
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
Movie
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
Movie
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
Movie
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
Movie
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
Movie
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have modified your css, you have to remove whitespace: nowrap from .UL-Slider and remove width from .gridItem. Also reduce padding from #MainPage
#MainPage {
padding-left: 100px;
padding-right: 100px;
}
body > #body-container {
height: auto;
min-height: 100%;
}
.pageData {
display: table;
table-layout: fixed;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.PageInner {
display: table-row;
}
.PageCard {
margin: 0 0 10px;
border: 0;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.gridItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
word-wrap: break-word;
}
#Pagebox {
border-bottom: 1px solid #e2e2e2;
padding-left: 18px;
padding-right: 18px;
}
.UL-Slider {
width: 100%;
overflow: visible;
position: relative;
left: 0;
white-space: normal;
font-size: 0;
vertical-align: top;
-moz-transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
}
.MovieItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
width: 196px;
word-wrap: break-word;
}
.Video-CFix {
font-size: 11px;
color: #767676;
position: relative;
}
.LockUp-Thumbnail {
margin-bottom: 4px;
}
.VideoThumb {
font-size: 0;
}
.VideoTitle {
margin-right: 20px;
font-size: 13px;
margin-bottom: 1px;
max-width: 196px;
}
Related
How do i add text (a title and a subtitle), to the images and a box shadow behind the boxes. I have tried inserting it under the container in css, but it doesn't work.
<div class="row">
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<li class="img_wrap">
<img class="img_img" src="resources/img/posterimage.jpg" alt="POS Device">
<p class="img_description">More on this</p>
</li>
</ul>
</div>
</div>
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<li class="img_wrap">
<img class="img_img" src="resources/img/Router.jpg" alt="Router Device ">
<p class="img_description">More on this</p>
</li>
</ul>
</div>
</div>
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<li class="img_wrap">
<img class="img_img" src="resources/img/Handwashed.jpg" alt="Boy washing hands">
<p class="img_description">More on this</p>
</li>
</ul>
</div>
</div>
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<li class="img_wrap">
<img class="img_img" src="resources/img/Fleetos.jpg" alt="Yellow Truck">
<p class="img_description">More on this</p>
</li>
</ul>
</div>
</div>
</div>
.product-box {
width: 100%;
float: left;
display: block;
max-height: auto;
margin-bottom: 80px;
overflow: hidden;
border-bottom: 100px solid #fff;
border-radius: 3px;
cursor: pointer;
box-shadow: 20px #404040;
font-size: 90%;
margin-top: 30px;
box-sizing: border-box;
}
.img_wrap {
list-style: none;
position: relative;
box-shadow: #bcbcbc;
overflow: hidden;
margin: 0px;
width: 100%;
background-color: #000;
}
.img_description {
text-align: center;
margin-top: 30px;
font-weight: 400;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -80%);
opacity: 0;
visibility: hidden;
color: #fff;
border: 2px solid #fff;
border-spacing: 5px;
font-size: 100%;
padding: 10px;
transition: opacity 0.2s, visibility 0.2s;
}
.img_img {
width: 100%;
opacity: 1;
display: block;
height: auto;
transform: scale(1.03);
transition: transform 0.2s;
text-decoration-style: solid;
backface-visibility: hidden;
overflow: hidden;
}
.img_img:hover {
transform: scale(1.15);
opacity: 0.4;
}
.img_wrap:hover .img_description {
visibility: visible;
opacity: 1;
}
How do i add text (a title and a subtitle), to the images and a box shadow behind the boxes. I have tried inserting it under the container in css, but it doesn't work.
Do you need such a result? In the css I added rules for the .row class to line up using flex.
.row {
display: flex;
justify-content: center;
}
.product-box {
width: 100%;
float: left;
display: block;
max-height: auto;
margin-bottom: 80px;
overflow: hidden;
border-bottom: 100px solid #fff;
border-radius: 3px;
cursor: pointer;
box-shadow: 20px #404040;
font-size: 90%;
margin-top: 30px;
box-sizing: border-box;
}
.img_wrap {
list-style: none;
position: relative;
box-shadow: #bcbcbc;
overflow: hidden;
margin: 0px;
width: 100%;
background-color: #000;
}
.img_description {
text-align: center;
margin-top: 30px;
font-weight: 400;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -80%);
opacity: 0;
visibility: hidden;
color: #fff;
border: 2px solid #fff;
border-spacing: 5px;
font-size: 100%;
padding: 10px;
transition: opacity 0.2s, visibility 0.2s;
}
.img_img {
width: 100%;
opacity: 1;
display: block;
height: auto;
transform: scale(1.03);
transition: transform 0.2s;
text-decoration-style: solid;
backface-visibility: hidden;
overflow: hidden;
}
.img_img:hover {
transform: scale(1.15);
opacity: 0.4;
}
.img_wrap:hover .img_description {
visibility: visible;
opacity: 1;
}
<div class="row">
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<p>Name1</p>
<li class="img_wrap">
<img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="POS Device">
<p class="img_description">More on this</p>
</li>
<p>Description1</p>
</ul>
</div>
</div>
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<p>Name2</p>
<li class="img_wrap">
<img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Router Device ">
<p class="img_description">More on this</p>
</li>
<p>Description2</p>
</ul>
</div>
</div>
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<p>Name3</p>
<li class="img_wrap">
<img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Boy washing hands">
<p class="img_description">More on this</p>
</li>
<p>Description3</p>
</ul>
</div>
</div>
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<p>Name4</p>
<li class="img_wrap">
<img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Yellow Truck">
<p class="img_description">More on this</p>
</li>
<p>Description4</p>
</ul>
</div>
</div>
</div>
This answer is where the name and description are under the block.
.row {
display: flex;
justify-content: center;
}
.product-box {
width: 100%;
float: left;
display: block;
max-height: auto;
margin-bottom: 80px;
overflow: hidden;
border-bottom: 100px solid #fff;
border-radius: 3px;
cursor: pointer;
box-shadow: 20px #404040;
font-size: 90%;
margin-top: 30px;
box-sizing: border-box;
}
.img_wrap {
list-style: none;
position: relative;
box-shadow: #bcbcbc;
overflow: hidden;
margin: 0px;
width: 100%;
background-color: #000;
}
.img_description {
text-align: center;
margin-top: 30px;
font-weight: 400;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -80%);
opacity: 0;
visibility: hidden;
color: #fff;
border: 2px solid #fff;
border-spacing: 5px;
font-size: 100%;
padding: 10px;
transition: opacity 0.2s, visibility 0.2s;
}
.img_img {
width: 100%;
opacity: 1;
display: block;
height: auto;
transform: scale(1.03);
transition: transform 0.2s;
text-decoration-style: solid;
backface-visibility: hidden;
overflow: hidden;
}
.img_img:hover {
transform: scale(1.15);
opacity: 0.4;
}
.img_wrap:hover .img_description {
visibility: visible;
opacity: 1;
}
<div class="row">
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<li class="img_wrap">
<img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="POS Device">
<p class="img_description">More on this</p>
</li>
<p>Name1</p>
<p>Description1</p>
</ul>
</div>
</div>
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<li class="img_wrap">
<img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Router Device ">
<p class="img_description">More on this</p>
</li>
<p>Name2</p>
<p>Description2</p>
</ul>
</div>
</div>
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<li class="img_wrap">
<img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Boy washing hands">
<p class="img_description">More on this</p>
</li>
<p>Name3</p>
<p>Description3</p>
</ul>
</div>
</div>
<div class="col span-1-of-4">
<div class="product-box">
<ul class="products-container">
<li class="img_wrap">
<img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Yellow Truck">
<p class="img_description">More on this</p>
</li>
<p>Name4</p>
<p>Description4</p>
</ul>
</div>
</div>
</div>
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 trying to create a mosaic of images, but i'm having a hard time positioning them.
The elements i'm using are floated left, have different sizes and are following a specific display order. Is there a way of doing it using only CSS?
This is how i want it to be:
And this is how it is right now:
Finally, what i've coded so far:
span {
font-family: Arial;
}
.mosaic_wrapper {
float: left;
clear: both;
overflow: hidden;
width: 100%;
max-width: 1075px;
margin-bottom: 50px;
}
.mosaic_wrapper div {
float: left;
width: 100%
}
.mosaic_wrapper div .image_wrapper {
width: 48%;
height: 400px;
float: left;
position: relative;
margin: 0.5% 0.5%;
overflow: hidden;
}
.mosaic_wrapper div .image_wrapper a {
width: 100%;
height: 100%;
float: left;
}
.mosaic_wrapper div .image_wrapper a:hover img {
transform: scale(1.1);
}
.mosaic_wrapper div .image_wrapper a:hover span.bg {
opacity: 0.5;
}
.mosaic_wrapper div .image_wrapper a img {
float: left;
width: 100%;
height: 100%;
transition: transform 0.4s ease-in-out;
backface-visibility: hidden;
filter: grayscale(0%);
}
.mosaic_wrapper div .image_wrapper a span.bg {
background-image: linear-gradient(to bottom, #999999, #222222);
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 5;
display: block;
transition: opacity 0.3s ease;
}
.mosaic_wrapper div .image_wrapper a div.text {
color: #ffffff;
position: absolute;
font-size: 1.7rem;
bottom: 0;
z-index: 10;
padding: 20px;
box-sizing: border-box;
width: 100%;
}
.mosaic_wrapper div .image_wrapper a div.text span {
float: left;
width: 100%;
}
.mosaic_wrapper div .image_wrapper a div.text span.parent {
font-size: 14px;
text-transform: uppercase;
}
.mosaic_wrapper div .image_wrapper a div.text span.dept {
font-size: 50px;
font-weight: bold;
line-height: 1.1;
}
.mosaic_wrapper div .image_wrapper a div.text span.desc {
font-size: 14px;
line-height: 1.2;
}
<div class="mosaic_wrapper">
<div>
<div class="image_wrapper" style="width: 58%;">
<a href="#">
<img src="http://placehold.it/623x400">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
<div class="image_wrapper" style="width: 40%;height: 800px;">
<a href="#">
<img src="http://placehold.it/430x800">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
<div class="image_wrapper" style="width: 28%;">
<a href="#">
<img src="http://placehold.it/300x400">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
<div class="image_wrapper" style="width: 29%;">
<a href="#">
<img src="http://placehold.it/300x400">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
<div class="image_wrapper" style="width: 100%;">
<a href="#">
<img src="http://placehold.it/1075x400">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
</div>
</div>
Can someone please help?
Thanks in advance!
Add a float:right to the 430x800 mosaic;
<div class="image_wrapper" style="width: 40%;height: 800px;float:right">
<a href="#">
<img src="http://placehold.it/430x800">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
Alternatively you can add an id attribute to the 430x800 mosaic like id="rightMosaic"and create this style for it:
.mosaic_wrapper div .image_wrapper#rightMosaic{
float: right;
}
And of corse remove it from the inline style
I would use flex rows and columns to lay this out. Adjusted your image dimensions a little so everything will line up
* {
margin:0;padding:0;box-sizing:border-box;
}
.flex {
display: flex;
}
.col {
flex-direction: column;
}
img {
max-width: 100%;
display: block;
}
<div class="flex" style="margin: 0 0 12px;">
<div class="flex col" style="margin: 0 12px 0 0;">
<div style="margin: 0 0 12px 0;">
<img src="http://placehold.it/612x400">
</div>
<div class="flex">
<div style="margin: 0 12px 0 0;">
<img src="http://placehold.it/300x400">
</div>
<div>
<img src="http://placehold.it/300x400">
</div>
</div>
</div>
<div>
<img src="http://placehold.it/430x812">
</div>
</div>
<div>
<img src="http://placehold.it/1054x400">
</div>
I currently have two buttons that are part of a container div that is overlapped by another container div.
The bottom div overlays the top div which makes the buttons non-clickable. I can't seem to figure out how to make my buttons clickable without giving the whole top container div a higher z-index then the bottom container. Because when I do this, I will lose part of my background from the bottom div. I've been trying all sorts of stuff related to z-index.
Perhaps any of you can help me out here?
Here's the code for the top div:
.banner-slider{
float: left;
width: 100%;
list-style: none;
height: 1239px;}
.banner{
height: 1239px;
position: relative;
line-height: 1px;
padding: 0;
background: #fff;}
.banner ul li{
height: 1239px;}
.banner-image{
float: left;
width: 100%;
height: 1239px;
padding-right: 15px;
padding-left: 15px;}
.banner-image .row{
height: 100%;
}
.banner-image .table-cell{
vertical-align: top;
}
.max-banner {
float: left;
max-width: 554px;
width: 100%;
padding-top: 180px;
}
.banner-content {
float: left;
width: 100%;
}
.banner-content h3{
font-size: 34px;
line-height: 40px;
font-weight: 300;
color: #ce327f;
}
.banner-content p{
font-size: 35px;
line-height: 46px;
color: #000;
font-weight: 300;
margin-top: 10px;
}
.banner-content p b{
font-weight: 900;
}
.banner-btn{
float: left;
width: 100%;
margin-top: 17px;
}
.banner-btn a:first-child{
background: #cf327f;
margin-right: 15px;
}
.banner-btn a:first-child:hover{
background: #1f1c1d;
}
.banner-btn a{
display: inline-block;
font-size: 15px;
line-height: 16px;
text-transform: uppercase;
color: #fff;
font-weight: 900;
background: #1f1c1d;
float: left;
border-radius: 2px;
padding: 12px 34px 11px;
margin-top: 15px;
}
.banner-btn a:hover{
color: #fff;
background: #cf327f;
}
.banner-down {
float: left;
left: 0;
margin-top: 0;
position: absolute;
top: 100px;
width: 88px;
z-index: 99;
}
.banner-down a {
border: 1px solid #e6e6e6;
border-radius: 100%;
display: inline-block;
height: 88px;
width: 88px;
text-align: center;
}
.banner .banner-down .table-cell{
vertical-align: middle;
}
.banner-down a:hover{
background: #cf327f;
border: 1px solid transparent;
}
.banner-down a:hover i{
color: #fff;
}
.banner-down i {
color: #cf327f;
font-size: 42px;
transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
-ms-transition: all 0.2s ease-in 0s;
line-height: 42px;
}
.banner .bx-controls-direction{
display: none;
}
.banner .bx-pager.bx-default-pager{
position: absolute;
right: 20px;
top: 289px;
width: 20px;
padding: 0;
}
.banner .bx-pager-item:first-child{
margin: 0;
}
.banner .bx-pager-item{
float: right;
width: 100%;
margin-top: 7px;
}
.banner .bx-pager-item a{
display: inline-block;
width: 10px;
height: 10px;
border: 3px solid #fff;
border-radius: 100%;
background: #D8D9DB;
float: right;
margin: 0;
}
.banner .bx-pager-item a:hover, .banner .bx-pager-item a.active{
background: #D13282!important;
}
<div class="container banner">
<ul class="banner-slider">
<li>
<div class="banner-image" style="background: url(<?php echo get_template_directory_uri(); ?>/images/banner.png) no-repeat center top; background-size: cover">
<div class="row">
<div class="table">
<div class="table-cell">
<div class="max-banner">
<div class="banner-content">
<h3>Lorem</h3>
<P>Lorem</P>
</div>
<div class="banner-btn">
Lorem
Lorem
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Here's the code for the bottom div:
.onze-section{
background: url("../images/sap-bg.png") no-repeat left top;
background-size: 100% 100%;
min-height: 1368px;
margin-top: -600px;
position: relative;
z-index: 10;
}
.onze-sap{
position: absolute;
top: 550px;
left: 0;
}
.full-section {
float: left;
padding-top: 372px;
width: 100%;
}
.mrg{
margin: 0 -20px;
}
.full-section .half:first-child{
margin: 0;
}
.full-section .half{
width: 50%;
padding: 0 20px;
float: right;
position: relative;
z-index: 100;
}
.left-max{
float: left;
width: 100%;
max-width: 570px;
}
.left-content {
float: left;
padding-top: 81px;
width: 100%;
}
.left-content h2{
color: #110c0c;
font-size: 40px;
line-height: 46px;
font-weight: 900;
margin-bottom: 35px;
}
.margin-none{
margin-bottom: 0!important;
}
.left-content p {
color: #110c0c;
display: block;
font-size: 15px;
font-weight: 500;
line-height: 27px;
margin-bottom: 30px;
}
.left-content p b{
font-weight: 900;
color: #ce327f;
}
.left-bottom{
float: left;
width: 100%;
margin-top: 10px;
}
<div class="container onze-section">
<div class="onze-sap"><img src="<?php echo get_template_directory_uri(); ?>/images/left-sap.png" alt=""/> </div>
<div class="social-field">
<a href="https://twitter.com" target="_blank" title="twitter">
<img class="twitter" src="<?php echo get_template_directory_uri(); ?>/images/sc1.png" alt=""/>
</a>
<a href="https://www.facebook.com/" target="_blank" title="facebook">
<img class="facebook" src="<?php echo get_template_directory_uri(); ?>/images/sc2.png" alt=""/>
</a>
<a href="https://www.linkedin.com/in/" target="_blank" title="linkedin">
<img class="linkedin" src="<?php echo get_template_directory_uri(); ?>/images/sc3.png" alt=""/>
</a>
<a href="mailto:" title="email">
<img class="mailing" src="<?php echo get_template_directory_uri(); ?>/images/sc5.png" alt=""/>
</a>
<a href="<?php echo home_url(); ?>/contact" target="_blank" title="Contact">
<img class="contact" src="<?php echo get_template_directory_uri(); ?>/images/sc6.png" alt=""/>
</a>
</div>
<div class="row">
<div class="banner-down" id="scrolldown">
<a href="#" title="">
<div class="table">
<div class="table-cell">
<i class="fa fa-angle-down"></i>
</div>
</div>
</a>
</div>
<div class="full-section">
<div class="mrg">
<div class="half ">
<div class="right-max">
<div class="right-logo">
<img src="<?php echo get_template_directory_uri(); ?>/images/lorem.png" alt=""/>
</div>
<div class="right-content">
<h3>lorem</h3>
<h2>lorem</h2>
</div>
<div class="right-box">
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/hart.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/plus.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/apple.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/lotas.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/cart.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
<div class="rh-bx">
<div class="rh-img">
<img src="<?php echo get_template_directory_uri(); ?>/images/clock.png" alt=""/>
</div>
<div class="rh-text">
lorem
</div>
</div>
</div>
</div>
</div>
<div class="half">
<div class="left-max">
<div class="left-content" id="scrollin">
<?php the_content(); ?>
</div>
<div class="left-bottom">
<div class="lf-rw">
lorem
</div>
<div class="lf-rw">
<img width="32px" src="<?php echo get_template_directory_uri(); ?>/images/clock.png" alt=""/>
</div>
<div class="lf-rw">
<P>lorem</P>
<P>lorem</P>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You could disable pointer events with css on the top level div:
pointer-events: none;
Add higher z-index to the buttons. Or put pointer-events: none to the overlaying div.
Here's a demo showing all situations:
https://jsfiddle.net/nu8n16w0/
.cont {
position: relative;
}
.one {
background: black;
}
.two {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: white;
opacity: 0.5;
}
.cont.pe .two{
pointer-events: none;
}
.cont.zi .one input {
position: relative;
z-index: 1;
}
<div class="cont">
<div class="one">
<input type="button" value="can't be clicked">
</div>
<div class="two"></div>
</div>
<br>
<div class="cont pe">
<div class="one">
<input type="button" value="can be clicked">
</div>
<div class="two"></div>
</div>
<br>
<div class="cont zi">
<div class="one">
<input type="button" value="can be clicked and is fully visible">
</div>
<div class="two"></div>
</div>
Without posting the html and css you have problem with, nobody can help you further..
I'm making my first website and I ran into some problems with tables and the background. Here's a screen pic I took with my phone.If I preview this on my computer screen it look's a bit better because I don't have the background problem but anyway I can't figure out what is wrong with tables (specifically the 4th pic) and is my background not responsive. Btw all the picture are the same size....
HTML
<html>
<body>
<head>
<meta charset="utf-8">
<title>Projects</title>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<head>
<div class="logo" >
<img src="lg.png" alt="" width="180" height="178" class="logo"/>
</div>
<meta charset="utf-8">
<title>mt</title>
</head>
<body>
<nav>
<ul>
<li>PROJECTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="box" >
<div class="table" >
<table width="900" height="200" border="0" cellspacing="7" cellpadding="9">
<tbody>
<tr>
<td>
<div class="row" >
<li>
<a href="project1.html">
<div class="raste">
<img src="logos.jpg" alt="" width="300"/>
</div>
</a>
</li>
</div>
</td>
<td>
<li>
<a href="project2.html">
<div class="raste">
<img src="elite.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project3.html">
<div class="raste">
<img src="time.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
<tr>
<td>
<li>
<a href="project4.html">
<div class="raste">
<img src="booksrie.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project5.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project6.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS
#charset "utf-8";
.logo {
padding-bottom: 0.5%;
text-align: center;
}
nav {
font-family: "Proxima";
text-align: center;
font-size: 25px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 1%;
padding-left: 50px;
color: #000000;
}
li {
display: inline;
color: #000000;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-color: #F6F6F6;
}
table {
margin-left: auto;
margin-right: auto;
}
.raste img {
height: 190px;
width: 300px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
border: none;
border-radius: 10px;
}
.raste img:hover {
-webkit-transform: scale(1.079);
transform: scale(1.079);
}
.table {
display: table;
margin: 1em auto;
}
.row {
display: table-row;
}
.raste {
display: table-cell;
}
#font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);
}
ul {
padding: 0;
}
.box {
background:#000000;
width: 100%;
background-size: 0% auto;
margin-bottom: 5%;
border-radius: 10px;
padding-bottom: 1%;
padding-top: 1%;
}
Use bootstrap grid example fiddle
HTML
<div class="main pull-left">
<div class="col-sm-6 col-md-4 box">1</div>
<div class="col-sm-6 col-md-4 box">2</div>
<div class="col-sm-6 col-md-4 box">3</div>
<div class="col-sm-6 col-md-4 box">4</div>
<div class="col-sm-6 col-md-4 box">5</div>
<div class="col-sm-6 col-md-4 box">6</div>
</div>
CSS
body{padding:0px; margin:0px;}
.main{width:100%; background:#000; border-radius:10px; padding:10px;}
.main .box{background:#fff; color:#000; border:solid 4px #000; padding:20px 0px; text-align:center;}
You can clean up your html deleting all tags useless , so it is easier to style, to maintain and to validate.
example :
#charset "utf-8";
.logo {
padding-bottom: 0.5%;
text-align: center;
}
nav {
font-family: "Proxima";
text-align: center;
font-size: 25px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 1%;
padding-left: 50px;
color: #000000;
}
nav:before {
content: url(http://lorempixel.com/100/100/people/6);
border-radius: 50%;
overflow: hidden;
}
nav:before,
.table {
display: table;
margin: auto;
max-width: 1040px;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-color: #F6F6F6;
}
.raste img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
border: none;
border-radius: 10px;
}
.raste img:hover {
-webkit-transform: scale(1.079);
transform: scale(1.079);
}
.box {
display: inline-flex;
flex-wrap: wrap;
justify-content:center;
}
.raste {
padding: 15px;
}
#font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);
}
ul {
padding: 0;
}
.box {
background: #000000;
background-size: 0% auto;
margin-bottom: 5%;
border-radius: 10px;
padding: 16px;
}
<nav> PROJECTS ABOUT CONTACT
</nav>
<div class="table">
<div class="box">
<a href="project1.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/456&text=logo.jpg" alt="" />
</div>
</a>
<a href="project2.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/55f&text=elite.jpg" alt="" width="300" />
</div>
</a>
<a href="project3.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/fed&text=time.jpg" alt="" width="300" />
</div>
</a>
<a href="project4.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/bad&text=booksrie.jpg" alt="" width="300" />
</div>
</a>
<a href="project5.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/a55&text=log.jpg" alt="" width="300" />
</div>
</a>
<a href="project6.html">
<div class="raste">
<img src="http://dummyimage.com/300x190/ef0&text=log.jpg" alt="" width="300" />
</div>
</a>
</div>
</div>