The situation is that I have a bootstrap modal where I have a form to login, if the user is inactive or password was incorrect, jump a mistake, but when you click to log in if you get this error window isn't open for show it, and so the user isn't aware of the passing.
I would like to know how can I do that when I skip the error I open the modal to display it.
nav ul{
list-style:none;
margin:2em 0;
}
nav li{
margin-right:2em;
display:inline-block;
}
.modal-body, .modal-header{
background:#2c3338;
color:#606468;
}
#signin{
width:auto;
height:auto;
}
#signin span{
background-color:#363b41;
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
color:#606468;
display:block;
float:left;
height:50px;
line-height:50px;
text-align:center;
width:50px;
}
#signin input{
height:50px;
}
#signin input{
background-color:#3b4148;
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
color:#606468;
margin:0 0 2% 5%;
padding:0 16px;
width:198px;
}
#signin input:focus{
border:2px solid #785da1;
outline:none;
box-shadow:0 0 10px #785da1;
}
#signin input[type="submit"]{
width:280px;
height:55px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#624291;
color:#eee;
font-weight:bold;
margin:2% 0 2% 2%;
}
#signin input[type="submit"]:hover{
background-color:#7842A6;
}
#signin a{
color:#eee;
text-decoration:none;
}
#signin a:hover{
text-decoration:underline;
}
#signin p{
width:300px;
height:auto;
}
#signin input{
border:none;
font-family:'Calibri';
font-size:14px;
line-height:1.5em;
padding:0;
-webkit-appearance:none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
<title>SSSS!</title>
</head>
<body>
<?php
include 'fn.php';
iniciarSesion();
$msg = "";
if(isset($_GET['miss']))
{
if($_GET['miss']=="1")
{
$msg= '<p class="text-danger text-center small" style="margin-bottom: 0;"> No existe este usuario con esta contraseña.. </p>';
}
elseif($_GET['miss']=="2")
{
$msg= '<p class="text-danger text-center small" style="margin-bottom: 0;"> Este usuario esta inactivo. </p>';
}
}
?>
<div>
<header>
<nav role="navigation" class="noround navbar-inverse">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"> Barra de navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-left" style="margin:10px 0 10px 0">
<img src="fotos/logoH.png" />
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Registrate <span class="fa fa-user-plus" style="font-size:16px; margin-top:5px"></span></li>
<li> Identificate <span class="fa fa-user" style="font-size:16px; margin-top:5px"></span><span class="caret"></span></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="modal fade" id="modalLogin" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times white"></i></button>
</div>
<div class="modal-body text-center">
<?php echo $msg; ?>
<form action="action.php?action=login" method="post" class="form" id="signin">
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-user"></span>
<input type="text" placeholder="ejemplo#ejemplo.com" name="emailLog" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-lock"></span>
<input type="password" placeholder="contraseña" name="passwd" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p class="text-center">Has olvidado la contraseña?</p>
<p style="height:70px;"><input type="submit" class="btn" id="enviar" value="ENTRAR" /></p>
</div>
</form>
<p>No eres miembro? Registrate Ahora <span class="fa fa-arrow-right"></span></p>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't need to put my "action.php", i know php and I have it right, when I process the form if it has an error is spent by the URL via GET, I need to know how to make the window opens to display the error
THANK YOU VERY MUCH TO ALL :)
Related
$('.collapse').on('shown.bs.collapse', function (e) {
$('.collapse').not(this).removeClass('in');
});
$('[data-toggle=collapse]').click(function (e) {
$('[data-toggle=collapse]').parent('li').removeClass('active');
$(this).parent('li').toggleClass('active');
});
header {
background-color:#3e3e3e;
}
header .logodesc img {
padding-top: 30px;
}
header .btn-prihlasit-cont{
padding-top:34px;
}
header .prihlasit {
padding: 7px 14px 7px 16px;
color: #404040;
font-size: 12px;
font-weight: bold;
text-transform:uppercase;
text-align: center;
background-color: #F2F2F2;
min-width: 210px;
}
.navbar {margin-bottom:0;}
.navbar-inverse{
background-color:#3e3e3e;
border:none;
}
.navbar-inverse .navbar-nav>li>a {
color:#fff;
}
.navbar-inverse .navbar-toggle {
border-color:transparent;
cursor:pointer;
color:#fff;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active, .navbar-inverse .navbar-nav>li>a:focus {
color:#626262;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
color:#626262;
background-color: transparent;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
background-color: transparent;
color:#fff;
}
#topmenu {
border-bottom:solid 1px #626262;
border-radius:0;
}
#topmenu .dropdown, #topmenu .dropup{
background: url(../img/dropdbg.png) top right no-repeat;
}
#topmenu > ul > li:nth-child(2){
background: none;
}
#media (max-width: 767px) { /* XS */
.nav{width:100%;}
.navbar-brand-centered {
display: inline-block;
left: 0;
right: 0;
margin:0;
float:none;
}
.navbar-header{
text-align:center;
}
#topmenu .dropdown, #topmenu .dropup{
background:none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Two rows navbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/reset.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/style.css" rel="stylesheet" id="style">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-2 hidden-xs">
<a class="logodesc" href="#">
<img alt="logo" width="155" height="52" src="img/logo.png" class="img-responsive">
</a>
</div>
<div class="col-lg-8 col-sm-8 col-xs-12 paddR0">
<div class="navbar-header navbar-inverse hidden-lg hidden-md hidden-sm">
<button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse">
<img alt="logo" width="100" height="31" src="img/logo.png" class="img-responsive">
</a>
<a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse">
</a>
</div>
<nav class="navbar navbar-inverse" role="navigation" id="topmenu">
<ul class="nav navbar-nav">
<li class="dropdown active">
One
</li>
<li class="dropdown">
Two
</li>
</ul>
</nav>
<nav class="navbar navbar-inverse" role="navigation" id="submenu">
<ul class="nav navbar-nav navbar-inverse collapse in" id="one">
<li>One sub 1</li>
<li>One sub 2</li>
<li>One sub 3</li>
<li>One sub 4</li>
<li><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a></li>
</ul>
<ul class="nav navbar-nav navbar-inverse collapse" id="two">
<li>Two sub 1</li>
<li>Two sub 2</li>
<li>Two sub 3</li>
<li><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a>
<form class="nav navbar-form" role="search" id="nav-header-search-collapse">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</nav>
</div>
<div class="col-lg-2 col-sm-2 hidden-xs paddL0 btn-prihlasit-cont">
Send a friend
</div>
</div>
</div>
</header>
</body>
</html>
How I can make two rows navbar collapsed? If I put the rows in the container with id="nav-header-links-collapse", it looks like collapsed, but not working good. How do I show the search form when I click on the search icons (at the top and in the submenu)? When you click the links in the top menu again, the bottom menu disappears.
How to remove this bug?
You can see my code in a snippet.
I found solution. I use nav-pills. Without javascript! :-)
header {
background-color:#3e3e3e;
}
header .logodesc img {
padding-top: 30px;
}
header .btn-prihlasit-cont{
padding-top:22px;
}
header .prihlasit {
padding: 7px 14px 7px 16px;
color: #404040;
font-size: 12px;
font-weight: bold;
text-transform:uppercase;
text-align: center;
background-color: #F2F2F2;
min-width: 210px;
}
.navbar {margin-bottom:0;}
.navbar-inverse{
background-color:#3e3e3e;
border:none;
}
.navbar-inverse .navbar-nav>li>a, .navbar-nav>li>a {
color:#fff;
}
.navbar-inverse .navbar-toggle {
border-color:transparent;
cursor:pointer;
color:#fff;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active, .navbar-inverse .navbar-nav>li>a:focus {
color:#626262;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
color:#626262;
background-color: transparent;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
background-color: transparent;
color:#fff;
}
#nav-header-links-collapse{
width:100%;
}
.nav-pills {
border-bottom: solid 1px #626262;
}
.nav-pills>li>a {
color:#626262;
}
.nav>li>a:focus, .nav>li>a:hover{
color:#fff;
background-color: #000;
border-radius:0;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
border-radius:0;
background-color: transparent;
}
a.navbar-toggle.glyphicon.glyphicon-search {
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Promotional Columns - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/reset.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/style.css" rel="stylesheet" id="style">
</head>
<body>
<header>
<div class="container">
<div class="row">
<!--navbar -->
<div class="col-lg-2 col-sm-2 hidden-xs">
<a class="logodesc" href="#">
<img alt="logo" width="155" height="52" src="img/logo.png" class="img-responsive">
</a>
</div>
<div class="col-lg-8 col-sm-8 col-xs-12 paddR0">
<div class="navbar-header navbar-inverse hidden-lg hidden-md hidden-sm">
<button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse">
<img alt="logo" width="100" height="31" src="img/logo.png" class="img-responsive">
</a>
<a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse">
</a>
</div>
<div class = "collapse navbar-collapse nav navbar-nav navbar-right" id="nav-header-links-collapse">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>Using nav-pills
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<ul class="nav navbar-nav navbar-inverse collapse in" id="one">
<li>One sub 1</li>
<li>One sub 2</li>
<li>One sub 3</li>
<li>One sub 4</li>
<li class="hidden-xs"><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a></li>
</ul>
</div>
<div class="tab-pane" id="2a">
<ul class="nav navbar-nav navbar-inverse collapse in" id="two">
<li>One sub 11</li>
<li>One sub 12</li>
<li>One sub 13</li>
<li>One sub 14</li>
<li class="hidden-xs"><a class = "navbar-toggle glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"></a></li>
</ul>
</div>
</div>
</div>
<form class="nav navbar-form collapse" role="search" id="nav-header-search-collapse">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<div class="col-lg-2 col-sm-2 hidden-xs paddL0 btn-prihlasit-cont">
Přihlásit do mojeID
</div>
</div>
</div>
<!--navbar -->
</header>
</body>
</html>
I have a Thymeleaf template that uses placeholders, where the placeholder attribute specifies a short hint that describes the expected value or format of an input field.
The placeholders work when the input text is empty. But if a field containing previously entered data needs to be edited, the previously entered text disappears and is replaced with placeholder text when the input receives focus.
Is there a way to avoid this ?
the Thymeleaf template
<form class="form-style-9" action="#" th:action="#{/guardian/save}" th:object="${guardian}" method="post">
<ul>
<li>
<input type="text" th:field="*{name}" id="nameInputTextId" name="field1" class="field-style field-split align-left" placeholder="NOMBRE" />
<input type="text" th:field="*{surName}" name="field2" class="field-style field-split align-right" placeholder="APELLIDOS" />
</li>
<li>
<input type="text" th:field="*{description}" name="field1" class="field-style field-split align-left" placeholder="DESCRIPTION" />
<input type="text" th:field="*{mobile}" name="field2" class="field-style field-split align-right" placeholder="TELEFONO" />
</li>
<li>
<input type="text" th:field="*{email}" name="field1" class="field-style field-split align-left" placeholder="EMAIL" />
</li>
<li>
<a href="/guardian/list">
<input type="button" value="CANCELAR" />
</a>
<input type="submit" value="GRABAR" />
</li>
</ul>
</form>
and the HTML generated
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="tdk" />
<!-- FAVICON -->
<link rel="apple-touch-icon" sizes="57x57" href="../../../images_sebloc/favicon/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../../../images_sebloc/favicon/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../../../images_sebloc/favicon/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="../../../images_sebloc/favicon/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../../../images_sebloc/favicon/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="../../../images_sebloc/favicon/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../../../images_sebloc/favicon/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="../../../images_sebloc/favicon/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="../../../images_sebloc/favicon/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="../../../images_sebloc/favicon/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="../../../images_sebloc/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="../../../images_sebloc/favicon/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="../../../images_sebloc/favicon/favicon-16x16.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="_sebloc/favicon/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<title>tdk</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,700" type="text/css" />
<link rel="stylesheet" href="/fonts/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css_sebloc/styles.css" />
<link rel="stylesheet" href="/css/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-datepicker.css" />
<link type="text/css" href="/css/jquery.simple-dtpicker.css" rel="stylesheet" />
<!---->
<style type="text/css">
body { background-color: #fefefe; padding-left: 2%; padding-bottom: 100px; color: #101010; }
footer{ font-size:small;position:fixed;right:5px;bottom:5px; }
a:link, a:visited { color: #0000ee; }
pre{ background-color: #eeeeee; margin-left: 1%; margin-right: 2%; padding: 2% 2% 2% 5%; }
p { font-size: 0.9rem; }
ul { font-size: 0.9rem; }
hr { border: 2px solid #eeeeee; margin: 2% 0% 2% -3%; }
h3 { border-bottom: 2px solid #eeeeee; margin: 2rem 0 2rem -1%; padding-left: 1%; padding-bottom: 0.1em; }
h4 { border-bottom: 1px solid #eeeeee; margin-top: 2rem; margin-left: -1%; padding-left: 1%; padding-bottom: 0.1em; }
</style>
<!--[if lte IE 8]>
<link rel="stylesheet" href="css_sebloc/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="/css_sebloc/side-menu.css" />
<!--<![endif]-->
<!-- Responsive -->
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css" />
<!--<![endif]-->
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.floatThead.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.simple-dtpicker.js"></script>
</head>
<body>
<div id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<!-- Menu -->
<div id="menu" oncontextmenu="return false" ondragstart="return false" onmousedown="return false">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">
<img src="../../../images_sebloc/home.png" width="136" height="43" alt="POWEREDCUB SL" />
</a>
<!-- Notifications Menu -->
<ul class="pure-menu-list">
<li class="pure-menu-title">Notifications</li>
<li class="pure-menu-item">
<ul class="menu_notifications">
<!-- General Notification -->
<li>
<span><i class="fa fa-bell-o fa-fw"></i></span>
<!--
Alert counter of General notification
1. Add to the div the class show_info
2. Modify the number
-->
<div class="alert_counter"><span>0</span></div>
</li>
<!-- No Connection Notification -->
<li>
<span><i class="fa fa-wifi fa-fw"></i></span>
<!--
Alert counter of No Connection notification
1. Add to the div the class show_info
2. Modify the number
-->
<div class="alert_counter"><span>0</span></div>
</li>
<!-- No Power Notification -->
<li>
<span><i class="fa fa-battery-quarter fa-fw"></i></span>
<!--
Alert counter of No Power notification
1. Add to the div the class show_info
2. Modify the number
-->
<div class="alert_counter show_info"><span>1</span></div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
<!-- Start Menu -->
<ul class="pure-menu-list">
<li class="pure-menu-title">Start</li>
<li class="menu-principal pure-menu-item ">
<i class="fa fa-mixcloud fa-lg fa-fw"></i> Home
</li>
<li class="menu-principal pure-menu-item">
<a href="/timeLapse/list" class="pure-menu-link">
<i class="fa fa-calendar-o fa-lg fa-fw"></i> Horarios Alarma
</a>
</li>
<li class="menu-principal pure-menu-item pure-menu-selected">
<a href="/guardian/list" class="pure-menu-link">
<i class="fa fa-calendar-o fa-lg fa-fw"></i> Guardianes
</a>
</li>
<li class="menu-principal pure-menu-item"><i class="fa fa-user fa-lg fa-fw"></i> Account</li>
<li class="menu-principal pure-menu-item"><i class="fa fa-cogs fa-lg fa-fw"></i> SetUp</li>
<li class="menu-principal pure-menu-item">
<i class="fa fa-tv fa-lg fa-fw"></i> Ideefe Web
</li>
<li class="menu-principal pure-menu-item">
<i class="fa fa-question-circle fa-lg fa-fw"></i> Help
</li>
</ul>
</div>
<div id="dm_version" class="version"><b>Device manager </b><span class="orange">V 0.1.2</span><br />© Ideefe and Wits 2016
</div>
</div>
<div id="main">
<!-- Header Menu -->
<div id="menu_header" class="header">
<ul class="menu_icon">
<li>
<span><i class="fa fa-user fa-lg"></i></span>
<!-- User -->
Sebloc demo<i class="fa fa-angle-down user_name_down"></i>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="pure-g">
<div class="pure-u-1-1 pure-u-xl-14-24 pure-u-med-1">
<!-- Content Left Wrap -->
<div id="devices" class="content_l_wrap">
<div class="windowHead">
<h2>NUEVO GUARDIAN</h2>
<!-- Pagination & Search Module -->
<div class="search_module">
</div>
<i class="fa fa-chevron-up"></i>
</div>
<div class="windowContent">
<div class="store_content" data-mcs-theme="dark-3">
<style type="text/css">
.form-style-9{
max-width: 750px;
background: #FAFAFA;
padding: 30px;
margin: 50px auto;
box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
border-radius: 10px;
border: 6px solid #901E3C;
}
.form-style-9 ul{
padding:0;
margin:0;
list-style:none;
}
.form-style-9 ul li{
display: block;
margin-bottom: 10px;
min-height: 35px;
}
.form-style-9 ul li .field-style{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}.form-style-9 ul li .field-style:focus{
box-shadow: 0 0 5px #B0CFE0;
border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
width: 49%;
}
.form-style-9 ul li .field-full{
width: 100%;
}
.form-style-9 ul li input.align-left{
float:left;
}
.form-style-9 ul li input.align-right{
float:right;
}
.form-style-9 ul li textarea{
width: 100%;
height: 100px;
}
.form-style-9 ul li input[type="button"],
.form-style-9 ul li input[type="submit"] {
-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
box-shadow: inset 0px 1px 0px 0px #3985B1;
background-color: #216288;
border: 1px solid #17445E;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
padding: 8px 18px;
text-decoration: none;
font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover,
.form-style-9 ul li input[type="submit"]:hover {
background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
background-color: #28739E;
}
</style>
<form class="form-style-9" action="/guardian/save" method="post">
<ul>
<li>
<input type="text" id="nameInputTextId" name="name" class="field-style field-split align-left" placeholder="NOMBRE" value="" />
<input type="text" name="surName" class="field-style field-split align-right" placeholder="APELLIDOS" id="surName" value="" />
</li>
<li>
<input type="text" name="description" class="field-style field-split align-left" placeholder="DESCRIPTION" id="description" value="" />
<input type="text" name="mobile" class="field-style field-split align-right" placeholder="TELEFONO" id="mobile" value="" />
</li>
<li>
<input type="text" name="email" class="field-style field-split align-left" placeholder="EMAIL" id="email" value="" />
</li>
<li>
<a href="/guardian/list">
<input type="button" value="CANCELAR" />
</a>
<input type="submit" value="GRABAR" />
</li>
</ul>
<input type="hidden" name="_csrf" value="a5ecc9df-964e-4824-8402-926db7f377f6" /></form>
</div>
</div>
<div class="windowFoot">
</div>
</div>
</div>
<div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">
<!-- Content right Wrap -->
<div class="content_r_wrap">
<!-- Devices Map Module -->
<div class="windowHead">
<h2>LOCATION INFO</h2>
<i class="fa fa-chevron-up"></i>
</div>
<div class="windowContentMap">
<div>
API GOOGLE MAPS (iframe configuration must be width 100% height 100%)
</div>
</div>
<div class="windowFoot">
<div class="windowFootL"><span>ADDRESS:</span> Rue du Marteau Nº25 BTE65</div>
<div class="windowFootR"><span>WORKER:</span> Name Surname</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById("nameInputTextId").focus();
</script>
<!-- Js zone -->
<script src="../../../js/ui.js"></script>
</body>
</html>
I figure out the problem. Removing this file it solved the problem
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
I think this issue has nothing to do with the placeholder being set. It may be due to the reason that you specified the value attribute to be "" ie
in the textfields you specified value = "" .this makes the value of the text field empty and when the text field is empty the placeholder is shown.
try removing value = "".
I'm trying to fix my drop down menu items. When I hover over them, it only highlights the text and not the whole element. I have tried inline-block and block but cant seem to get it to change.
Here is the relevant php/html:
<div class="navigation w3-container clearfix">
<ul class="topnav" id="myTopnav">
<?php
$query = "SELECT * FROM categories";
$select_all_categories_query = mysqli_query($connection, $query);
while($row = mysqli_fetch_assoc($select_all_categories_query)) {
$cat_title = $row['cat_title'];
$cat_position = $row['cat_position'];
$cat_thumbnail = $row['cat_thumbnail'];
$cat_image = $row['cat_image'];
$cat_link = $row['cat_link'];
$cat_dropdown = $row['cat_dropdown'];
if($cat_dropdown=="no"){
echo "<li> <a href='{$cat_link}'>{$cat_title}</a></li>";
}
else{
echo "<li class='dropdown'><a href='#' class='dropbtn'>Dropdown</a>
<div class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</li>";
}
}
echo "<li class='icon'><a id='lastli' href='javascript:void(0);' onclick='myFunction()'>☰</a></li>";
?>
</ul>
</div>
Here is the relevant styling:
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;
border-right: 1px solid #00001a;
}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
z-index: 1000;
display: block; !important
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: center;
}
.dropdown:hover .dropdown-content{
background-color: #333;
display:block;
}
.dropdown-content a:hover {
background-color: #333;
}
.dropdown:hover .dropdown-content {
display: block; !important
}
I have attached a picture to explain the issue, as you can see it's only the drop down where it does not highlight the whole box:
Really new to all of this and trying hard to learn so thank you for all the help guys!
EDIT: HERE IS THE SOURCE CODE/HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Website developing</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style>
body, html {
height: 100%;
}
h1{
padding:0;
margin:0;
}
.header{
/*background-color: #434A54;*/
background-color: #00001a;
padding-bottom:20px;
width:100%;
}
.logo{
padding-top:25px;
float:left;
}
.logo h1{
margin:auto;
font-weight:bold;
font-size:1.5em;
color:white;
}
.search{
padding-top:20px;
float:right;
}
.content_Box{
background-color: #EEEEEE;
padding-left: 10px;
padding-top:5px;
padding-bottom:5px;
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;
border-right: 1px solid #00001a;
}
#noBorder{
border-right: none;
}
#categoryRight{
float:right;
}
#lastli{
border-right: none;
}
.navigation{
background-color:#333;
}
#loginimage{
padding-bottom:8px;
height:25px;
}
.clear {
clear: both;
}
.margintop{
margin-top:10px;
}
.upcomingevents{
height:100%;
border:1px solid grey;
text-align:center;
}
.highlightbox{
height:70px;
background-color:red;
margin-bottom:3px;
}
.noticeboard{
height:70px;
background-color:pink;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: red;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
/*ul.topnav li:not(:first-child) {display: none;} */
ul.topnav li{display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
#categoryRight{
float:none;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
border:none;
}
}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
display:inline-block;
}
li.dropdown {
z-index: 1000;
display: block; !important
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: center;
}
.dropdown:hover .dropdown-content{
background-color: #333;
display:block;
}
.dropdown-content a:hover {background-color: #333;
}
.dropdown:hover .dropdown-content {
display: block; !important
}
</style>
<body>
<div class="header w3-container" >
<!-- <div class="col-md-4 col-md-offset-4"> -->
<div class="col-md-8">
<div class="logo">
<h1> Logo here </h1>
</div>
</div>
<div class="col-md-4 ">
<form action="search.php" method="post">
<div class="input-group search">
<input name="search" type="text" class="form-control">
<span class="input-group-btn">
<button name="submit" class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form><!-- search form -->
</div>
</div>
<div class="navigation w3-container clearfix" >
<ul class="topnav" id="myTopnav" >
<li> <a href='index.php'>Home</a></li><li> <a href='#'>Latest update</a></li><li> <a href='#'>SSC</a></li><li class='dropdown'><a href='#' class='dropbtn' >Dropdown</a>
<div class='dropdown-content'>
<a href='#' id='noBorder'>Link 1</a>
<a href='#' id='noBorder'>Link 2</a>
<a href='#' id='noBorder'>Link 3</a>
</div>
</li><li class='dropdown'><a href='#' class='dropbtn' >Dropdown</a>
<div class='dropdown-content'>
<a href='#' id='noBorder'>Link 1</a>
<a href='#' id='noBorder'>Link 2</a>
<a href='#' id='noBorder'>Link 3</a>
</div>
</li><li> <a href='#'>Other Exams</a></li><li> <a href='#'>Other Jobs</a></li><li id='categoryRight'><a id='noBorder' href='#'>Contact</a></li><li> <a href='#'><img id='loginimage' src='images/genericperson.png'> login</a></li><li class='icon'>
<a id='lastli' href='javascript:void(0);' onclick='myFunction()'>☰</a>
</li>
<!-- <li id="home">Home</li>
<li ><img id="loginimage" src="images/genericperson.png" > Log in</li>
<li>Contact</li>
<li id="aboutli"><a id="aboutborder" href="#about">About</a></li>
<li class="icon">
<a id="lastli" href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
-->
</ul>
</div>
<!-- Page Content -->
<div class="container mainContent">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<h2 class="page-header">
Latest updates
<small>local news</small>
</h2>
<div class="content_Box">
<!-- First Blog Post -->
<h2>
First SSC post
</h2>
<p class="lead">
by Hasman404
</p>
<p><span class="glyphicon glyphicon-time"></span>2016-09-01</p>
<p>hola everyone. The site is getting somewhere!</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<hr>
<div class="content_Box">
<!-- First Blog Post -->
<h2>
Second post on SSC
</h2>
<p class="lead">
by Peter
</p>
<p><span class="glyphicon glyphicon-time"></span>2016-08-02</p>
<p>Now were trying to spice things up abit by adding this here.Lets see if this looks good. Need to style it all. Page heading should be resticted to one.</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<hr>
<!--This function is responsible for your posts generation -->
</div>
<!-- Blog Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Blog Search Well -->
<!-- <div class="well"> -->
<h4>Blog Search</h4>
<form action="search.php" method="post">
<div class="input-group">
<input name="search" type="text" class="form-control">
<span class="input-group-btn">
<button name="submit" class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form><!-- search form -->
<!-- /.input-group -->
<!-- </div> -->
<!-- Blog Categories Well -->
<!-- <div class="well"> -->
<h4>Blog Categories</h4>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li> <a href='#'>Home</a></li><li> <a href='#'>Latest update</a></li><li> <a href='#'>SSC</a></li><li> <a href='#'>Study Material</a></li><li> <a href='#'>Result</a></li><li> <a href='#'>Other Exams</a></li><li> <a href='#'>Other Jobs</a></li><li> <a href='#'>Contact</a></li><li> <a href='#'>login</a></li>
</ul>
</div>
</div>
<!-- /.row -->
<!-- </div> -->
<!-- Side Widget Well -->
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2016</p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
var y = document.getElementById("logo");
y.className += " responsive";
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!--
<div class="container margintop clear">
<div class="row">
<div class="col-md-4">
<div class="upcomingevents">
<h1> Upcoming events </h1>
</div>
</div>
<div class="col-md-4">
<div class="highlightbox">
</div>
<div class="highlightbox">
</div>
<div class="highlightbox">
</div>
</div>
<div class="col-md-4">
<div class="noticeboard">
</div>
</div>
</div> <!-- Row ends here
</div>
-->
You need to give your anchor element a width:
.dropdown-content a {
display:block;
box-sizing:border-box;
width:100%;
}
Example bootply
Also please note, your code has multiple duplicate ids - ids should be unique
and your dropdown content links should really being in a child ul (to be more semantically correct):
<ul class="topnav" id="myTopnav">
<li> Home</li>
<li> Latest update</li>
<li> SSC</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
Updated bootply with first dropdown as ul
Try giving the min-width attribute to anchor tag..
increase the min - width
I have a login popup.
I'm starting with jquery and I've looked quite manuals, and not just got the way to make my popup becomes responsive. Here I leave the code popup to see if you can lend a hand as I have one week looking, tasting and ... nothing :(
//scriptLogin.js archive
$(document).ready(function() {
$('a.login-window').click(function() {
//cojemos los valores de las variables desde el link
var loginBox = $(this).attr('href');
//creamos el popup
$(loginBox).fadeIn(300);
//establecemos el padding + border (css)
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//añadimos la capa mask al body(para hacer fondo semi negro al abrirse el popup)
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
//cuando clikemos el icono X se cerrara el popup
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
/*LOGIN*/
#media only screen and (max-width: 600px) {
.login-popup{
width:100%;
}
}
#login-box{
width:600px;
height:auto;
}
.login-popup{
display:none;
background:#2c3338;
padding:10px;
border:2px solid #000;
float:left;
font-size:1.2em;
position:fixed;
top:40%;
left:50%;
z-index:99999;
color:#606468;
font-family:'Calibri';
line-height:1.5em;
}
#signin{
width:auto;
height:auto;
margin:3% 0 0 25%;
}
#fondoLogin{
background-color:#2c3338;
color:#606468;
font-family:'Calibri';
font-size:14px;
line-height:1.5em;
}
#signin span{
background-color:#363b41;
border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
-webkit-border-radius:3px 0px 0px 3px;
color:#606468;
display:block;
float:left;
height:50px;
line-height:50px;
text-align:center;
width:50px;
}
#signin input{
height:50px;
}
#signin input{
background-color:#3b4148;
border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
color:#606468;
margin:0 0 2% 5%;
padding:0 16px;
width:198px;
}
#signin input:focus{
border:2px solid #785da1;
outline:none;
box-shadow:0 0 10px #785da1;
}
#signin input[type="submit"]{
width:280px;
height:55px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#624291;
color:#eee;
font-weight:bold;
margin:2% 0 2% 2%;
}
#signin input[type="submit"]:hover{
background-color:#7842A6;
}
#signin a{
color:#eee;
text-decoration:none;
}
#signin a:hover{
text-decoration:underline;
}
#signin p{
width:300px;
height:auto;
}
#signin input{
border:none;
font-family:'Calibri';
font-size:14px;
line-height:1.5em;
padding:0;
-webkit-appearance:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/icSquared_v1.0.css"/>
<title>...</title>
</head>
<body>
<div>
<header>
<nav role="navigation" class="noround navbar-inverse">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"> Barra de navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-left" style="margin:10px 0 10px 0">
<img src="fotos/logoH.png" />
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Registrate <span class="fa fa-user-plus" style="font-size:16px; margin-top:5px"></span></li>
<li> Identificate <span class="fa fa-user" style="font-size:16px; margin-top:5px"></span><span class="caret"></span></li>
<div id="login-box" class="login-popup">
<img src="fotos/x.png" style="width:30px; height:30px" class="btn_close" title="Cerrar Ventana" />
<form action="action.php?accion=login" method="post" class="form" id="signin">
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-user"></span>
<input type="text" placeholder="ejemplo#ejemplo.com" name="emailLog" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p style="margin-left:4%"><span class="fa fa-lock"></span>
<input type="password" placeholder="contraseña" name="passwd" required class="form-control" style="padding-left:16px;" /></p>
</div>
<div class="form-group">
<p>Has olvidado la contraseña?</p>
<p style="height:70px;"><input type="submit" class="btn" id="enviar" value="ENTRAR" /></p>
</div>
</form>
<p style="margin:2% 0 0 25%">No eres miembro? Registrate Ahora <span class="fa fa-arrow-right"></span></p>
</div>
</li>
</ul>
</div>
</nav>
</header>
[...more code that isn't important..]
</div>
<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scriptLogin.js"></script>
</body>
</html>
if you are using bootstrap , Bootstrap also give responsive pop , Look here
http://getbootstrap.com/javascript/
if you want our custom code for responsive pop , Look here , I have write simple code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.pop_div{ display:none;}
.overrelay{ display:none;}
.pop_div {
position: relative;
margin: 0 auto;
width: 38%;
padding: 20px;
background: rgba(247, 247, 95, 0.42);
border: 1px solid #ccc;
z-index: 12;
}
.close_pop {
float: right;
background: #f00;
padding: 7px;
border: hidden;
height: 20px;
width: 20px;
line-height: 9px;
border-radius: 10px;
text-align: center;
color: #fff;
}
.overrelay {
position: absolute;
top: 0px;
background: rgba(255, 0, 0, 0.25);
right: 0px;
bottom: 0px;
left: 0px;
z-index: 10;
}
</style>
</head>
<body>
<div class="responsive_pop">Click me for Responsive POP </div>
<!---------/// POP HERE ------->
<div class="pop_div">
<div class="close_pop">X</div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="overrelay"></div>
<!--------/// POP HERE --------->
</body>
<script>
$('.responsive_pop').click(function(){
$('.pop_div').show(500);
$('.overrelay').show(500);
});
$('.close_pop').click(function(){
$('.pop_div').hide(500);
$('.overrelay').hide(500);
});
</script>
</html>
#media only screen and (max-width: 600px) {
.login-popup{
width:100%;
left: 0;
}
}
and put it bottom of css file
I am trying to position a form and some paragraph texts on the left side by side so they are parallel to each other how ever I dont understand how I can do this
Currently I am trying to float the form to the right, however the social Icons then move from the bottom and position on the left of the screen
I want to position the ids: "myForm" and class "info" side by side
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arshdeep Soni</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="icon" type="image/png" href="images/ace.png"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js">
</script>
<style type="text/css">
body {
background-color: black;
background-image: url();
color:white;
font-family: sans-serif;
}
#name {
color:white;
font-family: coolvetica;
font-size: 50px;
text-align: center;
padding-top: 60px;
letter-spacing: 6px;
font-weight: bolder;
text-transform: uppercase;
}
#magician {
color:white;
font-family: raleway;
font-size: 25px;
letter-spacing: 11px;
margin-top: 2%;
text-align: center;
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -o-linear-gradient(left, #ccc, #ffffff, #ccc);
width:50%;
max-width: 100%;
}
#info {
}
#info h2 {
color:white;
font-family: Baron neue;
font-size: 30px;
padding: 30px 0px 0px 10px;
margin-right: 50%;
}
#info p {
font-family: sans-serif;
font-size: 15px;
padding-top: 10px;
padding-left: 10px;
margin-right: 50%;
}
#contact {
padding-left: 10px;
line-height: 1.7em;
margin-right: 50%;
}
#myForm {
top:0;
float:right;
}
</style>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >☰ Menu</span>
<div class="nav-menu">
<ul>
<li>HOME</li>
<li><a href=#>VIDEOS</a></li>
<li><a href=#>IMAGES</a></li>
<li><a href=#>EVENTS</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li class="current">ENQUIRIES</li>
</ul>
</div>
<h1 id="name">Arshdeep Soni</h1>
<p id="magician">Magician</p>
<hr>
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
</div>
<div class="main">
</div>
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="images/social/fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="images/social/twitter.png" /></a>
</div>
</body>
</html>
You should move "myForm" outside of the "info" div like this
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
</div>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
And your CSS for those elements should look like this
#myForm {
display:inline-block;
}
#info {
width: 50%; // Adjust to your liking
float:left;
}
https://jsfiddle.net/srf9w1w3/
You colud use box model in css to do that, please check the code below in the snippet
#media (min-width: 500px) {
.row:after {
content: " ";
display: table;
clear: both;
}
.column-half {
float: left;
width: 50%;
padding: 0 20px;
box-sizing: border-box;
border:solid 1px #ccc;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.dcenter {
display:block;
text-align:center;
padding:5px;
}
<div class="row">
<div class="column-half">
HTML INFO HERE
</div>
<div class="column-half">
FORM CODE HERE
</div>
</div>
<div class="clearfix"></div>
<div class="dcenter">icons here</div>