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>
Related
Here is the code:
body {
position: relative;
font-size: 30px;
}
#middle {
width: 420px;
height: 500px;
margin: 100px auto 0;
border: solid;
}
#left {
position: fixed;
border-style: solid;
border-color: red;
top: 50%;
transform: translateY(-50%);
left: 0;
}
#right {
position: fixed;
border-style: solid;
border-color: blue;
top: 50%;
transform: translateY(-50%);
right: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>Centered divs</title>
</head>
<body>
<div id="left">▢</div>
<div id="middle"></div>
<div id="right">▢</div>
</body>
</html>
How should the CSS code get modified in order for the two divs with ids left and right to get centered between the div in the middle and their respective edges of the screen? (Till now I have succeeded in centering the divs vertically and placing them on both sides of the central div, but not in centering them horizontally within the space of the central div and the screen edges.)
since the middle div has a fixed width you can use some math:
body {
font-size: 30px;
}
#middle {
width: 420px;
height: 500px;
margin: 100px auto 0;
border: solid;
}
#left {
position: fixed;
border: solid red;
top: 50%;
transform: translate(-50%,-50%); /* updated this too */
left: calc((100% - 420px)/4); /* half of (half the remaining space) */
}
#right {
position: fixed;
border: solid blue;
top: 50%;
transform: translate(50%,-50%);
right: calc((100% - 420px)/4);
}
* {
box-sizing:border-box;
}
<div id="left">▢</div>
<div id="middle"></div>
<div id="right">▢</div>
the best way to do this is to use flexbox
body {
font-size: 30px;
}
#container{
display:flex;
justify-content:space-between;
align-items:center;
}
#middle {
width: 420px;
height: 500px;
border: solid;
}
#left {
border-style: solid;
border-color: red;
display:inline;
}
#right {
border-style: solid;
border-color: blue;
display:inline;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>Centered divs</title>
</head>
<body>
<div id='container'>
<span id="left">▢</span>
<div id="middle"></div>
<div id="right">▢</div>
</div>
</body>
</html>
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.
So i have the following in my html page now, which is a circle that is centered in a div:
However, what i want is for the circle shape to retain its form whenever a window adjustment is made, for example:
If i right click and Inspect, the problem is my circle becomes like so:
How do i ensure the shape of the circle remains even when the outer container width or height is adjusted?
Edit: Extension from Derek.W solution
Now what if, instead of basing it on the overall window, its based on a containing element?
* {
box-sizing: border-box;
}
html,body {
height: 100%;
}
.main_container {
border: 1px solid black;
height: 90%;
width: 100%;
}
.outer {
border: 1px solid black;
height: 20%;
width: 100%;
}
.child1 {
border: 1px solid black;
height: 50%;
}
.child2 {
border: 1px solid black;
height: 50%;
display: flex;
justify-content: center;
}
.circle {
border-radius: 50%;
width: 5%;
border: 1px solid black;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class = "main_container">
<div class = "outer">
<div class = "child1"></div>
<div class = "child2">
<div class = "circle"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Checking the circle style, the width is set 10% of the viewport width and the height is set 20% of the viewport height so it won't be the circle.
To make the circle, it is needed to set the height and width of the same size.
20% of the viewport height is same as 20vh. So you can set the width of circle as 20vh instead of 10% as follows.
html,body {
height: 100%;
}
.outer {
border: 1px solid black;
height: 20vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
border-radius: 50%;
width: 20vh;
border: 1px solid black;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="avc_label_style.css">
<title>Document</title>
</head>
<body>
<div class = "outer">
<div class = "circle"></div>
</div>
</div>
</body>
</html>
To make a perfect circle the height and width must be equal.
So you can get it done by
.circle {
border-radius: 50%;
width: 10vh;
border: 1px solid black;
/* hight and width must be equal */
height: 10vh;
}
or using px
.circle {
border-radius: 50%;
width: 120px;
border: 1px solid black;
/* hight and width must be equal */
height: 120px;
}
I usually use the px solution passed on the situation.
If it's only about a visual effect, you can do it using radial-gradient:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.main_container {
border: 1px solid black;
height: 90%;
}
.outer {
border: 1px solid black;
height: 20%;
}
.child1 {
border: 1px solid black;
height: 50%;
}
.child2 {
border: 1px solid black;
height: 50%;
background:radial-gradient(circle closest-side,
transparent calc(100% - 4px),#000 calc(100% - 3px) calc(100% - 1px),transparent);
}
<div class="main_container">
<div class="outer">
<div class="child1"></div>
<div class="child2">
</div>
</div>
</div>
When opening this up in a browser, the combined width of the two divs does not fully fulfill the width of the body. I have made the background color of the second (right) div black so you can see the white space between the second div and the right side of the page. I tried messing with the border, margin but maybe I did it wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
CSS:
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
}
#div1 {
height: 756px;
width: 300px;
border: 2px solid black;
float: left;
}
#div2 {
height: 758px;
width: 1216px;
overflow: hidden;
background-color: black;
}
Position the divs absolutely and apply media queries so they will be responsive. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
<style>
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
width: 100%;
}
#div1 {
height: 756px;
width: 25%; //change width to fit your need
border: 2px solid black;
float: left;
left:0;
position: absolute;
}
#div1 img{
left: 0;
}
#div2 {
height: 758px;
width: 75%; //change width to fit your need
overflow: hidden;
background-color: blue;
right:0;
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
Since you are using fixed width, it will not adjust properly to your screen. And in different resolutions it will not adjust correctly to your screen size. Instead use % width.
#div1 {
height: 756px;
width: 35%;
float: left;
}
#div2 {
height: 758px;
width: 65%;
overflow: hidden;
background-color: black;
}
I've setup this fiddle with your example: https://jsfiddle.net/5yfnLcdt/
I want to set rounded inside border border-radius ,(not outer border-radius) to my element without nested div's.
My idea is like this picture:
html source on
jsfiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#s{
width:200px;
height: 200px;
border:8px solid green ;
border-radius:8px;
background-color: red;
margin:0 auto;
}
</style>
</head>
<body>
<div id="s" >
</div>
</body>
</html>
Is this possible in css3?
You can but it won't be usable I presume, since there is z-index: -1; once there is another background it will go behind it...
#s {
position: relative;
width:200px;
height: 200px;
border-radius:8px;
background-color: red;
margin:0 auto;
}
#s:before {
content:'';
z-index: -1;
background-color: green;
position: absolute;
top: -8px;
left: -8px;
width: 216px;
height: 216px;
}
Demo
It's possible to fake this with a couple of extra properties being outline and box-shadow.
CODEPEN DEMO
CSS
#s{
width:200px;
height: 200px;
border-radius:8px;
background-color: red;
margin:0 auto;
outline:8px solid green;
-webkit-box-shadow:0 0 0 8px green;
}
NB. The outline by itself will leave a gap where the rounded corners are. The box-shadow merely fills in the gap.