I have a series of floated divs with absolutely positioned images inside each one.
If this image is larger than the div width then it will appear cropped.
Although I have set overflow:visible to the floats and their parent div they still crop the image.
Here is a jsfiddle showing an example: http://jsfiddle.net/RkpAe/1/
CSS:
#main, #memorycontainer { height: 100%; width: 100%; overflow: visible; }
.memory { width: 250px; position: absolute; z-index: 98; width: 100px; height: 100px; overflow: visible; background: red;}
.memory { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 100; -webkit-border-radius: 50%; cursor: pointer; }
.memorytile { position: relative; z-index: 97; background: yellow; height: 300px; width: 200px; overflow: visible; float: left; margin: 0; padding: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
HTML:
<div id="main">
<div id="tile1" class="memorytile">
<div class="memory" style="top: 50px; left: 150px;">
Icon</div>
Background Image
</div>
<div id="tile2" class="memorytile"></div>
remove
position:relative;
from
.memorytile{}
this should fix the problem.
Both your memorytile divs are set to the same z-index but because tile2 is after tile1 it is treated as being above it. memory is within tile1 (which is now below tile2 and so you get the effect you are seeing.
Change the z-index of tile1 to be higher than tile2 and it will work.
I updated your fiddle: http://jsfiddle.net/RkpAe/2/
There is also a nice explanation of this on http://webdesign.tutsplus.com/
Related
I want to make a div something like the below image in my website in css. I tried to round bottom borders with border-bottom-right-radius: 50%;, but it curves too much.
please help me to make it.
You can try stacking divs, set a container with overflow: hidden and then position 2 divs that are much bigger and have rounded border.
.container{
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.inner, .outer{
position: absolute;
width: 200%;
height: 1000px;
border-radius: 100%;
border: 4px solid black;
left: -50%;
/* only for the inner - will be overwritten in the next section*/
top: -900px;
background-color: white;
z-index: 3;
}
.outer{
top: -750px;
background-color: #3E9AD2;;
z-index: 2;
}
<div class="container">
<div class="inner"></div>
<div class="outer"></div>
</div>
This question already has an answer here:
What is the relation between the size and resolution of HTML5 canvas
(1 answer)
Closed 6 years ago.
I have a html like:
.image-detail {
height: 100%;
width: 100%;
display: block;
position: relative;
}
canvas {
display: block;
}
.image-detail-canvas {
-moz-user-select: none;
-webkit-user-select: none;
max-width: 100% !important;
max-height: 100% !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
<div class="image-detail">
<canvas class="image-detail-canvas" id="image-canvas">
</canvas>
</div>
It is centering the canvas but the canvas is stretching.
I dont want the canvas to be stretched.
I want it to be centered without stretching. If the canvas is horizontal center it horizontally and if vertical then so on.
Remove Position: absolute; and translate
Add some width to your canvas and put margin: 0 auto;, Hope that helps.
canvas {
border: 1px solid;
padding: 0;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.image-detail-canvas {
-moz-user-select: none;
-webkit-user-select: none;
max-width: 100% !important;
max-height: 100% !important;
}
<div class="image-detail">
<canvas class="image-detail-canvas" id="image-canvas" width="100" height="100">
</canvas>
</div>
Check here: https://stackoverflow.com/a/7782251/5336321
It should be sufficient to change position to absolute, plus add width/height definitions to all parent elements (also html and body):
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.image-detail {
height: 100%;
width: 100%;
display: block;
position: relative;
}
canvas {
border: 1px solid;
display: block;
}
.image-detail-canvas {
position: relative;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="image-detail">
<canvas class="image-detail-canvas" id="image-canvas" width="100" height="100">
</canvas>
</div>
How do I force clip a child to a parent element that has rounded corners.
<div class="item" >
<div class="top">
<h1>Tile</h1>
<h2>Click me</h2>
</div>
<div class="behind">
<h3>Details</h3>
</div>
</div>
When animating the child, its ignores the border-radius of the parent element. Is there a way to fix the two corners on the top?
.item{
text-align: center;
cursor: pointer;
overflow: hidden;
height: 280px;
width: 280px;
float: left;
border-radius: 5px;
background: white;
margin: 10px;
position: absolute;
}
.top{
z-index: 1;
position: absolute;
height: 280px;
width: 280px;
background: #ed844b;
transition: 0.3s;
border-radius: 5px;
}
.behind{
z-index: 0;
position: absolute;
width: 100%;
top: 136px;
height: 138px;
padding: 10px 16px;
background: #DDDDDD;
box-sizing: border-box;
border-radius: 5px;
}
.slide-up{
transform: translate3d(0, -136px, 0);
border-radius: 0px;
}
Here is a little demo:
http://codepen.io/Koopa/pen/xbaMez
Thanks
Koopa
When you add a css 3d transform to the child, you kinda move it to the separate GPU layer. You can move parent element to GPU layer instead adding null-transform hack transform: translateZ(0) to .item. Or you can replace translate with translateY (In this case child is clipped only when not being animated).
EDIT: All sorted now. Thanks to everyone that helped! :)
I am having trouble centering an element of my website. It is 3 divs mixed together to form a hexagon.
I cannot center it.
HTML:
<li>
<div class="centerhex">
<a href="#">
<div class="hexa">
<div class="hexcontainer">
<div class="vertical-align">
<span class="hextext">Lorem Ipsum Dolor</span>
</div>
</div>
</div>
</a>
</div>
</li>
CSS:
.centerhex {
left: 50%;
margin: 0 auto;
width:210px;
height:300px;
}
.hexa {
width: 100%;
min-width: 200px;
height: 0;
padding-bottom: 57.7%;
margin-top: 65px;
background-color: #4a4a4a;
/*position: absolute;*/
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 18px;
border-radius: 4%/20%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.hexa::before,
.hexa::after {
content:"";
display: block;
width: inherit;
height: inherit;
padding: inherit;
background: inherit;
z-index: 0;
position: absolute;
border-radius: inherit;
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
-ms-transform:rotate(60deg);
}
.hexa::after {
-moz-transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-o-transform:rotate(-60deg);
-ms-transform:rotate(-60deg);
}
.hexcontainer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.vertical-align {
display: table;
height: 100%;
width: 100%;
}
Also, I need help so the bottom of the shape isn't cut off.
URL: http://jackmarshallphotography.co.uk/V1/donate.html
There are few things to change in your css, I worked directly on your website with the chrome developer tool, please find below the css to center the "tag" :
.servicebox {
position: absolute;
margin-top: -77px;
width: 100%;
}
.servicebox ul {
list-style: none;
width: 100%;
text-align: center;
}
.servicebox ul li {
margin-left: 12px;
}
.centerhex {
margin: auto;
width: 210px;
height: 300px;
}
Hope it helps.
For the second issue :
you need to edit the file hexagon.css and change the margin-top property find the right value: -65px or more (line 47)
Yoann
Let me see if I can help you with a simple example.
Have a fiddle - fiddle link!
Edit! - Here is another fiddle without absolute positioning... seems like this can be achieved without it - fiddle link - no absolute positioning
Absolute positioning example:
HTML
<div id="parentOfCentered">
<div id="perfectlyCentered"></div>
</div>
CSS
#parentOfCentered {
position: relative; /* Absolutely positioned children will be positioned in relation to the parent div */
background: #CCC;
width: 400px;
height: 400px;
}
#perfectlyCentered {
width: 200px;
height: 200px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
/*
- negative top margin of half the height
- negative left margin of half the width
*/
}
I am working on an Background Ad-System and my z-index isn't working.
#page
{
width: 1100px;
margin: 100px 0px 0px -550px;
min-height: 906px;
background-color: #fff;
left: 50%;
cursor: auto;
position: absolute;
z-index: 1;
}
#adGfwADS
{
width: 100%;
min-height: 1050px;
background-repeat:no-repeat;
cursor: pointer;
position: absolute;
z-index: 10;
background-color: #000; background-image: url(http://crazysportz.de/1.jpg); background-position: 50% 0px;
}
See Fiddle.
(Make the right col bigger to see the image and divs better)
Ok.. the wrong div is up... The Code stand at jsfiddle and show at z-index.
#page
{
width: 1100px;
margin: 100px 0px 0px -550px;
min-height: 906px;
background-color: #fff;
left: 50%;
cursor: auto;
position: absolute;
z-index: 1;
}
#adGfwADS
{
width: 100%;
min-height: 1050px;
background-repeat:no-repeat;
cursor: pointer;
position: absolute;
z-index: 10;
background-color: #000; background-image: url(http://crazysportz.de/1.jpg); background-position: 50% 0px;
}
<div id="dimensions">
<div id="adGfwADS" class="adGfwADS" url="http://google.de">
<div id="page">blupp</div>
</div>
</div>
The div id="page" will show but this is wrong then z-index is lower as from adGfwAds and i use position to use z-index but z-index work not =(