I'm making a webpage for logging in. I have a text element "OR LOG IN WITH" for different providers that I want to align up with the images (google...). I tried setting it vertical align top in CSS but that did not work. Can you help me?
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description"
content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}">
<meta name="googlebot" content="noarchive">
{% if cursor %}
<link rel="next" href="/delhi/?o=2">
{% endif %}
<link rel="canonical" href="/q">
<title>Login / Create</title>
<!-- CSS INCLUDES: -->
<link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
<!-- HEADEXTRAS: -->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<!--
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="https://plus.google.com/123122342342345" rel="publisher">-->
<!-- JAVASCRIPTS: -->
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/js/common.min.js"></script>
<script type="text/javascript" src="/static/js/arrays_v2.js"></script>
<script type="text/javascript" src="/static/js/searchbox.min.js"></script>
</head>
<body>
{% include "kooltopbar.html" %}
<div id="wrapper">
{% if request.host == "www.koolbusiness.com" %}
<a href="/">
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &
selling in india</h1></a>
{% endif %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<div id="searchbox">
<form id="search_form" action="/account/do_login" method="post">
<table><tr><td>
LOG IN</td><td>
<input name="email" size="35" title="email" type="text"
></td><td> <input name="password" size="35" title="password" type="password"
>
</td><td>
<input value="Login" type="submit"></td>
</tr>
<tr><td>
</td><td><div class="logintext">YOUR E-MAIL</div></td><td><div class="logintext"> PASSWORD</div></td><td>
</tr></form >
<form autocomplete="off" id="create_user" action="/create/" method="post">
<tr><td>
CREATE ACCOUNT
</td><td> <input name="email" value="" size="35" title="email" type="text"
></td><td> <input name="password" value="" size="35" title="password" type="password"
>
</td><td>
<input value="Create Account" type="submit"></td>
</tr> <tr><td>
</td><td><div class="logintext"> YOUR E-MAIL</div></td><td><div class="logintext"> DESIRED PASSWORD</div></td><td>
</tr> <tr><td><div class="logintext2">
OR LOG IN WITH</div> </td><td><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></td><td><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"> </td><td></td></tr>
</table>
</form>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
</div>
</body>
</html>
CSS is available here.
I added in CSS this:
.logintext2 {
position: relative;
top: -15px;
}
it should look like this now, except with actual images, lol.
EDIT
Also, I'm pretty sure that at the top of your CSS you have everything listed and then have this:
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
if it is, you can just replace it with an asterisk (*). This just saves you approx. 490 characters, so it will load slightly faster.
First of all remove this class "logintext2" from div tag, And it to td class ="logintext2"
and replace this style
.logintext2 {
vertical-align: top;
}
Related
I am a new Django developer. I am trying to overwrite django password_reset_confirm.html page with the below HTML file(change_pwd.html).
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{% static "icon/tab_logo.png"%}">
<!-- Bootstrap -->
<link href="{% static "web/vendors/bootstrap/dist/css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="{% static "web/src/css/login.css" %}" rel="stylesheet">
<!-- jQuery -->
<script src="{% static "web/vendors/jquery/dist/jquery.min.js" %}"></script>
</head>
<body >
<div class="vertical-center">
<div class="container">
<div class="row">
<div class=" col-md-4 col-md-offset-4">
<div id="loginbox" >
<h1 class="text-center title">Change Password</h1>
</br></br>
<form id="passwordform" role="form" method="post" action=".">
{% csrf_token %}
<div style="margin-bottom: 25px" >
<input type="password" class="pwd" name="new_password1" placeholder="password" autocomplete="off">
</div>
<div style="margin-bottom: 25px" >
<input type="password" class="pwd" name="new_password2" placeholder="repeat password" autocomplete="off">
</div>
<div style="margin-top:10px" >
<!-- Button -->
<input id="btn-change-pwd" class="btn btn-primary btn_extend " type="submit" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have also overwritten the project's Urls.py as below:
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'change_pwd.html'}, name='password_reset_confirm'),
When I reset password, the page is redirected to admin/templates/registration/password_reset_confirm.html page and then displays below message:
The password reset link was invalid, possibly because it has already been used. Please request a new password reset.
Based on admin/templates/registration/password_reset_confirm.html, this error happens whenever reset_password link is not valid. When I remove {'template_name' : 'change_pwd.html'} from the Url, it works. But I do not know how to fix this error in change_pwd.html.
Django user templates must be inside a registration folder.
Ex: templates/registration/change_pwd.html
Change
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'change_pwd.html'}, name='password_reset_confirm'),
to
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'registration/change_pwd.html'}, name='password_reset_confirm'),
I'm trying to use CSS sprites but the second element doesn't come out right. I don't understand what I'm doing wrong. I try to set the top property to -45 which should give me the yahoo graphics but it comes out blank. What is wrong?
Mockup
CSS
#googlelink {
width: 102px;
height: 44px;
background: url(/_/img/openidlogos.png) 0 0;
}
#yahoolink {
width: 102px;
height: 44px;
background: url(/_/img/openidlogos.png) 0 -45;
}
If I use the above code then the google link renders ok but the next doesn't where I try to offset to area that should be drawn.
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description"
content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}">
<meta name="googlebot" content="noarchive">
{% if cursor %}
<link rel="next" href="/delhi/?o=2">
{% endif %}
<link rel="canonical" href="/q">
<title></title>
<!-- CSS INCLUDES: -->
<link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
<link href="/static/css/common_in2.css?{{VERSION}}" rel="stylesheet" type="text/css">
<!-- HEADEXTRAS: -->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<!--
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="https://plus.google.com/123122342342345" rel="publisher">-->
<!-- JAVASCRIPTS: -->
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/js/common.min.js"></script>
<script type="text/javascript" src="/static/js/arrays_v2.js"></script>
<script type="text/javascript" src="/static/js/searchbox.min.js"></script>
<script type="text/javascript"><!--
function cities(obj) {
if (obj.value == '3') {
//undisplay cities options municipality_control2
document.getElementById('municipality_control').style.display = 'none'
} else {
$('#cities').load('/cities?regionId=' + obj.value);
}
document.getElementById("citiess").className = "selectbox munics ";
}
$(function() {
$("#searchtext").focus();
});
//-->
</script>
</head>
<body>
{% include "kooltopbar.html" %}
<div id="wrapper">
{% if request.host == "www.koolbusiness.com" %}
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &
selling in india</h1>
{% endif %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<section id="searchbox">
<form id="search_form" action="." method="post">
<table><tr><td>
LOG IN</td><td>
<input placeholder="YOUR E-MAIL OR USERNAME" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text"
value="{{query}}"></td><td> <input placeholder="YOUR PASSWORD" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text"
value="{{query}}">
</td><td>
<input id="searchbutton" value="Login" class="button" type="submit"></td>
</tr>
<tr><td>
</td><td>YOUR E-MAIL</td><td> PASSWORD</td><td>
</tr>
<tr><td>
CREATE ACCOUNT
</td><td><input placeholder="YOUR E-MAIL OR USERNAME" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text"
value="{{query}}"></td><td> <input placeholder="YOUR PASSWORD" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text"
value="{{query}}">
</td><td>
<input id="searchbutton" value="Login" class="button" type="submit"></td>
</tr> <tr><td>
</td><td>YOUR E-MAIL</td><td>DESIRED PASSWORD</td><td>
</tr> <tr><td>
OR LOG IN WITH </td><td><img id="googlelink"> </td><td><img id="yahoolink"> facebook</td><td></td></tr>
</table>
</form>
</section>
</div>
</body>
</html>
Your CSS should be like this:
#yahoolink {
width: 102px;
height: 44px;
background: url(/_/img/openidlogos.png) no-repeat 0 -45px;
}
Note: give a unit measure..in this case is (px) and set no-repeat.
You miss out giving units to the value, your code should look like following css rule
yahoolink {
width: 102px;
height: 44px;
background: url(/_/img/openidlogos.png) 0 -45px;
}
Your CSS code is working for google is because, when in general writing CSS rules if you are giving values in 0 you dont need to mention unit to those.
but if you are putting numbers rather than 0, then you must mention units to those.
Pardon my web skills but i have a very rudimentary problem.
I have this html form which should ideally call my /login url with post but for some reason it always sends a get request to that url and fails. I can't figure out how that is happening.
This is my html form
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Login - MobileMedic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="">
<meta name="author" content="" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,800italic,400,600,800" type="text/css">
<link rel="stylesheet" href="./css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./css/jquery-ui-1.9.2.custom.min.css" type="text/css" />
<link rel="stylesheet" href="./css/App.css" type="text/css" />
<link rel="stylesheet" href="./css/Login.css" type="text/css" />
<link rel="stylesheet" href="./css/custom.css" type="text/css" />
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/alert.js"></script>
<script src="./js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/plugins/parsley/parsley.js"></script>
</head>
<body>
<div class="gifload"></div>
<div id="login-container">
<div id="logo">
<img src="./images/logos/logo-login.png" alt="Logo" />
</div>
<div id="login">
<h3>Welcome to Apprick Technologies.</h3>
<h5>Please sign in to get access.</h5>
<form method="post" action="/login" id="login-form" class="form parsley-form" data-validate="parsley">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" name= "Signin" value="Signin"/>
</div>
</form>
</div>
</div>
<!-- /#login-container -->
</body>
To make the question more clear i use express js with parse.com and here are the two routing defined
app.get('/login', function(req, res) {
res.send('get is called');
});
app.post('/login', function(req, res) {
res.send('post is called');
});
Now no matter what i provide in my form method i always get "get is called" in the browser on submitting the button.
I also tried to debug what is happening in by the developer console and this is what i get
I tried your code and it is working as a "POST" request. Try changing your request to "GET" and you can notice in the URL that it has something like this at the end "?Signin=Signin".
Include a "name" attribute to your input tags.
Sample:
<input type="email" name="email" class="form-control" id="email" placeholder="Email" required="required">
And you can see something like this upon submitting the form:
/login?email=testemail%40test.test&Signin=Signin
How can i convert this to an wordpress new page. I tried to add it tru html but that didn't work. My dropdown is all mest up. Nothing seems to be good. Can anyone help me out please?
Are point me in the wright direction. Are show me a preview how i can fix this problem.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Smoelenboek</title>
<link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tablesorter.js"></script>
<script id="data" type="text/javascript" src="js/search.js" xmlData="data/raetexport.xml"></script>
</head>
<body>
<STYLE TYPE="text/css">
body { background-image:url('background-alert-ipad.jpg'); }
</style>
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div id="controller">
<label class="control-label" for="searchinput"><Font color="#FFFFFF">Zoeken:</font>
<input type="text" id="term">
</label>
<div class="control-group">
<div class="controls">
<label class="control-label"><Font color="#FFFFFF">Opties:</font>
<select name="category" id="category">
<option value="none">Selecteer een optie</option>
<option value="roepnaam">Voornaam</option>
<option value="naamMedewerker">Achternaam</option>
<option value="team">Team</option>
</select>
</label>
</div>
</div>
</div>
</div>
</div>
<input name="Zoeken" type="button" id="searchButton" value="Search">
</fieldset>
</form>
<div id="result"> </div>
</body>
</html>
This was the correct fix.
Insert HTML Snippet WordPress plugin is the solution, It Adds HTML,
CSS and JavaScript code to your pages and posts easily. – user3599534
1 hour ago
Thank you.
I am trying to create a bootstrap select list in a html file using Dreamweaver CS6 preview. I have the following code that should work, but it doesn't show the select box as it should - when you select an item a tick should appear next to that item. Also the appearance of the box looks different to the example on http://silviomoreto.github.io/bootstrap-select/.
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-select.min.js"></script>
<script> $('.selectpicker').selectpicker(); </script>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="post">
Name: <input type="text" name="name">
<br>
E-mail: <input type="text" name="email">
<br> <input type="submit">
</form>
</body>
</html>
I don't see any problem with your code. Here's a working fiddle:
http://jsfiddle.net/cuovoqzw/
HTML:
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="POST">
Name: <input type="text" name="name">
<br />
E-mail: <input type="email" name="email">
<br />
<input type="submit">
</form>
JS:
$('.selectpicker').selectpicker();
The most probable reason I see is that you've included multiple instances of Bootstrap CSS files in your code. Just include only the required ones and delete the rest.