I am trying to put text over an image, but when I give the text parametr left: it's cut in half.
HTML:
<div class="c-subcat-item">
<div class="pro-img-wrap">
<div class="pro-img-wrap-in">
<div class="img-middle-center">
<a class="img-middle-wrap" href="/Wines/Product/1417">
<img src="/Images/bottle-red.jpg" alt="Produkt">
</a>
</div>
</div>
</div>
<div class="subcat-item-details">
<div class="product-desc-container">
<div class="">
<a class="item-name" href="/Wines/Product/1417">Avilla</a>
<div class="clearfix"></div>
<div class="item-our-price">
<span class="item-sold-out">Chwilowo niedostępny</span>
</div>
<div class="item-detail-price">
<span class="item-price-value">45,00 zł </span>
</div>
</div>
<div class="div-empty-margin"></div>
</div>
<div class="clearfix"></div>
<span class="item-more">
<a class="item-more" href="/Wines/Product/1417">Zobacz więcej</a>
</span>
<div class="div-empty-margin"></div>
<div class="add-to-cart">
</div>
</div>
</div>
CSS:
body {
background-color: #fffff7;
color: #666;
font-family: 'Roboto Condensed',sans-serif;
font-size: 10px;
height: 100%;
margin: 0;}
html, body, .page-wrapper {
width: 100%;
min-width: 1024px;
margin-left: auto;
margin-right: auto;}
.page-wrapper {
height: 100%;
}
.page-content-wrapper {
min-height: 100%;
text-align: center;
}
.main {
display: inline-block;
margin: 20px auto 0;
margin-bottom: 61px;
position: relative;
text-align: left;
width: 965px;
}
.wrapper {
float: left;
margin-bottom: 20px;
width: 100%;
}
.content {
float: left;
width: 100%;
}
.content-main-wrapper1 {
float: left;
width: 100%;
}
.content-main-wrapper2 {
float: left;
position: relative;
right: 767px;
width: 100%;
}
.content-wo-padding {
float: left;
left: 768px;
position: relative;
width: 726px;
}
.pro-img-wrap {
float: left;
}
.c-subcat-item {
float: left;
padding: 20px;
position: relative;
width: 726px;
}
.pro-img-wrap-in {
border: 1px solid #e8e5e5;
float: left;
height: 240px;
overflow: hidden;
width: 160px;
display: table;
}
.img-middle-center {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
display: table-cell;
float: none;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
.subcat-item-details {
float: right;
height: 242px;
width: 544px;
position: relative;
}
.product-desc-container {
overflow: hidden;
position: relative;
}
h2.item-name, a.item-name {
color: #333;
float: left;
font-size: 16px;
font-weight: bold;
line-height: 15px;
margin: 2px 0 5px 0;
padding: 0;
width: 100%;
text-transform: uppercase;
}
.clearfix {
clear: both;
}
.item-our-price {
float: left;
margin-top: 10px;
width: 100%;
}
.item-our-price span.item-sold-out {
position: relative;
color: #f00;
background-color: #fff;
padding: 10px;
border: solid 1px #f00;
font-size: 1.3em;
cursor: default;
left: -60px;
}
You can check it here
Remove overflow: hidden; from class .product-desc-container
body {
background-color: #fffff7;
color: #666;
font-family: 'Roboto Condensed',sans-serif;
font-size: 10px;
height: 100%;
margin: 0;}
html, body, .page-wrapper {
width: 100%;
min-width: 1024px;
margin-left: auto;
margin-right: auto;}
.page-wrapper {
height: 100%;
}
.page-content-wrapper {
min-height: 100%;
text-align: center;
}
.main {
display: inline-block;
margin: 20px auto 0;
margin-bottom: 61px;
position: relative;
text-align: left;
width: 965px;
}
.wrapper {
float: left;
margin-bottom: 20px;
width: 100%;
}
.content {
float: left;
width: 100%;
}
.content-main-wrapper1 {
float: left;
width: 100%;
}
.content-main-wrapper2 {
float: left;
position: relative;
right: 767px;
width: 100%;
}
.content-wo-padding {
float: left;
left: 768px;
position: relative;
width: 726px;
}
.pro-img-wrap {
float: left;
}
.c-subcat-item {
float: left;
padding: 20px;
position: relative;
width: 726px;
}
.pro-img-wrap-in {
border: 1px solid #e8e5e5;
float: left;
height: 240px;
overflow: hidden;
width: 160px;
display: table;
}
.img-middle-center {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
display: table-cell;
float: none;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
.subcat-item-details {
float: right;
height: 242px;
width: 544px;
position: relative;
}
.product-desc-container {
position: relative;
}
h2.item-name, a.item-name {
color: #333;
float: left;
font-size: 16px;
font-weight: bold;
line-height: 15px;
margin: 2px 0 5px 0;
padding: 0;
width: 100%;
text-transform: uppercase;
}
.clearfix {
clear: both;
}
.item-our-price {
float: left;
margin-top: 10px;
width: 100%;
}
.item-our-price span.item-sold-out {
position: relative;
color: #f00;
background-color: #fff;
padding: 10px;
border: solid 1px #f00;
font-size: 1.3em;
cursor: default;
left: -60px;
}
<div class="c-subcat-item">
<div class="pro-img-wrap">
<div class="pro-img-wrap-in">
<div class="img-middle-center">
<a class="img-middle-wrap" href="/Wines/Product/1417"> <img src="/Images/bottle-red.jpg" alt="Produkt">
</a>
</div>
</div>
</div>
<div class="subcat-item-details">
<div class="product-desc-container">
<div class="">
<a class="item-name" href="/Wines/Product/1417">Avilla</a>
<div class="clearfix"></div>
<div class="item-our-price">
<span class="item-sold-out">Chwilowo niedostępny</span>
</div>
<div class="item-detail-price">
<span class="item-price-value">45,00 zł </span>
</div>
</div>
<div class="div-empty-margin"></div>
</div>
<div class="clearfix"></div>
<span class="item-more">
<a class="item-more" href="/Wines/Product/1417">Zobacz więcej</a>
</span>
<div class="div-empty-margin"></div>
<div class="add-to-cart">
</div>
</div>
</div>
Remove overflow:hidden from .product-desc-container that's the reason for the text not visible over the image
remove overflow:hidden from .product-desc-container
see here : jsfiddle
code
.product-desc-container {
/* overflow: hidden; */
position: relative;
}
Related
I tried to add margin-left : 25%; to class .four but not work. how can i do ?
.one{
width: 100%;
}
.two{
margin: 0;
padding: 0;
border: 0;
background: transparent;
float: left;
position: relative;
width: 100%;
margin-bottom: 15px;
}
.three{
float: left;
list-style: none;
color: #333;
font-size: 19px;
width: 100%;
background: #fff;
border: 1px solid #ccc;
padding: 10px 0px;
}
.four{
margin-left: 10px;
width: 246px;
height: 138px;
margin-right: 16px;
display: inline-block;
position: relative;
float: left;
}
.five{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.six{
transform: translateY(-50%);
top: 50%;
left: 0;
background-color: transparent;
display: block;
position: absolute;
}
.seven{
width: 246px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<div class="one">
<ul class="two">
<li class="three">
<div class="four">
<a class="five" href="">
<div class="six">
<img class="seven" src="http://kawamono.com/img/cms/Hobby/Coin%20Bank/x100828-sanrio-hellokitty-mini-bank-ylw-SET.jpg.pagespeed.ic.iSCJA9hZBG.jpg">
</div>
</a>
</div>
</li>
</ul>
</div>
Change the css of .four to this:
.four {
width: 246px;
height: 138px;
margin: 0 auto;
position: relative;
}
.one {
width: 100%;
}
.two {
margin: 0;
padding: 0;
border: 0;
background: transparent;
float: left;
position: relative;
width: 100%;
margin-bottom: 15px;
}
.three {
float: left;
list-style: none;
color: #333;
font-size: 19px;
width: 100%;
background: #fff;
border: 1px solid #ccc;
padding: 10px 0px;
}
.four {
width: 246px;
height: 138px;
margin: 0 auto;
position: relative;
}
.five {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.six {
transform: translateY(-50%);
top: 50%;
left: 0;
background-color: transparent;
display: block;
position: absolute;
}
.seven {
width: 246px;
display: block;
margin: 0 auto;
max-width: unset;
}
<div class="one">
<ul class="two">
<li class="three">
<div class="four">
<a class="five" href="">
<div class="six">
<img class="seven" src="http://kawamono.com/img/cms/Hobby/Coin%20Bank/x100828-sanrio-hellokitty-mini-bank-ylw-SET.jpg.pagespeed.ic.iSCJA9hZBG.jpg">
</div>
</a>
</div>
</li>
</ul>
</div>
I noticed that you want to center the image yet you are using float:left to .four, it is conflicting to the result you are expecting. And I changed your margins to margin:0 auto; to properly center it horizontally
You can add:
width: 100%;
To style for .four and .six, This will center the image sideways. Those divs does not have a with, so the the image will not center.
Hope this helps 😄
Oel Kristian Ek Hornnes
I'm trying to make a portfolio page. I've created a section with divs nested inside. The first two on the top of the section were set to relative and they work. I've tried to set the rest to relative and they show on top of the first two divs. Help!
#portfolio {
width: 650px;
background-color: white;
margin-left: 75px;
margin-top: 120px;
margin-right: 40px;
margin-bottom: 200px;
padding: 15px;
float: left;
border: 1px solid #dddddd;
overflow: auto;
clear: both;
}
#blog {
position: relative;
float: left;
width: 40%;
}
#blog img{
float: left;
width: 100%;
margin-right: 10px;
position: absolute;
}
#blog p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#hangman {
position: relative;
float: right;
width: 40%;
}
#hangman img{
float: left;
width: 100%;
position: absolute;
}
#hangman p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#playlist {
position: relative;
float: left;
width: 40%;
}
#playlist img {
}
#playlist p {
}
<section id="portfolio">
<div id="blog">
<img src="assets/images/icon1.jpg">
<p>Blog</p>
</div>
<div id="hangman">
<img src="assets/images/icon2.jpg">
<p>Hangman Game</p>
</div>
<div id="playlist">
<img src="assets/images/icon3.jpg">
<p>Playlist</p>
</div>
<div id="maps">
<img src="assets/images/icon4.jpg">
<p>Map Page</p>
</div>
<div id="pets">
<img src="assets/images/icon5.jpg">
<p>Pets</p>
</div>
</section>
The positon:absolute on your img tags in blog and hangman divs was causing this problem. Postion:absolute element do not pick height so thats why everything was overlapping.
Here is your updated code:
#portfolio {
width: 650px;
background-color: white;
margin-left: 75px;
margin-top: 120px;
margin-right: 40px;
margin-bottom: 200px;
padding: 15px;
float: left;
border: 1px solid #dddddd;
overflow: auto;
clear: both;
}
#blog {
position: relative;
float: left;
width: 40%;
}
#blog img {
float: left;
width: 100%;
margin-right: 10px;
}
#blog p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#hangman {
position: relative;
float: right;
width: 40%;
}
#hangman img {
float: left;
width: 100%;
}
#hangman p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#playlist {
position: relative;
float: left;
width: 40%;
}
#playlist img {}
#playlist p {}
<section id="portfolio">
<div id="blog">
<img src="https://dummyimage.com/600x400/000/fff&text=blog">
<p>Blog</p>
</div>
<div id="hangman">
<img src="https://dummyimage.com/600x400/f00/fff&text=hangman">
<p>Hangman Game</p>
</div>
<div id="playlist">
<img src="https://dummyimage.com/600x400/0f0/fff&text=playlist">
<p>Playlist</p>
</div>
<div id="maps">
<img src="https://dummyimage.com/600x400/00f/fff&text=maps">
<p>Map Page</p>
</div>
<div id="pets">
<img src="https://dummyimage.com/600x400/ff0/fff&text=pets">
<p>Pets</p>
</div>
</section>
#charset "utf-8";
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #F2F2F2;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: expresswayregular;
}
#font-face {
font-family: 'expresswayregular';
src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
url('fonts/expressway_rg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#header {
position: fixed;
background: #333333;
width: 100%;
height: 50px;
padding: 0;
margin: 0;
top: 0;
}
#header-content {
background: #333333;
width: 1280px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
#logo {
position: absolute;
}
#currentsite-info font {
position: absolute;
height: 30px;
width: auto;
margin-left: 60px;
padding: 10px;
color: #fff;
font-size: 26px;
}
#search-box {
width: 400px;
height: 50px;
margin-right: auto;
margin-left: auto;
}
#search {
background: #fff;
width: 356px;
height: 16px;
margin-top: 10px;
margin-bottom: 10px;
padding: 6px;
border: 1px solid #fff;
border-radius: 6px 0 0 6px;
}
#submit {
float: right;
background: #fff;
width: 29px;
height: 28px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-radius: 0 6px 6px 0;
}
#menu {
margin-right: 30px;
margin-left: 25px;
z-index: 1000;
}
.menu-linkbox a{
position: static;
float: right;
width: 60px;
height: 14px;
top: 0;
padding: 18px 15px 18px 15px;
color: #F2F2F2;
font-size: 14px;
text-decoration: none;
text-align: center;
}
.menu-linkbox:hover a {
color: #2997D3;
transition: all 500ms;
}
#menu-linkbox-live a {
color: #2997D3;
}
#main-content {
background: #fff;
min-height: 100%;
width: 1280px;
margin: 0 auto;
padding-top: 50px;
overflow: auto;
}
#content-articles {
background: #F2F2F2;
width: 1220px;
bottom: 0;
margin: 20px;
padding: 10px;
border: 1px solid #000;
overflow: auto;
}
#article1 {
width: 550px;
margin: 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article1 h1 {
font-size: 40px;
}
#article1-content {
width: 100%;
}
#photo1 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo1:hover {
opacity: 0.8;
}
#article2 {
width: 550px;
margin: 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article2 h1 {
font-size: 40px;
}
#article2-content {
width: 100%;
}
#photo2 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo2:hover {
opacity: 0.8;
}
#article3 {
width: 550px;
margin: 60px 10px 10px 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article3 h1 {
font-size: 40px;
}
#article3-content {
width: 100%;
}
#photo3 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo3:hover {
opacity: 0.8;
}
#article4 {
width: 550px;
margin: 60px 10px 10px 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article4 h1 {
font-size: 40px;
}
#article4-content {
width: 100%;
}
#photo4 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo4:hover {
opacity: 0.8;
}
#imprint {
background: #333333;
bottom: 0;
width: 100%;
}
#imprint-content {
background: #333333;
width: 1280px;
height: 150px;
margin: auto;
}
#about-info {
width: 300px;
height: 130px;
float: left;
margin-left: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#about-info h2 {
text-align: center;
}
#about-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#contact-info {
position: static;
width: 300px;
height: 130px;
margin-right: auto;
margin-left: auto;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#contact-info h2 {
text-align: center;
}
#contact-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#legal-info {
width: 300px;
height: 130px;
float: right;
margin-right: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#legal-info h2 {
text-align: center;
}
#legal-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
h1 {
color: #2997D3;
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
p {
margin: 20px;
}
a {
color: #2997D3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
<link rel="icon" href="images/logo_site.png">
<title>Topics</title>
<script>
function toggleNavPanel(x){
var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
if(panel.style.height == maxH){
panel.style.height = "0px";
navarrow.innerHTML = "▾";
}
else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
</script>
</head>
<body>
<div id="header">
<div id="header-content">
<img id ="logo" src="images/logo.png" />
<div id="currentsite-info">
<font>Topics</font>
</div>
<div id="menu">
<div class="menu-linkbox" id="menu-linkbox-breaking">Breaking</div>
<div class="menu-linkbox" id="menu-linkbox-live">Topics</div>
<div class="menu-linkbox" id="menu-linkbox-scene">News</div>
<div class="menu-linkbox" id="menu-linkbox-home">Overview</div>
</div>
<div id="search-box">
<form action="http://www.google.com/search" method="get">
<input id="search" type="text" name="q" placeholder="Search">
<input id="submit" type="image" src="images/search.png" alt="Submit">
</form>
</div>
</div>
</div>
<div id="main-content">
<div id="content-articles">
<div id="article1">
<div id="article1-content">
<h1>Politics</h1>
</div>
<div id="article1-photo">
<img id ="photo1" src="images/footage/topic1adjusted.jpeg" />
</div>
</div>
<div id="article2">
<div id="article2-content">
<h1>Healthcare</h1>
</div>
<div id="article2-photo">
<img id ="photo2" src="images/footage/topic2.jpeg" />
</div>
</div>
<div id="article3">
<div id="article3-content">
<h1>Network</h1>
</div>
<div id="article3-photo">
<img id ="photo3" src="images/footage/topic3adjusted.jpeg" />
</div>
</div>
<div id="article4">
<div id="article4-content">
<h1>Travel</h1>
</div>
<div id="article4-photo">
<img id ="photo4" src="images/footage/topic4adjusted.jpeg" />
</div>
</div>
</div>
</div>
<div id="imprint">
<div id="imprint-content">
<div id="about-info">
<h2>About Us</h2>
<p>
Company information
</p>
</div>
<div id="legal-info">
<h2>Legal Use</h2>
<p>
Copyright information
</p>
</div>
<div id="contact-info">
<h2>Contact</h2>
<p>
Contact information
</p>
</div>
</div>
</div>
</body>
</html>
Hello I have given you a snippet with my current website. It has 4 pictures and a fixed header. When you hover over the picture their opacity is being changed (1->0.8). My problem is that they are also goin over the header... I tried using a z-index but it's not working, any ideas on how to get them behind the header ?
z-index only works on positioned elements
So, I've added position: relative to #photo1 and z-index: 1 to header.
Bonus - added a link to hosted photo instead of the non-working local paths you gave, so you can see it work.
#charset "utf-8";
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #F2F2F2;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: expresswayregular;
}
#font-face {
font-family: 'expresswayregular';
src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
url('fonts/expressway_rg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#header {
position: fixed;
background: #333333;
width: 100%;
height: 50px;
padding: 0;
margin: 0;
top: 0;
z-index: 1;
}
#header-content {
background: #333333;
width: 1280px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
#logo {
position: absolute;
}
#currentsite-info font {
position: absolute;
height: 30px;
width: auto;
margin-left: 60px;
padding: 10px;
color: #fff;
font-size: 26px;
}
#search-box {
width: 400px;
height: 50px;
margin-right: auto;
margin-left: auto;
}
#search {
background: #fff;
width: 356px;
height: 16px;
margin-top: 10px;
margin-bottom: 10px;
padding: 6px;
border: 1px solid #fff;
border-radius: 6px 0 0 6px;
}
#submit {
float: right;
background: #fff;
width: 29px;
height: 28px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-radius: 0 6px 6px 0;
}
#menu {
margin-right: 30px;
margin-left: 25px;
z-index: 1000;
}
.menu-linkbox a{
position: static;
float: right;
width: 60px;
height: 14px;
top: 0;
padding: 18px 15px 18px 15px;
color: #F2F2F2;
font-size: 14px;
text-decoration: none;
text-align: center;
}
.menu-linkbox:hover a {
color: #2997D3;
transition: all 500ms;
}
#menu-linkbox-live a {
color: #2997D3;
}
#main-content {
background: #fff;
min-height: 100%;
width: 1280px;
margin: 0 auto;
padding-top: 50px;
overflow: auto;
}
#content-articles {
background: #F2F2F2;
width: 1220px;
bottom: 0;
margin: 20px;
padding: 10px;
border: 1px solid #000;
overflow: auto;
}
#article1 {
width: 550px;
margin: 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article1 h1 {
font-size: 40px;
}
#article1-content {
width: 100%;
}
#photo1 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
position: relative;
}
#photo1:hover {
opacity: 0.8;
}
#article2 {
width: 550px;
margin: 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article2 h1 {
font-size: 40px;
}
#article2-content {
width: 100%;
}
#photo2 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo2:hover {
opacity: 0.8;
}
#article3 {
width: 550px;
margin: 60px 10px 10px 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article3 h1 {
font-size: 40px;
}
#article3-content {
width: 100%;
}
#photo3 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo3:hover {
opacity: 0.8;
}
#article4 {
width: 550px;
margin: 60px 10px 10px 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article4 h1 {
font-size: 40px;
}
#article4-content {
width: 100%;
}
#photo4 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo4:hover {
opacity: 0.8;
}
#imprint {
background: #333333;
bottom: 0;
width: 100%;
}
#imprint-content {
background: #333333;
width: 1280px;
height: 150px;
margin: auto;
}
#about-info {
width: 300px;
height: 130px;
float: left;
margin-left: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#about-info h2 {
text-align: center;
}
#about-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#contact-info {
position: static;
width: 300px;
height: 130px;
margin-right: auto;
margin-left: auto;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#contact-info h2 {
text-align: center;
}
#contact-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#legal-info {
width: 300px;
height: 130px;
float: right;
margin-right: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#legal-info h2 {
text-align: center;
}
#legal-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
h1 {
color: #2997D3;
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
p {
margin: 20px;
}
a {
color: #2997D3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
<link rel="icon" href="images/logo_site.png">
<title>Topics</title>
<script>
function toggleNavPanel(x){
var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
if(panel.style.height == maxH){
panel.style.height = "0px";
navarrow.innerHTML = "▾";
}
else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
</script>
</head>
<body>
<div id="header">
<div id="header-content">
<img id ="logo" src="images/logo.png" />
<div id="currentsite-info">
<font>Topics</font>
</div>
<div id="menu">
<div class="menu-linkbox" id="menu-linkbox-breaking">Breaking</div>
<div class="menu-linkbox" id="menu-linkbox-live">Topics</div>
<div class="menu-linkbox" id="menu-linkbox-scene">News</div>
<div class="menu-linkbox" id="menu-linkbox-home">Overview</div>
</div>
<div id="search-box">
<form action="http://www.google.com/search" method="get">
<input id="search" type="text" name="q" placeholder="Search">
<input id="submit" type="image" src="images/search.png" alt="Submit">
</form>
</div>
</div>
</div>
<div id="main-content">
<div id="content-articles">
<div id="article1">
<div id="article1-content">
<h1>Politics</h1>
</div>
<div id="article1-photo">
<img id ="photo1" src="http://www.mtv.com/crop-images/2013/09/11/Foo%20Fighters%20officail.jpg" />
</div>
</div>
<div id="article2">
<div id="article2-content">
<h1>Healthcare</h1>
</div>
<div id="article2-photo">
<img id ="photo2" src="images/footage/topic2.jpeg" />
</div>
</div>
<div id="article3">
<div id="article3-content">
<h1>Network</h1>
</div>
<div id="article3-photo">
<img id ="photo3" src="images/footage/topic3adjusted.jpeg" />
</div>
</div>
<div id="article4">
<div id="article4-content">
<h1>Travel</h1>
</div>
<div id="article4-photo">
<img id ="photo4" src="images/footage/topic4adjusted.jpeg" />
</div>
</div>
</div>
</div>
<div id="imprint">
<div id="imprint-content">
<div id="about-info">
<h2>About Us</h2>
<p>
Company information
</p>
</div>
<div id="legal-info">
<h2>Legal Use</h2>
<p>
Copyright information
</p>
</div>
<div id="contact-info">
<h2>Contact</h2>
<p>
Contact information
</p>
</div>
</div>
</div>
</body>
</html>
I added z-index properties to your #header and #main-content css classes and there is no longer any overlap on hover.
I've also removed the z-index values you set on the images themselves (#photo1 etc) as the z-index set on #main-content applies to them as well, as they are its children.
Hope this helps.
#charset "utf-8";
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #F2F2F2;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: expresswayregular;
}
#font-face {
font-family: 'expresswayregular';
src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
url('fonts/expressway_rg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#header {
position: fixed;
background: #333333;
width: 100%;
height: 50px;
padding: 0;
margin: 0;
top: 0;
z-index: 1;
}
#header-content {
background: #333333;
width: 1280px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
#logo {
position: absolute;
}
#currentsite-info font {
position: absolute;
height: 30px;
width: auto;
margin-left: 60px;
padding: 10px;
color: #fff;
font-size: 26px;
}
#search-box {
width: 400px;
height: 50px;
margin-right: auto;
margin-left: auto;
}
#search {
background: #fff;
width: 356px;
height: 16px;
margin-top: 10px;
margin-bottom: 10px;
padding: 6px;
border: 1px solid #fff;
border-radius: 6px 0 0 6px;
}
#submit {
float: right;
background: #fff;
width: 29px;
height: 28px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-radius: 0 6px 6px 0;
}
#menu {
margin-right: 30px;
margin-left: 25px;
z-index: 1000;
}
.menu-linkbox a{
position: static;
float: right;
width: 60px;
height: 14px;
top: 0;
padding: 18px 15px 18px 15px;
color: #F2F2F2;
font-size: 14px;
text-decoration: none;
text-align: center;
}
.menu-linkbox:hover a {
color: #2997D3;
transition: all 500ms;
}
#menu-linkbox-live a {
color: #2997D3;
}
#main-content {
background: #fff;
min-height: 100%;
width: 1280px;
margin: 0 auto;
padding-top: 50px;
overflow: auto;
z-index: -1;
}
#content-articles {
background: #F2F2F2;
width: 1220px;
bottom: 0;
margin: 20px;
padding: 10px;
border: 1px solid #000;
overflow: auto;
}
#article1 {
width: 550px;
margin: 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article1 h1 {
font-size: 40px;
}
#article1-content {
width: 100%;
}
#photo1 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo1:hover {
opacity: 0.8;
}
#article2 {
width: 550px;
margin: 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article2 h1 {
font-size: 40px;
}
#article2-content {
width: 100%;
}
#photo2 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo2:hover {
opacity: 0.8;
}
#article3 {
width: 550px;
margin: 60px 10px 10px 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article3 h1 {
font-size: 40px;
}
#article3-content {
width: 100%;
}
#photo3 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo3:hover {
opacity: 0.8;
}
#article4 {
width: 550px;
margin: 60px 10px 10px 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article4 h1 {
font-size: 40px;
}
#article4-content {
width: 100%;
}
#photo4 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo4:hover {
opacity: 0.8;
}
#imprint {
background: #333333;
bottom: 0;
width: 100%;
}
#imprint-content {
background: #333333;
width: 1280px;
height: 150px;
margin: auto;
}
#about-info {
width: 300px;
height: 130px;
float: left;
margin-left: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#about-info h2 {
text-align: center;
}
#about-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#contact-info {
position: static;
width: 300px;
height: 130px;
margin-right: auto;
margin-left: auto;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#contact-info h2 {
text-align: center;
}
#contact-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#legal-info {
width: 300px;
height: 130px;
float: right;
margin-right: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#legal-info h2 {
text-align: center;
}
#legal-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
h1 {
color: #2997D3;
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
p {
margin: 20px;
}
a {
color: #2997D3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
<link rel="icon" href="images/logo_site.png">
<title>Topics</title>
<script>
function toggleNavPanel(x){
var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
if(panel.style.height == maxH){
panel.style.height = "0px";
navarrow.innerHTML = "▾";
}
else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
</script>
</head>
<body>
<div id="header">
<div id="header-content">
<img id ="logo" src="images/logo.png" />
<div id="currentsite-info">
<font>Topics</font>
</div>
<div id="menu">
<div class="menu-linkbox" id="menu-linkbox-breaking">Breaking</div>
<div class="menu-linkbox" id="menu-linkbox-live">Topics</div>
<div class="menu-linkbox" id="menu-linkbox-scene">News</div>
<div class="menu-linkbox" id="menu-linkbox-home">Overview</div>
</div>
<div id="search-box">
<form action="http://www.google.com/search" method="get">
<input id="search" type="text" name="q" placeholder="Search">
<input id="submit" type="image" src="images/search.png" alt="Submit">
</form>
</div>
</div>
</div>
<div id="main-content">
<div id="content-articles">
<div id="article1">
<div id="article1-content">
<h1>Politics</h1>
</div>
<div id="article1-photo">
<img id ="photo1" src="images/footage/topic1adjusted.jpeg" />
</div>
</div>
<div id="article2">
<div id="article2-content">
<h1>Healthcare</h1>
</div>
<div id="article2-photo">
<img id ="photo2" src="images/footage/topic2.jpeg" />
</div>
</div>
<div id="article3">
<div id="article3-content">
<h1>Network</h1>
</div>
<div id="article3-photo">
<img id ="photo3" src="images/footage/topic3adjusted.jpeg" />
</div>
</div>
<div id="article4">
<div id="article4-content">
<h1>Travel</h1>
</div>
<div id="article4-photo">
<img id ="photo4" src="images/footage/topic4adjusted.jpeg" />
</div>
</div>
</div>
</div>
<div id="imprint">
<div id="imprint-content">
<div id="about-info">
<h2>About Us</h2>
<p>
Company information
</p>
</div>
<div id="legal-info">
<h2>Legal Use</h2>
<p>
Copyright information
</p>
</div>
<div id="contact-info">
<h2>Contact</h2>
<p>
Contact information
</p>
</div>
</div>
</div>
</body>
</html>
Whenever i try to move separator up or down, the element h1 above .separator class starts moving along with the separator. Is there any easy way to get rid of this issue?
Below is my HTML/CSS Code
.banner img {
width: 100%;
height: 100%;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
margin: 0 auto;
width: 50%;
background-color: #15a4fa;
height: 2px;
margin-bottom: 10.4%;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>
Just because you are using .OverLayText to vertically-align:middle;.
.banner img {
width: 100%;
height: 100%;
position: relative;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
vertically-align:middle;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
/*margin: 0 auto;*/
width: 50%;
background-color: #15a4fa;
height: 2px;
/*top: 80%;*/
position: relative;
margin: auto;
text-align: center;
display: block;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>
I have trouble to generate the following layout using DIV element, fighting with alignement and box style
Desire layout is here
Any help would be helpfull
regards
Try something like this
DEMO
.element {
margin: 50px;
box-sizing: border-box;
}
.remaining, .sold {
display: table;
border: 1px solid #999999;
padding: 10px;
width: 20%;
position: relative;
float: left;
height: 200px;
box-sizing: border-box;
}
.remaining {
border-right: none;
border-top: none;
}
.remaining:before {
position: absolute;
top: -30px;
height: 30px;
background: #FF7F7E;
content: "SHOES - STOCK";
border: 1px solid #999999;
color: white;
width: 100%;
left: 0;
line-height: 30px;
padding-left: 10px;
font-size: 13px;
font-weight: bold;
right: 0;
box-sizing: border-box;
}
.top, .center, .bottom {
display: table-row;
}
.top .inner {
display: table-cell;
width: 100%;
vertical-align: top;
}
.center {
display: table-cell;
width: 100%;
vertical-align: middle;
text-align: center;
}
.center span {
display: block;
}
.bottom .inner {
display: table-cell;
width: 100%;
vertical-align: bottom;
}
.inner-content {
display: table;
}
.top .inner span,
.bottom .inner span{
display: table-cell;
width: 100%;
}
.top .inner span:last-child,
.bottom .inner span:last-child {
text-align: right;
font-weight: bold;
width: 60px;
float: left;
}
.center span:first-child {
font-size: 70px;
font-weight: bold;
line-height: 1;
}
span u {
text-decoration: none;
border-bottom: 1px solid red;
}
#media(max-width: 1200px) {
.remaining, .sold {
display: table;
width: 30%;
height: 200px;
}
}
#media(max-width: 768px) {
.remaining, .sold {
display: table;
float: none;
width: 100%;
height: 200px;
}
.remaining {
border-right: 1px solid #999999;
border-bottom: none;
}
}
<div class="element">
<div class="remaining">
<div class="top">
<div class="inner">
<div class="inner-content">
<span>TOTAL</span>
<span>250 <u>pcs</u></span>
</div>
</div>
</div>
<div class="center">
<span>200</span>
<span>REMAINING</span>
</div>
<div class="bottom">
<div class="inner">
<div class="inner-content">
<span>USED</span>
<span>50 <u>pcs</u></span>
</div>
</div>
</div>
</div>
<div class="sold">
<div class="center">
<span>50</span>
<span>SOLD</span>
</div>
</div>
</div>