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!
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 ...
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 have this code:
<pre><code>
<!-- some code -->
</code></pre>
and I'm center it with flexbox. But when the screen is small the code tag go outside the pre-tag. Here is my code:
pre {
width: 100%;
border: 1px solid black;
display: flex;
justify-content: center;
min-width: 100%;
box-sizing: border-box;
}
code {
display: inline-block;
}
https://codepen.io/jcubic/pen/zYEOovQ
How can I make the pre tag, to always be the same as code, not 100% max?
I've tried to use float: left on the flexbox element but I think that float is ignored when using flexbox.
This is probably a common problem, but I was not able to find the question on SO.
EDIT: I don't want text wrapping, I want my container to actually contain all the content that is inside.
Hey so you can use overflow auto, which adds an extra scroolbar and the text doesnt go outside: I have edited the codepen, but here's the code anyways:
<style>
pre {
width: 100%;
border: 1px solid black;
float: left;
justify-content: center;
min-width: 100%;
box-sizing: border-box;
overflow: auto;
}
code {
display: inline-block;
}
</style>
<pre><code>
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>To jest paragraf</p>
</body>
</html>
</code></pre>
You can use border-collapse: separate;
pre {
width=100%;
border: 1px solid black;
display: table;
border-collapse: separate;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<pre><code>
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>To jest paragraf</p>
</body>
</html>
</code></pre>
So I'm creating a footer for my web document and I'm trying to achieve the following i drafted in word:
Home, Legal, Location and Contact are hyperlinks as seen in many website footers, and they are evenly spaced out vertically.
I'm having issue getting them to evenly space out in my html document. I tried using "margin-top" property but the Home hyperlink would then have uneven spacing at the top.
Would appreciate some help on this.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#wrapper {
border: 1px solid orange;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
#content {
border: 1px solid black;
display: flex;
flex-direction: column;
}
<!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="css/test_style.css">
</head>
<body>
<div id="wrapper">
<div id="content">
Home
Legal
Location
Contact
</div>
</div>
</body>
</html>
This would be totally even spacing implementation for your use-case :-
(Currently I had to make width and height to be 100% since you have an explicit border on them and it wouldn't look good but without border, you can just use height:100% and it should work the same )
Also you can use space-around as well for justify-content which will decrease the top and bottom margin for your links.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#wrapper {
border: 1px solid orange;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
#content {
border: 1px solid black;
display: flex;
flex-direction: column;
width:100%;
height:100%;
align-items:center;
justify-content:space-evenly;
}
<!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="css/test_style.css">
</head>
<body>
<div id="wrapper">
<div id="content">
Home
Legal
Location
Contact
</div>
</div>
</body>
</html>