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;
Related
I am trying to use the following header menu template across my website. unfortunately, the menu hides the top part of my page content. I am a newbie. Please help. I tried, removing z-index, adding bottom margin, noting works.
The header.php code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Responsive Hamburger Menu</title>
</head>
<body>
<!-- partial:index.partial.html -->
<header class="header">
<a href="" class="logo">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg"
class="logoimage"/></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li class="contactme">Contact Me</li>
<li class="aboutme">About Me</li>
<li class="projects">Projects</li>
<li class="Home">Home</li>
</ul>
</header>
<!-- partial -->
<style>
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fffceb;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background: rgb(255, 245, 246);
color: rgb(247, 133, 152);
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.logoimage{
width: 130px;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
.Home{
order: 1;
}
.projects{
order: 2;
}
.aboutme{
order: 3;
}
.contactme{
order: 4;
}
}
#media only screen and (max-width: 600px) {
.menu{
display: flex;
flex-direction: column-reverse;
}
}
</style>
</body>
</html>
Then I have a index.php where I include this header.
The style related to my index.php is
body {
background-color: #f2f2f2;
}
.formular input:disabled {
background-color: #dddddd;
}
.hint {
color: grey;
}
.title {
font-weight: bold;
}
p.subtitle {
font-weight: bold;
}
.requiredSymbol {
color: red;
}
.formular input[readonly="readonly"] {
background-color: #dddddd;
}
form.formular,
.validationEngineContainer {
/*background-color: #FFFFFF;*/
font-family: tahoma, verdana, "sans-serif";
font-size: 12px;
padding: 20px;
border: 1px solid #a5a8b8;
width: 700px;
margin: 0 auto;
}
.formular fieldset {
margin-top: 20px;
padding: 15px;
border: 1px solid #b5b8c8;
border-radius: 5px;
}
Your header css should have a position:relative. And you can add some margin to add distance from whatever is in the body.
Example shown below:
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
position: relative;
width: 100%;
z-index: 3;
margin-bottom: 10px;
}
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 want to make a dropdown menu when you are logged in to add a spot for my account and the orders, etc..
My Mess of a page (When logged in):
Heres my code, but it doesnt really do anything but make a mess of my site. (Take note the some of the php was me attempting to display the users name on the page next to welcome.)
<?php
if (isset($_SESSION['userId'])) {
require './includes/dbh.inc.php';
/*$sql = mysqli_query($conn,"SELECT fnidUser, lnidUsers FROM users"); */
$result = mysqli_query($conn, "SELECT fnidUser FROM users");
echo "
<li class='login current2'><a href='#'>Welcome</a>
<ul>
<li class='login'><a href='#'>My Account</a></la>
<li class='login'><a href='#'>My Orders</a></la>
<li class='login'><a href='#'>My Wishlist</a></la>
<li class='login'><a href='#'>My Cart</a></la>
<li class='login'><a action='./includes/logout.inc.php' method='post' name='logout-submit'>Log out</a></la>
</ul>
</li>
";
}
else{
echo "<li class='login current2'><a href='login.php'>Login / Sign up</a></li>";
}
?>
Here is all my styling for the page.
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
.button_1 {
height: 49px;
width: 144px;
background: #FF3B3F;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: white;
font-size: 25px;
border-radius: 8px;
cursor: pointer;
}
.button_1:hover{
background-color: #752021;
color: #CCCCCC;
}
.button_1, .roundbutton:focus{
outline: 0;
}
img{
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body{
font: 15px/1.5 Arial;
padding: 0;
margin: 0;
background-color: #EFEFEF;
}
.footerc{
float: left;
}
.footerb{
float: right;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Login Page Stuff */
#login_page{
margin-top: 65px;
margin-right: 150px;
margin-bottom: 65px;
margin-left: 150px;
min-height: 500px;
}
#login_page h1{
text-align: center;
color: #FF3B3F;
font-size: 50px;
text-shadow: 2px 2px 12px #000000;
}
/* Header */
header{
background: #35424A;
color: #FFFFFF;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF3B3F 5px solid;
}
header ul a{
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
font-size: 24px;
}
header li{
float: left;
display: inline;
padding: 0px 20px 0px 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header nav{
float: right;
margin-top: 25px;
margin-right: 100px;
}
header .highlight, header .current a{
color: #FF3B3F;
font-weight: bold;
}
header .current2 a{
color: #FF3B3F;
}
header a:hover{
color: #CCCCCC;
}
.login a{
color: #FFFFFF;
text-decoration: none;
float: right;
}
.login {
color: #FFFFFF;
text-decoration: none;
float: right;
margin-top: -10px;
margin-right: 10px;
}
/* Login Form Style */
section #login_page td .form{
margin-bottom: 25px;
}
/*Showcase*/
#showcase{
min-height: 500px;
background:url('../img/iphone_showcase.png') no-repeat -50px -50px;
border-bottom: #FF3B3F 5px solid;
/*Scroll Parallax*/
background-attachment: fixed;
}
#showcase h1{
text-align: center;
color: #FF3B3F;
margin-top: 200px;
font-size: 50px;
text-shadow: 4px 4px 12px #000000;
}
/* Boxes */
#boxes{
margin-top: 65px;
}
#boxes .box{
float: left;
width: 30%;
padding: 25px;
}
#boxes .button_1{
align-content: center;
}
#boxes .box2{
float: left;
width: 48%;
min-height: 100px;
}
/* Footer */
footer{
padding: 20px;
margin-top: 200px;
border-top: #FF3B3F 5px solid;
background-color: #35424A;
color: white;
font-weight: bold;
}
footer .fpara, footer .logo{
margin-left: 100px;
}
footer nav{
float: right;
}
footer li{
float: left;
display: inline;
padding: 0px 20px 0px 20px;
}
.fbhover{
background: url('../footer image/facebook_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.fbhover:hover{
background: url('../footer image/facebook_hover_yes.png') no-repeat;
background-size: 100%;
}
.instahover{
background: url('../footer image/insta_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.instahover:hover{
background: url('../footer image/insta_hover_yes.png') no-repeat;
background-size: 100%;
}
.trhover{
background: url('../footer image/twitter_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.trhover:hover{
background: url('../footer image/twitter_hover_yes.png') no-repeat;
background-size: 100%;
}
.sphover{
background: url('../footer image/support_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.sphover:hover{
background: url('../footer image/support_hover_yes.png') no-repeat;
background-size: 100%;
}
/* Apple Store */
section #applestore{
margin-top: 65px;
}
/* Store Sections */
#main {
padding:20px 0;
}
#content {
overflow: hidden;
}
#content #left, #content #right {
float: left;
margin: 0 2%;
width: 63%;
}
#content #right {
margin-left: 0;
width: 30%;
}
#content h3 {
background: -moz-linear-gradient(#ffffff, #F6F6F6); /* FF 3.6+ */
background: -ms-linear-gradient(#ffffff, #F6F6F6); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #F6F6F6)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#ffffff, #F6F6F6); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#ffffff, #F6F6F6); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6')"; /* IE8+ */
background: linear-gradient(#ffffff, #F6F6F6); /* the standard */
border-bottom: 1px solid #E0E0E0;
color: #3C3C3C;
font-size: 12px;
font-weight: bold;
line-height: 15px;
padding: 11px 0 12px 20px;
text-transform: uppercase;
}
#content ul {
list-style:none outside none;
margin:0;
padding:0;
}
#content #left ul li {
float:left;
padding-bottom: 21px;
width: 33%;
}
#content #left ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li {
border-top: 1px solid #E7E7E7;
overflow: hidden;
}
#content #right ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li:first-child {
border-width: none;
}
#content #left ul li .img {
text-align: center;
}
#content #right ul li .img {
background-color: #FFFFFF;
float: left;
height: 94px;
text-align: center;
width: 113px;
}
#content #left ul li .img img {
height:128px;
width:128px;
}
#content #right ul li .img img {
height:70px;
margin-top: 11px;
width:70px;
}
#content #left ul li .info {
padding: 17px 20px 0 19px;
}
#content #right ul li .info {
float: left;
overflow: hidden;
padding: 17px 0 0 21px;
width: 164px;
}
#content ul li .info .title {
color: #4B4B4B;
display: inline-block;
font-size: 11px;
font-weight: bold;
line-height: 16px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
}
#content ul li .info .title:hover {
color: #049733;
}
#content #left ul li .info p {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
padding-top: 3px;
}
#content #left ul li .info .price {
background: none repeat scroll 0 0 #F7F7F7;
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 17px 0 10px;
padding: 6px 0 6px 8px;
}
#content #right ul li .info .price {
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
padding-top: 25px;
}
#content #left ul li .info .price .st {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
margin-right: 3px;
}
#content #right ul li .info .price .usual, #content #right ul li .info .price .special {
color: #7F7F7F;
font-size: 12px;
font-weight: normal;
line-height: 16px;
padding-right: 6px;
text-decoration: line-through;
}
#content #right ul li .info .price .special {
color: #FD7A01;
font-weight: bold;
text-decoration: none;
}
#content #left ul li .info .actions {
overflow:hidden;
}
#content #left ul li .info .actions a {
border: 1px solid #E0E0E0;
color: #fd7a01;
display: block;
float:right;
font-size: 11px;
font-weight: bold;
line-height: 16px;
padding: 5px;
text-decoration: none;
}
#content #left ul li .info .actions a:first-child {
color: #009832;
float:left;
}
This is kind of what I'm looking for but like text no image..
Thanks for the help :)
hi try this css from w3school for drop down using hover,
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown">
<li class='login current2'><a href='#'>Welcome</a>
<div class="dropdown-content">
<ul>
<li class='login'><a href='#'>My Account</a></la>
<li class='login'><a href='#'>My Orders</a></la>
<li class='login'><a href='#'>My Wishlist</a></la>
<li class='login'><a href='#'>My Cart</a></la>
<li class='login'><a action='./includes/logout.inc.php'
method='post' name='logout-submit'>Log out</a></la>
</ul>
</div>
</li>
</div>
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'm currently learning php by project I'am trying to implement a 3 column website. 1 column is the main column. Other two column is set to display:none. They appear onmouseover event, when pointer comes over twitter or facebook icon. how do I fit these columns in firefox alongside with chrome
here is a link http://slavesofdestiny.com/yenisite/
//style.css
.main-part h1{
font-weight: 500;
letter-spacing: 0.8px;
}
p, h1, a{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: rgba(255,255,255,0.75);
}
p{
font-size: 16px;
}
body{
background-attachment: fixed;
background-position: center;
background-color: black;
background-image: url(http://www.slavesofdestiny.com/imgs/sodarkaplan.jpg);
}
// navigator
.navigator{
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: black;
border: 2px solid white;
}
.header-image{
background-size: cover;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
height: auto;
}
/* Navigation Items */
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul {
border: 1px solid black;
font-size: 20px;
display: block;
background: rgba(0,0,0,1);
background: linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
background: -moz-linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
background: -webkit-linear-gradient(top, rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 2px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
}
ul:after {
content: "";
clear: both;
display: block;
}
ul li {
display: block;
float: left;
}
ul li:hover {
border-radius: 10px;
background: rgba(95, 0, 0, 0.4);
background: linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
background: -moz-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
background: -webkit-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
}
ul li:hover a {
color: rgba(255, 255, 255, 1);
}
ul li a {
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
.social-media{
padding: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 4.7px;
padding-bottom: 4.7px;
}
/*Content Part*/
.body-part{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 0px;
width: 1200;
min-height: 800px;
border-radius: 5px;
}
.container{
float: left;
position: relative;
text-align: center;
display: inline-block;
margin-top: -20px;
width: 800px;
min-height: 800px;
background-color: rgba(0,0,0,0.6);
padding: 0;
//border-radius: 10px;
}
#sideBarRight{
position: relative;
float: right;
width: 200px;
display: none;
vertical-align: top;
}
#sideBarLeft{
position: relative;
float: left;
width: 200px;
vertical-align: top;
}
.side-bar{
display: inline-block;
position: relative;
min-height: 50px;
vertical-align: top;
}
.main-part{
display: inline-block;
padding-top: 10px;
width: 780px;
min-height: 800px;
margin: auto;
padding-bottom: 10px;
}
.main-part div{
width: auto;
background-color:rgba(150,150,150,0.36);
border: 1px solid black;
//border-radius: 20px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 8px 8px 5px #000000;
}
.main-part div img{
//max-height: 600px;
max-width: 800px;
}
.main-part h1{
padding: 10px;
}
.main-part p{
padding: 10px;
}
#facebook-div{
background-color: #ffffff;
display: none;
}
//index.php
<?php
?>
<body>
<div class="navigator">
<?php include 'header.php'; ?>
</div>
<div class="body-part" >
<div id="sideBarLeft" class="side-bar" style="float: left;">
<div id="facebook-div" style="float: left;">
<?php include 'leftSideBar.php'; ?>
</div>
</div>
<div class="container" onmouseover="document.getElementById('sideBarRight').style.display = 'none'; document.getElementById('facebook-div').style.display = 'none';">
<div class="main-part">
<?php include 'postSelect.php' ?>
</div>
<?php include 'footer.php';?>
</div>
<div id="sideBarRight" class="side-bar">
<?php include 'sidebar.php';?>
</div>
</div><!--end body-part-->
</body>
A couple things that might help:
Your <head> tag is inside your <body> tag as of right now. Especially when using templates, it's important to check your resulting html code. Take a look at this: http://html5.validator.nu/?doc=http%3A%2F%2Fslavesofdestiny.com%2Fyenisite%2Findex.php
Try position: absolute on your sidebars. If you give their parent a position:relative, you should be able to put them exactly where you want them with the top, left, and right style attributes.