I have following HTML and CSS, now I would like to position my popup window in middle of screen in any browser window size. Is this possible without JavaScript?
CSS:
.floating-window {
z-index: 9999;
position: absolute;
width: 200px;
height: 200px;
cursor: default;
-moz-box-shadow: 1px 1px 1px #888;
-webkit-box-shadow: 1px 1px 1px #888;
box-shadow: 1px 1px 1px #888;
}
HTML:
<div class='floating-window box'></div>
With percentages, you can set your box such that half of it is on the left side. So
width: 30%;
left: 45%; /* 50% (center) - 15% (half of 30) */
You could also use px but then you'll be limited to an absolute container width. Have you searched around? I know there are some articles explaining this method more extensively than I have.
Sure, it's possible, but how are you going to make it go away?
That's going to need JavaScript...
Related
I want to try and achieve something in CSS using borders but they don't seem to have something I want. In Photoshop, when you add a Stroke (border), you select the position. Outside, Inside, or Center. Outside being where the entire border wraps around the object. Inside is where it sits on the inside (obviously), and center being half and half.
I want a 2px border that's positioned in the center. So it shows 1px outside and 1px inside. Is there anyway to do this with CSS? I imagine I can do it with a box-shadow of some kind but I'm horrendous at shadows in CSS.
There's also the issue of having to be pure CSS so I can't lay an image over it. Can someone possibly help me out with this.
Thanks.
There's a work around, since border represents outer stroke for you, you can make use of outline css property with outline-offset set to negative value to have the inner 1px stroke( 1 ) JS Fiddle
body {
padding-top: 10px;
}
#test {
width: 250px;
height: 200px;
background-color: orange;
margin: 0 auto;
border: 1px navy solid; /* outer stroke */
outline: 1px navy solid; /* inner stroke */
outline-offset: -2px; /* negative border width + outline width */
}
<div id="test"></div>
( 1 ) As the above fiddle might not demonstrate the explanation good enough, here's the same example with two colored strokes and 4px for each stroke instead of 1px Demo Fiddle
Resources:
http://caniuse.com/#search=outline
https://developer.mozilla.org/en/docs/Web/CSS/outline-offset
http://www.w3schools.com/cssref/css3_pr_outline-offset.asp
https://davidwalsh.name/outline-offset
Perhaps with a suitable sized absolutely positioned pseudo-element?
div {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 1em auto;
position: relative;
}
div:after {
content: '';
position: absolute;
top:-6px;
left: -6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
border:12px solid rgba(255,0,0,0.5)
}
<div></div>
You could nudge the container so that it would look like it's an inner border. For example, if you have have a 2px left border and want it to appear as an inner border, you can just offset the whole container to the right, like this:
position: relative;
left: 2px;
You might have to do other corrections, such as reducing the width of the container by 2px.
I try to make the ripple effect of the material design of lists that shows when try to swipe and this is the end and dont possible to swipe more.
I made
div{
height: 300px;
width: 50px;
position: absolute;
border-radius: 0px 500px 500px 0;
-moz-border-radius: 0px 500px 500px 0;
-webkit-border-radius: 0px 500px 500px 0;
background-color: black;
opacity:0.1;
}
<div>
</div>
and it look like a box with round corner. I make the effect with js by change the width and the opacity.
how to make the css more look like the effect ?
Thanks
I'm trying to get a gap created within a div's border to fit an image, similar to this:
Is there a way to do this in pure CSS? All I can see is:
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
But my problem is border-right: 1px solid #eee; creates a line on top of my image, which is of course not desired.
It needs to be responsive. This image is an example, but you get the general idea.
Something like this?
http://jsfiddle.net/6Ufb5/
div {
border: 1px solid #ccc;
position: relative;
}
img {
position: absolute;
top: 10px;
left: 10px;
}
Give the container position relative and the img absolute, shift it to left 10px and shift it down 10px from the top and you have what you desire.
For the responsive part, that's just giving the container and/or img a % width.
Like so:
http://jsfiddle.net/6Ufb5/2/
You can achieve this by using absolute positioning of the image element - and it has to be in a <img> element, not as the background image because it will never overlap the parent border (or even if it does by adjusting the background-position property, the border will lie on top of the background image... a behavior that is expected, by the way.
<div class="box">
Content goes here
<img src="http://placehold.it/300x200" />
</div>
And the CSS:
.box {
position: relative;
border: 1px solid #333;
}
.box img {
position: absolute;
bottom: -1px;
right: -1px;
}
If you want a dynamic and/or responsive solution, you might have to resort to JS to doing so - such as resizing the image depending on the box dimensions, and assigning a height to the box to take into account of the image height (since image is absolutely positioned, it is taken out of the document flow).
See fiddle here: http://jsfiddle.net/teddyrised/xH6UV/
This might work if you can alter your markup. For accessibility I think the image should be an image and not a background, and this method is responsive (though you may want to alter margins at small sizes with media queries).
http://jsfiddle.net/isherwood/79Js5
.box {
border: 1px solid #ccc;
display: inline-block;
padding: 10px 0 10px 10px;
width: 40%;
}
.box img {
margin-right: -10%;
margin-bottom: -10%;
width: 105%;
}
<div class="box">
<img src="http://placehold.it/200x100/f3f3f3" />
</div>
I was just wondering if there's a way to create a div with the "border" inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding.
I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words
I want this:
Here is my code:
http://jsfiddle.net/hpLYD/1/
The CSS:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Padding property is expanding the whole div including the border.
How can I achieve that effect using only css? is it possible?
You can do this using the CSS3 property box-shadow. Add the following to your CSS:
box-shadow: 0px 0px 0px 5px #f00;
jsFiddle example
While box-shadow is most likely the best way to go, people seem to forget that the question required that the border didn't exceed 200px. In order to actually achieve this you can use the inset parameter on the box-shadow attribute (which will make an inner shadow).
You will also need to change the box-sizing to border-boxsuch that the size is proportional to the border and not the content.
Here's an JSFiddle with the result
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid red;
box-shadow: 0px 0px 0px 5px blue inset;
box-sizing: border-box;
}
<div class="mydiv"></div>
.mydiv{
position:relative;
height:150px;
width:200px;
background:#f00;
}
.mydiv:before{
position:absolute;
content:'';
position: absolute;
top: 10px;
bottom: 10px;
left:10px;
right: 10px;
border:1px solid #daa521;
}
Here's an JSFiddle with the result
You can't place a border within an element, however you can use box-shadow to give that effect:
.circle {
border-radius: 50%;
width: 190px;
height: 190px;
background: red;
border: 3px solid blue;
box-shadow: 0px 0px 0px 10px red; /* 10px box-shadow */
}
JSFiddle example.
Do note though that this is a CSS3 style property and isn't supported on all browsers. You may also need to use vendor-prefixes on some browsers (-webkit, -moz, etc). Check http://caniuse.com/#search=box-shadow for support.
I suppose you could add another class to the circle.
I have done this for you.
I dont think you can add a padding to a rounded border (dont quote me on that), but I did the fiddle in about 30 seconds.
.scirle {see fiddle}
http://jsfiddle.net/hpLYD/7/embedded/result/
The problem is a border takes up screen real estate whether we like it or not.
If a 1px border is on 100px element, even if we could get it to appear inside, that element would now only be 98px inside. But what we are stuck with in reality is a 100px element that's actually 102px caused by the borders on the outside. Border-box doesn't seem to do anything to borders in latest Chrome - they always appear on the outside.
An easy way to solve this is using an absolutely positioned CSS :after or :before element, this basically means no screen space is lost by the border. See example:
.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }
I have a very simple JavaScript and CSS hover menu setup apart of the menu on my website. It works great almost everywhere, EXCEPT - there is an issue with the z-index on IE8.
.rolloverMenu {
background-color: #4A5508;
border-bottom: 1px solid #AC4718;
border-left: 1px solid #AC4718;
border-right: 1px solid #AC4718;
box-shadow: 2px 2px 2px #AC4718;
float: left;
margin-left: -15px;
margin-top: -12px;
padding: 10px 10px 6px;
position: absolute;
width: 200px;
z-index: 1000;
}
It goes behind my content and doesn't stay on top of, as supposed to. I know theres different stacking rules in IE, so any suggestions??
(Also have tried setting to z-index:9999;)
Set the z-index to the div that your menu is hiding behind to a lower z-index than your menu.
The solution for this is:
Add z-index to parent container (div, table, ul... etc).
Example:
<div class="menu_container">
menu here..
</div>
<div class="other_content">
other data here
</div>
The div.menu_container should have a z-index value to make its content goes over the other divs.