Currently I'm working with a wordpress theme. I don't know PHP so can't edit the files, and unable to add bootstrap with it. But I need a pop-up box in my page, so I used CSS. But the problem is the pop-up window poping up within the parent window, I want it full screen. How can i do it? Check Screenshot and code here: http://justpaste.it/n4ol
You can use new popup?
Here is the
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click here</p>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
</body>
Try this
Use this popup in footer. You will find help .
try something like this:
.popup{
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
}
Related
I'm developing a website only using HTML, CSS and Javascript, it is my first web page, and I'm getting a problem of the height on a fixed block. The "Contact us" link must open a box with the contact information in the center of the screen, so I used the fixed position, I wanted the height to work as usual, I mean only the height of it's content, but instead, it is showing 100% height of the screen, thank you, the web page is in Spanish, the link to the web site is:
http://www.bordadosyalgomas.com.ve/
Again, this is my first web page, plus I'm on the navigation bar by the time.
EDIT:
Sorry, first time asking, I didn't provide any code:
div#contacts1{
font-family: "Ubuntu Medium";
padding: 3.5em;
width: 50%;
border: solid 2px;
border-radius: 20px;
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: auto;
}
div#contacts{
width: 100%;
height: 4000px;
background-color: rgba(0,0,0,0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
div#contacts1 img{
height: 60px;
display: inline-block;
vertical-align: middle;
}
div#contacts1 p{
font-size: 1.3em;
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
padding-left: 1.5em;
}
div#contacts1 p strong{
display: block;
font-size: 0.9em;
margin: 0;
margin-bottom: 0.2em;
padding: 0;
}
div.cparador{
height: 100px;
margin-bottom: -1em;
display: block;
}
div.cparador img{
-webkit-filter: drop-shadow(-2px 2px 4px black);
filter: drop-shadow(-2px 2px 4px black);
margin-left: 3em;
}
div.cparador h1{
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bordaos y algo mas</title>
<style type="text/css">
#import url("index.css") screen;
</style>
</head>
<body>
<div id="contacts">
</div>
<div id="contacts1">
<div class="cparador">
<h1>Información de contacto:</h1>
</div>
<div class="cparador">
<img src="contacts/phone.png">
<p><strong>Teléfono</strong>
0257-2535145</p>
</div>
<div class="cparador">
<img src="contacts/telegram.png">
<p><strong>Telegram</strong>
#bordados.ym</p>
</div>
<div class="cparador">
<img src="contacts/instagram.png">
<p><strong>Instagram</strong>
#bordados.ym</p>
</div>
<div class="cparador">
<img src="contacts/mail.png">
<p><strong>Correo Electrónico</strong>
bordados.ym#gmail.com</p>
</div>
<div class="cparador">
<img src="contacts/whats.png">
<p><strong>Whatsapp</strong>
0414-5214041</p>
</div>
</div>
</body>
</html>
A picture of the problem
You need to remove bottom:0; - this combined with top:0; causes the div to take 100% height.
Then you can set:
top: 50%; // move popup down by 50% of window height
transform: translateY(-50%); // move it back by 50% of popup height
EDIT:
also consider adding max-height: 100%; to make use of overflow: auto; when height of the window is shorter than popup's height.
There is a simple example of a Modal You can use, and instead of any extraa Custom CSS(Specially Height-Width) leave that simple.
that auto height according to your contents!
link- https://getbootstrap.com/docs/4.0/components/modal/
I am trying to make a simple portfolio website and I want two tags at the bottom of the screen whenever I navigate down or up the page. So for example, if I am at the top of the page it says my name with three links, "About Me", "My Work", and "Contact". If I click on "About Me" it will navigate me down the page to where I have that section. Then this is where I need help, I want "My Work" and "Contact" at the bottom for easy navigation. I have been trying to figure this out for hours now which is why I am now asking a question on here. I am new to web programming so excuse me. Here is some of my code that is relevant.
#container {
padding-top: 100vh;
width: 100%;
height: 100vh;
color: white;
}
#container div {
position: relative;
width: 100%;
height: 100%;
}
/* Styling for each indivual link (About Me, My Work, Contact) */
#container div#AboutMe {
background: white;
color: black;
font-family: Helvetica;
font-weight: lighter;
text-align: center;
font-size: 21px;
}
#AboutMe p {
padding-right: 60%;
padding-left: 10%;
padding-top: 5%;
}
.animatedButtonBody span {
cursor: pointer;
display: inline-block;
position: relative;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.animatedButtonBody span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.animatedButtonBody:hover span {
padding-right: 25px;
}
.animatedButtonBody:hover span:after {
opacity: 1;
right: 0;
}
<div id="container">
<div id="AboutMe">
<h1>About Me</h1>
<p>
This is where some text will go.
</p>
<span>My Work</span>
<span>Contact</span>
</div>
</div>
You can try position:fixed. Also you should tidy up your html elements (wrap things in div, etc.)
Example:
.nav {
height: 60px;
background-color: grey;
}
.content{
height: 500px;
background-color: lightgreen;
}
.footer{
height: 60px;
width: 100%;
background-color: black;
position: fixed;
bottom: 0px;
}
<div class = "container">
<div class = "nav">
</div>
<div class="content">
</div>
<div class = "footer">
</div>
</div>
Hope it helps
I figured out the answer to my problem. Here is what I added to my tags.
#pinButton1 {
position: absolute;
bottom: 0;
transform:translateX(-100%)
}
#pinButton2 {
position: absolute;
bottom: 0;
transform:translateX(0%)
}
<span>About Me</span>
<span>Contact</span>
Not tested, but you can try it. You need an element with "position:fixed", this way it stays on the screen when scrolling.
<style>
.float-container {
position: absolute;
bottom: 0;
}
.about-me {
position:fixed;
}
</style>
<div class="float-container>
<div class="about-me">
<p>Some Content</p>
</div>
</div>
You should check out position:fixed and position:absolute.
Link to W3Schools: HERE
You didn't clarify what does "at the bottom" mean, therefore I give 2 examples. This is how I understood your question.
If you need buttons to be always in viewport at the bottom of the screen use this example with custom values. Here you have an example how to center an item at the bottom center of the viewport.
#example{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%)
}
If you need an item to be at the bottom of the page use
#example{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%)
}
I want to make like this box shadow its from a psd file :
i have made a screenshot :
http://s3.postimg.org/k59bfo5s3/boxshadow.png
i don't know how i can make that by code of css
but my other idea I thought also to extract the shadow from PSD file like that
and moove it to my html page but i don't know where i can place the code for image of shadow
http://jsfiddle.net/4pbq2tx8/11/
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
<div class="title">title</div>
</div>
</body>
</html>
css :
#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png) ;
/* my probleme is here */
box-shadow: url(http://s14.postimg.org/7tmkd1hfl/shadow.png);
}
body {
background-color: #c7c7c7;
}
.title {
position:absolute;
width:902px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border:solid 0.5px #686868;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}
1/
Try with that:
#carousel:after {
position: absolute;
z-index: 9999;
bottom: -100px;
content: " ";
width: 100%;
height: 100px;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
JSFIDDLE LINK
2/
If you want the shadow to be exact length of 1100px you need to change few things:
.wrap {
position: relative;
width: 1100px;
}
.wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
And wrap your #carousel in .wrap
<div class="wrap">
<div id="carousel">
...
</div>
</div>
JSFIDDLE WITH WRAPPER
Your shadow looks like a 3D object, so take advantage of that, and use a 3D pseudo element with a box shadow:
#carousel {
-webkit-perspective: 500;
-webkit-perspective-origin: 50% 50%;
}
#carousel:after {
content: "";
position: absolute;
left: 20px;
right: 20px;
bottom: -45px;
height: 50px;
background-color: #888;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(80deg);
box-shadow: 0 0 20px 15px #888;
}
jsFiddle
Tested on chrome. Should work on Safari too. For other browsers, you will need add their vendor prefixes, -moz-, -ms-.
Old browsers will not support 3D transformations, and that's ok. No shadow will appear.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Also, you don't need, and should not use images. You can replicate the same effect with linear gradients.
I'm creating my own modal, here's my CSS:
.modal{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 999;
.modal-content{
margin: 60px auto;
background-image:url('/static/img/background-modal.jpg');
width: 700px;
height: 700px;
.box-shadow(0 10px 2px #999);
}
}
And the HTML:
<div class="modal">
<div class="modal-content">
My Modal
</div>
</div>
.modal refers to the greyed out background and .modal-content refers to the box that pops up.
The problem is that the greyed background only covers the browser window, when I scroll down to see the rest of my modal box, the greyed background stops and I can see my pages content.
I can fix this with a fixed position, but then you can not see the entire content of .model-content.
What about that?
http://codepen.io/ivanchaer/pen/izDuI
HTML:
<div class="modal"></div>
<div class="modal-content">
My Modal
</div>
CSS:
.modal {
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
z-index:999;
}
.modal-content {
position:relative;
z-index:1000;
background-color:#fff;
width:700px;
height:700px;
box-shadow:0 10px 2px #000;
margin:60px auto;
}
I have a decision for you, it is described in this post (russian). It is a jquery plugin, but you can use only styles.
Demo and github
In few words: when modal is visible we add lock class name to body element (body.lock {overflow: hidden} — prevents body scrolling).
div.shim is a fullscreen modal background (position: fixed) and it has overflow: auto, which provides possibility to scroll modal content (not content of the body).
HTML markup:
<html>
<head>
...
</head>
<body class="lock">
<div class="shim">
<div class="modal">
...
<h1>Hi, I'm the modal demo.</h1>
...
</div>
</div>
...
</body>
</html>
(I'm a non-native english speaker, feel free to correct my answer if need)
You do need to add position:fixed to .modal other it will move as you scroll down the page. I would then alter .modal-content to:
.modal-content{
position:absolute;
margin: -350px 0 0 -350px;
top:50%;
left:50%;
background-image:url('/static/img/background-modal.jpg');
width: 700px;
height: 700px;
.box-shadow(0 10px 2px #999);
z-index:1000;
}
You should have the 'greyed out' div on its own. Like so:
<div class="modal"></div>
<div class="modal-content">
My Modal
</div>
And then fix position the greyed out div and I centered the modal content div vertically and horizontally
But the problem was more with your greyed out div
here's a fiddle: http://jsfiddle.net/uj9Gg/2/
Replacing width:100%; and height:100%; with min-width:100%; and min-height:100%; for your .modal class seems to fix your issue.
.modal {
position: absolute;
display: block;
top: 0;
left: 0;
min-width:100%;
min-height:100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 999;
.modal-content {
margin: 60px auto;
background-image:url('/static/img/background-modal.jpg');
width: 700px;
height: 700px;
.box-shadow(0 10px 2px #999);
}
}
http://jsfiddle.net/E4Nm4/3/
I am having the following code from this link for making a Lightbox effect. It is working fine in Firefox and Google Chrome but having problem in Internet Explorer 8. In IE, all the images and text of the webpage coming above the black_overlay and both black and white overlay are in background. Please help in fixing the problem.
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#666;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position:absolute;
top: 15%;
left: 320px;
width: 50%;
height: 40%;
padding: 16px;
border: 2px solid #d2d2d2;
background-color: white;
z-index:1002;
overflow: auto;
/*margin-top:100px;*/
}
HTML:
Login
<div id="light" class="white_content">
<p>Hello</p>
Close
</div>
<div id="fade" class="black_overlay"></div>
Remove the </div> after the line <p>Hello</p>. Also see my jsfiddle.