As i understand it, in CSS the border-radius property defines how far down a side a rounded corner should start. The distance can be in relative units, such as %. However, when set in percent CSS of course take % of width on the x-axis and % of height on y. I want the element to be a bar with rounded ends:
div {
margin: 50px auto;
border: 1px solid black;
width: 800px;
height: 150px;
border-radius: 75px; /* hardcoded, but would like it to be 50% of height */
}
Pair this with an standard html doc with just a single empty div in the body. In the actual case i need this for, the height of the div is also a percentage, so i cannot just calculate it manually. How can i set the border radius to 50% of height on both axes? I couldn't seem to find this neither asked or done anywhere, so maybe there is a really obvious way of doing this that i'm just missing?
You can also use:
border-radius: 50vh;
Seems like when provided higher value of radius working for different width and height values.
div {
margin: 50px auto;
border: 1px solid black;
width: 400px;
height: 150px;
/* hardcoded, but would like it to be 50% of width */
border-radius: 50vh;
}
<div>
</div>
It's a bit of a cheat, but you can just set the border-radius to something huge and it will end up looking the same regardless of the size:
div {
border-radius: 500px;
}
This can be done using css variables or pre-processor variables(like in sass, less...), if you don't want to hardcode it
div {
--height: 150px; /* can be percentage too */
margin: 50px auto;
border: 1px solid black;
width: 800px;
height: var(--height);
border-radius: calc(var(--height) * 0.5); /* 50% of height */
}
I don't think Manjuboyz's answer's your question. The main question was setting border-radius as 50% of the container's height, not the viewport's.
vh converts to the viewport's height, not the container's height.
Look at these:
css tricks - Fun with viewport units,
mdn docs for vh
Related
I have a div that has image on it done by uploading. It is quite working well until we uploaded diff image sizes. Problem came up when they uploaded a very big image and it is being cutoff (coz of overflow hidden) and just shows like a certain portion of the image, but if i remove the overflow: hidden, it becomes way too big. So then I put a transform(.20, .20) which worked well, but when user uploads a small sized image, it becomes really small because of the transform, which I don't like. I would like to put a min-width or like a conditional transform that if image is below 400px, don't transform it, or transform but not smaller as 400px square img. is that possible? I put min-width on several parts but nothing works.
here is my css & div:
.upload-viewer {
/*
border: 1px solid #e0246f;*/
margin-left: -199px;
height: 188px;
text-align: center;
background-color: #eee;
border: solid 1px #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 4px 5px;
transform: scale(.20, .20);
position: relative;
top: -70px;
margin-bottom: 50px;
}
<div class="upload-viewer">
<img src="" />
</div>
Min width sets the minimum width you should set the image width to 100%
Like this
.upload-viewer img{
width:100%;
}
Try using max-width
You can set a max-width prop at your img tag
For example:
.upload-viewer img {
max-width: 400px;
}
That way, it will not change your image width if it is lower than 400px, but will limit it to this width.
I have a section that i want to scale using aspect ratio, but also keep it at a maximum and minimum height. Somehow the max-height property doesn't apply to this, meanwhile the min-width works just fine.
div {
background: green;
border-bottom: 2px solid red;
padding-top: 60%;
max-height: 100vh;
min-height: 450px;
box-sizing: border-box;
}
<div></div>
What i'm trying to achieve is to display content that has a fixed aspect ratio, it scales down until reaches a minimum height, but also won't exceed the viewport height when displayed in a wider browser. See attached image for explanation:
Any ideas?
Ok, if I understand correctly, you'd need to do have the height of the box linked to the width at a percentage (which I'd do by setting the height to viewport width units rather than viewport height - in my example I've set it to 75%). That way the box stays in pro when it's not being constrained by max-height or min-height.
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-color: #00ff00;
}
.box {
width: 100%;
height: 75vw;
max-height: 100vh;
min-height: 400px;
background-color: #ff0000;
}
I'm trying to write an input tag that covers 100% of the div's width and have written the following CSS:
input {
min-width: 100%;
padding: 10px 10px;
margin: 8px 0;
border: 1px solid #3EE514;
box-sizing: border-box;
color: #000;
}
I've tried both width and min-width at 100% but neither work yet when I set a pixel value the input field will increase in size. How do I change the CSS to cover the whole div?
Thanks
When you say width: 100% its taking the parent element's width. But, if the parent doesn't have a specified width, then it's simply taking the 100% of 0 :)
You could either set the outer div to have a width in pixels first, or do something like
html, body {
width: 100%;
}
.outerDiv, input {
width: 100%
}
http://jsbin.com/huzem/1/edit?html,css,output
In the above site how do i extend the border to the bottom of the page, compared to where it ends now(right at the edge of the content)? Also is there a way to make the border line up on the edge of the right and left sides of the screen without using negative values for margin such as i did by setting margin -right and margin-left to -4%?
You are setting the width to 93%, and then you are overriding that with your -4% thing - so, just don't do the first part. body has a margin of something by default: so get rid of that:
Put a border on your html and body, like - red. and look at what is actually going on. The body only stretches to fit your content... so you need to tell it how big it can be... (100%) then you have to tell the things inside what to do etc... This isn't the complete / perfect answer --- but it should get you closer to your goal.
html, body {
height: 100%; /* remind these guys they can be as tall as the viewport if they want */
}
body{
margin: 0; /* remove default margin */
color: white;
background-color: black; /* white on white is no helpful */
}
#main{
height: 100%;
}
#content{
border: solid white; /* you need a px value */
min-height: 100%;
}
a {
color:white; /* you don't need to specify for every state */
}
I suggest you to set the main div at the height of the window and set a height property to 100% to your content div like this :
#main {
width: 93%;
margin: -2% auto 0% auto;
position: absolute;
top: 0;
bottom: 0;
}
#content {
border: solid white;
margin: 0% -4% 1000% -4%;
height: 100%;
}
The border will now extend to the bottom of the page!
I think I might already know the answer to this one but I need a sanity check!
Say I have
#gridtest{
width:590px;
}
I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width set to 1000px so I can do this:
#gridtestpercent{
width:59%; /*590/1000*/
}
If I were to shrink the window down the div would always be in the proportion to the its container. But what if I wanted to do
#gridtest{
width:570px;
border:10px solid red;
}
I can work the width out based on the target now being 570 but as the window is shrunk the proportions all go out of sync.
#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}
I can't use percentage border. I don't want to use JS to keep checking the context and I can't use the CSS3 box-border declaration yet.
If I wanted to use the technique described in responsive web design by Ethan Marcotte where everything shrinks in relation to each other would I be out of luck if using a border?
Cheers!
You could use CSS3 calc() function,
.selector{
border: 5px solid black;
width: -moz-calc(50% - 10px);
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
}
SASS mixin
#mixin calc($property, $expression) {
#{$property}: -moz-calc(#{$expression});
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
article {
border: 1px solid red;
#include calc( width, '100% - 2px')
}
You could use an inset box-shadow instead of a border:
box-shadow: 0px 0px 0px 10px red inset;
Just pad the inside of the container to compensate.
Edit: I write "pad" but of course if you use padding it'll throw off the box dimensions. Margin the content inside instead.
The accepted answer is not correct. You actually have 2 options:
Use the box-sizing property, so all the paddings and borders are considered part of the size:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
border: 2px solid black;
padding: 15px;
font-size: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Or, use the outline property instead of the border property. You will still have problems with the paddings, but it's easier to add. Example:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
outline: 2px solid black;
}
Full explanation: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
Unfortunately, yes, you're out of luck. One hacky way to get around this problem is with a wrapper div that you use to create your border. So the outside div would be 57% (in your example) with a background that is the color of your desired border. Then, the inner div would have a width of 96% or so (play with the exact number to find a border that is appropriate for your design).
If you want to stay semantic you can use div { box-sizing:border-box; } or some absolutely positioned :after elements. See the post How do I add 1px border to a div whose width is a percentage?
In CSS3 you can also use the new box-sizing property to include the pixel and padding count into the width of the element:
box-sizing: border-box;
If possible, depending on your design, what I like to do is put the border as an absolute div with a width of 3px ( for example ) and a height higher than its parent div. I then set overflow hidden on the parent div.