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
Related
I want that the <object> or <iframe> element has the same measures like its content.
Given are two simple html files.
square.html (want to inject into the main file)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
:root {
--hk-mes: 300px;
}
html,
body {
width: var(--hk-mes);
height: var(--hk-mes);
margin: 0;
padding: 0;
}
.square {
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
main.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
html,
body {
margin: 0;
padding: 0;
display: inline-block;
}
.have-measures-of-content {
width: auto;
height: auto;
border: 0;
}
</style>
</head>
<body>
<object class="have-measures-of-content" data="./square.html"></object>
</body>
</html>
The <object> element has a size of 300px/150px (width/height). How can I make that it has automatically the size of its content, in this case 300px*300px, with plain html / css?
Another weird thing is that if I set the <object> or <iframe> manually to 300px/300px (width/height) the scrollbars don't disappear – I must set the height to 304px ... From where the 4px come from? The 4px come from display: inline-block. display: inline-flex doesn't add 4px to bottom ...
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 am trying a simple border box here that does not seems to work for the height of my box
* {
box-sizing: border-box;
}
.div1 {
width: 500px;
height: 200px;
border: 5px solid #E18728;
float: left;
}
.div2 {
width: 90%;
height: 90%;
padding: 20%;
border: 4px solid black;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<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>
<div class="div1">
<p>This is the parent! </p>
<div class="div2">
<p>This is the child</p>
</div>
</div>
</body>
</html>
What seems to be the problem ? Width is okay, inside the box however height is not. Why ?
I am completely new to CSS and hope your answers will help me and others: I have found no solutions on the web.
Thank you from France
its your p tag as well as your padding:
* {
box-sizing: border-box;
}
.div1 {
width: 500px;
height: 200px;
border: 5px solid #E18728;
float: left;
}
.div2 {
width: 90%;
height: 90%;
border: 4px solid black;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<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>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
The problem is on the padding of the second div...
As stated here: MDN Web Docs - Padding
if you put the padding as a percentage (20%) then it refers to the width of the containing block. So, in your code, the padding you are applying a padding of 200*20/100 = 100px and that's forcing your div2 to grow to accomodate the paragraph inside.
Remove the padding or express it in absolute units and you're done!
I have created a horizontal scrolling website but for some reason chrome on ipad shrinks the entire layout to show it without enabling horizontal scroll.
I have created a test file to replicate this issue with following code:
<!doctype html>
<html class="no-js" lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Title -->
<title>Testing Horziontal Scroll</title>
<!-- For responsive behavior -->
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
<style>
.horizontal{
height: 500px;
width: 4000px;
}
.item{
width: 1000px; background: #f00; float: left; height:100%;
}
.item:nth-child(2){
background: #0f0;
}
.item:nth-child(3){
background: #00f;
}
</style>
</head>
<body>
<div class="horizontal">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
I tried removing view port meta tag and it fixed the issue but that created issues on other devices.
You could try adding the following to your CSS:
body {
overflow-y:scroll;
}
This will force the overflow to the left and right to be set to being scrolled.
Hope this helps!
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/