am using the following code to create popup and when popup appears link in parent window are active *how do i make the parent page inactive while popup active
CSS
.popup { position: fixed;background: rgba(255,255,255,.6); left: 25%; top: 25%; width: 50%; height: 350px; margin-top: -75px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px;index: 1;}
.popup .close {position: absolute; right: -5px; top: -5px; text-decoration: none; background-color: #c41e1e; color: #fff; line-height: 1; border-radius: 50px; width: 1em; text-align: center; z-index: 3;}
h3 {margin: 0; padding: 5px 10px; background-color:#8AC007;}
.mask {background-color: #000; z-index: 1; position: absolute; width: 100%; height: 100%; opacity: 0.5;}
HTML
<div class="popup">
<h3>Select Your City</h3>
<a href="#" class="close"
onclick="document.querySelectorAll('.popup')[0].style.display = 'none';
document.querySelectorAll('.mask')[0].style.display = 'none';
return false;">×</a>
<p><h4>Major City's</h4>
</p>
</div>
only popup should be active all the other should be inactive
Here is a jQuery solution.
<style>
.popup { position: fixed;background: rgba(255,255,255,.6); left: 25%; top: 25%; width: 50%; height: 350px; margin-top: -75px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px;index: 1; box-shadow: 2px 2px 10px rgba(0,0,0,0.6); }
.popup .close {position: absolute; right: -5px; top: -5px; text-decoration: none; background-color: #c41e1e; color: #fff; line-height: 1; border-radius: 50px; width: 1em; text-align: center; z-index: 3; cursor: pointer; padding: 2px 3px 3px 3px; }
.popup .close:hover { background-color: #888; }
h3 {margin: 0; padding: 5px 10px; background-color:#8AC007;}
.mask {background-color: #000; z-index: 1; position: absolute; width: 100%; height: 100%; opacity: 0.5;}
#supawrap { display: none; height: 100%; width: 100%; position: absolute; background-color: rgba(0,0,0,0.8); top: 0; left: 0; }
</style>
HTML
<div id="supawrap">
<div class="popup">
<h3>Select Your City</h3>
<div class="close">×</div>
<p><h4>Major City's</h4>
</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#supawrap').fadeIn('fast');
$('.close').click(function() {
$('.popup').fadeOut('fast');
$('#supawrap').delay(300).fadeOut('fast');
});
});
</script>
#Overlay{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
opacity:0;
z-index:2; //lower than your pop up
background-color:#222;
background-color:rgba(0,0,0,0.8);
overflow:hidden;
display:none;
}
make display:block; where you give link to pop up
Related
I have images in a file with its name in the database. And I would like to display it in a responsive list. But I would like to add for each image an icon in a corner (or text below the frame) of the image to remove it if necessary. here is my html and php code
<?php
$sqlimage = "SELECT * FROM images where `id_user` = '".$customer_id."'";
$result = mysqli_query($conn, $sqlimage);
foreach ($result as $imageShow) {
?>
<div class="container">
<h1>Image Galerry</h1>
<div class="image-container">
<div class="image">
<img src="<?php echo 'Media/'.$imageShow['file_name'] ?>" alt="">
<div>
<i class='fa fa-trash' style='color: red'></i>
</div>
</div>
<div class="linkDelete"
style="font-size: 13px;position:absolute;text-align:center; width:26px; padding-top:3px">
Delete
</div>
<?php
}
mysqli_close($conn);
?>
</div>
<div class="popup-image">
<span>×</span>
<img src="Media/3-20220714-68033.jpg" alt="">
</div>
</div>
And here is my CSS3 code to display the images
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: relative;
min-height: 100vh;
background-color: #191C24 !important;
}
.container h1{
font-size: 40px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: normal;
padding: 15px;
color: #333;
text-align: center;
text-transform: capitalize;
}
.container .image-container{
display: flex;
flex-wrap: wrap;
gap:15px;
justify-content: center;
padding: 10px;
}
.container .image-container .image{
height: 250px;
width: 350px;
border: 10px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
overflow: hidden;
cursor: pointer;
float: left;
}
.linkDelete{
float: left;
clear: left;
}
.container .image-container .image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .image-container .image a{
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .image-container .image:hover img{
transform: scale(1.1);
}
.container .popup-image{
position: fixed;
top: 50px;
left: 0px;
background: rgba(0, 0, 0, .9) ;
height: 100%;
width: 100%;
z-index: 100%;
display: none;
}
.photo-name{
position: absolute;
width: 100%;
bottom: 30px;
text-align: center;
background-color: cyan;
}
/* .image-container{
position:relative;
}
.image-container a{
position:absolute;
bottom:0px;
right:0px;
} */
.container .popup-image span{
position: absolute;
top: 0;
right: 10px;
font-size: 60px;
font-weight: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid #333;
border-radius: 5px;
width: 75%;
object-fit: cover;
}
#media (max-width:768px){
.container .popup-image img{
width: 95%;
}
}
I would like to have an image and on this image there is the icon which tells me the link to delete which is already prepared
I tried several ways but each time I find the icon in a position since the images with different dimensions.
If there was a possibility if not below the image a link to delete it and thank you in advance.
Set position: relative; on .image. Then set a class on the parent div for the icon. I called it .icon-wrapper. Set this parent to position: absolute; with top: 0;. Then you can use width and height: 100%; so it falls directly on top of your .image div.
Then you can use display: flex; with align-items: center; and justify-content: center; on .icon.wrapper to align the icon vertically and horizontally.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
min-height: 100vh;
background-color: #191C24 !important;
}
.container h1 {
font-size: 40px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: normal;
padding: 15px;
color: #333;
text-align: center;
text-transform: capitalize;
}
.container .image-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding: 10px;
}
.container .image-container .image {
height: 250px;
width: 350px;
border: 10px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
overflow: hidden;
cursor: pointer;
float: left;
}
.linkDelete {
float: left;
clear: left;
}
.container .image-container .image img {
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .image-container .image a {
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .image-container .image:hover img {
transform: scale(1.1);
}
.container .popup-image {
position: fixed;
top: 50px;
left: 0px;
background: rgba(0, 0, 0, .9);
height: 100%;
width: 100%;
z-index: 100%;
display: none;
}
.photo-name {
position: absolute;
width: 100%;
bottom: 30px;
text-align: center;
background-color: cyan;
}
/* .image-container{
position:relative;
}
.image-container a{
position:absolute;
bottom:0px;
right:0px;
} */
.container .popup-image span {
position: absolute;
top: 0;
right: 10px;
font-size: 60px;
font-weight: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid #333;
border-radius: 5px;
width: 75%;
object-fit: cover;
}
#media (max-width:768px) {
.container .popup-image img {
width: 95%;
}
}
i {
font-size: 3em;
color: red;
}
.image {
position: relative;
}
.icon-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
<div class="container">
<h1>Image Galerry</h1>
<div class="image-container">
<div class="image">
<img src="https://dummyimage.com/300/000/fff" alt="">
<div class="icon-wrapper">
<i class="fa-solid fa-trash"></i>
</div>
</div>
<div class="linkDelete" style="font-size: 13px;position:absolute;text-align:center; width:26px; padding-top:3px">
Delete
</div>
</div>
<div class="popup-image">
<span>×</span>
<img src="Media/3-20220714-68033.jpg" alt="">
</div>
</div>
Thanks for adding the delete icon. But this one blocked me from displaying the full size image when I click inside the photo (the popup-image class action).
In the CSS
.container .popup-image img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid #333;
border-radius: 5px;
width: 75%;
object-fit: cover;
}
#media (max-width:768px){
.container .popup-image img{
width: 95%;
}
}
And in the HTML
<div class="popup-image">
<span>×</span>
<img src="Media/3-20220714-68033.jpg" alt="">
</div>
The button and text fields on my login page are unresponsive / I am unable to click or interact with them. It worked fine yesterday and is linked to a PHP database. I have no idea what code I changed but it was possibly CSS that has stopped it working. Any advice would be great as I am lost.
I have tried editing CSS but to avail.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Maoine in Eirinn (MIE) Wild Atlantic Gaeltacht Properties</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="container">
<?php include("includes/header.html");?>
<?php include("includes/nav.html");?>
<div id="content">
<?php
if (empty($_SESSION))
session_start();
if (isset($_SESSION['errors'])) {
echo "<div class='form-errors'>";
foreach($_SESSION['errors'] as $error)
{
echo "<p>";
echo $error;
echo "</p>";
}
echo "</div>";
}
unset($_SESSION['errors']);
?>
<div id="login">
<h3> Login </h3>
<form action="login_action.php" method="POST">
<p>
Username: <input type="text" name="adminname" required="required">
</p><p>
Password: <input type="password" name="password" required="required">
</p><p>
<input type="submit" value="Login">
</p>
</form>
</div>
</div>
<?php include("includes/footer.html");?>
</div>
</body>
</html>
body{background-color: #EEEEEE; }
#container{margin: auto;
width: 100%;
background-color: #EEEEEE;
border: 10px solid #EEEEEE;
}
#header{
background-color: #449966;
height: 110px;
margin-top: 38px;
}
#nav{background-color: #000000;
clear: left;
}
#moira{
float:right;
padding-right: 50px;
position: relative;
margin-left: 50px;
}
#martin{
float:right;
padding-right: 50px;
position: relative;
margin-left: 50px;
}
#openinghours{`
width: 30%;
float:left;
margin-left: 100px;}
#contactus{width: 50%;
float:left;
margin-bottom: 200px;}
#content{background-color: #EEEEEE;
padding: 50px;
min-height: 500px;
text-align: center;
}
#content a {background-color: #449966; color: white; text-decoration:none; padding:5px;}
#content a:hover {background-color: #878787; color: white;}
#footer{background-color: #449966;
height: 50px;
padding: 10px;
display: flex;
margin-top: 200px;
bottom: 0;
width: 100%;
position: fixed;
}
#comments {width: 70%; float: left;}
.container{
position: relative;
border-radius: 8px;
width: 90%;
height: 500px;
overflow: hidden;
}
#login{z-index: 100;}
#logo {float:left;}
#copyright {float:left;}
#footer ul{ text-align: center;
width: 50%;
margin: auto;}
#footer a{ color:#449966; }
#socialMedia{float:right; width: 150px; display: flex;}
#sitename{text-align: center;
width: 100%;}
#languageimage img{
border: 1px solid #ddd;
border-radius: 50%;
float:right;
display: flex;
vertical-align: top;}
table td {padding: 10px;}
table {width: 100%}
table tr:nth-child(1) {
background-color: #449966;
}
table tr {
background-color:#FFFFFF;
}
#displayproperties{width: 75%;}
#addtestimonial{width: 25%; margin-left: 50px; float: right;}
#addtestimonial table {border: 0px;}
#addtestimonial table tr td {padding: 0px; border: 0px;}
#addtestimonial table tr {background-color: #c6e1e0; border: 0px;}
.show {display:block;}
#commentform {
font-family: Arial;
width: auto;
}
label { float:left;
width: 50px;
clear: left;
text-align: left;
padding-right: 15px;
margin-top: 10px;
}
input, textarea {margin-top: 10px; }
#mysubmit { margin-left:65px;
padding-bottom: 10px;
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #449966;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#youtubewaw{margin-bottom: 200px;}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #449966;
color: white;
}
.dropdown-content a:hover {
background-color: #449966;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media only screen and (max-width: 1200px) {
#openinghours{float:none;}
#addtestimonial{float:none;}
#media only screen and (max-width: 768px) {
body{font-size:90%;}
#displayproducts td:nth-child(1){display:none;}
#commentform{width: auto; font-size: 80%;}
#mysubmit{margin-left: 0;}
#openinghours{float:none;}
td:nth-of-type(4){display:none;}
#content{ padding: 0px;}}
#media screen and (max-width: 768px) {
#sitename{display:none;}
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
#sitename{display:none;}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
I noticed you have an accidental ` character.
#openinghours{`
width: 30%;
float:left;
margin-left: 100px;}
Also you've got some id called #mysubmit but your submit input doesn't use that ID.
I removed the below and everything works again. I don't understand why but I am fairly new to this
.container{
position: relative;
I am setting up an ID card printing software in PHP both for landscape and portrait mode. The problem is with the print() command it always takes the standard page sizes A4, A3... Because of this it prints the id in a specific section of the card.
Can anyone help or recommend something? Perhaps there is another way to print it without print preview in chrome?
<style>
#page {
/*size: A5;
margin: 5px;*/
width: 53.98mm;
height: 85.60mm;
margin: 0px;
}
#media print {
html, body {
/*width: 210mm;
height: 297mm;*/
/*width: 218mm;
height: 340mm;*/
}
}
#printablediv {
width: 53.98mm;
height: 85.60mm;
}
.idcardreport {
font-family: arial;
-webkit-print-color-adjust: exact;
}
/*IDcard Front Part Css Code*/
.idcardreport-frontend{
margin: 2px;
float: left;
border: 1px solid #000;
padding: 10px;
width: 260px;
text-align: center;
height:370px;
background-size: 100% 100% !important;
}
.logo img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.pick img{
width: 60px;
height: 80px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.signe img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
h3 {
font-size: 14px;
color: #1A2229;
text-align: center;
}
h2 {
font-size: 10px;
color: #1A2229;
text-align: center;
}
h1 {
font-size: 18px;
color: #1A2229;
text-align: center;
}
p {
text-align: left;
font-size: 12px;
margin-bottom: 0px;
margin-top: 1px;
color: #1A2229;
}
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
white-space:nowrap;
display:block;
bottom:0;
}
</style>
<style>
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0px;
/*right: -400px;*/
top: 0;
}
}
button.btn.btn-dark {
padding: 10px;
position: relative;
top: -390px;
}
</style>
<button type="button" class="btn btn-dark" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
<div class="wrapper" id="section-to-print"></div> //add ID on the section u want to print
I have a tooltip in my project.
What I like to do is add active button to my tooltip.
Problem is that the tooltip is displaying a HTML tags not a button...
Here is the effect of my work:-)
enter image description here
Bellow is my code.
Please if some one can help. Thank You.
/* Frame */
.frame {
height: 150px;
max-width: 1170px;
/*line-height: 130px;*/
/* overflow:visible !important;*/
}
.frame ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
font-size: 14px;
}
.frame ul li {
float: left;
width: 232px;
height: 100%;
margin: 0 2px 0 0;
padding: 0;
background: #f1f1f1;
color: #00b5f6;
text-align: center;
cursor: default;
display:flex;
}
.frame ul li:hover{
color: #fff;
background: #00b5f6;
}
/* setup tooltips */
.tooltip {
position: relative;
z-index:1;
}
li .tooltip{
overflow:visible;
}
.tooltip:before,
.tooltip:after {
position:absolute;
display:inline-block;
opacity: 0;
pointer-events: none;
width:225px;
}
.tooltip:after {
border-right: 6px solid transparent;
border-top: 6px solid #00b5f6;
border-left: 6px solid transparent;
content: '';
height: 0;
top: -5px;
left: 20px;
width: 0;
display:none;
}
.tooltip:before {
background: #00b5f6;
border-radius: 2px;
color: #fff;
content: attr(data-title);
font-size: 12px;
padding: 6px 10px;
top: 0px;
left: 0px;
white-space: nowrap;
height:118px;
max-width:212px !important;
display:block;
word-wrap: break-word;
text-align: left;
white-space: pre-line;
}
/* expand */
.tooltip.expand:before {
transform: scale3d(.2,.2,1);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:after {
transform: translate3d(0,6px,0);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
opacity: 1;
transform: scale3d(1,1,1);
}
.date_event{
text-align:left; width:232px; position:absolute; padding: 5px 0 0 5px; font-style: italic; max-height:20px; z-index:-1;
}
.suwak{
width:232px; height:150px; margin-left:auto; margin-right:auto; overflow-y:visible; overflow-x:hidden; border:solid 1px #000;
}
.title_event{
font-size:16px; font-weight:bold; width:232px; height:130px; vertical-align: middle !important; display: table-cell !important; margin-left:auto; margin-right:auto;
}
<?php $tooltip = "Lorem ipsum dolor sit amet enim.";
$tooltip = $tooltip."<div class='btn_google'>google</div>"; ?>
<div class="suwak">
<div class="frame" id="basic">
<li class="tooltip expand" data-title="<?php echo $tooltip;?>">
<div class="date_event">02.02.2017</div>
<div style="text-align: center; width:232px;">
<div class="title_event">Some title</div>
</div>
</li>
</div>
</div>
That li is not need, just change it to div
Also why not just add a hidden div block as tooltip container, on hover show it (just like the tooltip):
.expand:hover>div {
display: none;
height: 148px;
width: 232px;
}
.mytitle {
display: none;
}
.expand:hover>.mytitle {
display: block;
background: red;
}
/* Frame */
.frame {
height: 150px;
max-width: 1170px;
/*line-height: 130px;*/
/* overflow:visible !important;*/
}
.frame ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
font-size: 14px;
}
.frame ul li {
float: left;
width: 232px;
height: 100%;
margin: 0 2px 0 0;
padding: 0;
background: #f1f1f1;
color: #00b5f6;
text-align: center;
cursor: default;
display: flex;
}
.frame ul li:hover {
color: #fff;
background: #00b5f6;
}
/* setup tooltips */
.tooltip {
position: relative;
z-index: 1;
}
li .tooltip {
overflow: visible;
}
.tooltip:before,
.tooltip:after {
position: absolute;
display: inline-block;
opacity: 0;
pointer-events: none;
width: 225px;
}
.tooltip:after {
border-right: 6px solid transparent;
border-top: 6px solid #00b5f6;
border-left: 6px solid transparent;
content: '';
height: 0;
top: -5px;
left: 20px;
width: 0;
display: none;
}
.tooltip:before {
background: #00b5f6;
border-radius: 2px;
color: #fff;
content: attr(data-title);
font-size: 12px;
padding: 6px 10px;
top: 0px;
left: 0px;
white-space: nowrap;
height: 118px;
max-width: 212px !important;
display: block;
word-wrap: break-word;
text-align: left;
white-space: pre-line;
}
/* expand */
.tooltip.expand:before {
transform: scale3d(.2, .2, 1);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:after {
transform: translate3d(0, 6px, 0);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
opacity: 1;
transform: scale3d(1, 1, 1);
}
.date_event {
text-align: left;
width: 232px;
position: absolute;
padding: 5px 0 0 5px;
font-style: italic;
max-height: 20px;
z-index: -1;
}
.suwak {
width: 232px;
height: 150px;
margin-left: auto;
margin-right: auto;
overflow-y: visible;
overflow-x: hidden;
border: solid 1px #000;
}
.title_event {
font-size: 16px;
font-weight: bold;
width: 232px;
height: 130px;
vertical-align: middle !important;
display: table-cell !important;
margin-left: auto;
margin-right: auto;
}
.expand:hover>div {
display: none;
}
.mytitle {
height: 0px;
width: 0px;
display: none;
}
.expand:hover>.mytitle {
height: 150px;
width: 232px;
display: block;
background: red;
}
<div class="suwak">
<div class="frame" id="basic">
<div class="expand" data-title="">
<div class="mytitle">my title <button>123</button><button>123</button></div>
<div class="date_event">02.02.2017</div>
<div style="text-align: center; width:232px;">
<div class="title_event">Some title</div>
</div>
</div>
</div>
</div>
You can do this without using Javascript. Remove that li and do something like this in a simple way:
.box{
width: 200px;
height: 100px;
position: relative;
background-color: silver;
text-align: center;
}
.box:hover .tip{
display: block;
}
.tip{
display: none;
background-color: yellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="box">
<div class="tip">
This is tip content and this is <button>button</button> in it
</div>
Box content
</div>
UPDATE
from the link that you provided on your comment (uw.edu.pl) This is what you are trying to do:
ul{
list-style: none;
}
ul.main{
display: inline-block;
margin-top: 50px;
}
ul.main>li{
width: 200px;
height: auto;
position: relative;
background-color: silver;
text-align: center;
}
ul li ul{
display: none;
}
ul li a{
display: block;
height: 100%;
text-decoration: none;
color: white;
}
ul li:hover ul{
display: block;
}
ul.tip{
display: none;
background-color: yellow;
position: absolute;
bottom: 100%;
padding: 0;
height: auto;
left: 0;
right: 0;
z-index: 1;
}
<ul class="main">
<li>
Box content 1
<ul class="tip">
<li>
This is tip content and this is <button>button1</button> in it
</li>
</ul>
</li><li>
Box content 2
<ul class="tip">
<li>
This is tip content and this is <button>button2</button> in it
</li>
</ul>
</li><li>
Box content 3
<ul class="tip">
<li>
This is tip content and this is <button>button3</button> in it
</li>
</ul>
</li><li>
Box content 4
<ul class="tip">
<li>
This is tip content and this is <button>button4</button> in it
</li>
</ul>
</li>
</ul>
I have read some other answers but have still not been able to get the settings right.
The columsheader does not start scrolling up again.
Here is my php:
<div id="columnsHeader" class="affix" data-offset-top="800" data-offset-bottom="400" data-spy="affix">
Here is my css:
.itemList {
position: relative;
}
.extrafieldscolumnsHeader {
position: absolute;
top: -25px;
width: 818px;
color:white;
min-height: 28px;
padding-top: 5px;
padding-left:8px;
}
#columnsHeader.affix {
border-top: 40px solid #FFFFFF;
position: fixed;
top: 43px;
width: 818px;
}
#columnsHeader.affix-bottom {
position: absolute; /* Start scrolling again. */
top: auto; /* Override the top position above. */
bottom: 55px; /* It should stop near the bottom of its parent. */
}
Here is the temp url:
http://108.163.203.210/~goodwin/xjoomla/index.php?option=com_k2&view=itemlist&layout=category&task=category&id=12&Itemid=143
i think this may works for you and you just need to set margin-bottom of <BODY>respect to your footer...
HTML:
<footer>
<button class="filter">filter ▶</button>
<button class="wgit">wGit ▶</button>
</footer>
CSS:
body > footer {
width: 100%;
position: fixed;
background-color: #ffffff;
bottom: 0px;
right: 0px;
height: 40px;
border-top: 1px solid #000000;
}
body > footer > button{
font-size: 16px;
float: right;
margin:5px 15px 5px 10px;
width: 80px;
padding: 3px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
body > footer > button:hover{
color: #000000;
box-shadow: 0px 0px 10px #c3c3c3 inset;
}
.filter-child {
display: none;
background-color: #ffffff;
position: fixed;
right:15px;
bottom:50px;
padding:5px;
border: 1px dashed #c3c3c3;
border-radius: 10px;
}
.filter-child li{
list-style: none;
padding: 5px;
text-align: center;
background-color: #f3f3f3;
margin: 2px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
.filter-child li:hover{
box-shadow: 0px 0px 5px #3a3a3a inset;
}
.filter-child a{
color: #000000;
}
and you can follow this links also...
http://www.cssstickyfooter.com/
http://css-tricks.com/snippets/css/sticky-footer/