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 (:
Related
I currently have this as part of my script, the header and 2 paragraphs are being centered properly, but container and button are off to the left side. I have tried using <center> </center> but I don't know where to properly apply them for the form and button to be centered.
Screenshot of what needs to be centered:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-4">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>
Add 'text-center' class to the row and edit the 'col' classes to have 12 as a sum
<div class="container" >
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row text-center">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-3">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
<div class="col-md-3"></div>
</div>
</form>
</div>
Check out this code:
<div class="text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-4">
<div class="custom-file" id="customFile" lang="es">
<input type="file" class="custom-file-input">
<label class="custom-file-label" for="exampleInputFile">
Choose file...
</label>
</div>
</div>
<div class="col-12 col-md-1">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>
Hope this helps.
I am creating a Login form but I am in trouble while adding logo above the login box. I have two logos and one text between them and I need that inline with responsive behavior.
I am a PHP developer I have no idea about designing.
How can I achieve a layout like the image below?
<style>
.container {
display: flex;
text-align: center;
}
.container>.logo {
flex: 1;
/*grow*/
}
</style>
<body class="login-page">
<!-- Progress Bar -->
<div class="progress-wrap progress">
<div class="progress-bar progress"></div>
</div>
<!-- Header -->
<div class="header-container-wrapper">
<div class="page-center">
<a href="//www.c2perform.com">
<img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
</a>
</div>
</div>
<!-- Body -->
<div class="body-container-wrapper">
<div class="page-center">
<div class="container">
<div class="logo">
<img src="images/ef_logo.png" width="200px" height="auto">
</div>
<div class="logo">
<h4>is now</h4>
</div>
<div class="logo">
<img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
</div>
</div>
<!-- Login -->
<div class="login-box-wrapper">
<div class="login-box">
<h3>Log In</h3>
<?php ef_print_notices(); ?>
<!-- Login Form -->
<form role="form" method="post" id="loginForm" class="form lostpass">
<div class="form-group">
<label for="inputEmail3">User Name</label>
<div>
<div>
<input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<div>
<div class="input-group">
<input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
<div>
<input type="submit" name="login" value="Login" class="button" />
</div>
</div>
<div class="form-group">
<div>Lost Password?</div>
</div>
</form>
</div>
</div>
</div>
</div>
You need to use align-items for vertical alignment and justify-content to align horizontally.
DEMO
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container>.logo {
flex-grow: 1;
text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
<div class="progress-bar progress"></div>
</div>
<!-- Header -->
<div class="header-container-wrapper">
<div class="page-center">
<a href="//www.c2perform.com">
<img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
</a>
</div>
</div>
<!-- Body -->
<div class="body-container-wrapper">
<div class="page-center">
<div class="container">
<div class="logo">
<img src="images/ef_logo.png" width="200px" height="auto">
</div>
<div class="logo">
<h4>is now</h4>
</div>
<div class="logo">
<img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
</div>
</div>
<!-- Login -->
<div class="login-box-wrapper">
<div class="login-box">
<h3>Log In</h3>
<?php ef_print_notices(); ?>
<!-- Login Form -->
<form role="form" method="post" id="loginForm" class="form lostpass">
<div class="form-group">
<label for="inputEmail3">User Name</label>
<div>
<div>
<input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<div>
<div class="input-group">
<input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
<div>
<input type="submit" name="login" value="Login" class="button" />
</div>
</div>
<div class="form-group">
<div>Lost Password?</div>
</div>
</form>
</div>
</div>
</div>
</div>
You can also change the display behavior to be grid, and so, so you define the width in which the images should be displayed down.
.container {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.container>.logo {
flex-grow: 1;
text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
<div class="progress-bar progress"></div>
</div>
<!-- Header -->
<div class="header-container-wrapper">
<div class="page-center">
<a href="//www.c2perform.com">
<img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
</a>
</div>
</div>
<!-- Body -->
<div class="body-container-wrapper">
<div class="page-center">
<div class="container">
<div class="logo">
<img src="images/ef_logo.png" width="200px" height="auto">
</div>
<div class="logo">
<h4>is now</h4>
</div>
<div class="logo">
<img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
</div>
</div>
<!-- Login -->
<div class="login-box-wrapper">
<div class="login-box">
<h3>Log In</h3>
<?php ef_print_notices(); ?>
<!-- Login Form -->
<form role="form" method="post" id="loginForm" class="form lostpass">
<div class="form-group">
<label for="inputEmail3">User Name</label>
<div>
<div>
<input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<div>
<div class="input-group">
<input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
<div>
<input type="submit" name="login" value="Login" class="button" />
</div>
</div>
<div class="form-group">
<div>Lost Password?</div>
</div>
</form>
</div>
</div>
</div>
</div>
There I say that, whenever the items can have at least 100px of width, the items can remain inline, but, if the items can't achieve that minimum width, those which can't, are displayed down
I have made a modalbox with a form for signing up for a newsletter. When a person is signing up I would like the content in the modalbox is changing to a thank you message.
I am not quite sure how that is possible to do? I have set up a redirect when the signup is successfully, but that is to another page, which really gives a bad user experience in my opinion.
A working example can be seen here: Sign up form
<!DOCTYPE html>
<html lang="en">
<head>
<title>Signuo testpage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mk row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
<img src="https://www.votewalton.com/portals/walton/Images/button_newsletter.png" alt="Signuo for our newsletter" class="img-responsive"></img>
</a>
</figure>
</div>
<div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="mc_embed_signup">
<form action="https://testing.us16.list-manage.com/subscribe/post?u=c9e771e6f8adb066a0713eb0a&id=6e9f7d0e57" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" >
<div id="mc_embed_signup_scroll">
<h2>Signup for our newsletter</h2>
<p>Every second week we send out a newsletter with tips and trick, good offers for you</p>
<div class="mc-field-group">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME"></input>
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Emailadress <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"></input>
</div>
<div class="mc-field-group input-group" style="display:none;">
<strong>Lande grupper</strong>
<ul>
<li>
<input type="checkbox" value="1" name="group[7][1]" id="mce-group[7]-7-0"></input>
<label for="mce-group[7]-7-0">DK</label>
</li>
</ul>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_c9e771e6f8adb066a0713eb0a_6e9f7d0e57" tabindex="-1"></input>
</div>
<div class="clear">
<input type="submit" value="Tilmeld" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-success"></input>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer" style="text-align: left;">
<span style="font-size: 10px;">
We do not give your information for third part
</span>
</div>
</div>
</div>
</div>
<div class="inner-wrapper bottom-left"></div>
</div>
</a>
</div>
</body>
</html>
You need send request using ajax, remove action from tag and use jQuery, AngularJS or similar javascript framework to send request to server.
In success method you can hide / show panels to remove controls and display thanks message.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Signuo testpage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mk row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
<img src="https://www.votewalton.com/portals/walton/Images/button_newsletter.png" alt="Signuo for our newsletter" class="img-responsive"></img>
</a>
</figure>
</div>
<div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="mc_embed_signup">
<form class="validate" >
<div id="mc_embed_signup_scroll">
<h2>Signup for our newsletter</h2>
<p>Every second week we send out a newsletter with tips and trick, good offers for you</p>
<div class="mc-field-group">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME"></input>
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Emailadress <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"></input>
</div>
<div class="mc-field-group input-group" style="display:none;">
<strong>Lande grupper</strong>
<ul>
<li>
<input type="checkbox" value="1" name="group[7][1]" id="mce-group[7]-7-0"></input>
<label for="mce-group[7]-7-0">DK</label>
</li>
</ul>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_c9e771e6f8adb066a0713eb0a_6e9f7d0e57" tabindex="-1"></input>
</div>
<div class="clear">
<input type="button" value="Tilmeld" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-success"></input>
</div>
</div>
</form>
</div>
<div id="mc_thanks" style="display:none">
<h3 class="text-success">Thanks you </h3>
<button type="button" class="btn btn-success" data-dismiss="modal">Continue to site</button>
</div>
</div>
<div class="modal-footer" style="text-align: left;">
<span style="font-size: 10px;">
We do not give your information for third part
</span>
</div>
</div>
</div>
</div>
<div class="inner-wrapper bottom-left"></div>
</div>
</a>
</div>
</body>
<script>
$(document).ready(function(){
$("#mc-embedded-subscribe").click(function(){
var formData = {
FNAME: $('#mce-FNAME').val(),
EMAIL: $('#mce-EMAIL').val()
}
$.ajax({
type: 'POST',
url: "https://www.votewalton.com",
data: formData,
datatype : "application/json",
success: function(resultData) {
$('#mc_embed_signup').hide();
$('#mc_thanks').show();
},error: function (xhr, status) {
//alert("error")
},complete: function(){
$('#mc_embed_signup').hide();
$('#mc_thanks').show();
}
});
});
});
</script>
</html>
I'm working on a registration form and I have a problem when I want to make input["text"] (year) and select item (day and month) on the same line, this what I'm getting :
registration form
I want to delete the margin on the bottom of the select tag (added by default ) by adding a margin on the top, so I add this :
input[type="email"],
input[type="password"],
input[type="text"],
select {
display: block;
width: 80%;
height: 30px;
text-align: center;
border: none;
font-size: 1em;
color: #313A3D;
background-color: #E8E9EA;
margin-top: 10px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/styleAuth.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<header>
<div class="navbartop">
<!--<a class="title" href="./auth.html" >title of the template</a>-->
<a class="item selected" href="#auth">Authentification</a>
<a class="item" href="#register">register</a>
<a class="item" href="#newsleter">newsleter</a>
<a class="item" href="#comments">Comments</a>
</div>
</header>
<section class="secondSection">
<div class="registerPanel">
<div class="row topbuffer">
<div class="col-md-6"><input type="text" name="fn" placeholder="first name" /> </div>
<div class="col-md-6"><input type="text" name="ln" placeholder="last name" /></div>
</div>
<div class="row topBuffer">
<div class="col-md-4">
<select>
<option selected="">day</option>
<option>1...31</option>
</select>
</div>
<div class="col-md-4">
<select>
<option>month</option>
<option>1...12</option>
</select>
</div>
<div class="col-md-4">
<input type="text" name="y" placeholder="year" />
</div>
</div>
<div class="row topBuffer">
<div class="col-md-12"><input type="email" name="email" placeholder="email" /></div>
</div>
<div class="row topBuffer">
<div class="col-md-6"><input type="password" name="pw1" placeholder="enter your password" /></div>
<div class="col-md-6"><input type="password" name="pw2" placeholder="comfirm your password" /></div>
</div>
</div>
</section>
</body>
</html>
... but it's still not working, the margin on the top has no effect, so can anyone help me, guys !!
thanks in advance
Try this. No need to write any css
<!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>Test Code</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " crossorigin="anonymous ">
<style>
input[type="email"],
input[type="password"],
input[type="text"],
select {
/* display : block;
width : 80%;
height : 30px;
text-align : center;
border : none;
font-size : 1em;
color: #313A3D;
background-color: #E8E9EA;
margin-top : 10px; */
}
</style>
</head>
<body>
<header>
<div class="navbartop">
<!--<a class="title" href="./auth.html" >title of the template</a>-->
<a class="item selected" href="#auth">Authentification</a>
<a class="item" href="#register">register</a>
<a class="item" href="#newsleter">newsleter</a>
<a class="item" href="#comments">Comments</a>
</div>
</header>
<section class="secondSection">
<div class="registerPanel">
<div class="row topbuffer form-group">
<div class="col-md-6">
<input type="text" name="fn" placeholder="first name" / class="form-control"> </div>
<div class="col-md-6">
<input type="text" name="ln" placeholder="last name" / class="form-control">
</div>
</div>
<div class="row topBuffer form-group">
<div class="col-md-4">
<select class="form-control">
<option selected="">day</option>
<option>1...31</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control">
<option>month</option>
<option>1...12</option>
</select>
</div>
<div class="col-md-4">
<input type="text" name="y" placeholder="year" class="form-control" />
</div>
</div>
<div class="form-group">
<input type="email" name="email" placeholder="email" / class="form-control">
</div>
<div class="row form-group">
<div class="col-md-6">
<input type="password" name="pw1" placeholder="enter your password" / class="form-control">
</div>
<div class="col-md-6">
<input type="password" name="pw2" placeholder="comfirm your password" / class="form-control">
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
Updated:
I do not know if I understood well but what you want is to remove the botton margin of the two selects ?, if so, here is the necessary css:
First, you need to add a class to the day and month selects like this:
HTML:
<div class="col-md-4">
<select class="margin-bottom-0">
<option selected="" >day</option>
<option>1...31</option>
</select>
</div>
<div class="col-md-4">
<select class="margin-bottom-0">
<option>month</option>
<option>1...12</option>
</select>
</div>
<div class="col-md-4">
<input type="text" name="y" placeholder="year"/>
</div>
After that do you need to declare the class in css like this:
CSS:
.margin-bottom-0{
margin-bottom: 0;
}
I hope it helps you
Regards!
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.