I've made my images purposely overlap each other vertically, but now the images have stacked on top of each other. How do I stop this from happening? Here is my site.
I tried adding a z-index to the images, which worked on a previous layout, but hasn't worked with this -
.home_post_box {
float: left;
width: auto;
height: auto;
margin-right: 356px;
margin-bottom: 30px;
position: relative;
cursor: pointer;
display: inline-block;
}
.home_post_box img {
width: 371px;
height: auto;
padding-bottom: 20px;
transform: -webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
text-align: center;
position:absolute;
left:0px;
top:0px;
z-index:1;
padding-left: 0px;
}
May be this is close to what you try
.home_post_box {
float: left;
width: auto;
height: auto;
position: relative;
cursor: pointer;
display: inline-block;
}
.home_post_box img {
height: auto;
padding-bottom: 20px;
transform: -webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
text-align: center;
left: 0px;
top: 0px;
z-index: 1;
padding-left: 0px;
float: left;
}
From what I could see, you should try encapsulating each row of pictures in its own <div> and put your desktop-clear or tablet-clear elements between those rows.
You might also use this clearfix trick for clearing, its a bit cleaner but I'm not sure what you're trying to do. Perhaps it will be useful.
Related
I am trying to create this figure on my site, I am working with CSS and Vue, but so far I am not achieving this goal, I am really new to this
My objective:
What i have so far:
I have not really managed to make it look like the first image, any advice on how I can do it, since I am really new to this
<div id="paralelogramored" class="forma"></div>
<div id="paralelogramowhite" class="forma">
<a Class="">Iniciar Sesion</a>
<img style="float:left;" src="./assets/scss/images/loginLogo.png" class="imgLogin"/>
</div>
my css
.imgLogin{
width: 20px;
}
.forma{
display: inline-block;
margin: 16px;
}
#paralelogramored {
width: 150px;
height: 50px;
background: red;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
padding-top: 0px;
}
#paralelogramowhite {
width: 150px;
height: 50px;
background: white;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
padding-top: 0px;
}
You could achieve this by using the psuedo element :before. I've attached a quick example of what that could look like.
body {
background: url(https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/07/979c566babe3ae625a9ad7350c019677/a187611_large.jpg?itok=laveSilF) no-repeat;
background-size: cover;
margin: 0;
}
#banner {
width: 380px;
height: 55px;
position: relative;
overflow: visible;
margin: 0 0 0 auto;
background: #fff;
}
#banner:before {
content: '';
display: block;
z-index: 1;
position: absolute;
top: 0;
left: -30px;
background: red;
transform: skew(-45deg);
height: 100%;
width: 30%;
}
#banner .content {
margin-left: 30%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
position: relative;
background: transparent;
}
<div id="banner">
<div class="content">
Content is positioned here
</div>
</div>
I have a problem that's driving me insane, and it has done so for quite some time. I've spent days trying to figure this one out with no success. Google is basically purple to me now. Additionally I fear the answer might be embarrassingly easy - but I'm about to go drown myself so here goes:
The problem:
I use pure css modal windows on my site. They are set to be absolutely positioned using margin: 0 auto; and translateY(-50%); like so:
margin: 0px auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
I am using named anchors to hide/show the modal windows.
This works beautifully in basically every browser - I get the modal windows to appear and disappear like they are supposed to, in the center of the VIEWPORT of my browser window. In Safari and on iPhones and iPads however, it seems my modal windows get absolutely centered relative to the ENTIRE PAGE/DOCUMENT.
So, if my page has a vertical scrollbar, clicking the anchor link and showing the modal window makes the BROWSER WINDOW jump as well - in order to display the modal window in the absolute center of the entire page.
I include my modal windows just before the closing body tag like so:
<?php
include 'layout/elements/modal/users_online.php';
include 'layout/elements/modal/requests.php';
include 'layout/elements/modal/notifications.php';
include 'layout/elements/modal/messages.php';
include 'layout/elements/copyright.php';
include 'layout/elements/modal/developer.php';
?>
</body>
</html>
This is the code of my modal windows:
.modal {
display: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 50%;
left: 0;
color: #333333;
}
.modal:target {
display: block;
outline: none;
}
.modal .big_container {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
width: 785px;
height: 515px;
margin: 0px auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 1px 26px -3px #777;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
So thanks to weBer (seriously thank you so much :D) I was able to figure out the answer.
This works:
.modal {
display: none;
position: fixed;
z-index: 9999;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.modal:target {
display: block;
outline: none;
}
.modal .big_container {
position: fixed;
display: block;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width: 785px;
max-width: 785px;
min-height: 515px;
max-height: 515px;
margin: 0px auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 1px 26px -3px #777777;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
Am not sure this is your answer but here it goes.
Am taking .modal as your pop up overlay background. So change its code to -
.modal {
display: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: #333333;
}
And .modal .big_container- which is our content box should have the following style.
.modal .big_container {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
width: 785px;
height: 515px;
display:inline-block;
position:absolute;
left:50%;
top:50%;
-webkit-transform: translateY(-50%,-50%);
-ms-transform: translateY(-50%,-50%);
transform: translateY(-50%,);
padding: 20px;
box-sizing:border-box;
background-color: #ffffff;
box-shadow: 0px 1px 26px -3px #777;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
Check if it works for. I think this might, I use this in my most of the projects.
I'm having trouble making a div button responsive in a webpage. I have changed all pixel values to percentages and the problem still exists.
.wrapper {
display: block;
position: absolute;
left: 30%;
transform: translate(-50%, -50%);
}
.testing {
padding: 10% 10%;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #009ac9;
border: 2px solid transparent;
font-size: 90%;
display: inline-block;
border-radius: 0.1em;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.testing:hover {
background-color: #ffffff;
color: #009ac9;
border-color: #009ac9;
}
<div class="wrapper">
LOG IN
</div>
Another problem is, I have a fullscreen overlay menu and I'd like to disable this button when the overlay is present. As of now, the button is still clickable when the overlay is present. I'd like to disable it:
Image
Try this, I think this will be helpful.
.wrapper {
display: block;
position: absolute;
left: 0;
top: 0;
right:0;
bottom:0;
z-index:9;
}
.testing {
padding: 10% 10%;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #009ac9;
border: 2px solid transparent;
font-size: 15px;
display: inline-block;
border-radius: 0.1em;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
position:relative;
left:50%;
top:50%;
width:20%;
min-width:50px;
transform: translate(-50%, -50%);
}
.testing:hover {
background-color: #ffffff;
color: #009ac9;
border-color: #009ac9;
}
<div class="wrapper">
LOG IN
</div>
And for the menu give z-index:999; to the .overlay in your Fullscreen Overlay menu style.I think it will work for you.
Try vh in place of percentages, Hope it will Work and use media query also in responsive screen.
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery
So there are many tutorials that show you how to create diamond grids but the only thing that really confuses me is how they calculate the positions.
For example:
https://jsfiddle.net/Lpphbq55/
So how do I find out what values to use for the margins? I mean if I were to change the size it would take me a lot of experimenting to get the right value for the negative margins.
Here a snippet from the jsfiddle. The css is from a tutorial:
ul li {
list-style: none;
float: left;
margin-left: 66px;
margin-top: 20px;
}
.diamond-grid {
width: 1000px;
margin: 0 auto;
padding-right: 10px;
}ul li {
list-style: none;
float: left;
margin-left: 66px;
margin-top: 20px;
}
.diamond {
height: 160px;
width: 160px;
background: red;
color: #fff;
display: block;
overflow: hidden;
position: relative;
text-decoration: none;
border: 3px solid #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.diamond-grid > li:nth-child(9n+6) {
margin-left: 66px;
margin-top: -6px;
}
.diamond-grid > li:nth-child(5) {
margin-left: 182px;
}
.diamond-grid > li:nth-child(n+5) {
margin-top: -51px;
}
I found a code for light box using a simple java script from here. The problem here is the transparent background is not coming when i scroll down the page.Here is my css
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border-radius:10px;
background-color: white;
z-index:1002;
overflow: auto;
}
and what i got is jsfiddle
please give me some suggesstions
Thanks for reading :)
try this one,
.black_overlay {
display: none;
position:fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.5;
opacity:.50;
filter: alpha(opacity=50);
}
.white_content {
display: none;
position:fixed;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border-radius:10px;
background-color: white;
z-index:1002;
overflow: auto;
}
http://jsfiddle.net/Jz4Zq/2/
You are using height:100% which uses the 100% height for the element it is contained in. You will have to adjust the top property of the element when scrolling, or setting the height by javascript.