I'm having an issue with hovering and a div with a border radius.
When a div has images inside it and a border radius, the "hitbox" for it is incorrect. Hovering over any of the corners of the div (where the corners would be if it didn't have a border radius) causes the hover style to show. I would expect the style to only show when the mouse is actually within the circle.
If there is nothing in the div, the div's "hitbox" is correct, however it surpasses the border when there are elements within it.
I could a background image in the div, however I'd prefer not to for accessibility reasons.
#test-wrapper {
background-color: #EEE;
border: 4px dashed #999;
display: inline-block;
}
#switcher {
border-radius: 50%;
overflow: hidden;
position: relative;
}
#switcher,
#switcher .first,
#switcher .second {
width: 100px;
height: 100px;
}
#switcher .first,
#switcher .second {
position: absolute;
top: 0;
left: 0;
}
#switcher:hover .first {
display: none;
}
<!-- This is used to show the "hitbox" for the switcher and has no effect on the switcher itself -->
<div id="test-wrapper">
<div id="switcher">
<!-- Shown on hover -->
<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=Second&w=100&h=100&txttrack=0" class="second">
<!-- Always shown -->
<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=First&w=100&h=100&txttrack=0" class="first">
</div>
</div>
The problem here is that child elements do not inherit the border-radius of their parents. There are 2 ways to achieve what you want: you can either set the border-radius of the child element(s) to match or be greater than the parent element's radius or set the overflow property of the parent element to hidden.
Here's a quick Snippet illustrating the problem and both solutions:
*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}
div{
background:#000;
border-radius:50%;
display:inline-block;
line-height:150px;
margin:10px;
text-align:center;
vertical-align:top;
width:150px;
}
p{
background:rgba(255,0,0,.25);
}
div:nth-of-type(2)>p{
border-radius:50%;
}
div:nth-of-type(3){
overflow:hidden;
}
<div><p>Square hit area</p></div><div><p>Round hit area 1</p></div><div><p>Round hit area 2</p></div>
If the child elements are images then you'll need the added trick of using an image map to crop their hit areas (Credit: Border-radius and :hover state area issue), like so:
*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}
div{
background:#000;
border-radius:50%;
display:inline-block;
margin:10px;
text-align:center;
vertical-align:top;
width:calc(33% - 20px);
max-width:600px;
}
img{
display:block;
cursor:pointer;
height:auto;
width:100%;
}
div:nth-of-type(2)>img{
border-radius:50%;
}
div:nth-of-type(3){
overflow:hidden;
}
<div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600"></div><div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600" usemap="circle"></div><div><img alt="" height="600" src="http://lorempixel.com/600/600/nature/3/" width="600" usemap="circle"></div>
<map name="circle"><area shape="circle" coords="0,100%,100%,100%"></map>
I've seemed to find a way around it, if the parent element has overflow hidden and you just the image z-index to -1 or something lower than the parent it also works.
Don't know why though
Related
I have divs wherein they are positioned one after another, and they need to be adjacent to each sibling. Simultaneously, there is a button/tab that belongs to this div, and is "welded" to the top of its parent div, like pictured below:
How would I create this effect, given that my primary goal is to have the (stroked) borders of the div in question serve as the border between sibling elements?
just absolute position the button
div{
width:200px; height:120px;
border:2px solid red;
position:relative;
}
.tab{
position:absolute;
height:20px; width:50px;
top:-20px; right:-2px;
background:red;
border:2px solid red;
}
div:nth-child(2){
border-color:blue;
}
div:nth-child(2) .tab{
background:blue;
border-color:blue;
}
/*just to make space in this snippet*/
div:first-child{
margin-top:20px;
}
<div>
<button class="tab"/>
</div>
<div>
<button class="tab"/>
</div>
to add element to outside of div, you can use jQuery.
you can try this example
<style>
.bg-green {
width: 100px;
height:100px;
background: #0f0;
margin: 10px;
}
</style>
<button onclick="appendElement()">Click To Appent to Outside The Element</button><br><br>
<div id="example" class="bg-green"></div>
<script>
function appendElement(){
$('#example').after('<div class="bg-green"></div>')
}
</script>
i hope this can help
You can use z-index for your blue div in the picture that has some value that is greater of the red bordered box and position it to overlap with red div box element. For example for your blue div filled box :
.blue-filled-div {
position: absolute;
left: 100px; // replace the values according to red box
top: 150px;
z-index: 10;
}
z-index will give 'depth' to your blue div and place it in front of red box div.
Goal:
A wrapper div that is fixed height and variable width. This wrapper contains a picture, which will have variable height and width (Could be portrait or landscape).
The picture should resize automatically to be either 90% of the wrapper's width or 90% of the wrapper's height, whichever is the smallest. It should also be constantly centered, both horizontally and vertically.
It's somewhat hard to describe via text, so see the manipulated screenshot below for an example of three possible images, when the wrapper is three different possible widths:
What I've Got Now:
I'm using a structure of: div->span->div->img.
I've got the sizing working completely. I've got the horizontal positioning working. I've got the vertical positioning working when the image is constrained by height.
When the image starts to resize smaller (constrained by width), the vertical positioning doesn't work. This is because the inner div isn't resizing.
Code
Working Fiddle
HTML:
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2014/01/tree26-300x225.jpg"></img>
</div>
</span>
</div>
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2014/03/ada_complete-300x171.png"></img>
</div>
</span>
</div>
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2013/12/employee_randy_fake-209x300.jpg"></img>
</div>
</span>
</div>
CSS:
.selected-thumb {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
height:200px;
}
.selected-thumb span {
display:block;
height:200px;
}
.selected-thumb span div {
position:relative;
max-height:90%;
max-width:90%;
height:200px;
top:50%;
margin:0 auto;
}
.selected-thumb span div img {
width:auto;
height:auto;
max-height:100%;
max-width:100%;
position:relative;
top:-50%;
}
What I Need:
I need to fix the vertical placement, and I am running into a wall. I've tried using display:table, I've tried creating a pseudo-element and using display:inline-block. I can't find a way to accomplish what I need. All useful info will be upvoted regardless of which I select as correct.
Check this:
html,body {height:100%;}
.selected-thumb {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
height:200px;
line-height: 200px;
}
.selected-thumb img {
display: inline-block;
vertical-align: middle;
width:auto;
height:auto;
max-height:90%;
max-width:90%;
}
fiddle: http://jsfiddle.net/Ts4W9/2/
I have a div with some images inside:
<div>
<img><img><img><img>
<div>
The images would normally display in a row, however I have used some CSS to change their relative positions from left (-7px for the second one, -14px for the third, etc.) so they are stacked partially over each other. Is there a way to make the div to be only the width of the partially stacked images, rather than the width of where the images would be if they weren't moved?
If the content isn't dynamically generated then you can just manually set the div to the width you want using css.
<div class="overlap">
<img><img><img>
</div>
.overlap {
width: 200px;
}
If you set the css as
div img {position: absolute;}
they will all overlap without needing any repositioning.
It will set the size of the img, and div to 0 so it will only work if there is nothing below it on the page.
To center the images try wrapping them in another div. Not sure what you have in all of your css but you can get the idea anyway. Something Like:
.overlap{
width:200px;
outline:1px solid red;
position:relative;
}
.overlap img{
outline:1px solid blue;
display:block;
height:50px;
width:25px;
position:relative;
float:right;
}
.overlap img{
left:-7px;
}
.overlap img + img{
left:-14px;
}
.overlap img + img + img{
left:-21px;
}
#center{
width:100px;
margin:0px auto;
}
<div class="overlap">
<div id="center">
<img><img><img>
</div>
</div>
I want to set solid border width like as picture. What can I do? Thanks for answers
|
|
----- -------
|
|
You can visually achieve this result if you apply border-radius to the parent container.
The child container needs to have a solid background (that matches the background of the wrapper element). Like so: http://jsfiddle.net/skip405/JgsKM/
It's not easy to do borders like that just by using CSS border properties. You'd have to resort to some kind of trickery to cover over the borders at each corner.
You are better off using a background image for this task. Prepare an image with the right and bottom lines and place it on the background of those rectangles, positioned bottom right on each one. (Obviously you'd prepare the background image so that those gray lines don't meet at the bottom right corner—just as in the image you posted.)
This is assuming that you have a fair idea of the width and height of the elements, so it's not a perfect solution, but will get you pretty close.
img {
border:solid rgb(165, 162, 162)
border-top:none;
}
I think you should add 4 child divs for mask borders parent div.
Html
<ul class="list">
<li>
<div id="holder"> <!--parent div-->
<div id="maskTopLeft"></div> <!-- child 1 for mask border on top-left -->
<div id="maskTopRight"></div> <!-- child 2 for mask border on top-right -->
<div id="maskBottomLeft"></div> <!-- child 3 for mask border on bottom-left -->
<div id="maskBottomRight"></div> <!-- child 4 for mask border on bottom-right -->
</div>
</li>
</ul>
css
#main { width:100%; margin:10px; }
.list {
margin: 0px;
padding: 0px;
list-style-type: none;
position: relative;
}
.list li {
float:left;
margin-right: -0.5px;
margin-top: -0.5px;
}
.list li:first-child #holder {
border-right: 0.5px solid #000;
}
.list li:last-child #holder {
border-left: 0.5px solid #000;
}
#holder {
border: 1px solid #000;
height: 250px;
width: 200px;
position:relative;
}
#maskTopLeft {
position: absolute;
top:-1px;
left:-1px;
width:21px;
height:20px;
background-color:#fff;
}
#maskTopRight {
position: absolute;
top:-1px;
left:180px;
width:21px;
height:20px;
background-color:#fff;
}
#maskBottomRight {
position: absolute;
top:230px;
left:180px;
width:21px;
height:21px;
background-color:#fff;
}
#maskBottomLeft {
position: absolute;
top:230px;
left:-1px;
width:21px;
height:21px;
background-color:#fff;
}
demo on cssdeck
You can use background-image properties in css the best and easy way
http://www.w3schools.com/cssref/pr_background-image.asp
set a backgroud image to the div-container where the images is in it. this background image is white and has the to borders (right side, bottom side) as you want. i think that's the solution for your problem, because otherwise the borders will look different
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.