I was wondering if is there's a way to do the following rectangle's borders with border-radius or any other property, take a look at what i need:
And so far this is what I have got using border-radius:
The rectangle at top was created with Wix, the other one is made with CSS and HTML. As you can see the borders as so different.
Is there a way to accomplish it?
This is possible as you can define each corner within the border radius value, which will then give you the shape you want, see below for a simple example and you can read more on how this works on https://www.w3schools.com/cssref/css3_pr_border-radius.asp
#rcorners {
border-radius: 4em / 2em;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
<div id="rcorners">Rounded corners!</div>
Try something like this, you want border-radius: x/y where x is the higher value for the corner your looking for
.test {
margin: auto;
width: 400px;
height: 100px;
background-color: blue;
border-radius: 30%/10%;
}
<div class="test">
</div>
You can handle the horizontal and the vertical radius by : border-radius: 50px/20px;
Look at this example :
div.example {
background-color: #6495ED;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
border-radius: 50px/20px;
}
<div class="example">Lorem Ipsum.</div>
Related
This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 1 year ago.
I want to style a button and make it look like this:
I tried the code below, but it looks totally different.
button {
width: 500px;
height: 30px;
border-radius: 50%;
background-color: #f0f0f0;
}
I am interested in the border radius.
I suggest you to use something like this:
button {
width: 500px;
height: 30px;
border-radius: 15px; /* here we just change the radius to a fixed one, according to fixed height */
border: none; /* here we remove black border */
background-color: #f0f0f0;
}
For text, you can use text formating.
You have border-radius wrong. With your border-radius : 50%, will try to make the button oval kind of shape. So use px units to make rounded corners. Also there is default border on the button, so you have to set border to none. Below css would do the same thing :
button {
width: 500px;
height: 30px;
border-radius: 10px;
background-color: #f0f0f0;
border: none;
cursor: pointer;
font-family: monospace;
}
Set border-radius to px instead of %. Half of the height (30px) will make it nice and round. Anything less will make it less rounded.
button {
width: 500px;
height: 30px;
border-radius: 15px;
background-color: #f0f0f0;
}
button {
width: 500px;
height: 30px;
border-radius: 15px;
border: none;
background-color: #f0f0f0;
}
<button>text here</button>
I'm trying to make this layout format as part of my intro level class to HTML/CSS. Can anyone help? Much appreciated.
See the attached link.[Probably can be created with mostly Divs. I tried to do divs with widths of 100% for the top and bottom sections. I'll probably do divs for the sidebar. How would I make the circles?
Answering the only question I see above…
You can make the “circles” by rounding elements (for example <div>s) with a CSS rule that applies border-radius on that element.
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
#wazzzzzzup {
display: inline-block;
width: 100px;
height: 100px;
background: dodgerblue;
border-radius: 50%;
}
#wazzzzzzzzzzup {
display: inline-block;
width: 100px;
height: 100px;
background: gold;
border-radius: 10px;
}
#wazzup {
display: inline-block;
width: 100px;
height: 50px;
background: orangered;
border-radius: 100px / 50px;
}
<div id="wazzzzzzup"></div>
<div id="wazzzzzzzzzzup"></div>
<div id="wazzup"></div>
I have an svg img I got from thenounproject.com (don't worry, I have a place on my site where I give credit to the creators of the images) which I have inside a div. I have set the CSS of the div to have overflow: hidden; however the img is stickout out of the bottom, changing the height of the containing div above the div the svg img is contained it.
Here is the photo of the end result so far (the blue overlay is the <img> object being viewed with firebug so you can see how it is sticking out beyond the white div containing it)
the code I have is:
HTML
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/></div>
</div>
CSS
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
I'm trying to get it so that the "blueish" overlay in the photo, which represents the svg img, does not extend beyond the white box
UPDATE
Thank you all for your answers. I though I would update this to narrow down my question now that I have gotten your feedback. I've tried removed float: right; and the other ideas (remove the border: 0px solid transparent;) but, while helpful, they did not solve the problem.
I currently have transform: rotate(90deg); applied to .box.edit so that way at least the overflow is inline with the rest of the .dropdown bar.
I've tried max-height: 100% and width: 100%; height: auto; etc. but that does not solve my problem. I do not need the entire svg in the box, only what you can see in the photo above (the gear). The part below that has copyright bit from thenounproject.com (see my above statement, I am still following their rules on using photos).
I don't know if I will need to edit the svg file or what, but I was trying to use overflow: hidden; to cut off the end bit (so it does not affect my spacing).
Thank you for your assistance so far.
try this remove border
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
/*border: 1px solid transparent;*/
border-radius: 2px;
cursor: pointer;
}
Remove the float from .box and use display: inline-block instead
Hi he is working and now you can define your img css width and height 100% as like this
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
<div class="dropdown">
<div class="box edit"><img src="http://i.stack.imgur.com/8wc74.png"/></div>
</div>
So unless I am reading this wrong the height and width attribuite would work wouldn't it?
Code would be like this and then you would just adjust the height and width according to what you would need..
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/ height="42" width="42"></div>
</div>
As of now your image height is exceeding more than the height of its container due to which it is showing overlay going out of its container. Well applying max-height:100%; to image will make your image to stay within it's parent container, so give it a try.
I have finally found what the problem was with this:
Upon further research, I found that a <svg> has an attribute called "viewBox," which controls how much of the <svg> is shown. The <svg> I was using had a viewBox setting of "0 0 100 125," which basically means the width of the <svg> was 100 and the height 125. Upon finding this, and reducing the height to 100, the <svg> became a proper square and did not stick out further than it's containing div.
Thank you everyone for your answers, a lot of them were good and helpful.
I am currently making a website without using framework however I have run into a problem. My divs are not getting centered within the container even though the container itself is centered in the body.
Html
<body>
<div id="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Css
#content{
width: 90%;
height: 100%;
margin: 0 auto;
}
.box{
width: 400px;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
The divs are perfectly centered when I have my window to full width, but once I resize it, they just reorganize without centering.
Before resizing:
http://cl.ly/image/241R2I24280w/Screen%20Shot%202014-09-26%20at%2021.49.23.png
After resizing the window: http://cl.ly/image/2y2g2W0n230g/Screen%20Shot%202014-09-26%20at%2021.50.21.png
I have tried different methods to solve it, such as doing margin: 0 -10%; and margin: 0 25%;
When it comes to positioning I get confused.
Thanks.
Just change your CSS like this, this way you can adapt your boxes in many ways and they will react to responsive layouts as expected:
#content {
width: 90%;
height: 100%;
margin: 0 auto;
text-align:center;
display:block;
}
.box {
width: 45%;
height: 150px;
display:inline-block;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px 2%;
}
See fiddle here
Explanation:
I have removed your floats, used block elements and replaced your fixed sizes by percentages. Then, I used a text-align:center property in your container box #content so everything is nicely aligned in the center of that container. Now, if you resize, columns will take 45% of the width of the screen, but you can obviously change the behavior via media queries and use something like .box{display:box} for small screens
There are multiple solutions to your problem. Depending on what you have inside those boxes this might be the simplest one: text-align:centerwith a display:inline-block combo; See here.Fiddle
2 solutions :
You can use a percentage for the width your boxes.
#content{
width: 90%;
height: 100%;
margin: 0 10%;
}
.box{
width: 30%;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
Boxes will resize with the content but the stuff in the boxes might look weird in small sizes.
Or
You can use a pixel value for the width of your content.
#content{
width: 1200px;
height: 100%;
margin: 0 10%;
}
.box{
width: 400px;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
Width of boxes will not change while resizing, nor the stuff in it, but that can be painful on small screens.
add auto margin for your box
.box{
width: 400px;
height: 150px;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin-top: 13px;
margin-left:auto;
margin-right:auto;
}
I made your files on my machine and the divs are not centered so I assume your screen or resolution settings are different, or your content container is within one or more other divs?
Anyhow, try adding 'clear:left;' in your box class code and it should resolve your issue (put it just above the 'float:left' line. good luck!
I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/
The HTML structure:
<span class="all">
<span class="group-1">
<span class="a">A</span>
<span class="b"><input type="text" placeholder="b" /></span>
</span>
<span class="group-2">
<span class="c">C</span>
<span class="d">D</span>
</span> </span>
The current result with the css is
but my desired result would be
This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).
What is the best way to solve this?
Use CSS3 Calc: Running Demo
input[type="text"]{
width: calc(100% - 100px);
}
Not (yet) supported everywhere, though, and you need to know the width to subtract.
If your buttons are static, ie you know the width/number of the left/right span's then you could use floats. It's gives a smoother responsive feel, but uses negitive margins which sometimes aren't that nice.
I changed the CSS to:
.group-1 {
width: 20px;
float: left;
margin-top: 6px;
}
.group-2 {
margin-left: 30px;
margin-right: 70px;
}
.group-3 {
width: 60px;
float: right;
margin-top: -20px;
}
Have a look at:
http://jsfiddle.net/hAMmK/16/
Like I said, it will only work if you can fix your left/right width's but seems to give a clean responsive feel.
As an alternative to css3 style calc if you need to support other browsers here is another solution.
If A is a label and C and D are buttons (as I guess), you can use width 100% in the input field and float it left, then you have to display block its parent (if it is an span as in that case) and add a margin-right the sime size than your buttons. The margin will collapse because the content is floated and the buttons will appear at the right side of your input field.
You could then do the same for the label if you know its size or you can better use a table to allow changing the label text (maybe for internationalization).
You can see it applied to your example:
http://jsfiddle.net/cTd2e/
/*Styles for position here*/
.all{
line-height: 22px;
}
table {
width: 100%;
float: left;
}
.second-cell input{
width: 100%;
float: left;
}
.b {
display: block;
margin-right: 130px;
}
td.first-cell {
white-space: nowrap;
}
td.second-cell {
width: 100%;
}
.group-2{
vertical-align: middle;
margin-left: 10px;
}
Also if the buttons contain text then you can use a table inside a table to have the input field 100% and the rest auto.
I am not aware if there is a more modern compatible way of doing that, it would be great!
Change the widths to use a percentage.
.a {
padding: 3px 7px;
background-color: LightBlue;
border: 2px solid CornflowerBlue;
border-radius: 5px;
color: SteelBlue;
width: 10%;
}
.c {
padding: 3px 7px;
background-color: Moccasin;
border: 2px solid BurlyWood;
border-radius: 5px;
color: DarkKhaki;
width: 10%;
}
.d {
padding: 3px 7px;
background-color: LightSalmon;
border: 2px solid Brown;
border-radius: 5px;
color: IndianRed;
width: 10%;
}
input{
width: 70%;
}
JS Fiddle: http://jsfiddle.net/hAMmK/4/