I'm trying to make my images stick to the navbar at the top. When I make the tab smaller, the pictures have a noticeable gap. I want to get rid of this gap before I start aligning the pictures vertically for phone usage.
I have managed to make it responsive horizontally, but the gap is bugging me a lot. I could just add a black background to hide it, but I feel like that takes away from it.
When I'm gonna make it more responsive, I'm going to use media queries, I wonder if that could solve the issue, but I don't think it would.
Any ideas on how this could be solved?
#charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
overflow-x: hidden;
}
.navbox {
position: absolute;
width: 100%;
height: 15vh;
background-color: #271f30;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 9999;
}
.navbox img {
height: 10vh;
}
.home {
width: auto;
height: 75px;
}
.bildspel {
}
.arrowleft {
width: 60px;
height: 60px;
}
.arrowright {
width: 60px;
height: 60px;
}
.tre {
height: 90vh;
width: 99vw;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: space-between;
}
.tre img {
width: calc(100vw / 3);
aspect-ratio: 1/1.75;
transition: 0.3s ease-in-out;
cursor: pointer;
}
.tre img:hover {
transform: scale(1.15)
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Witcher - Streaming on Netflix</title>
<link href="seessess.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbox">
<div></div>
<a href="index.html">
<img class="home" src="witcherlogo.png" alt="Logo">
</a>
<div></div>
</div>
<div class="tre">
<img src="Crop2.png" onClick="location.href='index.html'">
<img src="Crop1.png" onClick="location.href='index.html'">
<img src="Crop3.png" onClick="location.href='index.html'">
</div>
</body>
</html>
The gap happens because your vh calculations don't add up. You can fix it by removing height: 90vh; from .tre so it will always stick to the nav bar.
It also helps to put your three images in a div, so you can use flex more easily. (the images are always 100% of their flex div container)
I added a media query to put the images under each other on a small screen.
*{
margin: 0;
padding: 0;
}
.navbox {
width: 100%;
height: 15vh;
background-color: #271f30;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbox img {
height: 10vh;
}
.tre {
display: flex;
align-items: center;
justify-content: space-between;
}
.tre div {
overflow:hidden;
}
.tre img {
transition: 0.3s ease-in-out;
cursor: pointer;
width:100%;
}
.tre img:hover {
transform: scale(1.15)
}
#media (max-width:300px) {
.tre {
flex-direction:column;
}
}
<div class="navbox">
<div></div>
<a href="index.html">
<img class="home" src="https://cataas.com/cat" alt="Logo">
</a>
<div></div>
</div>
<div class="tre">
<div>
<img src="https://cataas.com/cat">
</div>
<div>
<img src="https://cataas.com/cat">
</div>
<div>
<img src="https://cataas.com/cat">
</div>
</div>
Related
I want exactly like this website: https://www.petzl.com/INT/en
I want to show the text that is the center having 3 divs "Services" "Training" and "Shop" to have in one line or row.
I tried inline-block, padding, margins, float etc. but maybe I am doing something wrong.
If I dont use this line "place-content:center;" it places it to left with a lot of spaces.
My website link: beta.edgerope.com
Please find code below:
<style>
.image{
height: 800px;
width: 100%;
display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-position: center;
background-size: cover;
}
.training{
display:inline-block;
padding-top: 50px;
padding-right: 1500px;
padding-bottom: 50px;
padding-left: 1px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
display: inline-block;
}
.div{
dipslay
}
</style>
<div class="image">
<div class="services">
<span class="services" onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="Training">
<span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>
:
You can use CSS flex property something like this
.image {
display: flex;
justify-content: space-evenly;
align-items: center;
}
I have this example where I wanted to demonstrate my problem: https://codepen.io/Kapaak/pen/oNBbgad
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
min-height: 100vh;
height: 100vh;
background-color: #01383a;
display: flex;
align-items: center;
justify-content: center;
color: #f5c1a0;
font-size: 3rem;
}
.wrapper h2 {
z-index: 1;
}
.wrapper .image {
width: 10rem;
position: absolute;
}
.wrapper .image.bottom-left {
bottom: 4rem;
left: 4rem;
}
.wrapper .image.top-right {
top: 4rem;
right: 4rem;
}
.wrapper .image img {
width: 100%;
}
<div class="wrapper">
<h2>Some random headline text</h2>
<div class="image top-right">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
<div class="image bottom-left">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
</div>
I am trying to make some page, where will be some interactive images, that will be positioned somewhere on the page, just like the cats in the codepen. The problem is that when you resize window, they will always retain the same position.
What I want is to give them lets say max-width:900 and when I have smaller width they wont move, they will just overflow the page and I want the headline to be centered, thats why I gave the images position:absolute
The reason your right image is moving when you resize the browser is because you made it absolute compared to the right edge with right: 4rem;. If you change that value to say left: 104rem; then it will always be positioned 104 rem from the left edge of the window, regardless of the window width.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
min-height: 100vh;
height: 100vh;
background-color: #01383a;
display: flex;
align-items: center;
justify-content: center;
color: #f5c1a0;
font-size: 3rem;
}
.wrapper h2 {
z-index: 1;
}
.wrapper .image {
width: 10rem;
position: absolute;
}
.wrapper .image.bottom-left {
bottom: 4rem;
left: 4rem;
}
.wrapper .image.top-right {
top: 4rem;
left: 104rem;
}
.wrapper .image img {
width: 100%;
}
<div class="wrapper">
<h2>Some random headline text</h2>
<div class="image top-right">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
<div class="image bottom-left">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
</div>
Your best bet would be to either use Bootstrap columns (https://getbootstrap.com/), as these dynamically resize images/text in columns. Or you can use the following css to keep the same position.
#image {
width:100%;
height:100%;
margin-left:50%;
margin-right:50%;
position:absolute;
}
If you need to resize images when the page size is decreased you can use media queries in CSS. These can also be used to change the properties of any element for any screen size.
if you want your title always be centered use
text-align: center;
on your h2 element
I have replicated a gallery carousel in netflix style.
The problem is that images don't scale outside their parent element when I hover them.
<section id="section1">
//I have actually much more images here that overflow horizontally the screen.
<img src="https://occ-0-2007-1168.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABVypZKpbeCTdH_RiIUNhK-H_kNm_qvlA_43XPwJXpvme9IwH3o2gnHlWx9sPgX8A8N_m9s5OVW_zHiEHVacerrBlzuAfoAl_9ppM9nbpVIiDbgv2tmeAaBV55-H8.jpg?r=c94" alt="">
<img src="https://occ-0-2007-1168.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABaArrKSNeknqjF6J-wz8_dI_ATA6BpmxR7FGuNwY5NpWy3X6AMupA-63bXbqjIaoztw9tsYDb9X7iCJt6R_xOxNVdKnpGfWwJ_E7WXFJUm32FWIMScuA_3bNf5sV.jpg?r=993" alt="">
</section>
css:
#section1 {
width: 100%;
display: flex;
align-items: center;
position: relative;
overflow-x: hidden;
}
.wrapper section img{
width: 15.2vw;
margin: auto;
margin-left: 0.5rem;
border-radius: 1rem;
}
img:hover {
transform: scale(1.2);
overflow: visible;
position: relative;
z-index: 50;
}
I want 3 section one cover half part of the screen to show image slider and in half part, there is two section right now that part I'm done but now I want to add half part of the screen on top but it does not show image slider section, please help me.
right now my code:
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #ff6a00;
}
.right {
right: 0;
background-color: #ffd800;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="split left">
<div class="centered">
<h2>Blood Donor</h2>
<p>Go To Registration</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>Blood Seeker</h2>
<p>Go To Registration</p>
</div>
</div>
</form>
</body>
please help me,
Thank You for your time.
He's a simple layout using CSS Grid (the 2D version of Flexbox):
.main {
display: inline-grid;
height: 200px;
width: 400px;
grid-template-rows: 50% 50%;
border: green solid 2px;
}
.main .level1 {
border: blue solid 2px;
display: flex;
}
.main .level1 .level2 {
border: red solid 2px;
flex-basis: 50%;
}
<div class="main">
<div class="level1"></div>
<div class="level1">
<div class="level2"></div>
<div class="level2"></div>
</div>
</div>
If you are happy using grid then is quite easy. You just need to setup a grid which with two columns and two rows.
Here is a link to a codepen, there are some other styles to make it a little easier to see what is going on but you only need to pay attention to the grid css attributes.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 50vh;
}
.container>div {
display: flex;
justify-content: center;
align-items: center;
}
.image-slider {
background: magenta;
grid-column: span 2;
}
.page-link-1 {
background: red;
}
.page-link-2 {
background: green
}
<div class="container">
<div class="image-slider">Image Slider</div>
<div class="page-link-1">Page Link 1</div>
<div class="page-link-2">Page Link 2</div>
</div>
https://codepen.io/tmcnicol/pen/PdoLpm/
My implementation with flex:
body,
html {
height: 100%;
}
.wrap {
display: flex;
height: 100%;
flex-direction: column;
}
.slider {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-wrap {
display: flex;
flex: 1;
}
.link {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrap">
<div class="slider">Image slider</div>
<div class="bottom-wrap">
<div class="link">Page Link</div>
<div class="link">Page Link</div>
</div>
</div>
Working codepen
Hello I am making a JS slide show script. The problem I am having is that the slide2 div that I am using to load the second img is not playing nice with the frame. when you click the next slide the new dive is put at the bottom of the frame. I want the new frame to come next to the old image. can you guys help me get this right? ill be around to answer any questions.
$(document).ready(function() {
$('#next_slide').on('click', function(e) {
console.log("next_slide was clicked");
$("#slide1").toggleClass('clicked');
$("#slide2").toggleClass("clicked");
});
});
body {
margin: 0px;
}
#main {
display: flex;
justify-content: center;
}
#slide_show {
background-color: gray;
border: 1px solid black;
width: 50%;
height: 350px;
margin-top: 50px;
display: flex;
}
#slide1 {
width: 100%;
height: 100%;
background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slide2 {
width: 0%;
float: right;
height: 100%;
position: fixed;
background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slid_container {
width: 100%;
height: 100%;
background-color: gray;
}
#next_slide,
#last_slide {
opacity: .5;
width: 20px;
height: 100%;
background-color: yellow;
}
#slide1.clicked {
transition: width 2s;
width: 0px;
}
#slide2.clicked {
transition: width 2.1s;
width: 100%;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
</head>
<body>
<div id="main">
<div id="slide_show">
<div id="last_slide">
</div>
<div id="slid_container">
<div id="slide1">
</div>
<div id="slide2">
</div>
</div>
<div id="next_slide">
</div>
</div>
</div>
</body>
</html>
It looks like I was able to hack a fix by setting the display mode for the slid_container div to flex and making the transitions both to 2s each. If there is a better way to do this feel free to respond.