I was recently assigned the job of copying a JS popup our previous web developer made. I've got it very similar yet there's one thing I can't get, for the close button (X) to float over the popup in the top right corner (rather than being sat on top right corner of the popup). I've tried with position: values in the CSS and other attributes I've found around Stack overflow, yet none seem to do the trick.
The CSS:
#popup {
position:absolute;
display:hidden;
top:50%;
left:50%;
width:400px;
height:586px;
margin-top:-263px;
margin-left:-200px;
background-color:#fff;
z-index:2;
padding:5px;
}
#overlay-back {
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.7;
filter : alpha(opacity=60);
z-index : 1;
display: none;
}
.close-image {
display: block;
float:right;
cursor: pointer;
z-index:3
}
The HTML:
<div id="overlay-back"></div>
<div id="popup">
<img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>
Just add position, right and top to your class .close-image
.close-image {
cursor: pointer;
display: block;
float: right;
z-index: 3;
position: absolute; /*newly added*/
right: 5px; /*newly added*/
top: 5px;/*newly added*/
}
Use this css
.close-image {
cursor: pointer;
z-index: 3;
right: 5px;
top: 5px;
position: absolute;
}
.close-image {
cursor: pointer;
display: block;
float: right;
position: relative;
top: 22px;
z-index: 1;
}
I think this might be what you are looking for.
I know this post is little bit old but here is a potential solution for anyone who has the same problem:
First, I would change the CSS display for #popup to "none" instead of "hidden".
Second, I would change the HTML as follow:
<div id="overlay-back"></div>
<div id="popup">
<div style="position: relative;">
<img class="close-image" src="images/closebtn.png" />
<span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>
</div>
And for Style as follow:
.close-image
{
display: block;
float: right;
cursor: pointer;
z-index: 3;
position: absolute;
right: 0;
top: 0;
}
I got this idea from this website (kessitek.com). A very good example on how to position elements,:
How to position a div on top of another div
I hope this helps,
Zag,
What about:
.close-image{
display:block;
cursor:pointer;
z-index:3;
position:absolute;
top:0;
right:0;
}
Is that the desired result?
Related
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: 1;
left: 80%;
/* top: 0%; */
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{background: #1a1aff;}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
How to do same effect like main(1st link) for responsive width??
As you can see on example, 1st hover look nice but 2nd one not rly... any clue?
Because when i check for bigger or smaller screen my circle move some where.
Not gonna do all the work for you but it looks like you're over thinking it. You're already messing with border-radius which is the key:
a {
color: white;
padding: 5px;
border-radius: 0 1rem 1rem 0 ;
background-color: blue;
}
Some Page
<br/>
<br/>
Some Page 2
Depending on the needs of your application (will all lines fit on one line on all expected viewports?), applying this style on hover could be all you need.
As you can see below, I've used right property on .addcircle:after instead of left and used a fixed value of negative half of the width which is -15px this will lead to a semi-circle effect and the right side of your links, without regarding width of the element.
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{
background: #1a1aff;
}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
However, there's no need to use a <div class="addcircle"> around your links. It's possible to implement exact same effect with only <a> elements.
a{
width:20%;
display: block;
height: 30px;
position:relative;
}
a:hover{
background: #1a1aff;
color:white;
}
a:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
a:hover:after{
background: #1a1aff;
}
<div id="main">
<span>HOOVER LINK BELOW</span>
some page
<a style="width: 50%" href="">some page 2</a>
</div>
Just add the display property to your .addcircle div:
.addcircle{
width:15%;
height:30px;
position:relative;
display: flex;
}
and for .addcircle:after change right position instead of left:
.addcircle:after{
position: absolute;
z-index: 1;
right: -12px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
I am setting a wrapper to be full screen with a slight opacity. Within that wrapper I have another div which is to be centered on the screen. All works, but the opacity is being applied to the inner div (loading icon and some text).
The html cannot change in the sense that .dataTables_processing will always be a wrapper no matter what.
html:
<div class="dataTables_processing">
<div class="dataTables_processing_custom">
<i class="fa fa-spinner fa-spin"></i> Please wait...
</div>
</div>
css:
.dataTables_processing {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
padding: 0;
background-color: #333;
opacity: 0.05;
cursor:wait;
z-index:9998;
}
.dataTables_processing_custom {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 30px;
margin-left: -100px;
text-align: center;
color:#3276b1;
font-size: 14px;
z-index:9999;
}
.dataTables_processing_custom i{
font-size:30px;
vertical-align:middle;
}
When the CSS style opacity is applied to the parent, it does it to all it's children, try using a RGBA method for a background instead:
.parent {
background: rgba(0,0,0,0.5);
}
I am trying to place a div with text on top of an image but for some reason it doesn't work. My code is:
<div id="pics">
<div class="inner">
<img src=".." class="pic" height="310" width="310">
<div class="cover">blah blah</div>
</div>
</div>
my CSS is:
#pics{
overflow:hidden;
display:block;
}
.inner a{
position:relative;
margin:3px;
padding:10px;
top:10px;
}
.inner{
position: relative;
display: inline-block;
}
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
I have tried many things but it doesn't seem to work. I might have messed up my cs somewhere
That's because you're targetting an ID and not a class.
In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:
<div class="cover">blah blah</div>
Either change the HTML to have an ID:
<div id="cover">blah blah</div>
or change the CSS to target the class name:
.cover{
position: absolute;
background-color: black;
color: white;
width: 100%;
height: 100%;
border-style: solid 5px;
top: 0px;
}
UPDATE:
You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to:
(place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
border-style: solid 5px;
top: 0px;
}
How about setting the picture as background via the background-image: attribute.
You then could make your div clickable with <div onclick="window.location="url";>
In detail your css would look like this:
.image {
width:310px;
height:310px;
background-image:url('pathtoimage');
}
I have a set of progress bars displaying different values in real time. My only problem is that I can't seem to figure out how to keep the number value in the center of the bar, as well as on top at all times. Right now it's being pushed 'ahead' of the blue bar, and disappears when it goes outside the right side of the bar.
Here's how it looks:
Markup:
<td class="gridTableCell">
<div style='position: relative' class='progress progress-info'>
<div class='bar' id='signalRdepthRangePercentage-#:ViewUnitContract.ConveyanceId #' style='width: #: DepthRangePercentage#%'>
</div>
<span class='gridSpan' id='signalRdepth-#:ViewUnitContract.ConveyanceId #'>#: ViewUnitContract.CurrentRun.LatestWellLogEntry.Depth#</span>
<span class='hidden' id='signalRMaxDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MaxDepthRange#</span>
<span class='hidden' id='signalRMinDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MinDepthRange#</span>
</div>
</td>
And my css 'gridSpan':
.gridSpan {
position: absolute;
top: 0px;
z-index: 2;
text-align: center;
color: #676767;
width: 100%
}
The first of the three spans is the one that displays the number value inside the bar.
Any suggestions how I can keep this centered at all times, and not pushed in front of the blue filler with a huge margin?
Do something like the following:
FIDDLE
The outer element has text-align:center
The gridSpan element has display:inline-block (not absolutely positioned)
The inner element (with the blue % progress) needs to be absolutely positioned, so as not to be effected by the text-align:center.
Markup:
<div class="outer">
<span class="inner"></span>
<span class="gridSpan">9048.343</span>
</div>
CSS
.outer
{
width: 70%;
margin:20px;
height: 30px;
border: 1px solid gray;
overflow: hidden;
border-radius: 15px;
position:relative;
text-align: center;
}
.inner
{
background: aqua;
display:inline-block;
position:absolute;
left:0;
width: 20%;
height: 30px;
}
.gridSpan {
display:inline-block;
margin-top: 5px;
color: #676767;
position: relative;
z-index:2;
}
Alternatively, if you knew the width of the value you could do this by adding display:block;left:0;right:0 and margin:0 auto to your class:
.gridSpan {
display:block;
position: absolute;
margin: 0 auto;
top: 0px;
left:0;
right:0;
z-index: 2;
color: #676767;
width: x px; /*(width of value)*/
}
Actually, I finally figured this out based on this fiddle:
http://jsbin.com/apufux/2/edit (Wonder why I've never seen this post before!?)
Seems that I was missing some style overrides to the .bar and .progress part:
.progress {
position: relative;
}
.bar {
z-index: 1;
position: absolute;
}
.progress span {
position: absolute;
top: 0px;
z-index: 2;
text-align: center;
color: #676767;
width: 100%
}
Anyways, thanks for your effort! :)
I have an element that looks something like this:
___
| X|
‾‾‾
So essentially a tiny box with a button to close it.
I have also applied CSS to the element, so that when hovered, it will turn to something like this:
___________________
| X|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Simply put, it'll just become wider.
Now. what I want to do is that whenever the user hovers over the close button (X), the box will not change its size.
But when the user hovers on anywhere else on the box, it would behave as suggested.
Is this possible with pure CSS?
EDIT: Sorry that I added this late, but the answers should be based around this example: http://jsfiddle.net/fpY34
Using the markup you have, I have no clue how to do it without fixed widths, and absolute nastiness. But here's me giving my all! http://jsfiddle.net/fpY34/15/
<div id='outer'>
<div id='notOuter'>
<div id='content'>
<div id='img'>
</div>
<div id='label'>
Text example
</div>
<div id='closeButton'>
X
</div>
</div>
</div>
</div>
and the beauty:
#outer { height: 30px; }
#notOuter {}
#content { float: left; position: relative; }
#closeButton { background: #0f0; position: absolute; top: 0; left: 30px; width: 30px; height: 30px;}
#img { background: #f0f; width: 30px; height: 30px; position: absolute; left: 0; top: 0; }
#label { display: none; position: absolute; left: 0; top: 0; width: 60px; height: 30px; background: #f00; }
#img:hover { width: 60px; z-index: 10; }
#img:hover + #label,
#label:hover { display: block; z-index: 20; }
#img:hover ~ #closeButton,
#label:hover + #closeButton { left: 60px; }
would you check this please and tell me if that what you want ?
http://jsfiddle.net/UjPtv/10/
<style>
.divs
{
height: 20px;
width: 100px;
border: 1px solid;
padding: 5px 3px;
}
.divs:hover
{
width: 50px;
padding-left: 150px
}
</style>
<div class="divs"><span>X</span></div>
You could float them:
<div class="box">
<div>
Content
</div>
<span>X</span>
</div>
.box {display:inline-block;border:1px solid black}
.box div {width:100px;float:left}
.box div:hover {width:200px}
.box span {float:left}
Might not work in older browsers though.