So, I've researched how to make div 100% height of the screen, but if I put another div in HTML right below the first one, only the last div appears. I want to make website where each div behaves like a slide.
Here's the code I've used:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<title>Test portfolio</title>
</head>
<body>
<div id="wrapper" class="overlay"></div>
<div id="wrapper2" class="overlay">allooo</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
html, body{
background:url("backgrounds/escheresque_#2X.png");
min-height: 100%;
margin:0;
}
#wrapper{
height:100%;
background:#fff;
}
#wrapper2{
height:100%;
background:#c60;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
z-index: 10;
}
By setting each div to position: fixed you put each one of them on top of one another, relative to the viewport. Remove the .overlay class and you’ll display them one below the other. If you want to have only one at the screen at a time and no scrollbar you’ll have to resort to using JavaScript.
And here is a link to an example with one following the other http://jsbin.com/UvOXUXI/1/
Related
I am using div tag with a width of 100% and height of 100%. Under the div, I put my first image with 50% width. When I put second image with same 50% width, the second image is going to the bottom of first image. If I change the width to 49%, second image is aligning to the right side of first image (which is expected). Any way the width of div is 100%, why the second image is going down if I put width as 50% ?
body {
margin: 0px;
}
div {
width: 100%;
height: 100%;
}
.first-image {
width: 50%;
height: 100%;
outline: 0px;
}
.second-image {
width: 50%;
height: 100%;
outline: 0px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>project</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div>
<img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" />
<img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
</div>
</body>
</html>
You can use CSS Display Flex Property.
For Ref: https://www.w3schools.com/css/css3_flexbox.asp
body {
margin: 0px;
}
div {
width: 100%;
height: 100%;
}
.first-image {
width: 50%;
height: 100%;
outline: 0px;
}
.second-image {
width: 50%;
height: 100%;
outline: 0px;
}
.flex_box{
display: flex;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>project</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="flex_box">
<img class="first-image" src="firstscreen.jpg" alt="first-image" />
<img class="second-image" src="secondscreen.jpg" alt="second-image" />
</div>
</body>
</html>
This is because white space also creates space in HTML.
It is the space between words, but the browser also respects spaces between HTML elements. Since there is a line-break and space between your two images you have a space between them. Remove these and the 50% width images also fit into one line.
If you set white-space: nowrap on your div you see the space more clearly (and also some scrollbars, since now the two images are bigger than the container and create some overflow)
As other answer said, best way to get rid of this is to just use flexbox for this kind of layout.
body {
margin: 0px;
}
div {
width: 100%;
height: 100%;
}
.first-image {
width: 50%;
height: 100%;
outline: 0px;
}
.second-image {
width: 50%;
height: 100%;
outline: 0px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>project</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div>
<img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" />
<img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
</div>
<div>
<img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" /><img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
</div>
</body>
</html>
body {
background: #111;
filter: opacity(1);
color: #eee;
}
#about::before {
background: url(/img/backgroud1.svg);
width: 100%;
height: 800px;
filter: opacity(0.01);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<main>
<div id="about">
<h1>hello World</h1>
</div>
</main>
</body>
</html>
Can someone tell me why my background image is not displayed
I want my heading to be on top of a background image.
A ::before psuedo-element won't display anything if it doesn't have any content so give it some content
height and width do nothing on an element which is display: inline which ::before is by default
With an opacity as low as you are setting, it will be as good as invisible. Increase the opacity so you can see it.
You need to absolutely position the element (with a positioned container to anchor it) if you want the text to be on top of the image
body {
background: #111;
filter: opacity(1);
color: #eee;
}
#about {
position: relative;
}
#about::before {
background: url(http://placekitten.com/200/200);
width: 100%;
height: 800px;
filter: opacity(0.50);
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<main>
<div id="about">
<h1>hello World</h1>
</div>
</main>
</body>
</html>
you should put string marks in the url protion
background: url("/img/backgroud1.svg");
I wanted to practice some CSS, so I created some divs in vscode to start playing around but when I go on live server, nothing appears.
Here is my code:*
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="" width="", initial-scale="1.0">
<title>Document</title>
<style>
.container{
background: #81072b;
width: 100%;
height: 100%;
}
.child{
background: #05A82C;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
When using width/height in percentage % then you need to add content inside div then it will display your css. You code is fine. Check the demo
I have a div and in the div i have placed an image. I am trying to position that div in the center of the page but am unable to. Please help me. Thanks !
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bannerimage {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="bannerimage">
<img src="images/mailer2.jpg">
</div>
</body>
You can use display: flex for your bannerimage class to center it easily. Hope this helps
.bannerimage {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: -webkit-fill-available;
}
img {
display:block;
margin: auto;
}
<body>
<div class="bannerimage">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="150px;" height="150px;">
</div>
</body>
Check this code.I think this is what you want.:)
there are a lot of ways and this is in addition from https://stackoverflow.com/users/362477/iamnotsam
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bannerimage {
margin: 0 auto;
width:100px;
}
body{
height:100%;
}
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="bannerimage">
<img class="content" src="images/mailer2.jpg">
</div>
</body>
You can achieve this by using transform property. Keep in mind that the parent div should be relative
.bannerimage {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border:1px solid red
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="bannerimage">
<img src="images/mailer2.jpg">
</div>
</body>
add a container with a set width, (width: 100% or display: flex)
You can set the margin property to auto to horizontally center the
element within its container.
The element will then take up the specified width, and the remaining
space will be split equally between the left and right margins:
https://www.w3schools.com/css/css_margin.asp
.container{
display:flex;
}
#bannerimage {
margin: 0 auto;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<img src="https://picsum.photos/" id="bannerimage">
</div>
</body>
You can as already written use display:flex;
but there are other ways:
* {
margin : 0;
padding : 0;
}
.bannerimage {
margin : 0 auto;
min-width : 20%;
max-width : 1000px;
text-align : center;
backgroud : #000;
}
What i´ve done is to give the .bannerimage a min- and max-width attribute,
you also could use width instead.
Edit:
Sine i don´t know the resolution of your image this was basic example
of how to use margin only to show you how to "center" the div itself.
Now that´s everbodys voting down without even thinking of this point:
here is a fiddle, with working code! OMG!
https://jsfiddle.net/kymd1jv7/
If you don´t give this class a specific width most browsers will
handle this class as it will have a width of 100%.
The "image" could als be centered with text-align : center;
I have a menu with a fixed position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>My App</title>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
body {
margin: 0;
}
.parent {
position: relative;
max-height: 100vh;
padding-top: 3rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.menu {
position: fixed;
top: 0;
width: 100%;
background: pink;
text-align: center;
height: 3rem;
}
</style>
</head>
<body>
<div class="parent">
<nav class="menu">Menu</nav>
<div style="height:100vh; background: yellow">1</div>
<div style="height:100vh; background: green">2</div>
<div style="height:100vh; background: red">3</div>
<div>
</body>
</html>
http://jsbin.com/xojarekano
On mobile safari, you can scroll and the menu stick to the top, as expected.
But if you add to home screen, and then launch the site from there, when you scroll, the menu get drifted, disappears then appear again. I have tried adding translateZ(1px) into the menu class but the problem still exists.
Why does this behave differently when it's launched from home screen as opposed to inside mobile safari. How can be this fixed?