I need to style my password input box and
input password is not conforming to my css style sheet. My input text is styled correctly, and it is conforming to my style sheet, however, my type password input is not. In the css file, look for changes of input[type=password]
CSS Source Code
/* BASIC */
html {
}
body {
background-image: url(img/logo.PNG);
}
a {
color: #92badd;
display:inline-block;
text-decoration: none;
font-weight: 400;
}
h2 {
text-align: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display:inline-block;
margin: 40px 8px 10px 8px;
color: #cccccc;
}
h2.smallfont {
font-size: 10px;
font-weight: 1000;
text-transform: uppercase;
display:inline-block;
margin-left: 1px;
color: white;
}
h4 {
text-align: center;
font-size: 16px;
font-weight: 1000;
text-transform: uppercase;
display:inline-block;
margin: 0px 0px 1000px 175px;
color: gold;
}
/* STRUCTURE */
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
}
#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: black;
padding: 30px;
width: 90%;
max-width: 450px;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}
#formFooter {
background-color: #f6f6f6;
border-top: 1px solid #dce8f1;
padding: 25px;
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
/* TABS */
h2.inactive {
color: #cccccc;
}
h2.active {
color: #0d0d0d;
border-bottom: 2px solid #5fbae9;
}
/* FORM TYPOGRAPHY*/
input[type=button], input[type=submit], input[type=reset] {
background-color: #56baed;
border: none;
color: black;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background-color: #39ace7;
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
input[type=text] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type=text]:focus {
background-color: white;
border-bottom: 2px solid #5fbae9;
}
input[type=text]:placeholder {
color: #cccccc;
}
input[type=password] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type=password]:focus {
background-color: white;
border-bottom: 2px solid #5fbae9;
}
input[type=password]:placeholder {
color: #cccccc;
}
/* ANIMATIONS */
/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/* Simple CSS3 Fade-in Animation */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fadeIn.first {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.fadeIn.second {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.fadeIn.third {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.fadeIn.fourth {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
display: block;
left: 0;
bottom: -10px;
width: 0;
height: 2px;
background-color: #56baed;
content: "";
transition: width 0.2s;
}
.underlineHover:hover {
color: #0d0d0d;
}
.underlineHover:hover:after{
width: 100%;
}
/* OTHERS */
*:focus {
outline: none;
}
#icon {
width:60%;
}
Relevant HTML block...
<!-- Login Form -->
<form action="loginSystem.php" method="post">
<input type="text" id="login" class="fadeIn second" name="login" placeholder="username/e-mail">
<input type="password" id="pass" class="fadeIn third" name="password" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
I am working on a simple login page with a login form. When i added < !DOCTYPE HTML>, the input field sketched further than the container when set to 100% width. I have searched for solution and noticed questions asked consider doctype messing up css is regarding a specific problem.
Below are my codes;
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 25px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -18px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="">
<title>Member Login</title>
<link rel="stylesheet" href="fonts/FontAwesome/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/login.css">
</head>
<body>
<div class="loginbox">
<img class="loginavatar" src="assets/images/user.png" draggable="false" />
<h1>Login Form</h1>
<div class="inputContainer">
<form method="POST" action="">
<!--<p>Username</p>-->
<div class="usernithicon inputBox">
<i class="fa fa-user logico"></i>
<input type="text" id="usern" name="username" required><label for="usern">Username</label></div>
<!--<p>Password</p>-->
<div class="passnithicon inputBox">
<i class="fa fa-lock logico"></i>
<input type="password" id="pswrd" name="password" required><label for="pswrd">Password</label></div>
<input type="checkbox" id="remberme" name="remember"><label for="remberme">Remeber Me</label>
<input type="submit" name="" value="Login">
Forgot password?<br>
Create An Account
</form>
</div>
</div>
</body>
</html>
When this renders in browser the username and password input field will become stretched and i was able to use width:90%;, which works fine but i would love to have it set to width:100%; (which works perfectly without added the doctype tag) but when the doctype code is added, it becomes stretched.
Additional Issue: The background image i added to the body wont cover the whole screen, it breaks in the middle and repeat. i tried adding background-repeat:none; but didn't work. but if i remove the doctype tag, the background fills up the page as expected.
How do i solve this?
base on what you want i added display: inline-flex; in your input wrappers
Try this
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 20px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
display: inline-flex;
align-items: baseline;
width: 100%;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -22px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
For the background try this
body, html{
height: 100%;
background-image: url('your_image_path')
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Using fullPage.js (a jQuery scrolling menu), I have the following situation:
I have an unordered list - the source of which is an SQL database (using PHP to echo out).
There are only two items per page being echoed out.
At the top of the page, I have a simple Menu:
First Item
Second Item.
I want to link to the first and second items in the list.
Before the PHP, I have the following:
<a name="theList">
I have to set up .. but how do I target the different children within the list?
Baffling me -- if anyone could help, I'd very very thankful!
The correct way to use fullPage.js should be:
1 .Have a menu with data-menuanchor:
<ul id="menu">
<li data-menuanchor="theList1">First slide</li>
<li data-menuanchor="theList2">Second slide</li>
<li data-menuanchor="theList3">Third slide</li>
<li data-menuanchor="theList4">Fourth slide</li>
</ul>
2 .config with js: anchors: ['theList1', 'theList2', 'theList3', 'theList4'],
3 .add CSS rule to style
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
anchors: ['theList1', 'theList2', 'theList3', 'theList4'],
menu: '#menu',
slidesNavigation: true
});
#CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section{
text-align:center;
}
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
.twitter-share-button{
position: fixed;
z-index: 99;
right: 149px;
top: 9px;
}
#download{
margin: 10px 0 0 0;
padding: 15px 10px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
vertical-align: middle;
cursor: pointer;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
#download a{
text-decoration:none;
color:#fff;
}
#download:hover{
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: #2F96B4;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-ms-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
#infoMenu{
height: 20px;
color: #f2f2f2;
position:fixed;
z-index:70;
bottom:0;
width:100%;
text-align:right;
font-size:0.9em;
padding:8px 0 8px 0;
}
#infoMenu ul{
padding: 0 40px;
}
#infoMenu li a{
display: block;
margin: 0 22px 0 0;
color: #333;
}
#infoMenu li a:hover{
text-decoration:underline;
}
#infoMenu li{
display:inline-block;
position:relative;
}
#examplesList{
display:none;
background: #282828;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 20px;
float: left;
position: absolute;
bottom: 29px;
right: 0;
width:638px;
text-align:left;
}
#examplesList ul{
padding:0;
}
#examplesList ul li{
display:block;
margin: 5px 0;
}
#examplesList ul li a{
color: #BDBDBD;
margin:0;
}
#examplesList ul li a:hover{
color: #f2f2f2;
}
#examplesList .column{
float: left;
margin: 0 20px 0 0;
}
#examplesList h3{
color: #f2f2f2;
font-size: 1.2em;
margin: 0 0 15px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
padding: 0 0 5px 0;
}
/* Demos Menu
* --------------------------------------- */
#demosMenu{
position:fixed;
bottom: 10px;
right:10px;
z-index: 999;
}
<link href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<ul id="menu">
<li data-menuanchor="theList1">First slide</li>
<li data-menuanchor="theList2">Second slide</li>
<li data-menuanchor="theList3">Third slide</li>
<li data-menuanchor="theList4">Fourth slide</li>
</ul>
<div id="fullpage">
<div class="section" id="section0">One</div>
<div class="section" id="section1">
<div class="slide">Two 1</div>
<div class="slide">Two 2</div>
</div>
<div class="section" id="section2">Three</div>
<div class="section" id="section3">Four</div>
</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>
How would I do it so when my model opens, it doesn't automatically scroll me all the way to the bottom of the page
<style>
body {
color: #333;
height: 80em;
z-index: 1000;
}
.wrap {
padding: 40px;
text-align: center;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
padding: 8px;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eee solid 1px;
text-align: right;
}
.thebutton {
display: inline-block;
color: #fff!important;
padding: 6px 12px!important;
border-radius: 5px;
box-shadow: 0 3px 0 1px rgba(0, 0, 0, .3);
line-height: 1;
white-space: nowrap;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
margin-top: 3px;
font-size: 11px;
text-shadow: 0 1px #333;
font-weight: 700;
margin-right: 5px
}
.yes {
background-color: #00813e;
border-color: #8eda55;
float: right
}
.yes:hover {
background-color: #00ab54;
border-color: #b9f373
}
.no {
background-color: #c6165f;
border-color: #f57aad;
float: right
}
.no:hover {
background-color: #d45087;
border-color: #f89dc2
}
#close {
display: none;
}</style>
and also how would I go about aligning the yes and no boxes shown below to the right that say YES and NO without the text affecting them like when I type more text, the box expands
<div class="modal" id="confirm" aria-hidden="true">
<div class="modal-dialog">
<div class="contentHeader headerRed">
<div class="inside">
FOOKIN MODAL BOX M8
</div>
</div>
<img src="https://avatar-retro.com/habbo-imaging/avatarimage?figure=<?php
echo mysql_result(mysql_query("SELECT look FROM users WHERE id = '" . $_SESSION['user']['id'] . "'"), 0);
?>&direction=2&head_direction=3&gesture=sml&action=wav" align="left">
<br>
Hey there <b>{username}</b><br>Are you sure you want to<br> sign out of the hotel??
<br/><div class="thebutton yes">YES</div><br><br><br> <div class="thebutton no">NO</div>
</div>
</div>
For positioning the modal, you are using:
.modal-dialog {
top: -100%;
}
Try adjusting that.
As far as the buttons, remove the <br>'s and then either float the buttons or change their display to inline-block.