I'm trying to hide the overflow of a circular div. Its child div is hidden from view when outside the container area (good), but remains visible when only outside the radius area (bad)
.outer{
position:relative;
border-radius: 50%;
width: 200px;
height: 200px;
background:#dedede;
overflow: hidden;
}
.inner{
position: absolute;
top:150px;
left:150px;
width: 50px;
height: 50px;
background-color: red;
background:#98de45;
}
Overall I'd like to achieve the effect at http://buildinternet.com/project/mosaic/1.0 but using circles - is there a way to do this?
Fiddle:
http://jsfiddle.net/a9Feu/
Edit: This works fine in Firefox and IE 10, but not Chrome or Safari
Like this?
.outer{
position:static;
border-radius: 50%;
width: 200px;
height: 200px;
background:#dedede;
overflow: hidden;
}
.inner{
position: static;
top:150px;
left:150px;
width: 50px;
height: 50px;
background-color: red;
background:#98de45;
}
I hope this should work
http://jsfiddle.net/a9Feu/35/
.inner{
position: absolute;
**border-bottom-right-radius: 100% 110%;**
top:150px;
left:150px;
width: 38px;
height: 35px;
background-color: red;
background:#98de45;
}
Related
I have an outer and inner box with position set to relative. What i want should look like this:
The code is:
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left:100px;
margin-top:100px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
With this style the outer div no more wraps the inner box:
CSS
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin: 0;
left: 100px;
top: 100px;
background: green;
border: 2px solid red;
}
Thank you.
* Update *
I would like to add that i don't want to fix the height of the outer box. Thanks.
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
Not really.
Relative positioning moves an element from it’s “default” position that it would normally have - but it keeps the original space it would have required reserved, it does not make it “take” the space at the position it was moved to. So while you can move the inner element to the place you want it, it will not make the outer element “grow” accordingly.
I don't want ("mis")use margin for positioning the inner div
Don’t worry about the “semantics of CSS” too much here … There is often more than one way to achieve a desired optical result, and seldom one way is “wrong” and the other one “right”.
As long as the solution you have achieves what you want, and is not hindered by other restrictions - use it!
When the outerbox has position: relative you can use position: absolute for the .innerbox so you can give dimensions to the .outerbox (width and height) and you can use top and left to position the inner rectangle on every position you want...
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
width:200px;
height:100px;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: absolute;
width: 100px;
height: 50px;
left:98px;
top:48px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Hope this will help you.
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
height:200px;
width:300px;
}
.innerbox {
position: absolute;
float: left;
width: 100px;
height: 50px;
margin: 0;
/*left: 100px;
top: 100px; */
bottom:0;
right:0;
background: green;
border: 2px solid red;
}
<div class="outerbox">
<div class="innerbox">
</div>
</div>
i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.
I have a overlay using a position absolute element. The overlay element can have more content then what is in the viewport so position fixed is not doing the trick. At the moment the background color of the overlay is only the size of the viewport, and not the browser. And this messes up the content.
Check the plunker for an example, http://plnkr.co/edit/r37LE4BhvW7UkNWPfsJN?p=preview
html, body{
margin: 0px;
height: 100%;
}
.absolute{
position: absolute;
width: 100%;
top:0;
right:0;
height: 100%;
min-height: 100%;
background-color: blue;
}
Change this
html, body{
margin: 0px;
height: 100%;
}
.absolute{
position: absolute;
width: 100%;
top:0;
right:0;
height: 100%;
min-height: 100%;
background-color: blue;
}
to
html, body{
margin: 0px;
height: 100%;
}
.absolute{
position: absolute;
width: 100%;
top:0;
right:0;
**height:auto;**
min-height: 100%;
background-color: blue;
}
The line important is height:auto;
I used 2 div's with fixed positioning, and after resize - opera doesen't redraw elements.
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
}
#label {
position: fixed;
bottom:0px;
left: 50%;
background-color: transparent;
z-index: 9999999;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
<div id="wrapper">
<div id="label">content</div>
</div>
U can see this bug here
http://jsfiddle.net/6Cm6J/1/
Just load page in Opera browser and resize window.
Pls help
Write this css
Live Demo
css
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
bottom:0;
left:0;
right:0;
}
#label {
position: relative;
bottom:0px;
left: 50%;
background-color: transparent;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
I have a pseudo-gallery set up to display thumbnails and display enlarged image when hovered on thumbnails. The enlarged image is positioned relative to its parent thumbnail.
This works in Google chrome and Mozilla Firefox but not in IE8.
I have done some research with no progress on the matter. In IE8, both thumbnail and enlarged image are displayed. Neither 'Visibility: Hidden', 'hover' nor 'absolute position' seem to work in IE8.
Would appreciate any help. the following is a snippet of code:
.main{
float:right;
display: block;
Background-color:transparent;
Margin: 20px 55px 20px 10px;
}
.main img{
display: block;
border:0;
}
.main:hover{
background-color:#ffffff;
position: relative;
visibility:visible;
z-index: 1400;
}
/*for bigger images*/
.main bigger {
width: 500px;
height: 500px;
position: absolute;
left: -2000px;
visibility: hidden;
overflow: hidden;
background-color:transparent;
border:0;
}
.main:hover img{
z-index: 1400;
position: relative;
}
.main:hover bigger{
z-index: 1500;
display:block;
width: 500px;
height: 500px;
top: -100px;
left: 200px;
overflow: visible;
visibility: visible;
background-color: transparent;
clear: none;
}
THANKS
/*for bigger images*/
.main bigger { width: 500px; height: 500px; position: absolute; left: -2000px; visibility: hidden; overflow: hidden; background-color:transparent; border:0; }
.main:hover img{ z-index: 1400; position: relative; }
.main:hover bigger{ z-index: 1500; display:block; width: 500px; height: 500px; top: -100px; left: 200px; overflow: visible; visibility: visible; background-color: transparent; clear: none; }
is bigger supposed to be an element or a class. if it's a class, it should be .bigger , right?
it looks like this: <a class="main" href="#"><img src="" /><bigger><img src="" /></bigger></a>
Don't do that.
The <bigger> element doesn't exist. You can't just make up your own elements, even in XHTML; not without creating a custom DTD anyway, which probably still wouldn't make it work in IE, since IE doesn't really support XHTML.
Chrome and Firefox are a bit more lenient in how they deal with unrecognized elements than IE8, which is why it works in those.
I would suggest you add a bigger class to the image instead: <img src="" class="bigger" /> and get rid of the <bigger> element.