So I made a a calculator to change kilogram to pound and I was going to add a border to a pelement but the bordergoes all the way to the right
So here is the html
<!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">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
<p id="pounds">0</p>
<p id="dinnars" class="dinnars">0</p>
<script src="main.js"></script>
</body>
</html>
And here is the css
*{
padding: 0%;
margin: 0%;
box-sizing: inherit;
}
body {
font-size: 15pt;
width: 480px;
height: 500px;
box-sizing: border-box;
}
#kilograms {
position: relative;
top: 70px;
left: 140px;
border: 20px solid crimson;
border-radius: 4px;
}
#pounds {
position: relative;
top: 100px;
left: 240px;
}
.dinnars {
border: 15px solid darkorchid;
position: relative;
top: 150px;
left: 240px;
border-radius: 4px;
}
Add width: min-content; to your .dinnars class. I would also delete the top and bottom attributes. They are unnecessarily restricting your sizing.
Also, get rid of the top left attributes.
*{
padding: 0;
margin: 0;
box-sizing: inherit;
box-sizing: border-box;
}
body {
font-size: 15pt;
// width: 480px;
// height: 500px;
}
#kilograms {
position: relative;
// top: 70px;
// left: 140p;
border: 20px solid crimson;
border-radius: 4px;
}
#pounds {
position: relative;
// top: 100px;
// left: 240px;
}
.dinnars {
border: 15px solid darkorchid;
width: min-content;
position: relative;
// top: 150px;
// left: 240px;
border-radius: 4px;
}
.box{
border:2px dotted green;
width: 500px;
height 500px;
}
<div class='box'>
<input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
<p id="pounds">0</p>
<p id="dinnars" class="dinnars">0</p>
</div>
The p-element is in relative position with the element that has a class .dinners at right, so applying border on the p-element will make the right hand border look bigger because of the of relative element that already has it's own border that look like it's merging with the one at the Left because of there is no space between the two. Also note that the box-sizing property affects the way properties are applied on elements. Maybe try using box-sizing: border-box.
Related
I want the border to be positioned inside the image,
red background just to show the border.
#example {
border: 50px dotted black;
background: red;
width:600px;
}
img{
width:100%;
height:auto;
}
<div id="example">
<img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
You can use i, it doesn't affect the box-model
<!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>
<style>
#example {
display: inline-block;
position: relative;
width: 600px;
}
#example:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 50px dotted black;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
</style>
<div id="example"><img
src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600" />
</div>
</body>
</html>
You can use outline, it doesn't affect the box-model
outline: 50px dotted black;
outline-offset: -50px;
Try to add outline and outline-offset to (img) looks like the example below:
#example {
border: 50px dotted black;
background: red;
width:600px;
}
img{
width:100%;
height:auto;
outline: 10px solid rgba(0,0,0, 0.5);
outline-offset: -10px;
}
<div id="example">
<img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
perhaps you can make an absolute div, you can use that div to cover the image and make a border from that div. that will make the border looks inside the image
#example {
width:600px;
position: relative;
}
img {
width:100%;
height:auto;
}
.absolute {
position: absolute;
top: 0;
box-sizing: border-box;
border: 50px dotted black;
width: 100%;
height: 400px;
}
<div id="example">
<img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
<div class="absolute"></div>
</div>
I simply have a div inside another div with overflow: hidden and if you are in chrome then you will see whitespace around the border especially when zooming in and out, if you are in firefox it is less glitchy and there is only white space in the corners of the border. chrome screenshot / firefox screenshot
<style>
.div1 {
border: 10px solid purple;
border-radius: 30px;
height:300px;
width:300px;
overflow: hidden;
position: relative;
}
.div2 {
background: purple;
position: absolute;
height: 400px;
width: 400px;
top: -20px;
left: -20px;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
Note that I don't want an alternative way to achieve the above aesthetic but I need a proper solution while keeping the div inside a div, because my bigger project requires this structure and this code is simplified to showcase the bug. Thanks!
I've found a trick for it here it is:
don't use background-color for the #outer
instead, give background-color property to #inner and #inner2 and put your content inside inner2, now instead of a border, you can use box-shadow.
this way you can have both sharp edges and a border with a different color.
*,
*::before,
*::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
#outer {
height: 5rem;
width: 10rem;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 0 0 2px black;
margin: auto;
}
#inner {
background-color: blue;
height: 2rem;
width: 100%;
}
#inner2 {
height: 4rem;
background-color: red;
width: 100%;
}
<!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>
<div id="outer">
<div id="inner">
</div>
<div id="inner2"></div>
</div>
</body>
</html>
Here I have three elements which have position: absolute.
First and Second elements are OK, but the third element just doesn't appear.
body {
margin: 0;
padding: 0;
background: red;
position: relative;
}
#first {
border: solid green;
height: 200px;
padding: 100px;
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#second {
border: solid blue;
height: 200px;
padding: 100px;
position: absolute;
top: 0;
right: 0;
height: 50px;
}
#third {
position: absolute;
bottom: 0;
right: 0;
border: solid brown;
height: 100px;
padding: 100px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<section id="first"></section>
<section id="second"> </section>
<section id="third"></section>
</body>
</html>
When you use position: absolute on an element, it's removed from the normal flow of the document. When you do that to all of the direct children of an element, it ends up collapsing down and has a height of 0. If you use the web inspector you can confirm that your container, in this case, body, is 0px tall.
Setting the bottom property on #third causes it to align with the bottom of the body element, which is at the top of the viewport, which subsequently results in your element being rendered above the viewport where you can't see it.
If you set a fixed height or min-height on the body you can resolve this. A common pattern is to set the minimum height for the body to be the height of the viewport:
body {
min-height: 100vh;
}
The html page below contains a footer (position: fixed) and a "Sheet" (position: absolute).
My problem: How to prevent the bottom end of the Sheet to be hidden underneath the footer when I scroll down?
All my attempts with padding and margin failed ... (Please only html/css solutions.)
CSS
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red; }
HTML
<body>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
Give margin-bottom to sheet which is equal or grater than footer fix height;
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
}
Update
if you want to bring in front of all then add z-index property.
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
z-index: 999; // use suitable maximum to bring in front all
}
The problem as I see it is the absolute position of the sheet, as absolute positions do not affect the height of the surroundung Element (in your case the body).
If possible try position: relative;. Then your margin can be counted in.
See https://jsfiddle.net/y3mg5zvb/
If it has to be absolute for any reason, you need a surrounding div with relative or static positioning that sets the height of the body.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
max-height: 500px;
overflow: scroll;
top: 45px;
}
</style>
</head>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
</html>
This helps you?
Just don't use absolute position on .Sheet - there's no reason for it. Replace top and left with margin-top and margin-left and use a margin-bottom at least as high as the footer.
.Sheet {
margin-top: 100px;
margin-left: 25px;
margin-bottom: 30px; /* whatever value */
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
}
I think this is a perfect solution!!!
Solution by Joey, adapted by Nik
Set position absolute and margin
<!-- Solution by Joey, adapted by Nik -->
<!-- https://stackoverflow.com/questions/9350775/set-position-absolute-and-margin -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
text-align: right; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange; }
.Sheet {
position: absolute;
top: 200px;
left: 25px;
width: 50%;
background: red; }
.Sheet::after {
position: absolute;
content: "";
bottom: -80px;
height: 80px;
width: 1px; }
</style>
</head>
<body>
<div class="Background">
Background <br><br><br><br><br><br><br><br><br><br><br><br>Background</div>
<div class="Sheet">
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content</div>
<div class="Footer">
Footer</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
main {
z-index: 999;
}
footer {
width: 100%;
min-height: 40px;
background-color: black;
}
footer p{
color: white;
}
<body>
<main>
<p>david</p>
</main>
<footer>
<p>logo</p>
</footer>
</body>
try playing around with z-index and some
I´m new to web development, like I just did 3h and am trying to finish a google clone as an exercise and I don´t seem to understand much about how the things relate.
I tried adopting several type of positions for the divs and buttons but nothing seems to change for the search field and the 2 buttons below.
running out of ideas.
Can you perhaps tell me which style rules are clashing with each other?
body {
margin: 0;
}
#Search {
margin: 150px auto;
width: 50%;
}
.holder {
text-align: center;
}
.loginbutton {
background-color: blue;
color: white;
position: absolute;
top: 20px;
right: 20px;
border-radius: 5px;
}
.gbutton1 {
background-color: lightGrey;
padding: 5px;
border-radius: 5px;
height: 50%;
top: 50%;
margin: auto;
}
.gbutton2 {
background-color: lightGrey;
padding: 5px;
border-radius: 5px;
height: 50%;
top: 50%;
margin: auto;
}
}
.box {
position: absolute;
right: 50%;
top: 50%;
margin: auto;
}
.footer {
position: fixed;
width: 100%;
bottom: 0px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My crappy Google</title>
<meta name="author" content="n00b">
</head>
<body>
<button class="loginbutton">Login</button>
<div id="Search">
<div class="holder">
<img src="https://www.google.at/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo" width="75% of window">
</div>
<div class "box">
<input type="text" name="search" placeholder="Search....">
</div>
<div>
<button class="gbutton1">Google-search</button>
<button class="gbutton2">i´m feeeling like crap</button>
</div>
<div class="footer">footer</div>
</body>
</html>