First for all: No, I'm not looking for the property position: absolute;
What I want to is to create a field that displays some text. I want to display that field exactly in the middle of the page and then fade out the background, doesnt matter, where the div is placed in the code.
At the moment it looks like that:
https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG
https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG
How can I place an Elemtn ABSOLUTE in the middle of the page, doesnt matter where it is written in the code?
Now I could just say well, I will place it on top of the content. But the problem is, in this field is displayed some information that generates in the content, so I have to put it in the code after the content.
I hope, someone can help me :)
PS: If you have another solution to solve something like this... feel welcome to tell me! I just want something like an alert();-Box with my own style.
EDIT: Some effort: (basically already shown with the screenshots, but here some code; just didnt want to make it confusing)
I save the text as following:
// Save Help-Text
ob_start();
?>
This is the main page. There is no help available!
<?php
$help = ob_get_clean();
I display the text as following: (echo create_help($help); creates the help-tag and displays it)
function create_help($content){
$help = "
<div id=\"help-bg\" class=\"closehelp\" ></div>
<div id=\"help\" >
<img src=\"../images/close.png\" class=\"closehelp\" />
$content
</div>
";
return $help;
}
This is the CSS for the box:
/* Help-box style */
#help
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
background-color: #B8DBFF;
border: 5px solid rgb(58, 100, 250);
border-top: 30px solid rgb(58, 100, 250);
border-radius: 5px;
padding: 20px;
width: 600px;
z-index: 1001;
#help img
position: absolute;
margin-left: 595px;
margin-top: -47px;
height: 25px;
width: 25px;
/* Makes background of Help-box transparent black */
#help-bg
background-color: black;
z-index: 1000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity:0.6;
display: none;
First of all I would recommend using position:fixed; instead of position:absolute; because the alert would scroll within the page. If you have a fixed height and width try something like
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;. This CSS-Code will center your div horizontally and vertically (Demo -> http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html). But if you are using an dynamic height maybe you should consider using jQuery or give it a fixed top position.
try this:
html, body{
position: relative;
}
.yourAbsoluteClass{
position: absolute;
width: 50%;
top: 25%;
left: 50%;
}
Related
I am trying to slide a div over another div with text inside, however I don't want the text to move with the div, I just want the div to slide over the text (and mask/hide it) while the text stays where it is.
I'm still a newbie so my apologies in advance if this doesn't make sense :D Here is a reference that is super similar to what I'm trying to achieve, however instead of the text falling, I just want the div to slide over the text (and hide it) without the text moving at all:
ref
Here's their code:
html:
<div>
<h2>test,</h2>
<h2>test,</h2>
<h2>test.</h2>
</div>
css:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
width: 100px;
height: 100px;
background: #efefef;
/* Overflow HERE .. not on the
elements being tweened */
overflow: hidden;
h2{
position: relative;
color: black;
font-weight: bold;
height: 33.3%;
margin: 2px 4px;
}
}
js:
let preloaderAnim = new TimelineMax();
preloaderAnim.staggerTo('h2', 1, { y:'200%', delay: 1}, .15);
I've heard that overflow:hidden might be useful, but I'm not sure how to use it in this case...
I would also like to use GreenSock for the animation!
Thanks in advance :)
I am a beginner in Javascript, I am trying to make a website that can show image. the HTML is like this (main part):
//And my Javascript :
document.getElementById('category').innerHTML = row.category[count]
document.getElementById('bbox').style.left=row.x1[count]
document.getElementById('bbox').style.left=row.x1[count]
document.getElementById('bbox').style.top=row.y1[count]
document.getElementById('bbox').style.width=row.x2[count]-row.x1[count]
document.getElementById('bbox').style.height=row.y2[count]-row.y1[count]
/*I set the style in my css file, which is different file with my HTML :*/
#previewimage{
width: 500px;
/* height: 100%*/
z-index: 1;
position: absolute;
}
#bbox{
width: 100px;
z-index: 3;
position: relative;
height: 100px;
border: 5px dashed black;
left: 150px;
top:200px;
}
<div id="images">
<img src="img/80673284_74c3361ed19c018192c338d338d27d67.jpg" id="previewimage">
<img id="bbox">
</div>
Now the problem is why, if I put my javascript line on a button, it change randomly, It is like set the left, top to 0 and width and height remains constant.
Any idea ?
got it!
I just forgot to put px
LOL this is funny
I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.
I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.
I created a fiddle to show what it is doing.
https://jsfiddle.net/zoue6gv7/
This worked until I added my top margin to my div id join_login. It now is that far away from the top.
#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}
How can I get this header to stay fixed at the top after I get to my scroll point?
Is this what you want? https://jsfiddle.net/zoue6gv7/1/
I just removed the margin-top -50px and replaced it with
top: 0;
This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px
#logo {
position: absolute;
left: 15%;
top: 22px;
font-size: 2em;
margin-top: -15px;
}
Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:
Use position: fixed; to tell the header to stay in the same location regardless of scrolling
Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page
header {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;
}
For my html page I would like to be able to shade the whole page to indicate temporary disablement of all items in the page, the way it is when (for example) when one opens the "Insert Image" dialog box in the "Ask question" section here (as shown in the snapshot below).
The only thing I can think of is setting the page’s bgcolor attribute to grey, but that's not quite what I want because the shading should appear on top of the page items, not behind them. What is the correct way to do it ?
Apply a disabled class to your body and define this style
body.disabled:before {
content: "";
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: ... /* choose a z-index so that no other element can overlap it */
background: rgba(0,0,0, .8);
}
Example
body.disabled:before {
content: "";
position: fixed;
z-index: 1;
min-height: 100vh;
width: 100%;
left: 0;
top: 0;
background: rgba(0,0,0, .5);
}
.popup {
position: fixed;
z-index: 2;
background: #fff;
border: 2px #ccc solid;
padding: 30px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<body class="disabled">
I'm the body
<div class="popup">I'm the popup</div>
</body>
If you use a pseudolement you won't need to use empty markup only for styling purpose.
When the user interaction has completed, just remove the disabled class (via js)
You could add a div over the rest of your page
<div id="overlay"></div>
#overlay{
position:fixed;
z-index:10;
top:0;
left:0;
bottom:0;
right:0;
background-color:[what ever you want]
}
N.b. however I prefer the :before option (assuming you don't need legacy IE support)
This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.
I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.
My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.
I've gotten the code from coders answer in this question.
Here it is:
Script:
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
html:
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="blackground" class="black_overlay"></div>
CSS:
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Here's the fiddle-demo so you can play around as well
I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).
Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.
Thank you so much in advance for any help. Been stuck for a while now
You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/
After update http://jsfiddle.net/dhana36/K57DH/20/
UPDATE:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>
Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head
http://jsfiddle.net/K57DH/18/ edit in left panel