I can't seem to get the black box to the center of the screen as opposed to the center of the div its inside in.
EDIT: For clarification, I only want the black box in the center of the results panel not the pink box with it. Also I would also like to keep my javascript intact.
EDIT 2: I'm trying to have something like an overlay that popsup in the middle of the screen when a user clicks on the image. Not sure if this is the best way or the best code to achieve that!
Would appreciate if anyone can help.
Here's my attempt: http://jsfiddle.net/BPLcv/1/
HTML
<div class="tooltip">
<div class="description">Here is the big fat description box</div>
</div>
<div class="tooltip">
<div class="description">Poop</div>
</div>
CSS
.tooltip {
position: relative;
border: 1px #333 solid;
width: 200px;
height: 200px;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkI2PXYOOOHltHwgIz6xwfuN079IAJDLsmOV68rQNNLCE-GFZ1_aQN89U');
}
.overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.description {
position: absolute;
width: 300px;
height: 300px;
display: none;
background-color: black;
text-align: center;
z-index: 1;
/* centering???? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
Thank you!
If you want the description/overlay in the middle of the screen, your best bet is to use an element outside of your tooltip-elements, as these are fixed width.
If you have a top-element with width: 100%, your centering css wil work for any immidiate children.
Working fiddle: http://jsfiddle.net/BPLcv/4/
Here the overlay is filled with whatever is in the description element of the tooltip you're hovering:
overlay.html($(this).find(".description").html());
The description class is always hidden.
Check this Demo jsFiddle
CSS
body{
margin:auto;
width:50%;
}
Try this. Assign the div of interest id = CenterDiv, then add this css:
z-index:10;//remove left:50%
Now try adding this function via onload or onclick, etc:
function centerDiv() {
document.getElementById("CenterDiv").style.marginLeft = ((screen.availWidth - 300)
/ 2) + 'px';
}
The number 300 can be any number that represents the width of your element of interest.
Substituting the width of your element (here, 300px), this function will center an element with absolute position.
Related
After my website was completed, everyday I am trying to modify things that would make it more responsive. It's made in Muse so don't expect much of "responsiveness".
I have an element with this class:
#labelstrong
{
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: fixed;
top: 1542px;
left: 164px;
}
Normally, the element is in the middle of the screen. But when I zoom out, the element maintains the same distance to the top of the screen (because of the top attribute of course). How can I define its position in a way that even if I zoom in or out it will still be in the middle of the screen.
UPDATE:
The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position.
UPDATE 2: Here is a live example. Imagine that the class is applied on each TAG (not the menu of course).
http://2323029s8s8s8.businesscatalyst.com/index.html
You can add for those big tags the following css:
.fixed-big-tag{
top: 50%;
transform: translateY(-50%);
}
Also as a counter measure, make sure the <body> and the <html> have 100% heights
Another idea would be to use the !important rule for the top property to overwrite what Muse outputs.(or any rule that needs to be overwritten)
If it works, you could probably add a new class on all these tags that need to be centered and overwrite it via css
Check it out, and let me know how it goes.
See this resource for techniques to centering elements using CSS: Centering in CSS: A Complete Guide
If you create a relatively-positioned parent container element, you can center your child element easily:
.parent {
position: relative;
}
#labelstrong {
z-index: 17;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: absolute;
width: 634px;
height: 40px;
top: 50%;
left: 50%;
margin: -20px 0 0 -317px;
}
Note that the margin offsets are half of the width and height.
Try using percentages instead of pixels, like:
top: 10%;
If you want to horizontally center, try setting the margin to auto:
margin: 0 auto;
Your code would look like this:
#labelstrong {
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: relative;
top: 10%;
margin: 0 auto;
}
Take a look at this example: http://jsfiddle.net/5a6fyb21/
jQuery would be your best bet.
I would just set your class to a fixed position then try using the following.
$(window).resize(function() {
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});
The resize function is used so that it will remain in position if the window is resized.
Centered label over horisontally scrollable content:
http://jsfiddle.net/cqztf9kc/
.fixed {
margin: 50%;
position: fixed;
z-index: 1;
}
.content {
x-overflow: scroll;
height: 100%;
}
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>
How do I make an html div tag to be on top of everything? I tried adding z-index: 1000, but it remains the same.
In order for z-index to work, you'll need to give the element a position:absolute or a position:relative property. Once you do that, your links will function properly, though you may have to tweak your CSS a bit afterwards.
Yes, in order for the z-index to work, you'll need to give the element a position: absolute or a position: relative property... fine.
But... pay attention to parents!
The element's z-index may be limited by its parent's z-index value.
You have to go down the nodes of the elements to check if at the level of the common parent the first descendants have a defined z-index.
All other descendants can never be in the foreground if at the base there is a lower definite z-index.
In this snippet example, div1-2-1 has a z-index of 1000 but is nevertheless under the div1-1-1 which has a z-index of 3.
This is because div1-1 has a z-index greater than div1-2.
.div {
}
#div1 {
z-index: 1;
position: absolute;
width: 500px;
height: 300px;
border: 1px solid black;
}
#div1-1 {
z-index: 2;
position: absolute;
left: 230px;
width: 200px;
height: 200px;
top: 31px;
background-color: indianred;
}
#div1-1-1 {
z-index: 3;
position: absolute;
top: 50px;
width: 100px;
height: 100px;
background-color: burlywood;
}
#div1-2 {
z-index: 1;
position: absolute;
width: 200px;
height: 200px;
left: 80px;
top: 5px;
background-color: red;
}
#div1-2-1 {
z-index: 1000;
position: absolute;
left: 70px;
width: 120px;
height: 100px;
top: 10px;
color: red;
background-color: lightyellow;
}
.blink {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
.rotate {
writing-mode: vertical-rl;
padding-left: 50px;
font-weight: bold;
font-size: 20px;
}
<div class="div" id="div1">div1</br>z-index: 1
<div class="div" id="div1-1">div1-1</br>z-index: 2
<div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
</div>
<div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
<div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br> parent)</span></div>
</div>
</div>
More simply :
For z-index:1000 to have an effect you need a non-static positioning scheme.
Add position:relative; to a rule selecting the element you want to be on top
You need to add position:relative; to the menu. Z-index only works when you have a non static positioning scheme.
z-index property enables you to take your control at front. the bigger number you set the upper your element you get.
position property should be relative because position of html-element should be position relatively against other controls in all dimensions.
element.style {
position:relative;
z-index:1000; //change your number as per elements lies on your page.
}
I gonna assumed you making a popup with code from WW3 school, correct?
check it css. the .modal one, there're already word z-index there. just change from 1 to 100.
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
It seems like nesting an element inside a <dialog> element puts it on top of everything. It is placed both horizontally and vertically centered to the screen if you use showModal() but you lose the interactivity with other elements in the page.
document.querySelector("dialog").showModal();
<dialog>
<div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element</div>
If you still want interactivity with the background elements, you can use the show() method. It is placed only horizontally centered to the screen.
document.querySelector("dialog").show();
<dialog>
<div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element to check if I am underneath or not.</div>
I want to place a small circular login image on the border of div such that half image will be outside the border line just for style purpose?I think I have to set z-index but how OR is there any better way?
Thats exactly what you need to do.
Give you img a class name. Then in your style sheet add something like this
#classname
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}
z-index needs to be a number greater than your div which will have an index of 0 if you haven't changed it.
Hope this helps.
.overout {
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}
You can do this very easily using divs. Consider the following code
<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
<div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
</div>
</div>
</body>
</html>
All you have to do is replace the second divs "background-color" property with the "background-image" property and nest that div inside your existing div. Make sure you make the div the exact size of your logo and set background-repeat: no-repeat;
Hope that helps. Test the example code I posted. You can place all the style information into a css class like this:
.logo
{
background-image: url(yourlogo.png);
background-repeat: no-repeat;
width: /* width of logo */
height: /* height of logo */
top: /* distance from top */
left: /* distance from left */
}