Here's what I'm trying to draw with HTML and CSS:
I'm trying to drawn an arc with fill inside it, I've tried using border radius, here's how far I could come .
HTML Code:
<div class="box"></div>
CSS Code:
.box {
width:500px; height:100px;
border:solid 5px #f9955e;
border-color:#f9955e transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
Any help would be appreciated.
How about this:
.box{
position:relative;
background:#fff;
display:block;
width:100px;
height:100px;
border-radius: 50% / 100px 0 0 0;
}
.box::before{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#f9955e;
content:"";
}
It doesn't require any change to your html or have the need for a wrapping div. It's just pure CSS.
Here's the jsfiddle: https://jsfiddle.net/h2or0xa1/
Ok, so here's the explanation:
I got rid of your borders, we're not using those any more.
I've set the .box div to have a border radius that creates an arc on the left hand side (assume you know what this is as it's in your example). Set the background of the .box div to white.
Added a ::before pseudo element which essentially creates a div "over the top of" the .box div. To move it behind the div I positioned it absolutely and gave it a z-index of -1 which pushes is behind the .box div. The background colour of this ::before pseudo element is the orange you provided. Essentially the ::before pseudo element creates a div the same size as box, colours it, and pushes is behind .box
You can create the arc using a combination of square and circle overlapping it. The combination can be hidden within a container of half the width and half the height of the square/circle.
JSfiddle Demo
.container {
height: 75px;
overflow: hidden;
width: 75px;
}
.box {
width: 150px;
height: 150px;
background: orange;
position: relative;
z-index: -1;
}
.box::after {
position: absolute;
display: block;
content: " ";
border-radius: 50%;
background: white;
width: 100%;
height: 100%;
}
<div class="container">
<div class="box"></div>
</div>
Related
I have a div element (shown with red border in the image below), which I want to be able to fit in its parent div when the window is resized and not fall into the next line (the parent is the one with the green border).
I want the red div to have a starting width: 949px (in my current screen) in order to fit the entire space available as shown in the image, but be resizable, so that it doesn't fall into the next line if width: 949px is to much to fit.
In essence, I want it at all costs to cover the area it covers in the image even if in a narrower screen that means it will be like 10px wide.
How can I achieve this? Any solution using CSS, JavaScript or jQuery will be gladly accepted.
The image:
CSS:
#parent {
text-align: center;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
}
#child1-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
display: inline-block;
}
#child2-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
position: relative;
margin: 0 25px 0 25px;
display: inline-block;
}
#child3-row2 {/* The one with the red border */
vertical-align: middle;
height: 452px;
width: 949px;
overflow: hidden;
position: relative;
display: inline-block;
}
You can use flexbox to do this by using the flex-grow property.
HTML :
<div id="main">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</div>
CSS :
#main {
display: flex;
flex-flow: row;
width:100%;
min-height:50px;
}
#box1{
background-color:red;
width:100px;
}
#box2{
background-color:blue;
width:100px;
}
#box3{
background-color:green;
flex-grow: 1;
}
Here is a working JSFiddle
You can use css calc function for this. Support for calc seems to be quite good now.
As you have mentioned, the left side divs are of fixed width, say 120px each. Also suppose the margin between them is 30px. So, the total width left for your red div is 100% - (2*120 + 2*30)px i.e. (100% - 300px ).
#red-div
{
width: calc(100% - 300px);
}
Add % width or you can do following :
$(window).resize(function() {
var window_width = $(window).width();
var w1_width = $('.div1').width(); // The first element width
var w2_width = $('.div2').width(); // The second element width
var main_div_width = window_width - (w1_width+w2_width+gutter[i.e margin between all 3 elements]);
$('.main_div_width').css('width', main_div_width);
});
The Title says it all: "How to make the parent div adjust in size to contain the CSS-Rotated child div?"
This is what I get currently:
HTML:
<div id="container">
<div id="rotator">
<h1>TEXT</h1>
</div>
</div>
CSS:
#container {
display: inline-block;
border: 1px solid gray;
padding: 10px;
overflow: hidden;
}
#rotator {
display: inline-block;
width: 200px;
height: 500px;
background-color: rgb(130, 310, 130);
border: 1px solid blue;
text-align: center;
line-height: 500px;
-moz-transform:rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Live Example
So, is there anyway to make the parent resize with child?
A CSS only solution would be best. If that's impossible, what's the best javascript way to do that?
Should support IE9
Based on #misterManSam's suggestion I update the live example to show the solution.
found here
Change the width of the div.container when rotated. Add negative margin and left margin to #rotator.deg90in CSS.
Look at this example :)
Javascript
function to90() {
var elm = document.getElementById("rotator");
console.log(elm);
elm.className = "deg90";
//add these lines
document.getElementById('container').style.width = "500px";
document.getElementById('container').style.height = "200px";
}
CSS
#rotator.deg90 {
/*add this*/
margin-top: -150px;
margin-left: 200px;
-moz-transform:rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Here you go: http://jsbin.com/viyacaji/11/edit
Just rotate the container in the jS functions, don't move the rotator div. Because basically, what you're trying to achieve is the same as when you rotate the parent div.
Any query?
I have 3 divs aligned horizontally.
Div 1 is my sidebar
display:block;
float:left;
width:180px;
height:100%;
Div 2 is the middle (sub-content)
display:block;
float:left;
width:200px;
height 100%;
Div 3 is the right part
width:100% on Div 3 places it below Divs 1 and 2. How can I make it stretch up the right side of the page instead?
If you don't want to use the calc() function, try the following:
<div class="wrapper">
<div class="sidebar">sidebar</div>
<div class="panel">panel</div>
<div class="main">main</div>
</div>
.wrapper {
border: 1px dotted blue;
height: 400px;
}
.sidebar {
width: 100px;
height: 100%;
background-color: tan;
float: left;
}
.panel {
width: 200px;
height: 100%;
background-color: pink;
float: left;
}
.main {
width: auto;
height: 100%;
border: 1px solid red;
overflow: auto;
}
See demo: http://jsfiddle.net/audetwebdesign/6qdYK/
The overflow: auto on .main will keep the div as a column without wrapping around the floated elements, which may be what you need.
The problem occurs because the remaining width isn't 100% but 100% is the width of full window.
So you could use css3 calc() function
.div3{
width: calc(100% - 180px - 200px)
}
See this before using calc() function can i use calc
Or if you want to use the width by calculating yourself define the width in pixel deducting main container width to (180+200)px.
Else, you can define the width auto which might be better for you.
I have a series of square divs with text in them, and I need to draw a line across those divs, over the text. Z-Index is not an option. Neither is <strike>, because it needs to extend across the entire div, not just the text.
What I need is for it to extend across the entire div, but to be ON TOP of the text, as if on a different layer, and I am trying to determine if it is possible without Z-Index.
With the help of :after - DEMO
div {
position: relative;
}
div:after {
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: #c00;
content: "";
width: 100%;
display: block;
}
Link To Fiddle
.wrapper {
position:relative;
width:110px;
}
.square {
width:20px;
height:20px;
border:2px solid #000;
display:inline-block;
text-align:center;
}
.strike {
position:absolute;
width:100%;
height:2px;
background:black;
top:11px;
left:0px;
}
what about a background image as a solution?
I mean someCSS Code like:
.DIV.squarestroke {
background: url(img_with-line.gif) repeat;
}
If you can't use text-decoration:line-through it's likely you have padding or margin on your div which is why the line doesn't go all the way across. This snippet will draw a line the width of the div and through the text preserving your padding or margins.
<div style="border:solid 2px black; padding : 100px">
<div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
<div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
</div>
A good old fashion hr might do it:
<hr style="position:absolute; width:50px; top:5px; left:5px;" />
I have a long rectangle shape container with a radius.
And I also have 3 child divs, in the container.
Here it is:
As you can see in the picture above, the first child container (white) and the third (red) have also been set a radius to match to containers radius.
Now, the child containers width will be dynamic (changeable by the user). So the user will be able to change the widths of all three child containers to meet their needs.
But take a look at what happens when I give the third container a width of 2%:
the same thing happens when i do the same to the first child (it overlaps the containers rounded borders).
Child container 1 (white) is floating to the left and child container 3 (red) is floating to the right.
I need a way to stop the overlapping from happening.
I am able to use JS and JQuery incase your wondering.
Thanks
EDIT:
CSS:
.parent {
border: 1px solid #5B5B5B;
height: 30px;
width: 80%;
right: 0%;
position: relative;
margin-right: auto;
margin-left: auto;
<? set_radius("25px",true);
set_box_shadow("1px","1px","#F8F8F8");?>
overflow: hidden;
z-index: 3;
}
.child_class {
display: inline-block;
position: relative;
width: auto;
height: 100%;
margin: 0px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #5C5C5C;
box-sizing: border-box;
}
#child1 {
width: 33.33;
background-repeat: repeat-x;
background-position: center center;
<? set_radius("25px",false,false,true,false,true);?>
float: left;
background-color: #fff;
}
#child2 {
width: 33.33;
background-repeat: repeat-x;
background-position: center center;
background-color: #0CF;
}
#child3 {
<? set_radius("25px",false,true,false,true,false);?>
background-repeat: repeat-x;
background-position: center center;
width: 33.33;
float: right;
background-color: #F00;
}
HTML:
<div class="parent">
<div class="child_calss" id="child1"></div><div class="child_calss" id="child2"></div><div class="child_calss" id="child3"></div></div>
In your CSS:
parent{
overflow: hidden;
}
Then you won't have to bother with matching the border-radius on the children, either.
Edit
I've created this jsfiddle to demonstrate:
Not needing border-radius on the children
overflow: hidden rounds the children when they overlap
Unnecessary background- properties on the children are removed
Expected behavior at small percentages
Update
Another note on this:
If you want the CSS/HTML to perform logic for you (not drop the last element out of the bar), you have a clear misunderstanding of what CSS and HTML do.
I've updated the jsfiddle to provide a sort of patch-fix to that issue. The third child is positioned absolutely at the far right, so that it will always stay in the bar.
Update
Finally, here's the bug in Webkit that doesn't correctly clip the background. It appears there's nothing you can do right now except possibly something like this:
<div class="hasBorder hasBorderRadius">
<div class="hasBorderRadius hasHiddenOverflow">
<div class="containsContent">
</div>
</div>
</div>
have you tried giving them a z-index so they have a stack order? also what about an overflow hidden on the parent?