First you sould look at the final effect; it's diffcult to describe. It seems perfect, but there is a little problem.
When your cursor moves close to the square's left border in very small steps, the white shadow also trembles a lot.
How can I fix that?
You should add overflow: hidden on the #container div.
The #shadow div is overflowing to the left, expanding the hoverable area from its parent.
#container{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
overflow: hidden;
}
Related
I'm creating a small view on my page where I have a centered 500x650 div with some text in it.
I have a bootstrap div as a container, <div class="container">. Inside that I have my centered 500x650 div, with a CSS like this:
.desc {
position: relative;
margin: 30px 245px 0px;
height: 500px;
width: 650px;
background: #fff;
border: 1px dashed #cbd0d8;
padding: 5px;
}
This looks good. Now, I'm trying to add a small image which is supposed to be right by the left bottom corner of the dashed border. Problem is, I centered it with margin: auto, creating a huge horizontal margin on the sides of the .desc-div, so I can't position my img, which is in a div with position: relative, as the margin pushes it down under the corner.
I could use position: absolute on my image but I'm trying to avoid that as I understand it looks different on different sized monitors, and I want this image to sit pretty exactly in one spot.
How do I solve this?
To place your image exactly into the lower left corner of your .desc DIV, put your image tag inside the .desc DIV and give it the following settings:
img.yourclass {
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 30px;
}
Since your DIV already has position: relative, it will act as the position anchor for the absolutely positioned image, and the bottom and left settings place it in the lower left corner.
The width and height of course depend on the image itself . adjust that as needed.
I am trying to build a two column design with an Angular 2 app. I created a plunker to reproduce my problem: https://plnkr.co/3Evxm9?p=info
I want the scrollable area to be the red div (.overflow), not the .page. Without the .page { overflow: auto } the page won't scroll at all, though I would expect .overflow to do so since it has a defined height of 100%. The padding is there to offset from the .top div. I initially though using margin instead, but without the overflow: auto on .page, the margin goes outsides the bounds of .container (which shrinks to fit the height (padding included, margin excluded) of .overflow.
I seem to misunderstand the behaviour of the flexbox.
I made some adjustment to your css to make the red area scrollable only.
css:
.page {
width: 100%; height: 100vh;
background: red;
flex: 1;
overflow: hidden;
}
.overflow {
font-size: 30px;
padding-top: 64px;
height: 93vh;
overflow: scroll;
}
Thanks for providing a plunker. It helped a lot to find a solution for you. Here's the link to the edited plunker.
Hope this helps!
I have a pop up window that is supposed to be position:fixed and draggable. The issue is that whenever the window pops up it uses a css transition so all of its properties are animated. I have tried to use left:50% transformX:(-50%) to horizontally center it but the pop up window jumps horizontally when it appears (as it animates the transform). I have also tried centering it with left:0 right:0 margin:0 auto; but the window also jumps out of position when you begin to drag. These issues are only present when the window first appears or it is dragged for the first time, after the first drag everything works as expected.
I pass in the following options to the draggable setter.
elem.draggable({ start: function() {
$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"});
} });
This fiddle centers with margin:0 auto
here is a fiddle demonstrating my problem
this fiddle centers with left:50% transform:translateX(-50%);
second fiddle
Have you tried giving the modal a width then using margin:0 auto; Typical in order to centre an element you need to give the element a width.
.centeredElement {
margin: 0 auto;
width: 960px;
}
The problem is that margin: 0 auto relies on the fact that the element's left and right properties are set to 0. You are seeing the jump because jQuery UI manipulates the left positioning, and it is no longer 0 after dragging the element. The same applies to the transformX:(-50%) method. This will only center the element horizontally if left is set to 50%.
The workaround is to set left: 50%, and then add margin-left: -40px to displace the element's width (i.e., a negative left margin based on half of the width of the element; in this case -40px since the element has a fixed width of 80px).
Updated Example
.box {
border-radius: 5px;
padding: 10px 15px 10px 15px;
min-width: 30px;
width: 80px;
height: 80px;
left: 50%;
margin-left: -40px;
position: fixed;
/* ... */
}
I need both divs to have dynamic width.
The gray one has to be centered, while the blue one to float right BUT both be horizontally alingned.
These to are sitting in a wrapper.
The problem is that in order to have varying width I use display:block and this makes the gray div to push the other one down.
How can I manage this without setting a fixed width for the gray div?
EDIT
This is how it should look like. I just put another left floating div.
The red div has to be perfectly centered.
All divs' width must be dynamic.
You can nest the blue div within the grey one and absolutely position it, using left:100% will make it horizontally dock to the right side of the grey div.
Just one of many options.
Here is a demo: http://jsfiddle.net/HnsEx/
Here's a fiddle :)
fiddle
and css
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background: #888;
}
.left {
overflow: hidden;
height: 100px;
background: #ccc
}
suppose we have a visible area 300 x 200 pixels
suppose we have an image of any size. It can be bigger or smaller than the visible area.
Question:
1.center the image vertically and horizontally inside the visible area. Crop overflowing parts of the image
1a. vertical centering is unimportant and can be omitted
2.draw the border around the visible part of the image. Note that the border can match either the outer div border or image border
2a.clarification: I want to find the way of (for example) creating the third div whose borders would repeat the borders of the visual part of the image
Cropped or not, in browser has to be seen the border around the visible part of the image
mercator has already done some of the job here as described below:
You can make it work if you wrap
another element around the image:
<div class="outer">
<div class="inner"><img src="" alt="" /></div>
</div>
And the following CSS:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
overflow: hidden;
*position: relative;
}
.inner {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
The position: relative on the
'outer is marked with * so it will
only work in IE6/7. You could move it
to a conditional IE stylesheet if
that's what you prefer, or remove the
* altogether. It's needed to avoid
the now relatively positioned children
from overflowing.
I'm not to sure what you mean by your 2d clarification, but I think you can achieve this with the follow markup:
<div class="outer"></div>
and css:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
background: #fff url(/path/to/image.jpg) 50% 50% no-repeat;
}
This will create a div of 300x200px with a 1px red border. It will then position an image in the div centered vertically and horizontally, or default to white the image cannot be found.
The border, you'll need to draw in another fashion. Simple borders can be added using css. More complex borders and shadows are limited in css and only implemented in some browsers, but you can use javascript to help you add a more complex shadow. There are many snippets and jQuery plugins that can help you.
You can center the image in the visible area by giving it margin-left = margin-right = auto.