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?
Related
I'm not sure if this is really solvable/possible but...
I'm trying to implement a particular animation where my screen is divided in 2 vertically on the first page, but after doing some sort of event (wheel, scroll, click, etc), the layout will animate smoothly to divide the screen horizontally.
If you hover over the first example, I tried to just rotate both inner elements, and then tried to resize the elements based on the new, rotated position. This did not work well.
As you can see, as the elements rotate, there are several issues:
They don't rotate perfectly in sync
You can see the ugly whitespace of the container behind it as it rotates
After rotating, the elements do not fill the container perfectly
I have tried many different things, like using z-index, absolute positioning, tried putting the inner elements in another nested container and then rotating the container, then adding height and width, but again the sizes didn't fit the container. I cannot seem to figure out how to make this work (without Javscript, if possible).
Essentially, the animation I have in mind would make the transition from the Initial Stage to the Final Stage seamless (ie. You wouldn't be able to see the whitespace in the background of the container, and the starting vertical line of separation would just slowly rotate to a horizontal line, while changing the position of the inner elements)
I hope this makes sense? I've been trying to get this animation to work for days...and I am exhausted of options/not creative enough/don't have the knowledge I need; help would be greatly appreciated.
.container {
display: flex;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
}
.container:hover .left {
transform-origin: 100% 50%;
transform: rotate(90deg);
width: 100%;
}
.container:hover .right {
transform-origin: 0 50%;
transform: rotate(90deg);
width: 100%;
}
.left {
background-color: purple;
height: 100%;
width: 50%;
transition: all 2s;
}
.right {
background-color: yellow;
height: 100%;
width: 50%;
transition: all 2s;
}
.container2 {
display: flex;
flex-direction: column;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
}
.left2 {
background-color: purple;
height: 50%;
width: 100%;
}
.right2 {
background-color: yellow;
height: 50%;
width: 100%;
}
Initial Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
Final Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container2">
<div class="left2">
I have content in here that I need fit within this container
</div>
<div class="right2">
I have content in here that I need fit within this container
</div>
</div>
Instead of adding transition to left/ right divs add it to the container div
.container {
display: flex;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
transition: all 2s;
transform: rotate(0deg);
}
.container:hover {
transform: rotate(90deg);
width: 100%;
}
Also Remove transitions and transforms from left right divs
I'm trying to figure out how to use Position: relative in order to keep an object (let's call it text) in the same place on the screen regardless of screen size.
When I use Position: relative, and set "left" to 30% for example... It's 30% of the screen. I'm trying to figure out how to put text on top of an image and set the text to be 30% left within the image. I need this to work regardless of the screen size. So far I have been unable.
Could someone explain to me how Position Relative and Position Absolute work in these kinds of situations? Or how this would best be handled?
Thanks!
Here's my JsFiddle, and here's the snippet
.center {
display: table;
margin: 0 auto;
}
body {
background-color: #27ae60;
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
}
.element {
position: absolute;
top: 100px;
left: 30%;
width: 100%;
font-size: 45px;
font-family: 'Just Me Again Down Here', cursive;
}
.input {
/*color: blue;*/
outline: none;
border: none;
background-color: transparent;
position: absolute;
top: 220px;
left: 18%;
width: 480px;
height: 475px;
overflow: hidden;
font-size: 30px;
font-family: 'Just Me Again Down Here', cursive;
}
<img id='image' class='center' src='https://s13.postimg.org/li2l28a0n/White_Board.gif'>
<h1 class='element'>This is a header </h1>
<textarea id='text1' class='input' placeholder="Write your answer here."></textarea>
First we setup a div with a .desk class, desk will receive the desired background image, a fixed width and height, and it will margin 0 auto since the desk doesn't have a container.
The .header class doesn't need to be absolute, we use it within the desk which is already positioned relatively. We give it a little padding so it will fit in the desk image.
The .answer class is applied to the textarea element we give it a width 100%; since we use it within the .desk which already has pre-defined width, that means .answer will equip all of possible width within the desk.
A great tip is always think simple in CSS, understand the usage of position: absolute, when it's really necessary. By the way if you're unfamiliar with rem sizing, I suggest you take a look here: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Good luck!
You can get the desired effect in a much simpler code.. have a look:
body {
background-color: #27ae60;
}
.desk {
position: relative;
background-image: url(https://s13.postimg.org/li2l28a0n/White_Board.gif);
width:560px;
height:839px;
margin: 0 auto;
}
.header {
padding: .5rem 0 0 2rem;
font-size: 2.5rem;
font-family: 'Just Me Again Down Here', cursive;
}
.answer {
width: 100%;
margin-left: 2rem;
outline: none;
border: none;
background-color: transparent;
overflow: hidden;
resize: none;
font-size: 2rem;
font-family: 'Just Me Again Down Here', cursive;
}
Fiddle: https://jsfiddle.net/y3h1ogms/5/
When set position: relative on an element, it will be positioned relative to the nearest positioned ancestor, where "positioned" according to MDN means:
A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.
In your example, the header is not a descendant of the image, so there's no way to position it relative to the image. What you might do instead is convert the <img> to a <div> set the background-image of your div to be the image URL. You would also need to explicitly set the width and height of the div.
In the very middle of the screen I have a piece of text, along with an image. When the text gets longer, the image is forced to move the right, which is what its supposed to do. But what I want it to do, is keep the image in the same spot, and make the text shift over to the left instead.
(I will also be adding more names so I need this fix to be universal, not like manually changing it for each piece of text.)
(It might be hard to see, but its noticeable, and yes I'm using a template...)
My site - Updated link
I tried messing with the HTML to get the margin-right once the page is fully loaded, then when it updates the text change the margin-right to that, but it did absolutely nothing.
Any help is appreciated, I have no idea how to fix this issue.
What about this?
#banner .content {
display: inline-block;
margin-right: 1%;
max-width: 95%;
padding: 6em;
position: relative;
text-align: right;
vertical-align: middle;
z-index: 1;
float: left;
width: 66%;
}
You can solve this issue by defining the width property for the containing content layer, and then floating the image and the text to the right.
For example, if you want the right-hand side of the text to be aligned to the center of the page your image + it's left-hand margin needs to be half the width of the containing #banner .content layer.
With your image being 18rem square with a left-margin of 3rem your containing #banner .content div needs to be 42rem wide ((18 + 3) * 2).
#banner .content {
position: relative;
width: 42rem;
height: 18rem;
text-align: right;
vertical-align: middle;
/* center div.content */
margin: 0 auto;
clear: both;
display: block;
z-index: 1;
}
#banner .content .image {
width: 18em;
height: 18em;
border-radius: 100%;
vertical-align: middle;
margin-left: 3rem;
display: inline-block;
}
Content inside .content slides to the right with the span.image locked to its right-hand edge. As long as the text-container's width (header) does not exceed half the width of `.content' it will remain right-aligned 3rem from images left-hand side. Avoid using css-padding for positioning control and use css-margin properties instead.
I'm trying to make a puzzle out of a background image with numbered pieces. The pieces will eventually be movable with javascript. Right now, I'm stuck simply trying to position the pieces of this image. The html has a div with id called puzzlearea, and I have appended children with javascript, which I know works because it displays the new div pieces and their numbers. The CSS refuses to move the pieces relative to this background, and my two test pieces are stuck in the top left corner, seemingly ignoring my background-position values. Here is the CSS:
body {
text-align: center;
font-family: cursive;
font-size: 14pt;
}
#puzzlearea {
width: 400px;
height: 400px;
margin: auto;
position: relative;
background-image: url("planck-image.png");
}
.tile {
font-size: 40pt;
color: red;
line-height: 70pt;
width: 90px;
height: 90px;
border: 5px solid black;
background-position: -200px -200px;
position: fixed;
}
Update: Screenshot.
Would you have any ideas as to why the positioning is not occurring?
You need position: absolute on .tilein order to be able to place them with the top/bottom/left/right parameters (and you need those too).
fixed position refers to the viewport, not the parent element.
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>