how do I make a pop up box when I press a button
how do I make this code work on the buttons on the image in the link I've added
https://www.w3schools.com/code/tryit.asp?filename=FD018J3LMVQB
What do you mean by "pop up box"? An alert by the browser or an element within the document?
For an alert: you would need to use JavaScript like so:
<button onclick="alert('Message goes here');"></button>
For a box element within your document: you should use JavaScript as well, like so:
function popBox(id) {
if (document.getElementById("pop" + id)) return;
var myBox = document.createElement("div");
// Style your div element as you wish, with JS, in <style></style>, in an external stylesheet
myBox.id = "pop" + id;
myBox.innerHTML = "Hey.";
document.getElementById("imgwrap").appendChild(myBox);
}
Whole file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.imagewrap {
display: inline-block;
position: relative;
z-index: 1;
}
#button1 {
position: absolute;
bottom: 0;
left: 25%;
}
#button2 {
position: absolute;
bottom: 0;
right: 0;
}
#button3 {
position: absolute;
right: 50%;
top: 50%;
}
#pop1, #pop2, #pop3 {
position: absolute;
z-index: 3;
width: 50px;
height: 50px;
}
#pop1 {
right: 10%;
top: 10%;
background-color: #FFF;
}
#pop2 {
right: 20%;
top: 20%;
background-color: #888;
}
#pop3 {
right: 30%;
left: 30%;
background-color: #000;
}
</style>
</head>
<body>
<div class="imagewrap" id="imgwrap">
<img src="https://www.google.com/logos/2012/opening_ceremony-2012-hp.jpg" />
<div id="pop">
<button id="button1" onclick="popBox(1);">אודות</button>
<button id="button2" onclick="popBox(2);">ערוץ היוטיוב</button>
<button id="button3" onclick="popBox(3);">פייסבוק</button>
</div>
</div>
<script>
function popBox(id) {
if (document.getElementById("pop" + id)) return;
var myBox = document.createElement("div");
// Style your div element as you wish, with JS, in <style></style>, in an external stylesheet
myBox.id = "pop" + id;
myBox.innerHTML = "Hey.";
document.getElementById("imgwrap").appendChild(myBox);
}
</script>
</body>
</html>
I recommed using button element instead of input in this case as it is not a form, it is a button.
EDIT:
I just saw your comment saying you wanted to use only CSS. You would need at least minimal JavaScript. The idea would be to create your div element, style it as you want, and add display: none;. Then you would have to change that to display: block; with JavaScript:
<button id="button1" onclick="document.getElementById('pop1').style.display = 'block';">etc</button>
Related
I would like to fade in product description underneath its picture, using overlay effect on hover, in the e-mail. Unfortunately, Gmail doesn't support some CSS functions. When I send the e-mail, the product description displays below the picture. Is it possible to display text instead of picture when you hover your cursor over the image in the e-mail? Do you know which CSS function is not supported by the e-mail service providers?
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
position: absolute;
font-size: 20px;
text-align: center;
width: 385px;
display:block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="container">
<img src="https://ecsmedia.pl/c/wojny-i-noce-b-iext73211797.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">„Wojny i Noce" to trzeci długogrający album Darii Zawiałow, którego zapowiedź stanowią dreampopowe hity „Kaonashi" oraz „Za krótki sen" nagrany z Dawidem Podsiadło. Nowy album to kolejny longplay, przygotowany w songwriterskim duecie Daria + Michał Kush. Oprócz wydania CD, Daria przygotowała dla fanów wyjątkowe LP - Picture Disc z motywem Sakury czyli kwiatu wiśni.</div>
</div>
</div>
</body>
</html>
As I mentioned in my comment, no support for CSS transitions in Gmail. Further to that, position is not supported in any Gmail client - https://www.caniemail.com/search/?s=position
You'll need to find an alternative method of showing your caption across the board.
I wanna position image which has photo class. However, nth-child is not working on that element. I looked for many solutions, but it couldn't be solved!
.container {
height: 100vh;
position: relative;
}
.irene {
position: absolute;
top: 10%;
left: 10%;
width: 60vw;
}
.irene-img {
position: relative;
}
.irene-img::after {
content: ' ';
z-index: -1;
position: absolute;
left: 5%;
top: 5%;
width: 100%;
height: 100%;
border: 5px solid #2ebce2;
}
.irene-title {
position: absolute;
left: -10%;
top: -10%;
color: rgba(0, 0, 0, 0.4);
font-size: 10rem;
}
.irene-title span {
font-size: 5rem;
}
.single__detail__spec {
position: absolute;
font-size: 2rem;
line-height: 2;
top: 35%;
right: 10%;
color: rgba(0, 0, 0, 0.8);
}
.single__detail__spec span {
font-weight: bold;
}
.single__detail__saying {
position: absolute;
width: 400px;
font-size: 2rem;
line-height: 2;
bottom: 5%;
right: 5%;
color: rgba(0, 0, 0, 0.8);
}
.photo {
position: absolute;
width: 400px;
}
.photo:nth-child(1) {
left: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<base href="https://raw.githack.com/baeharam/Redvelvet-Fansite/master/html/">
<link rel="stylesheet" href="../css/default.css">
</head>
<body>
<div class="container">
<div class="irene">
<div class="irene-img">
<img src="../images/about-irene.jpg" alt="">
</div>
<p class="irene-title">IRENE <span>배주현</span></p>
</div>
<p class="single__detail__spec">
<span>생일.</span> 1991.03.29<br/>
<span>별명.</span> 배추, 현이, 엔딩요정<br/>
<span>취미.</span> 다리미질, 빨래<br/>
<span>혈액형.</span> A형
</p>
<p class="single__detail__saying">
"lorem ipsum"
</p>
</div>
<img class="photo" src="../images/photo-irene1.jpg" alt="">
</body>
</html>
Why nth-child of photo is not working? How to handle it?
I think you are getting confused between nth-child and nth-of-type
nth-child(n): Selects the matching element that comes after n-1 elements in the same parent, it doesn't care whether those elements match the same selector or not, it only cares about position.
nth-of-type(n): Selects the matching element that comes after n-1 elements that matches the same selector in the same parent.
There are 2 possible solutions for your problem
img:nth-child(2)
img:nth-of-type(1)
The question has been answered, but i would like to add something to it:
.photo:nth-child(1) would normally be written as .photo:first-child.
As was said, in this case it doesn't work because the element with the class 'photo' is not the first child of it's parent. The selector .photo:first-child (which would be the correct choice anyway) as well as the selector .photo:nth-child(1) will look for the element with the class .photo which is the first child of it's parent. If there are not elements with that class, whilst also being first child of their parents, the style won't be applied.
If you wanted to select by type, as in, select the first element that comes up with that class, no matter it's position to it's parent, the selector .photo:nth-of-type(1) should be used.
If you wanted to select the element according to it's position to it's parent, it should be .photo:nth-child(2) since the element with the class .photo is the second in relation to it's parent.
Here is a guide towards :nth-child(n) which i found very explanatory. https://css-tricks.com/useful-nth-child-recipies/
Here is a guide for :nth-of-type https://css-tricks.com/almanac/selectors/n/nth-of-type/ which is also quick and easy to understand. I hope i helped!
I am working on a website and I finally made a responsive menu that takes up the whole screen when you click on the label. The problem is, I cannot hide it(I want to use pure css) I created a new label in the menu that tries to close the menu but it doesn't work and I am assuming that it's because a child is trying to select a parent. I am new to CSS and would really appreciate any help on how to make a close button that closes the menu(width: 0%). Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Regina</title>
</head>
<body>
<div id="pagewrap">
<!--HEADER-->
<header class="pagesection" id="pageheader">
<div class="pagewidth">
<figure id="logo">
<img src="img/logo-full.png" alt="Logotype La Regina">
</figure>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div id="myNav" class="overlay">
<nav>
<label for="toggle2">☰</label>
<input type="checkbox" id="toggle2">
Home
Menu
About us
Contact
</nav>
</div>
</div>
</header>
<!--END OF HEADER-->
</div>
</body>
</html>
html,
body,
figure {
padding: 0;
margin: 0;
list-style: none;
}
#pageheader {
background: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pagesection {
padding-left: 11px;
padding-right: 11px;
}
#logo img{
width: 200px;;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#myNav > nav {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#toggle{
z-index: 3;
}
#toggle2:checked < #myNav{
width: 0%;
}
#toggle:checked + #myNav{
width: 100%;
}
Unfortunately in CSS you cant go up the parent level.
But you can do this in Pure CSS.
#pageheader {
background: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pagesection {
padding-left: 11px;
padding-right: 11px;
}
#logo img{
width: 200px;;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#myNav > nav {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#toggle{
z-index: 3;
}
#toggle:checked + #myNav{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Regina</title>
</head>
<body>
<div id="pagewrap">
<!--HEADER-->
<header class="pagesection" id="pageheader">
<div class="pagewidth">
<figure id="logo">
<img src="img/logo-full.png" alt="Logotype La Regina">
</figure>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div id="myNav" class="overlay">
<nav>
<label for="toggle">☰</label>
Home
Menu
About us
Contact
</nav>
</div>
</div>
</header>
<!--END OF HEADER-->
</div>
</body>
</html>
As you can see I've removed one of the input fields (one inside the nav) and then changed the id of the for attribute inside the nav to point to the checkbox outside the nav making use of the selector
#toggle:checked + #myNav
What you want to affect is the overlay class but i do not believe you are able to do this with CSS.
You could do this with JQuery.
However, you can modify your current code so that the original toggle is still visible in the overlay and therefore when you untick that toggle, the overlay is removed.
So, in the html remove these two lines:
<label for="toggle2">☰</label>
<input type="checkbox" id="toggle2">
In your CSS change the 'top' to relative:
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: relative;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
Give that a try otherwise, I would recommend you look into JQuery and the hide function
I would also encourage checking out Bootstrap at some point once you are comfortable with CSS since it is a great framework for mobile-first design.
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
I'm trying to style an input type file with an image. so far, so good, but now I want to set the height of that button on 40px. The problem is that, somehow, this button has a fixed height and even when i put !important next to the 40px of the size, the button still shows the original height. can somebody help me with this? thank you
here it is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="main.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input type="button" value="" class="file_input_button" />
<input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>
and the css:
.file_input_textbox
{
float: left;
background: none repeat scroll 0 0 #FF554B;
border: medium none;
color: #FFFEFA;
font-family: 'InterstateBold';
font-size: 11px;
margin: 0;
padding: 12px 15px;
width: 647px;
}
.file_input_div
{
position: relative;
width: 100px;
height: 23px;
overflow: hidden;
}
.file_input_button
{
position: absolute;
top: 0px;
background:url(btn-newsletter.jpg) no-repeat;
color: #FFFFFF;
border-style: none;
width:40px;
height:40px !important;
}
.file_input_button:hover
{
background:url(btn-newsletter2.jpg) no-repeat !important;
}
.file_input_hidden
{
font-size: 45px;
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;
}
I figured i out. As an input type="file" and input type="button" don't let me change the height, i change this line: <input type="button" value="" class="file_input_button" />
to this: <a href="#" class="file_input_button" /> and change the css to:
.file_input_div
{
position: relative;
width: 100px;
height: 38px;
overflow: hidden;
}
thank you, anyway.
The correct css syntax however, no matter if it lets you style the height or not (I don't know).
Is:
input[type=file] {
//your style rules
}