When i include the CodeIgniter library on my website
I have this :
SEE THE PROBLEM HERE
A blank after the body tag
This is caused by the recaptcha library , because when i have removed it , the blank have disappeared
Need some help ;)
My code :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Razal</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<META NAME="description" CONTENT="Serveur privé Dofus 1.29.1">
<META NAME="author" CONTENT="Ichiga">
<link href="https://www.razal.eu/style/css/style_v13.css" rel="stylesheet" type="text/css" />
<link href="https://www.razal.eu/style/css/pure-min.css" rel="stylesheet" type="text/css" />
<script language="javascript">
<!--
if (top.location!= self.location)
{
top.location = self.location.href
}
function ToogleMobileMenu()
{
document.getElementById("div-left").classList.toggle('div-left-open');
}
function UpdateMinViewIpad()
{
var viewportmeta = document.querySelector('meta[name="viewport"]');
if(window.innerHeight > window.innerWidth) {viewportmeta.content = 'width=device-width';}
else{viewportmeta.content = 'width=device-height';}
}
// BUG orientation portrait/lanscape IOS //
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i))
{
UpdateMinViewIpad();
document.addEventListener('orientationchange', function ()
{
UpdateMinViewIpad();
}, false);
}
//-->
</script>
</head>
<body>
<div class="div-header">
<div class="div-header-content">
</div>
<div class="div-bar-menu">
<div class="div-menu">
<img src="https://www.razal.eu/style/img/menu_separator.png">
Accueil
<img src="https://www.razal.eu/style/img/menu_separator.png">
Rejoindre Razal
<img src="https://www.razal.eu/style/img/menu_separator.png">
Classements
<img src="https://www.razal.eu/style/img/menu_separator.png">
Forum
<img src="https://www.razal.eu/style/img/menu_separator.png">
<a onclick="alert('à venir')" href="#">Vidéos</a>
<img src="https://www.razal.eu/style/img/menu_separator.png">
</div>
</div>
</div>
<div class="div-content">
<div id="div-left" class="div-left">
<div class="div-floater-menu" onclick="ToogleMobileMenu();">
<img src="images/floatter-menu.png" alt="menu">
</div>
<div class="div-box">
<button class="pure-button pure-button-active" style="width:100%;" id="vote">Créer un compte</button>
</div>
<div class="div-box">
<legend>Connexion</legend>
<hr>
<form action="https://www.razal.eu/utilisateur/connexion" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="username" type="text" name="username" placeholder="Nom de compte">
</div>
<label for="password">Mot de passe</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="password" type="password" name="password" placeholder="Mot de passe">
</div>
<button type="submit" class="pure-button pure-button-primary">se connecter</button>
</fieldset>
</div>
</form>
</div>
<div class="div-box">
<legend>Voter</legend>
<img style="width:100%" src="https://www.razal.eu/style/img/rpg.png">
</div>
</div>
<div class="div-page">
<div class="div-box">
<h2>Formulaire d'inscription</h2>
<hr class="hrtitle" />
<div class="pure-u-1-4">
</div>
<div class="pure-u-1-3">
<form action="https://www.razal.eu/utilisateur/inscription" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="username" name="username" type="text">
<label for="email">Adresse e-mail</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="email" name="email" type="email">
<label for="nickname">Pseudo</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="nickname" name="nickname" type="text">
<label for="password">Mot de passe</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="password" type="password">
<label for="password">Confirmation MDP</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="passwordconfirm" type="password" >
<p><div class="g-recaptcha" data-sitekey="6LfDgB0TAAAAANw_dSy0Pd-ezJMRTko_UHmpcm6R"></div>
<script src="https://www.google.com/recaptcha/api.js?hl=fr" async defer></script></p>
<button type="submit" class="pure-button pure-button-primary">S'inscrire</button>
</fieldset>
</div>
</form>
</div>
</div>
<br>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
entity looks like a result of including files saved in UTF-8 with BOM.
I suggest to check for files encoding, maybe if you are working with different conflicting formats.
Related
Everything was working fine before, but it stopped working after a while. When I press the button to sign up, it opens up a blank page with a blank box, unlike before, when it had the actual stuff it was supposed to have. I have here the images, please help me. Thanks in advance!
enter image description here
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Winit - Login/Sign Up</title>
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="stylesheet" href="./src/main.css">
<link rel="icon" href="https://lh3.googleusercontent.com/proxy/7ytbxkmMme0IPSvsHZN9ZFd19oIZ9lqtq_402Z1UbIr0-1yMU_OoIbwaJsZ3x3ZEoQtZTJ4lR9hHLxSQibKiacHqfNyEEKdNunHv4J9hohCTtNlqO0yfb2rYGQhxl1M"
</head>
<body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
function SubForm(){
$.ajax({
url:'https://api.apispreadsheets.com/data/20789/',
type:'post',
data:$("#createAccount").serializeArray(),
success: function(){
alert("Form Data Submitted :)")
},
error: function(){
alert("There was an error :(")
}
});
}
</script>
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__message form__message--error">Incorrect Username/Password Combination</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
<div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
Forgot your password?
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form_input" input name="username" class="form__input" autofocus placeholder="Username">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" input name="email" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" input name="password" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password">
<div class="form__input-error-message"></div>
</div>
<label>
<button onclick="SubForm()" <button class="form__button" type="submit">Continue</button>
<p class="form__text">
<a class="form__link" href="./" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
</div>
<script src="./src/main.js"></script>
</body>
I am trying to style a contact form I set up on my website. I took a ready made one (html with css styling and php action) but when I put it in my html, it doesn't link the html with the css. How should I define the divs? Thank you.
<div id="contact" class="contact">
<div class="row">
<div class="divider4"></div>
<form action="mail.php" method="post" id="vreme">
<div class="column-1">
YOUR NAME<br/><br/>
<input name="name" id="name" value="" />
</div>
<div class="column-2">
YOUR E-MAIL<br/><br/>
<input name="email" id="email" value="" />
</div>
<div class="column-3">
MESSAGE<br/><br/>
<textarea id="message" name="message" ></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="Send"></span>
</div>
</form>
</div>
</div>
Have you included the css reference to your page header? As in
<link rel="stylesheet" href="css/form-style.css" type="text/css">
There should be a css file for the given html form in that website. You should connect that form.css file to the form.html post by mentioning the following code in the head section of your html. Check it and see
<html>
<head>
<link rel="stylesheet" href="css/form.css" type="text/css">
</head>
<body>
<div id="contact" class="contact">
<div class="row"><div class="divider4"></div>
<form action="mail.php" method="post" id="vreme">
<div class="column-1">
YOUR NAME<br/><br/>
<input name="name" id="name" value="" />
</div>
<div class="column-2">
YOUR E-MAIL<br/><br/>
<input name="email" id="email" value="" />
</div>
<div class="column-3">
MESSAGE<br/><br/>
<textarea id="message" name="message" ></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="Send"></span>
</div>
</form>
</div></div>
</body>
</html>
I have included the css reference, the rest of my page styling is working, that isn't. The weird part is, I took that from a website I had previously worked on, and it worked there perfectly.
<link rel="stylesheet" href="assets/style.css" type="text/css">
<!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=iso-8859-1" />
<title>Form Style</title>
<link type="text/css" rel="stylesheet" href="css/form.css"/> //css/form.css - select your file location
/* OR */
<style type="text/css">
/*Paste your css style code here*/
</style>
</head>
<body>
<div id="contact" class="contact">
<div class="row">
<div class="divider4"></div>
<form name="mail" action="mail.php" method="post" id="vreme">
<div class="column-1">
YOUR NAME<br/><br/>
<input name="name" id="name" value="" />
</div>
<div class="column-2">
YOUR E-MAIL<br/><br/>
<input name="email" id="email" value="" />
</div>
<div class="column-3">
MESSAGE<br/><br/>
<textarea id="message" name="message" ></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="Send"></span>
</div>
</form>
</div>
</div>
</body>
</html>
Hope this helps...
i need to get an id from the url, and display it to the input.
When i try to get it in the input, they tell me they give me this error:
"Required Integer parameter 'idpatient' is not present."
this is my html page and table from where i get the id:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tous les patients</title>
<meta charset="utf-8" content="text/html" X-Content-Type-Options="nosniff" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"
th:href="#{/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/myStyle.css"
th:href="#{/css/myStyle.css}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="ListePatientController">
<div class="container">
<form>
<label>Mot clé:</label>
<input type="text" ng-model="motCle"/>
<Button ng-click="charger()">Chercher un patient</Button>
</form>
</div>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Prenom</th>
<th>Sexe</th>
<th>Date de naissance</th>
<th>Nationalité</th>
<th>CIN</th>
<th>CNE</th>
<th>Type de couverture</th>
<th>Num° du type de couverture</th>
<th>Province</th>
<th>Résident</th>
<th>Adresse personnelle du patient</th>
<th>Adresse parents du patient</th>
<th>GSM</th>
<th>Adresse électronique</th>
<th>Pratiquer un sport</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in patients.content">
<td>{{p.idPatient}}</td>
<td>{{p.nomPatient}}</td>
<td>{{p.prenomPatient}}</td>
<td>{{p.sexe}}</td>
<td>{{p.dateNaiss|date:'dd/MM/yyyy'}}</td>
<td>{{p.nationalite}}</td>
<td>{{p.cin}}</td>
<td>{{p.cne}}</td>
<td>{{p.typeCouverture}}</td>
<td>{{p.numTypeCouverture}}</td>
<td>{{p.province}}</td>
<td>{{p.resident}}</td>
<td>{{p.adressPerso}}</td>
<td>{{p.adressPatient}}</td>
<td>{{p.gsmPatient}}</td>
<td>{{p.mailPatient}}</td>
<td>{{p.pratiquePatient}}</td>
<td>
ajout consult
</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<ul class="nav nav-pills">
<li ng-class="{active:$index==pageCourante}" class="clickable" ng-repeat="p in pages track by $index">
<a ng-click="gotoPage($index)">{{$index}}</a>
</li>
</ul>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myApp.js"></script>
</body>
</html>
This is the html page when i should display it in the input :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inscription d'une consultation</title>
<meta charset="utf-8" content="text/html" X-Content-Type-Options="nosniff" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"
th:href="#{/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/myStyle.css"
th:href="#{/css/myStyle.css}"/>
</head>
<body ng-app="myApp" ng-controller="inscriptionConsultationController">
<div class="col-md-6 col-sm-6 col-xs-12 container">
<div class="panel panel-success container spacer ">
<div class="panel-heading"><b><h1>Ajout d'une consultation</h1></b></div>
<div class="panel-body">
<div ng-if="mode.value=='form'" >
<form>
<div class="form-group">
<label class="control-label">Date de la consultation:</label>
<input class="form-control" type="date" ng-model="consultation.dateConsult"/>
<span ng-if="errors" class="error">{{errors.dateConsultt}}</span>
</div>
<div class="form-group">
<label class="control-label">Type de la consultation:</label>
<input class="form-control" type="text" ng-model="consultation.typeConsult"/>
<span ng-if="errors" class="error">{{errors.typeConsult}}</span>
</div>
<div class="form-group">
<label class="control-label">Motif(s):</label>
<input class="form-control" type="text" ng-model="consultation.motifConsult"/>
<span ng-if="errors" class="error">{{errors.motifConsult}}</span>
</div>
<div class="form-group">
<label class="control-label">Dignostics:</label>
<input class="form-control" type="text" ng-model="consultation.diagnostic"/>
<span ng-if="errors" class="error">{{errors.diagnostic}}</span>
</div>
<div class="form-group">
<label class="control-label">Maladie chronique?</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="consultation.maladieChronique">Oui</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="consultation.maladieChronique">Non</label>
</div>
<span ng-if="errors" class="error">{{errors.maladieChronique}}</span>
</div>
<div class="form-group">
<label class="control-label">Décision:</label>
<input class="form-control" type="text" ng-model="consultation.decision"/>
<span ng-if="errors" class="error">{{errors.decision}}</span>
</div>
<div class="form-group">
<input type = "number" ng-model="consultation.idPatient" value="idpatient"/>
</div>
<div class="form-group">
<button class="btn btn-success" ng-click="saveConsultation()"> Enregistrer</button>
</div>
</form>
</div>
<div ng-if="mode.value=='confirm'">
<div class="panel-heading container spacer"><h2>Confirmation: La consultation a été ajoutée avec succès!</h2></div>
<div class="form-group">
<label class="control-label">ID:</label>
<label class="control-label">{{consultation.idConsult}}</label>
</div>
<div class="form-group">
<label class="control-label">Date de la consultation:</label>
<label class="control-label">{{consultation.dateConsult|date:'yyyy-MM-dd'}}</label>
</div>
<div class="form-group">
<label class="control-label">Type de la consultation:</label>
<label class="control-label">{{consultation.typeConsult}}</label>
</div>
<div class="form-group">
<label class="control-label">Motif(s):</label>
<label class="control-label">{{consultation.motifConsult}}</label>
</div>
<div class="form-group">
<label class="control-label">Diagnostics:</label>
<label class="control-label">{{consultation.diagnostic}}</label>
</div>
<div class="form-group">
<label class="control-label">Maladie chronique?</label>
<label class="control-label">{{consultation.maladieChronique}}</label>
</div>
<div class="form-group">
<label class="control-label">consultation:</label>
<label class="control-label">{{consultation.decision}}</label>
</div>
<div class="form-group">
<label class="control-label">id patient:</label>
<label class="control-label">{{consultation.idPatient}}</label>
</div>
</div>
<div ng-if="exception">
<span class="error">{{exception.message}}</span>
</div>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myApp.js"></script>
</body>
</html>
This is the Spring service that gets the id :
#RequestMapping(value="/consultations",method=RequestMethod.POST)
public Object saveConsultation(#RequestParam (value = "idpatient", required = true) String idpatient,
#RequestBody #Valid Consultation c,
BindingResult bindingResult){
if(bindingResult.hasErrors()){
Map<String, Object> errors=new HashMap<>();
errors.put("errors", true);
for(FieldError fe: bindingResult.getFieldErrors()){
errors.put(fe.getField(), fe.getDefaultMessage());
}
return errors;
}
return consultationMetier.saveConsultation(idpatient,c,bindingResult);
}
You can not use it directly, you need share data for two controller in service level.
See - AngularJS - Passing data between pages for details.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I used tables for my layout but I must use DIVs instead because I have forms in my tables. It was a mistake rendering the code with tables because it has forms and the form functionality is experiencing unwanted sideeffects from using tables so I must use DIVs instead for the layout. Can you help me how I achieve my layout with no tables?
Here's a fiddle with my code. The html is
<body>
<div id="wrapper">
<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">
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">LOG IN</div>
<div class="div-table-col"><input name="email" size="35" title="email" type="text"
></div>
<div class="div-table-col"><input name="password" size="35" title="password" type="password"
></div>
<div class="div-table-col"> <input value="Login" type="submit"></div> <div class="div-table-col"> </div>
</div>
<div class="div-table-row">
<div class="div-table-col logintext">YOUR E-MAIL</div>
<div class="div-table-col logintext">PASSWORD</div>
</div>
</form>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">CREATE ACCOUNT</div>
<div class="div-table-col"><input name="email" size="35" title="email" type="text"
></div>
<div class="div-table-col"><input name="password" size="35" title="password" type="password"
></div>
<div class="div-table-col"> <input value="Create Account" type="submit"></div>
<div class="div-table-col"> </div>
</div>
<div class="div-table-row">
<div class="div-table-col logintext">YOUR E-MAIL</div>
<div class="div-table-col logintext">PASSWORD</div>
</div>
<div class="div-table-row">
<div class="div-table-col">OR LOG IN WITH</div>
<div class="div-table-col"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></div> <div class="div-table-col"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></div>
<div class="div-table-col"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </div> <div class="div-table-col"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></div>
</div>
</div>
</form>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
</div>
</body>
</html>
After a while I tried it with bootstrap which didn't work at all:
<!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">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- 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">
<div class="container">
<form id="search_form" action="/account/do_login" method="post">
<div class="row">
<div class="col-md-1">LOG IN WITH</div>
<div class="col-md-1"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></div>
<div class="col-md-1"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></div>
<div class="col-md-1"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </div>
<div class="col-md-1"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></div>
</div>
<div class="row">
<div class="col-md-1">LOG IN</div>
<div class="col-md-1"><input name="email" size="35" title="email" type="text">
</div>
<div class="col-md-1"><input name="password" size="35" title="password" type="password"></div>
<div class="col-md-2"><input value="Login" type="submit"></div>
</div>
<div class="row">
<div class="col-md-1">.col-md-4</div>
<div class="col-md-2 logintext">YOUR E-MAIL</div>
<div class="col-md-2 logintext">PASSWORD</div>
</div>
</form>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<div class="row">
<div class="col-md-1">CREATE ACCOUNT</div>
<div class="col-md-1"><input name="email" size="35" title="email" type="text">
</div>
<div class="col-md-1"><input name="password" size="35" title="password" type="password"></div>
<div class="col-md-2"><input value="Create Account" type="submit"></div>
</div>
</form>
</div>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
</div>
</body>
</html>
Edit
The way I finally did it was with twitter bootstrap and I'm happy with it. But rearranging everything into DIVs didn't solve the problem of autocomplete with the form so I had to resort to a dirty trick to clear the form for the create field. Strange thing was that I had to restart everything to make twitter bootstrap work.
<div id="mybox">
<div class="container">
<form id="search_form" action="/account/do_login" method="post">
<div class="row">
<div class="col-md-1">LOG IN WITH</div>
<div class="col-md-2"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></div>
<div class="col-md-2"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></div>
<div class="col-md-2"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </div>
<div class="col-md-2"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></div>
</div>
<div class="row">
<div class="col-md-1">LOG IN</div>
<div class="col-md-3">
<input name="email" size="35" title="email" type="text">
</div>
<div class="col-md-3">
<input name="password" size="35" title="password" type="password">
</div>
<div class="col-md-2">
<input value="Login" type="submit">
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3 logintext">YOUR E-MAIL</div>
<div class="col-md-3 logintext">PASSWORD</div>
</div>
</form>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<input style="display:none">
<input type="password" style="display:none">
<div class="row">
<div class="col-md-1">CREATE ACCOUNT</div>
<div class="col-md-3">
<input name="email" id="email" size="35" autocomplete="off" title="email" type="text" value="">
</div>
<div class="col-md-3">
<input name="password" id="password" size="35" autocomplete="off" title="password" type="password" value="">
</div>
<div class="col-md-2">
<input value="Create Account" type="submit">
</div>
</div>
</form>
</table>
</div>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
As you may be discovering, tables should not be used for layout. As a matter of fact, they should only be used for displaying data.
As far as building a layout with divs, here's what you need to know to get started.
Use width, max-width, and min-width to your advantage to create intuitive and responsive layouts.
Use percent, em, and vh in place of pixels where you can.
Consider learning and using floats, and clear: both to help with responsive layout.
Also, consider using the twitter bootstrap CSS framework. Specifically the grid functionality. You can learn it and use it in minutes.
I hope this helps.
This layout is ridiculously simple, and you're making it far more complex than it needs to be. I stripped out all the google ad stuff, which you can add back, but there is way more markup here than you need and way more junk.
Here's a quick fiddle I threw together in about 10 minutes that gives you the basic layout. I'm sure you can tweak it to the exact dimensions you need.
http://jsfiddle.net/fop9vLjh/1/
<style type="text/css">
body { font-family: sans-serif; }
#wrapper { width: 900px; margin: 0 auto; }
div { margin-top: 15px; }
#login-box { background-color: #ffc801; padding: 10px; }
span { float: left; width: 10em; }
#recover { float: right; }
a { text-decoration: none; }
input[type='text'],input[type='password'] { width: 18em; }
.form-field { width: 15em; display: inline-block; vertical-align: top; margin-top: 0; }
label { display: block; font-size: small; }
</style>
<div id="wrapper">
<div id="login-box">
<div id="login">
<span>LOGIN</span>
<form action="/account/do_login" method="post">
<div class="form-field">
<input name="email" type="text"/>
<label for="email">YOUR EMAIL</label>
</div>
<div class="form-field">
<input name="password" type="password"/>
<label for="password">PASSWORD</label>
</div>
<button type="submit" value="Login">Login</button>
</form>
</div>
<div id="create">
<span>CREATE ACCOUNT</span>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<div class="form-field">
<input name="email" type="text"/>
<label for="email">YOUR EMAIL</label>
</div>
<div class="form-field">
<input name="password" type="password"/>
<label for="password">DESIRED PASSWORD</label>
</div>
<button type="submit" value="Create">Create Account</button>
</form>
</div>
<div id="alt-login">
<span>OR LOG IN WITH</span>
<input name="google" type="image" src="#"/>
<input name="linkedin" type="image" src="#"/>
<input name="yahoo" type="image" src="#"/>
<input name="facebook" type="image" src="#"/>
</div>
</div>
<div id="recover">
CLICK HERE TO RECOVER YOUR ACCOUNT
</div>
</div>
Excuse me but its html\css basics. Where exactly your problem is? I only see the problem with top yellow bar which can be fixed by something like this:
html {
position:absolute;
min-width:100%;
}
But still it looks ugly enough (:
I got an app which i use from CodePen but i cant use expressions in this way {{Expression}}
i need to use it on this way [[]]
here is the code for the app
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sistema de Alarmas Ever-Track</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Oxygen+Mono' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://staticmapmaker.com/css/main.css'>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<body ng-app="myApp">
[[1+3+"QUE FUCKING PEDO OSEA"]]
<input type="checkbox" class="toggle" id="toggle">
<header class="col col-right">
<h1><i class="fa fa-map-marker"></i> Ever-Track GPS System </h1>
Sistema de rastreo de Alarmas
</header>
<div class="main" ng-controller="controller">
<div class="col-left col">
<label for="toggle" class="label-toggle">
<span class="close-it"><span class="fa fa-arrow-circle-left"></span></span>
<span class="open-it"><span class="fa fa-arrow-circle-right"></span></span>
</label>
<div class="controls">
<div class="container" >
<form>
<fieldset ng-show="false">
<div class="form-group">
<label for="location" class="cushion">Location <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.locationAbout]]"></i></label>
<div class="form-control" ><input type="text" ng-model="e.location" id="location"></div>
</div>
<div class="form-group">
<label for="api" class="cushion">
API Key
<i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.APIAbout]]"></i></label>
<div class="form-control"><input type="text" ng-model="e.API" id="api" placeholder="API Key"></div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="zoom">Zoom</label>
<div class="form-control"><input type="range" name="input" ng-model="e.zoom" min="[[e.minZoom]]" max="[[e.maxZoom]]" id="zoom"></div>
</div>
<div class="form-group">
<label for="scale">Scale (2x) <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.scaleAbout]]"></i>
</label>
<div class="form-control"><input type="checkbox" ng-model="scale" ng-true-value="2" ng-false-value="1" id="scale" ng-init="scale='false'"></div>
</div>
<div class="form-group">
<label for="width" class="cushion">Ancho <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i></label>
<div class="form-control"><input type="number" ng-model="e.width" min="0" max="[[e.maxSize]]" id="width"></div>
</div>
<div class="form-group">
<label for="height" class="cushion">Alto <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i>
</label>
<div class="form-control"><input type="number" ng-model="e.height" min="0" max="[[e.maxSize]]" id="height"></div>
</div>
</fieldset>
<fieldset ng-show="false">
<div class="form-group">
<label for="showMarker">Map Marker</label>
<div class="form-control"><input type="checkbox" ng-model="showMarker" ng-true-value="true" ng-false-value="false" id="showMarker"></div>
</div>
<ng-switch on="showMarker">
<ng-switch ng-switch-when="true">
<div class="form-group">
<label for="markerColor"> Marker Color</label>
<div class="form-control"><select ng-model="e.markerColor"
ng-options="color for color in colors" id="markerColor">
</select></div>
</div>
<div class="form-group">
<label for="markerSize"> Marker Size</label>
<div class="form-control"><select ng-model="e.markerSize"
ng-options="markerSize.value as markerSize.text for markerSize in markerSizes" id="markerSize">
</select></div>
</div>
</ng-switch>
</ng-switch>
</fieldset>
<fieldset>
<div class="form-group">
<label for="mapType"> Tipo de Mapa</label>
<div class="form-control"><select ng-model="e.mapType"
ng-options="mapType for mapType in mapTypes" id="mapType">
</select></div>
</div>
<div class="form-group">
<label for="format"> Formato imagen</label>
<div class="form-control"><select ng-model="e.format"
ng-options="format for format in formats" id="format">
</select></div>
</div>
<div class="form-group">
<label for="visual"> Efecto Virtual</label>
<div class="form-control"><input type="checkbox" ng-model="visual" ng-true-value="true" ng-false-value="false" ng-init="visual='true'" id="visual"></div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-right col">
<div class="static">
<img ng-src="http://maps.googleapis.com/maps/api/staticmap?center=[[e.location.split(' ').join('+')]]&zoom=[[e.zoom]]&scale=[[scale]]&size=[[e.width]]x[[e.height]]&maptype=[[e.mapType]]&sensor=false[[ e.API !== '' && '&key='+e.API || '' ]]&format=[[e.format]]&visual_refresh=[[visual]][[ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' ]]" alt="Google Map of [[$route.current.params]]" class="static-map" id="map">
</div>
<div class="tabs">
</div>
</div>
</div>
</body>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.3/angular-route-segment.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Can you tell me why this is happening ?? thanks im getting started with angularJS
You can use $interpolateProvider:
Used for configuring the interpolation markup. Defaults to {{ and }}.
Example:
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}]);
Finally got it, didn't realize there was this piece of code on Index.js
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
Thaks a lot guys, im really getting started so i got no idea why was this part of code until now....
With Angular JS you should use {{ scopeVariableName }}, below is a very simple and easy to understand example for you to get started.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>