<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="a">x</div>
<div class="b"></div>
<div class="c"></div>
</div>
<style>
.container {
display: grid;
grid-template-rows: min-content 300px 50vw;
}
.a {
margin-bottom: 0px;
}
.b {
margin-top: 20px;
margin-bottom: 0px;
}
.c {
margin-bottom: 50px;
}
</style>
</body>
</html>
I found that margin will compress grid-template-rows, the rows height will decrease when that row add
margin.
EX:
<div class="b"></div> has been set row height 300px, but its height is only 280px.
<div class="c"></div> has been set row height 50vw, but its height is not 50vw.
I want set distance between two div, but margin compress itself.
Related
I would like to align the text in my navigation menu respective to the logo on the left, so it is centered vertically. Right now, it is aligned to the top, which I don't want. I tried using align-items center for the text in the navigation menu, but wasn't able to work.
Navigation Picture
body{
margin:0;
padding:0;
}
.header{
background-color: salmon;
height: 100px;
}
.header img {
float: left;
width: auto;
height: 100%;
}
.header h1 {
margin-top: 0px;
padding-top:10px;
left: 10px;
}
ul li{
display: inline;
font-weight: bold;
align-items: center;
}
li a{
align-items: center;
}
<!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>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
The generic way to vertically align something is with vertical-align: middle , though that doesnt work if the parent/container doesn't already have reason to be taller than the thing you're trying to align.
A generally easier way to design this layout would be using flexbox , then you can use things such as align-items.
If you're interested in more about that, then here is a good place to start.
Please see below an example using flexbox.
body {
margin: 0;
padding: 0;
}
.header {
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
gap: 10px;
}
<div class="header">
<img src="https://via.placeholder.com/100">
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</div>
Here is solution for your query.
You will have to add CSS in header class instead of ul li & li a.
.header{
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
}
<!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>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
I have this animation that works well if appllied to some div background image but when I tried to put some elements inside the content go below, I tried disabling content: '' but I lost the animation effect.
The goal here is invert colors of all elements, text and image using the CSS filter, I tried with the actual settings it works as expected and I am getting the result I want (white/red).
The only issue I am facing is putting the content inside the div :
html,
body {
background-color: #ddd;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.banner {
width: 936px;
height: 288px;
color: #fff;
background-color: #cc0000;
transition: 2s all;
}
.logo {
width: 298px;
height: 91px;
}
.banner:before {
display: block;
height: 100%;
content: "";
background: inherit;
background-clip: content-box;
box-sizing: inherit;
transition: 2s all;
padding-left: 0;
filter: brightness(0%) sepia(1) invert(1);
}
.banner:hover:before {
padding-left: 936px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="banner">
<img class="logo" src='https://image.flaticon.com/icons/svg/1852/1852293.svg' />
<p>Coming soon</p>
<div class="container">
<div class="row">
<div class="col-xs-3">
<h1>89</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>60</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>24</h1>
</div>
</div>
</div>
</div>
</body>
</html>
I have a parent div and a child div.I would like to center to know if i could express the width and the height of the child as a percent of the parent,for instance
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
width:800px;
height:100px;
background-color:grey;
}
.two{
margin-top:30px;
margin-bottom:30px;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>
To see it in action http://jsfiddle.net/thiswolf/3qRgH/
The outer div(parent) has a height of 100px and my child div has a height of 40px.I would like to center my child inside the parent theme,so,100px - 40px = 60px and i divide the 60px twice and assign the child div margin-top:30px and margin-bottom:30px;.I however would like to express the margins in percentage form.How would i express the margins in %.
You can center the divs this way (edited) :
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
width: 800px;
background-color: grey;
}
.two{
min-height: 40px;
margin: 30% 355px;
width: 90px;
background-color: pink;
display: inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</div>
</div>
</body>
</html>
See http://jsfiddle.net/3qRgH/2/
Is this what you 're asking?
http://jsfiddle.net/thiswolf/5AZJD/
That seems to work but i haven't proved it
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
position:relative;
width:800px;
height:100px;
background-color:grey;
}
.two{
position:absolute;
top:30%;
bottom:30%;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>
I want my 3 child divs to be stretched 100% vertically, and I want them to be next to each other horizontally. So If I resize my parent div, child divs will resize accordingly, but would always stay next to each other horizontally (each would take approximately 33% width)
So here is the CSS:
.appcontent {
position: absolute;
left: 80px;
right: 50px;
top: 30px;
max-width: 1050px;
min-height: 400px;
border: 2px solid black;
}
.box {
display: inline-block;
height: 98%;
padding: 10px;
border: 2px solid black;
}
And HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
<script src="jquery.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="appcontent">
<div class="box">
<h3>App 1</h3>
</div>
<div class="box">
<h3>App 2</h3>
</div>
<div class="box">
<h3>App 3</h3>
</div>
</div>
</body>
</html>
just in case I also put it here http://jsfiddle.net/naWsh/
I answered this question before with a comprehensive explanation Fluid design
Just in stead of 400% make it 100% and its children 33%
I want my child div to be behind the parent div. I have used z-index: -1. It works fine for IE8 standard mode, but in Quirks mode the child div is shown above parent div.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.first{
width: 400px;
height: 300px;
background-color: blue;
position:absolute;
}
.second{
width: 600px;
height: 300px;
z-index: -1;
background-color: red;
position:absolute;
}
</style>
</head>
<body>
<div class="first">
I am parent div
<div class="second">
I am child div
</div>
</div>
</body>
</html>