I'm trying to create some layout, but been stuck with overlapping div - 'featured works' is like going under row with 3 icons and honestly can't figure out solution for this one. Just need to put overlapping div under three icons section. There will also be a few more under, so any advices appreciated.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* columns */
.col-1 {
width: 8.33%;
}
... typical grid 1-12
/* offset */
.col-offset-1 {
margin-left: 8.33%;
}
... same as above
/* clearfix */
row::before,
row::after {
content: "";
display: table;
clear: both;
}
[class*="col-"] {
float: left;
min-height: 1px;
height: 150px;
padding: 10px;
}
/* === */
header nav {
background-color: #544B46;
overflow: hidden;
}
header nav ul {
float: right;
margin: 0;
padding: 0;
list-style-type: none;
}
header nav ul li {
display: inline-block;
}
header nav ul li a {
line-height: 50px;
display: block;
color: #fff;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
}
.hero img {
width: 100%;
margin: 0 auto;
padding: 0;
}
.icons {
margin: 50px auto;
text-align: center;
}
.icons i {
height: 75px;
width: 75px;
color: #544B46;
border-radius: 10%;
background-color: #fff;
font-size: 40px;
margin: 0 auto;
cursor: pointer;
border: 2px #544B46 solid;
display: inline-block;
padding: 15px 15px;
}
.icons h1,
.icons p {
padding: 15px;
}
<body>
<header>
<nav class="container">
<div class="row">
<ul>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Mission</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</nav>
</header>
<section class="hero">
<div class="container">
<div class="row">
<img src="http://naturalnie.media.pl/test/train-long.jpg">
</div>
</div>
</section>
<section class="icons">
<div class="container">
<div class="row">
<div class="col-4">
<i class="fab fa-researchgate"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
<div class="col-4">
<i class="fas fa-laptop-code"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
<div class="col-4">
<i class="fas fa-cogs"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
</div>
</div>
</section>
<section class="featured">
<div class="container">
<div class="row">
<div class="col-12">
<h1>FEATURED WORKS</h1>
</div>
</div>
</div>
</section>
</body>
Sorry for indents, new here.
Your issue is that you set your css class [class*="col-"] with height: 150px;. Get rid of the height requirement, and it goes back into place.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* columns */
.col-1 {width: 8.33%;}... typical grid 1-12
/* offset */
.col-offset-1 {margin-left: 8.33%;}... same as above
/* clearfix */
row::before,
row::after {
content: "";
display: table;
clear: both;
}
[class*="col-"] {
float: left;
min-height: 1px;
/*height: 150px;*/
padding: 10px;
}
/* === */
header nav {
background-color: #544B46;
overflow: hidden;
}
header nav ul {
float: right;
margin: 0;
padding: 0;
list-style-type: none;
}
header nav ul li {
display:inline-block;
}
header nav ul li a {
line-height: 50px;
display: block;
color: #fff;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
}
.hero img {
width: 100%;
margin: 0 auto;
padding: 0;
}
.icons {
margin: 50px auto;
text-align: center;
}
.icons i {
height: 75px;
width: 75px;
color: #544B46;
border-radius: 10%;
background-color:#fff;
font-size: 40px;
margin: 0 auto;
cursor: pointer;
border: 2px #544B46 solid;
display: inline-block;
padding: 15px 15px;
}
.icons h1,
.icons p {
padding: 15px;
}
<body>
<header>
<nav class="container">
<div class="row">
<ul>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Mission</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</nav>
</header>
<section class="hero">
<div class="container">
<div class="row">
<img src="http://naturalnie.media.pl/test/train-long.jpg">
</div>
</div>
</section>
<section class="icons">
<div class="container">
<div class="row">
<div class="col-4">
<i class="fab fa-researchgate"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
<div class="col-4">
<i class="fas fa-laptop-code"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
<div class="col-4">
<i class="fas fa-cogs"></i>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum.</p>
</div>
</div>
</div>
</section>
<section class="featured">
<div class="container">
<div class="row">
<div class="col-12">
<h1>FEATURED WORKS</h1>
</div>
</div>
</div>
</section>
</body>
Related
I have a webpage that uses purely html and CSS (no JavaScript yet). The webpage contains a simple, fixed position header with hover dropdowns for each category. The webpage content itself is arranged in 'tiles' that produce effects on hover to emphasize them (and link to other pages). I will attach an image to better explain. The dropdown works fine when at the very top of the webpage, however if the dropdown menu falls on top of one of the tiles the dropdown will disappear and trigger the tile hover effects instead.
I have ensured that all parts of the dropdown have a z-index greater than the tiles.
Dropdown HTML:
<nav class="navigation">
<ul>
<li class=dropdown>
catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
</ul>
</nav>
Page content HTML (example for single tile, code repeated):
<a href="content6.html" class="tile">
<img src="image1.jpg>
<div class="container">
<div class="overlay"></div> /* overlay that animates on hover */
/* content for the tile */
</div>
</a>
relevant CSS:
navigation {
position: fixed;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 20;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: inline-block;
position: relative;
}
.dropdown-content a:hover {
background-color: blue;
color: white;
}
.dropdown:hover .dropdown-content{
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 17;
}
.tile:hover .overlay {
opacity: 0.1;
}
Image 1:
Top of page(Works Fine)
Image 2:
Scrolled down(Hovering over Content 3 will close dropdown)
I would like for the dropdown menu to stay on top of tiles regardless of whether or not the hover effects are triggered. I'm not sure if this will require JavaScript. Any help is appreciated!
Edit: Snippet Added
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This problem can be solved by changing the z-index of headerto 20. Even though the z-index of the .dropdownclass was 20, the z-index of the header element was 10.
Although the z-index is not inherited, one needs to take into consideration the stacking context. For example, if a sibling element B has a z-index that is greater than the z-index of sibling element A, B will be above A. If Ahas a child element that has a z-index higher than that of element B, B will still be shown above A provided that B has a greater z-index than A.
For more information about stacking contexts, check out this Post.
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 20;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
z-index:20;
position: fixed;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.content1{
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<!DOCTYPE html >
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Your hover effect is only applied to a, which means it loses the effect when mouse is not over the actual link.
Apply the hover to li instead, so it will cover it properly.
a:not(p):hover {
color: #38b6ff;
}
use this instead.
li:hover {
color: #38b6ff;
}
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
li:hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
I create card using display: table layouting. This is my attempt so far:
.panel-bg {
background-color: #F8F8F8;
height: 100%;
width: 100%;
margin: 0;
padding: 24px 0;
}
.panel {
width: calc(100%-32px);
height: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
font-size: 16px;
cursor: pointer;
margin: 0 16px;
}
.panel-title-row {
display: table-row;
width: 100%;
border-collapse: collapse;
border-bottom: solid 1px #c4c4c4;
}
.panel-title {
display: table-cell;
width: 80%;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: #0099ff;
padding: 24px;
}
.panel-action {
text-align: right;
width: 20%;
display: table-cell;
}
.panel-action li {
margin-left: 16px;
}
.panel-action li:last-child {
margin-left: 32px;
}
.col-1,
.col-2,
.col-3 {
width: 33.33%;
display: table-cell;
padding: 24px;
}
.panel-data {
margin-top: 16px;
}
.panel-data-label {
font-weight: 700;
font-size: 12px;
}
.panel-data-value {
font-size: 13px;
margin-top: 8px;
}
.panel-content {
display: table-row;
width: 100%;
}
.panel-data-vertical {
display: table;
width: 100%;
}
.panel-data-vertical .panel-data-label,
.panel-data-vertical .panel-data-value {
display: table-cell;
width: 50%;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="panel-bg">
<div class="panel">
<div class="panel-title-row">
<div class="panel-title">
Members
</div>
<ul class="panel-action">
<li><i class="fas fa-pencil-alt"></i></li>
<li><i class="fas fa-trash"></i></li>
<li><i class="fas fa-chevron-down"></i></li>
</ul>
</div>
<div class="panel-content">
<div class="col-1">
<div class="panel-data panel-data-horizontal">
<div class="panel-data-label">
Effective Date
</div>
<div class="panel-data-value">
1 Jan 2018
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Employment Type
</div>
<div class="panel-data-value">
Permanent
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Level
</div>
<div class="panel-data-value">
Staff
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Title
</div>
<div class="panel-data-value">
All
</div>
</div>
</div>
<div class="col-2">
</div>
<div class="col-3">
</div>
</div>
</div>
</div>
My problems are:
I want to put border-bottom to the panel-title-row but it doesn't show. I want to make the border with the padding (about 24 px) to the left and right but whenever i put padding properties or the border-bottom to the row or its children it seems like doesn't work.
panel-title-row 's children doesn't fill their parent's width to 100% eventhough I set 80% and 20% to each child. When I change the percentage, it affect the col-1 that doesn't belong to the row.
I create another table-row below the panel-title (named panel-content) and I want to divide it to 3 columns with the same width (named col-1, col-2, and col-3) but the width: 33.33% doesn't work.
This is what I want to achieve, with emphasis on the space between the card and the line.
Any help appreciated!
Hope this may help you, do you want it to be done only using table?
.panel-bg {
background-color: #F8F8F8;
height: 100%;
width: 100%;
margin: 0;
padding: 24px 0;
}
.panel {
width: calc(100%-32px);
height: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
font-size: 16px;
cursor: pointer;
margin: 0 16px;
padding:25px;
}
.panel-title-row {
display: block;
width: 100%;
border-collapse: collapse;
border-bottom: solid 1px #c4c4c4;
}
.panel-title {
display: inline-block;
width: 78%;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: #0099ff;
padding: 0;
}
.panel-action {
text-align: right;
width: 20%;
display: inline-block;
padding:0px 5px 15px 0;
margin:0;
}
.panel-action li {
margin-left: 10px;
}
.panel-action li:last-child {
margin-left: 29px;
}
.col-1,
.col-2,
.col-3 {
width: 33.33%;
display: table-cell;
padding: 5px 0px 20px 0px;
}
.panel-data {
margin-top: 16px;
}
.panel-data-label {
font-weight: 700;
font-size: 12px;
}
.panel-data-value {
font-size: 13px;
margin-top: 8px;
}
.panel-content {
display: table-row;
width: 100%;
}
.panel-data-vertical {
display: table;
width: 100%;
}
.panel-data-vertical .panel-data-label,
.panel-data-vertical .panel-data-value {
display: table-cell;
width: 50%;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="panel-bg">
<div class="panel">
<div class="panel-title-row">
<div class="panel-title">
Members
</div>
<ul class="panel-action">
<li><i class="fas fa-pencil-alt"></i></li>
<li><i class="fas fa-trash"></i></li>
<li><i class="fas fa-chevron-down"></i></li>
</ul>
</div>
<div class="panel-content">
<div class="col-1">
<div class="panel-data panel-data-horizontal">
<div class="panel-data-label">
Effective Date
</div>
<div class="panel-data-value">
1 Jan 2018
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Employment Type
</div>
<div class="panel-data-value">
Permanent
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Level
</div>
<div class="panel-data-value">
Staff
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Title
</div>
<div class="panel-data-value">
All
</div>
</div>
</div>
<div class="col-2">
</div>
<div class="col-3">
</div>
</div>
</div>
</div>
Could someone explain me how do I center my text on bottom of the div container?
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
Im trying to get "Learn more about what i do" at the bottom of "welcome-header" row.
CSS :
#welcome-div {
min-height: 100%;
position: relative;
}
.page-scroll {
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: aliceblue;
}
Sorry guys u get me wrong. I want the string to stick to bottom like bottom: 0px;
http://codepen.io/anon/pen/jBLaBX
Add position: relative to #welcome-header then position: absolute; bottom: 0; left: 0; right: 0 to .page-scroll to position the element at the bottom of #welcome-header, and your text-align: center rule will center the text horizontally.
#import url('https://fonts.googleapis.com/css?family=Sansita');
#welcome-header {
width: 100%;
height: 100vh;
background-image: url(img/background.jpg);
position: relative;
}
.welcome-text,
.welcome-text-animation {
font-family: Sansita;
text-align: center;
color: aliceblue;
font-size: 50px;
padding-top: 90px;
}
.home-logo {
display: block;
text-align: center;
}
.home-logo img {
display: inline-block;
padding: 2.5%;
width: 120px;
height: 120px;
margin-left: auto;
margin-right: auto;
display: block;
}
.hire-button {
text-align: center;
padding-top: 90px;
}
.hire-button a {
font-family: Sansita;
text-decoration: none;
color: aliceblue;
font-size: 25px;
border: 2px solid #FDCD3B;
border-radius: 50px;
padding: 1.2%;
transition: all 0.2s linear;
}
.hire-button a:hover {
background-color: #FDCD3B;
color: #2A3A3F;
padding-left: 3%;
padding-right: 3%;
}
#welcome-div {}
.page-scroll {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: black;
}
<body>
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
<section id="about" class="row">
ABOUT CONTENT
</section>
<section id="skills" class="row">
SKILLS CONTENT
</section>
<section id="portfolio" class="row">
PORTFOLIO CONTENT
</section>
<section id="contact" class="row">
CONTACT CONTENT HERE
</section>
</div>
</body>
.page-scroll {
text-align:center;
}
I am trying to create a footer where there is text to the left, center and right. So far I have done this but the issue is the divs in center are stacking up vertically rather than horizontally. I have tried applying float:left to the .entypo elements which works, but it moves all of them next to .footerslinks-left, instead of staying in the center.
http://jsfiddle.net/8uL2e4bw/
So the HTML is as followed:
<footer>
<div class="topfooter">
<ul class="footerlinks-left">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="footeraddress-right">
<p>Address</p>
<p>11 Name Road</p>
<p>TE5 7IN</p>
<p>City</p>
<p>Postcode</p>
<div class="entypo-phone">01234567890</div>
<div class="entypo-mail">hello#salon.com</div>
</div>
<div class="footersocial-center">
<div class="entypo-facebook-circled"> </div>
<div class="entypo-twitter-circled"> </div>
<div class="entypo-gplus-circled"> </div>
</div>
</div>
</footer>
Yes I am aware the code is not the tidiest, I should probably address this first to avoid unnecessary complications!
CSS:
footer {
text-align: left;
padding: 10px;
background-color: black;
color: #da82da;
}
.topfooter {
margin: 10px auto;
max-width: 720px;
}
.footerlinks-left, .footerlinks-left a {
float: left;
color: #da82da;
list-style: none;
text-decoration: none;
margin-left: 20px;
}
.footersocial-center {
font-family: 'entypo';
font-size: 30px;
overflow:hidden;
text-align:center;
}
.footeraddress-right {
float: right;
}
.footeraddress-right p {
margin: 0;
padding: 2px;
}
.entypo-phone, .entypo-mail {
font-family: 'entypo', sans-serif;
padding: 2px;
}
The default display property for a div is block, which expands to 100% width.
Try with:
.footersocial-center div {
display: inline;
}
#import url(http://weloveiconfonts.com/api/?family=entypo);
footer {
text-align: left;
padding: 10px;
background-color: black;
color: #da82da;
}
.topfooter {
margin: 10px auto;
max-width: 720px;
}
.footerlinks-left, .footerlinks-left a {
float: left;
color: #da82da;
list-style: none;
text-decoration: none;
margin-left: 20px;
}
.footersocial-center {
font-family: 'entypo';
font-size: 30px;
overflow:hidden;
text-align:center;
}
.footeraddress-right {
float: right;
}
.footeraddress-right p {
margin: 0;
padding: 2px;
}
.entypo-phone, .entypo-mail {
font-family: 'entypo', sans-serif;
padding: 2px;
}
.footersocial-center div{
display: inline;
}
<footer>
<div class="topfooter">
<ul class="footerlinks-left">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="footeraddress-right">
<p>Address</p>
<p>11 Name Road</p>
<p>TE5 7IN</p>
<p>City</p>
<p>Postcode</p>
<div class="entypo-phone">01234567890</div>
<div class="entypo-mail">hello#salon.com</div>
</div>
<div class="footersocial-center">
<div class="entypo-facebook-circled"> </div>
<div class="entypo-twitter-circled"> </div>
<div class="entypo-gplus-circled"> </div>
</div>
</div>
</footer>
I am trying to make a header wider, so that it extends to both sides of the browser size. I have all of my content inside of a wrapper div that is set to 990px. My header is the part I want to be full width. I also am trying to make my header have a fixed position. But when i put the corrected position into the css for the header, the title and the navigation bar stack vertically and do not remain how I originally set them.
<body>
<div class="wrapper">
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="main">
<p>Welcome to the #1 stop in automotive today</p>
<div class="article">
<img class="image" src="http://cdnedge.vinsolutions.com/dealerimages/Dealer%204697%20Images/content/car-tire-repair.jpg">
</div>
<div class="article">
<img class="image" src="http://www.lonniesautomachineshop.com/shopimg/Engines1.jpg">
</div>
<div class="article">
<img class="image" src="http://image.superstreetonline.com/f/features/modp-1011-castrol-syntec-top-car-challenge-nissan-gtr/29181584/eurp_1011_02_o+castrol_syntec_top_car_challenge+lift.jpg">
</div>
</div><!--end of main-->
<div class="main-two">
<p id="two-header">Schedule today for a free consultation</p>
<div class="article">
<img class="image" src="http://s3-media2.fl.yelpcdn.com/bphoto/YDLPwsEk_fMXIw9Xwu_8rw/ls.jpg">
</div>
<div class="article">
<img class="image" src="http://image.trucktrend.com/f/tech/1011tr_2004_gmc_sierra_buildup/28770854/1011tr_03+2004_GMC_sierra_buildup+factory_ring_and_pinion.jpg">
</div>
<div class="article">
<img class="image" src="http://aautomotivetx.com/wp-content/uploads/2013/04/Brakes.jpg">
</div>
</div><!--end of main-two-->
<div class="main-three">
<p id="two-header">Guranteed service for 30 days</p>
<div class="article">
<img class="image" src="http://bernalautobodyrepair.com/images/paint_booth.jpg">
</div>
<div class="article">
<img class="image" src="https://www.bkreader.com/wp-content/uploads/2015/06/welding-1.jpg">
</div>
<div class="article">
<img class="image" src="http://cdn.instructables.com/F4Q/QD4F/HHS9SLP0/F4QQD4FHHS9SLP0.LARGE.jpg">
</div>
</div><!--end of main-three-->
<footer class="footer">
<p class="copyright">Schedule now! Call today at (123)456-7890.</p>
<p class="copyright-two">Copyright © All Rights Reserved.</p>
<div class="social-icons">
<img src="http://www.voxlumiere.com/wp-content/uploads/2009/12/facebook-logo-resized-image-50x50.png"/>
<img src="http://www2.actionforchildren.org.uk/media/128162/twitter_50x50.jpg"/>
<img src="http://www.clickondetroit.com/image/view/-/21435108/highRes/1/-/ubsa5pz/-/50x50-Instagram-logo-png.png"/>
</div><!--end of social-icons-->
</footer>
</div><!--end of wrapper-->
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: arial, sans-serif;
color: black;
background-image: url("http://www.theonecar.com/wp-content/uploads/2014/02/car-shops-499.jpg"), url("http://i.ytimg.com/vi/1n5j3sy-Rok/maxresdefault.jpg");
background-repeat: no-repeat;
background-position: top, bottom;
}
.wrapper {
font-size: 1.6em;
margin: 0 auto;
width: 990px;
background-color: white;
/*padding: 2em;*/
}
header {
background-color: white;
height: 50px;
display: block;
width: 100%;
}
header h1 {
float: left;
padding: 5px;
color: rgb(95, 207, 128);
margin-top: 5px;
margin-left: 100px;
font-size: 1.8em;
}
.navlist a {
text-decoration: none;
color: black;
}
.navlist a:hover {
color: white;
background-color: rgb(95, 207, 128);
padding: 15px;
}
.navlist {
float: right;
display: inline-block;
text-align: center;
padding: 15px;
font-size: 1.2em;
}
.main {
min-height: 20px;
background-color: rgb(95, 207, 128);
display: block;
width: 100%;
}
.main p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.image {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
}
.main-two {
background-color: #39ADD1;
display: block;
}
.main-two p {
color: white;
font-size: 1.6em;
padding: 50px;
text-align: right;
width: 100%;
}
.main-three {
min-height: 20px;
background-color: #f08c35;
display: block;
width: 100%;
}
.main-three p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
footer {
background-color: #294860;
}
.copyright {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.copyright-two {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.social-icons {
display: inline-block;
padding: 5px;
margin-left: 40.2%;
width: 100%;
}
.social-icons a {
margin-left: 5px;
header {
...
width: 100%;
min-width: 990px;
position: fixed;
left: 0;
}
Demo
You're seeing horizontal scrolling because the site loads in a frame. That shouldn't happen in a full browser window.
you header would need to be outside the wrapper since the wrapper is 990px wide.
make the header width 100% but it needs to either be on the root of the div structure or in another 100% width element.
Because it's inside you're <div class="wrapper"> It's not possible,
Move it above the wrapper and it should work.
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="wrapper">