I have the following css:
# this is the grey line
ul.timeline-list > li.media:before {
position: absolute;
display: block;
top: 0;
content: '';
height: 100%;
margin-left: 58px;
border-left: 5px solid #e8e8e8;
z-index: 1;
}
#media (max-width: 480px) {
ul.timeline-list > li.media:before {
margin-left: 50%;
}
}
#this is the image icon
ul.timeline-list > li.media > .media-left {
text-align: center;
position: relative;
z-index: 2;
}
Html looks like:
<ul ng-app="edgeFeed" class="timeline-list ng-scope">
<li class="media media-clearfix-xs">
<div class="media-left">
<div class="user-wrapper">
<img ng-src="myimage.jpg" class="img-circle" width="80" src="myimage.jpg">
<div>some entry</div>
<div class="date"></div>
</div>
</div>
</li>
</ul>
As you can see the image goes behind the grey vertical line but should be behind it like the image above. Also the image should aligned:
How can I get the image to stay above the grey line?
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
The top Google result is a CSS Tricks guide from 2011, which uses an obtrusive jQuery. Is this the best way to convert a menu to a drop down list in 2020? The site I'm working on is only HTML/CSS so far so I'd prefer to keep it that way (but I'm flexible).
Here's what I'm working with so far.
header {
width: 60%;
margin: 0 auto;
}
header #logo {
float: left;
}
header nav {
float: right;
}
header li {
float: left;
display: inline;
margin-left: 10px;
}
#media (max-width: 960px) {
{
/*TBC*/
}
}
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="./test-styles.css">
</head>
<body>
<header>
<div class="header-container">
<div id="logo">
<h2>MyCompany</h2>
</div>
<nav>
<ul>
<li>Services</li>
<li>Contact Us</li>
<li>Privacy</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I'd like for the nav bar to convert to a menu at less than 960px width (hence the media query).
Any help would be appreciated 😊
You can totally do it using pure HTML / CSS.
I personally like to use display: grid and the grid-area property to move elements from one column to the other, alongside display / hide.
<header>
<div id="nav-container" class="nav-transparent">
<nav>
<div class="navbar-column" id="left-menu">
<a class="nav-item" href="#">COMPANY</a>
</div>
<div class="navbar-column" id="right-menu">
<a class="nav-item" href="#">Services</a>
<a class="nav-item" href="#">Contact us</a>
<a class="nav-item" href="#">Privacy</a>
</div>
<div class="navbar-column" id="burger-menu-toggle-container">
<input type="checkbox" id="burger-menu-toggle">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
<div id="burger-menu">
<div id="burger-menu-content">
<div id="burger-menu-header">
</div>
<div id="burger-menu-body">
<div id="burger-menu-links">
<div class="burger-menu-link">
<a href="#">
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Services</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Contact us</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Privacy</a>
</div>
</div>
</div>
</div>
<div id="burger-menu-footer">
</div>
</div>
</div>
</nav>
</header>
If the current width of the viewport is > 960px, we only display the left-menu and right-menu elements in the form of a classic navbar. You notice that we have a third div which is the dropdown menu toggler, hidden when the width is > 960px.
When the width is < 960px, we hide right-menu and display burger-menu-toggle-container instead. We then move it to the left using the grid-area property. Of course you can chose to let it on the right side.
nav {
max-width: 1268px;
height: 100%;
display: grid;
grid-template-columns: auto 1fr ;
grid-template-areas: 'left right';
margin: 0 auto;
}
#burger-menu-toggle-container {
display: none;
transition: .4s;
padding: 6px;
}
#media screen and (max-width: 960px) {
#right-menu {
display: none;
}
#burger-menu-toggle-container {
display: block;
grid-area: left;
}
}
The dropdown menu toggler is actually a checkbox. Using the :checked selector and ~ we can display / hide the dropdown menu by setting its max-height from 0 to whatever value in px you need.
#burger-menu-toggle {
margin: 0;
display: block;
position: absolute;
width: 35px;
height: 27px;
opacity: 0;
outline: none;
-webkit-appearance: none;
border: none;
z-index: 100;
cursor: pointer;
}
#burger-menu {
transition: .4s;
position: absolute;
z-index: 1;
left: 0;
top: 80px;
width: 100%;
max-height: 0;
overflow: hidden;
}
#burger-menu-toggle:checked ~ #burger-menu {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
Attached is a working example.
html {
height: 100%;
background-color: black;
}
body {
overflow-x: hidden;
font-family: 'poiret one';
font-weight: 400;
font-size: 1.2em;
margin: 0;
min-height: 100%;
background-color: transparent;
display: grid;
grid-template-rows: auto 1fr ;
}
/* hide all scrollbars */
*::-webkit-scrollbar {
display: none;
}
a {
color: white;
text-decoration: none;
}
#nav-container {
font-weight: bold;
width: 100%;
max-height: 100px;
height: 100%;
position: fixed;
z-index: 2;
transition: .4s;
}
#nav-container a:hover {
color: rgba(253, 52, 131, .9);
}
nav {
max-width: 1268px;
height: 100%;
display: grid;
grid-template-columns: auto 1fr ;
grid-template-areas: 'left right';
margin: 0 auto;
}
.navbar-column {
margin: auto 0;
}
#left-menu {
padding: 12px 6px;
}
#right-menu {
text-align: right;
}
#burger-menu-toggle-container {
display: none;
transition: .4s;
padding: 6px;
}
#burger-menu-toggle-container:hover .bar {
background-color: rgba(253, 52, 131, .9);
}
#burger-menu-toggle {
margin: 0;
display: block;
position: absolute;
width: 35px;
height: 27px;
opacity: 0;
outline: none;
-webkit-appearance: none;
border: none;
z-index: 100;
cursor: pointer;
}
#bar1, #bar2, #bar3 {
width: 32px;
height: 4px;
background-color: rgba(225, 225, 225, 1);
border-radius: 6px;
margin: 6px 0;
transition: 0.5s;
}
#burger-menu-toggle:checked ~ #bar1 {
-webkit-transform: rotate(45deg) translate(-6px, 4px) ;
transform: rotate(45deg) translate(6px, 6px) ;
}
#burger-menu-toggle:checked ~ #bar2 {opacity: 0;}
#burger-menu-toggle:checked ~ #bar3 {
-webkit-transform: rotate(-45deg) translate(-8px, -8px) ;
transform: rotate(-45deg) translate(8px, -8px) ;
}
#burger-menu-toggle:checked ~ #burger-menu {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
#burger-menu {
transition: .4s;
position: absolute;
z-index: 1;
left: 0;
top: 80px;
width: 100%;
max-height: 0;
overflow: hidden;
}
#burger-menu-body {
border-radius: 2px;
display: grid;
position: relative;
margin: auto;
padding: 4px;
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
#burger-menu-links {
display: grid;
grid-template-rows: 1fr;
}
.burger-menu-link {
padding: 5px;
}
#media screen and (max-width: 960px) {
#right-menu {
display: none;
}
#burger-menu-toggle-container {
display: block;
grid-area: left;
}
}
.nav-item {
padding: 2px;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = .9,maximum-scale = .9" />
</head>
<body class="sm-section">
<header>
<header>
<div id="header">
<div id="nav-container" class="nav-transparent">
<nav>
<div class="navbar-column" id="left-menu">
<a class="nav-item" href="/">COMPANY</a>
</div>
<div class="navbar-column" id="right-menu">
<a class="nav-item" href="#">Services</a>
<a class="nav-item" href="#">Contact us</a>
<a class="nav-item" href="#">Privacy</a>
</div>
<div class="navbar-column" id="burger-menu-toggle-container">
<input type="checkbox" id="burger-menu-toggle">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
<div id="burger-menu">
<div id="burger-menu-content">
<div id="burger-menu-header">
</div>
<div id="burger-menu-body">
<div id="burger-menu-links">
<div class="burger-menu-link">
<a href="#">
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Services</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Contact us</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Privacy</a>
</div>
</div>
</div>
</div>
<div id="burger-menu-footer">
</div>
</div>
</div>
</nav>
</div>
</header>
<main>
</main>
</body>
<
How do I add a previous and next function on a vertical carousel that is also compatible with Squarespace? I am trying to model a carousel around the following code I found from codepen
When I add more images to the carousel, I am unable to scroll down. Can someone help in showing me how I can add this functionality please? Thank you in advance!
Below is the code:
HTML
<div class="wrapper">
<ul class="list-reset">
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
</ul>
<div class="featured-image"></div>
</div>
CSS
body {
background: #f3f3f3;
color: #111;
padding: 20px;
display: flex;
place-items: center;
height: 100%;
justify-content: center;
align-items: center;
height: 90vh;
}
.wrapper {
width: 80%;
position: relative;
max-width: 100%;
overflow: hidden;
// border-radius: 3px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .1)
}
.list-reset {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
width: calc(30% - 4px);
min-height: 350px;
height: 70vh;
flex-direction: column;
border: 2px solid #fff;
li {
padding: 20px;
border-bottom: 2px solid #fff;
transition: all 600ms ease;
cursor: pointer;
&:hover {
background: #f9f9f9;
}
img {
transition: all 600ms ease;
opacity: 0;
transform: translatey(10px);
transform-origin: bottom;
}
a {
display: block;
margin-top: 4px;
}
span {
font-size: 0.7rem;
opacity: 0.7;
}
img {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.active {
z-index: 999;
background: #fff;
a {
color: #548AF7;
}
img {
opacity: 1;
transform: translatey(0);
}
}
}
Javascript
$('.list-reset li').on('click', function() {
$('.list-reset li').removeClass('active')
$(this).addClass('active')
})
You could just add:
.list-reset{
overflow: auto;
}
So you can scroll down the list.
I'm aware it has been months so you probably worked this out, but I'll leave this here just in case.
https://www.quackit.com/html/codes/html_scroll_box.cfm
I've spent a good 30 minutes on S.O to find a solution but still can't find it. Probably due to the fact that I don't know exactly what to look for.
Basically I have div which contains and image and a text. The text should appear on the image only after I hover on the image. The HTML and CSS structures are all good and I'm having problem with the JQuery on hover function, mainly to know how to select the inner div (and not actually how to use the hover function itself).
What I'm trying to do is when I hover on an image div (img-container), it shows the text (hover-img) on that image.
Below are my code:
HTML
<div id="content" class="col-12">
<!-- Image Gallery -->
<div class="col-lg-4 col-md-6 col-xs-12 img-container">
<img class="img-gal" src="#" />
<div class="hover-img">
<p class="img-text">Text on Hover</p>
</div>
</div>
</div
CSS
.img-container{
float:left;
margin: 0;
padding: 0;
cursor: pointer;
position: relative;
}
.img-gal{
width: 100%;
height: auto;
position: relative;
}
.hover-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:10;
color: #fff;
display: none;
}
.img-text{
text-align: center;
position: relative;
top: 50%;
font-weight: 300;
font-size: 1em;
letter-spacing: 2px;
}
JS
//Hover Image. Need to show the Text when hovering on an image
$('.img-container').hover(function(){
//Stuck here. How to show the text? fadeIn()? But what?
},function(){
//Stuck here. How to show the text? fadeOut()? But what ?
});
Thanks
You can achieve this with pure CSS:
.hover-img {
display: none;
position: absolute;
top: 0;
}
.img-gal:hover ~ .hover-img, .hover-img:hover {
display: block;
}
<div id="content" class="col-12">
<!-- Image Gallery -->
<div class="col-lg-4 col-md-6 col-xs-12 img-container">
<img class="img-gal" src="https://www.gravatar.com/avatar/0104050baad43a135d1084a1b3ec35d4?s=32&d=identicon&r=PG&f=1" />
<div class="hover-img">
<p class="img-text">Text on Hover</p>
</div>
</div>
</div
As other mentioned, no need for jQuery here,
you can achieve this with html/css only, using css transition and by changing the opacity and position of the text layer.
https://jsfiddle.net/86bjzedh/
check this fiddle for a working example
CSS:
.gallery li {
overflow: hidden;
background-size: 100% 100%;
float: left;
display: block;
width: 200px;
height: 200px;
margin: 5px;
}
.gallery span {
display: block;
width: 100%;
height: 100%;
opacity: 0;
transform: translateY(100%);
transition: .3s linear all;
text-align: center;
color: #000;
font-size: 15px;
font-family: tahoma;
background-color: rgba(255, 255, 255, .8);
padding-top: 30px;
box-sizing: border-box;
}
.gallery li:hover span {
transform: translateY(0);
opacity: 1;
}
HTML:
<ul class="gallery">
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/01/17/10/22/key-3087900__180.jpg)">
<span>Style 1</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/02/16/02/03/pocket-watch-3156771__180.jpg">
<span>Style 2</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/04/20/02/47/hong-kong-3334945__180.jpg)">
<span>Style 2</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/01/17/10/22/key-3087900__180.jpg)">
<span>Style 1</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/02/16/02/03/pocket-watch-3156771__180.jpg">
<span>Style 2</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/04/20/02/47/hong-kong-3334945__180.jpg)">
<span>Style 2</span>
</li>
</ul>
You do this only with CSS. Add this line to your css
.img-gal:hover + .hover-img {
display:block;
}
if you want to smooth effect add this line to .hover-img. and remove display:none
.hover-img {
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
and on image hover like this
.img-gal:hover + .hover-img {
visibility: visible;
opacity: 1;
}
Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>
Hello i have a next html code and CSS:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.teaser {
width: 100%;
height: 25vh;
background-image: url("http://www.1zoom.me/big2/365/321125-alexfas01.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
a.menuButton {
padding: 0;
margin: 0;
width: 49.7%;
height: 33.33%;
float: left;
background-color: white;
border-collapse: collapse;
border: 1px solid #E6F0F0;
text-decoration: none;
position: relative;
color: black;
}
.rectangle {
padding: 0;
width: 70px;
height: 7px;
background: blue;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.menuButtonContent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
height: 50%;
width: 50%;
background-color: red;
margin: auto;
}
.menuButtonContent h1 {
text-align: center;
}
.buttonsWrapper {
width: 100%;
height: 73vh;
}
.rectangle#citizenship {
background-color: #38CCBA;
}
.rectangle#fastsearch {
background-color: #00899B;
}
.rectangle#forillegals {
background-color: #D80C00;
}
.rectangle#soonillegals {
background-color: #FF8A00;
}
.rectangle#aboutapp {
background-color: #B8B8B8;
}
.rectangle#settings {
background-color: #626262;
}
<div class="teaser"></div>
<div class="buttonsWrapper">
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>Citizenship</h1>
<div class="rectangle" id="citizenship"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>Fast search</h1>
<div class="rectangle" id="fastsearch"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>For illegals</h1>
<div class="rectangle" id="forillegals"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>Soon illegals</h1>
<div class="rectangle" id="soonillegals"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>About app</h1>
<div class="rectangle" id="aboutapp"></div>
</div>
</a>
<a class="menuButton" href="#">
<div class="menuButtonContent">
<h1>Settings</h1>
<div class="rectangle" id="settings"></div>
</div>
</a>
</div>
I have 2 problems:
1) I cannot find an apropriate solution to center the .menuButtonContent, it is centered horizontaly, but not vertically, on some screen sizes it gets centered vertically, but not at all - how can i center it?
2) The background-image: url doesn't get rendered, why?
To make an element vertically align centered, set the display property of the parent element as display:table; then set the element that has to be centered as display:table-cell; and vertical-align:midlle;.
.parent{
display:table;
}
.child-element-centered{
display:table-cell;
vertical-align:midlle;
}
Try using the calc() function in CSS
lets say the parent div is called "a" and its child was "b"
<div id="a" style="width:400px;height:400px;position:relative;">
<div id="b" style="position:relative;top:calc(25% - 100px);left:calc(25% - 100px);width:50%;height:50%;"></div>
</div>
first set the display of child divs to inline-block
then set the parent text-align to center. This will horizontally center your divs
and then use a "hack" to accomplish vertically aligning your child divs. See this fiddle for an example