How can I center the below form. Right now it is too far over to the right. I want it centered on the page (Moved slightly over to the left). I have tried a lot of different solutions however, I know I am missing something very small here. Thank you.
![<!DOCTYPE HTML>
<head>
<title>Page | Contact</title>
<meta charset="utf-8">
<!-- Google Fonts -->
<link rel='stylesheet' type='text/css' href='css/font.css'/>
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/simple_menu.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/contact.css">
<!-- Contact Form -->
<link href="contact-form/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="contact-form/css/uniform.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script src="js/contact.js"></script>
<?php include 'common_header.php'; ?>
</head>
<body>
<?php
include 'header.php';
?>
<div id="container">
<div class="one-third"> </div>
<div class="one-third">
<div class="heading_bg">
<h2>Contact Us</h2>
</div>
<form action="#" id="contact_form" class="TTWForm" method="post">
<div id="field1-container" class="field f_100">
<label class="required" for="name">Name</label>
<input name="name" id="name" type="text">
<span id="name_validation" class="error_message"></span>
</div>
<div id="field2-container" class="field f_100">
<label class="required" for="subject">Subject</label>
<input name="subject" id="subject" type="text">
<span id="subject_validation" class="error_message"></span>
</div>
<div id="field5-container" class="field f_100">
<label class="required" for="email">Email</label>
<input name="email" id="email" type="email">
<span id="email_validation" class="error_message"></span>
</div>
<div id="field4-container" class="field f_100">
<label class="required" for="message">Message</label>
<textarea rows="5" cols="20" id="message" name="message"></textarea>
<span id="message_validation" class="error_message"></span>
</div>
<div id="form-submit" class="field f_100 clearfix submit">
<input value="Submit" type="submit" id="submit_button">
</div>
</form>
</div>
<div class="one-third last">
</div>
<div style="clear:both; height: 0px"></div>
</div>
<!-- close container -->
<?php
include('footer.php');
?>
</body>
</html>][2]
CSS
#after_submit, #email_validation, #name_validation {
display:none;
}
#after_submit{
background-color: #c0ffc0;
line-height: 31px;
margin-bottom: 10px;
padding-left: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#after_submit{
color: #6c6c6c;
}
.error {
background-color:#FFDFDF;
color:red;
}
.error_message{
font-style: italic;
font-size: 10px;
}
.row {
margin:5px;
}
This should do the trick for you:
#contact_form{
width:50%;
margin-left:auto;
margin-right:auto;
}
Check the fiddle here
I have not added all your CSS, only showed how you can center the form. Using the CSS above in your code, you would be able to center it.
You can put the form in a div and use css on the div or use for the form. Set width accordingly, but the margin-left and right when set to auto, put it into center of the screen, no matter what the screen size is.
If this doesnt work, then create a jsfiddle with all your relevant css and html and comment.
This should do the trick. Might have to play with the width and margin, but as long as they add up to 100%, you should be okay.
#contact_form, .heading_bg {
display: block;
position: relative
width: 50%;
margin: 0 25%;
padding: 0;
}
That will at least center your main div. Then it's just a matter of playing with the inside div and input settings to get things where you'd like them.
Related
So I am trying to develop a simple form page using Bootstrap. However, I want a different background-color than the classic white. Because of this, I added a new background-color (light gray) by overriding the "form-control" class's background color.
When I added this I sometimes got a part of the right side cut off, I don't really know why. It happened when I added the color so I guess it has something with the background color to do. But why I don't know. That's why I am asking you! :)
Here is an image of the "input":
Here is the affected code:
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.formKeepLeft {
display: flex;
}
.skipLine {
clear: left;
}
.form-control, .form-control:focus {
width: 100%;
border-radius: 0px;
background-color: lightgray;
}
.skipLine {
display: block;
}
</style>
<div class="row">
<div class="col-6">
<!--- Col 1 --->
<form>
<div class="formKeepLeft">
<div class="form-group">
<label for="inputEmail">Namn</label>
<input type="input" class="form-control " size="100%" id="inputName" placeholder="">
</div>
<div class="form-group" style="padding-left: 10px;">
<label for="inputPassword">E-post</label>
<input type="email" class="form-control " size="100%" id="inputEmail" placeholder="">
</div>
</div>
<!-- Form row 2 -->
<div class="form-group skipLine">
<label for="inputPassword">Ämne</label>
<input type="input" class="form-control " size="100%" id="inputÄmne" placeholder="">
</div>
</form>
</div>
</div>
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
It often gets cut off when I resize the page, so for example, it might work for col-lg but when I resize it to another size this sometimes happens. I tried using background-size but without any luck.
I want to achieve this:
The image is a bit small, but basically it is the exact same image but without the right part cut off. Does anyone know the solution? What did I do wrong?
Thanks, any suggestions are appreciated
It's just because of border-radius, you can add border-width: 0; to remove that gap.
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.formKeepLeft {
display: flex;
}
.skipLine {
clear: left;
}
.form-control, .form-control:focus {
width: 100%;
border-radius: 0px;
background-color: lightgray;
border-width: 0;
}
.skipLine {
display: block;
}
</style>
<div class="row">
<div class="col-6">
<!--- Col 1 --->
<form>
<div class="formKeepLeft">
<div class="form-group">
<label for="inputEmail">Namn</label>
<input type="input" class="form-control " size="100%" id="inputName" placeholder="">
</div>
<div class="form-group" style="padding-left: 10px;">
<label for="inputPassword">E-post</label>
<input type="email" class="form-control " size="100%" id="inputEmail" placeholder="">
</div>
</div>
<!-- Form row 2 -->
<div class="form-group skipLine">
<label for="inputPassword">Ämne</label>
<input type="input" class="form-control " size="100%" id="inputÄmne" placeholder="">
</div>
</form>
</div>
</div>
Add border:0; it will show space differently sometimes other corners better to make the border as 0
.form-control, .form-control:focus {
width: 100%;
border-radius: 0px;
background-color: lightgray;
border: 0;
}
I am fairly new to web design so please bear with my lack of knowledge and possible stupid questions.
I am trying to create a login page as shown below.
I have placed the Username and Password form inside a div element which I have centred on the page. However, I haven't managed to centre the Username and Password field correctly inside this div element.
I tried to place form by centering it relative to the div element in the middle of the page and placing the login to the bottom right corner however, it still doesn't work.
Further, I am not able to correctly place The header "SampleWebPage" in its correct place.
Here's the CSS and HTML code for the centred div class inside which the form is placed.
.login_div {
width: 300px;
height: 300px;
/* Center form on page horizontally & vertically */
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
<html>
<head>
<title>Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>
<body>
<div class = "login_div">
<form action="" method = "post" class="login_form">
Username:
<input type="text" name="username" value="{{
request.form.username }}">
<br>
Password:
<input type="password" name="password" value="{{
request.form.password }}">
<br>
<input class="btn btn-default" type="submit" value="Login">
</form>
</div>
</body>
</html>
I'm sorry if this is a very broad question, however I require help getting this webpage to work correctly.
Thanks.
You can use flexbox:
.login_div {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.row {
padding: 10px;
}
.row.submit {
text-align: right;
}
<head>
<title>Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>
<body>
<div class="login_div">
<form action="" method="post" class="login_form">
<div class="row">
<label>Username:
<input type="text" name="username" value="{{request.form.username}}">
</label>
</div>
<div class="row">
<label> Password:
<input type="password" name="password" value="{{request.form.password }}">
</label>
</div>
<div class="row submit">
<input class="btn btn-default" type="submit" value="Login">
</div>
</form>
</div>
</body>
I have created a login page but its not responsive and for achieving that I have messed up my entire design.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box
{
position: center;
top: 17;
left: 17;
}
.logo
{
position: absolute;
top:50px;
left: 100px;
border-right: 2px solid gray;
}
</style>
</head>
<body> <div class="container">
<h2>ADMIN PANEL LOGIN</h2>
<form>
<div>
<div class="form-group box">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<img src="back_box.png" class="box" width="900" height=" 400" />
<img src="logo_written.png" class="logo" width="250" height="300" />
</div>
</form>
</body>
</html>
i have added bootstrap classes too but i am unable to achieve my goal of responsive design
For Bootstrap you need to add bootstrap file source just add this to your head section.
<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>
just add one link cdn of bootstrap.css..
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.box
{
position: center;
top: 17;
left: 17;
}
.logo
{
position: absolute;
top:50px;
left: 100px;
border-right: 2px solid gray;
}
</style>
</head>
<body> <div class="container">
<h2>ADMIN PANEL LOGIN</h2>
<form>
<div>
<div class="form-group box">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<img src="back_box.png" class="box" width="900" height=" 400" />
<img src="logo_written.png" class="logo" width="250" height="300" />
</div>
</form>
</body>
</html>
Add this meta tag to your head tag
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
after that you can able to write media query for multiple devices like mobile & tablates...
#media (max-width: 767px) {
/* write css for mobile here */
}
#media (min-width: 768px) and (max-width: 1024px) {
/* write css for tablate here */
}
I can't get to center a component perfectly I want this form to be in the middle and that works, but I can't get the background to be around it perfectly, I've tried millions of things can someone give me a hand?
Thank you in advanced.
HTML:
<!DOCTYPE html>
<html>
<head>
<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="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Accounts</title>
</head>
<body>
<div class="authform">
<form class="my-form form-horizontal">
<div class="color">
<fieldset>
<label class="col-md-4 control-label" for="username"></label>
<div class="col-md-5">
<center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center>
</div>
<br><br><br>
<label class="col-md-4 control-label" for="password"></label>
<div class="col-md-5">
<center><input id="password" name="password" placeholder="Password" class="form-control input-md a-in" required="" type="password"></center>
</div>
<br><br><br>
<label class="col-md-4 control-label" for="send"></label>
<div class="col-md-4">
<button id="send" name="send" class="btn">Auth</button>
</div>
</fieldset>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
CSS:
.authform {
padding-top: 15%;
width: 50%;
margin: auto;
float: center;
}
.color {
margin: auto;
float: center;
background-color: #2ecc71;
border-radius: 25px;
border: 2px solid #2ecc71;
padding: 20px;
}
You might want to try FlexBox. In my opinion, it's the single best thing that ever happened to CSS.
See my CodePen for an example using your HTML.
These 3 lines of CSS are the most important:
display: flex;
align-items: center;
justify-content: center;
Edit: My CodePen might not look perfectly centered, but that's because height: 100vh doesn't really work in CodePen. But it'll work outside of CodePen.
Edit 2: Updated codepen
Couldn't you simply apply the background and border to the .authform class or are you going for a different look?
.authform {
padding: 15% 20px 20px;
width: 50%;
margin: auto;
background-color: #2ecc71;
border-radius: 25px;
border: 2px solid #2ecc71;
}
You are using bootstrap for your inputs. Bootstrap's columns must be 12 in every row. In your case you have to add one div after every input.
<label class="col-md-4 control-label" for="username"></label>
<div class="col-md-4">
<center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center>
</div>
<div class="col-md-4"></div>
or
<label class="col-md-3 control-label" for="username"></label>
<div class="col-md-6">
<center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center>
</div>
<div class="col-md-3"></div>
Maybe you could try, in css:
text-align:center;
margin-left:(half of the Pixels of the screen)
margin-top:(half of the Pixels of the screen)
I have my css, it works on Chrome but on Firefox it doesn't let me type in it, if I remove the padding inside the input it works but it's not going to fit on the design. I'm using bootstrap, I don't know if it affects.
How can I solve it?
HTML
<form action="" class="complete-profile__input-container">
<div class="form-group col-lg-4">
<label for="">Nombre:</label>
<input type="email" class="form-control" placeholder="Tu nombre">
</div>
</form>
CSS:
.complete-profile__input-container input {
padding: 18px 12px;
}
Update
Capture:
JS Bin (Thanks to Roko C):
http://jsbin.com/gifeka/1/edit?html,css,output
Regards!
The Width and Height you provided should be greater than amount of padding for example summing top and bottom margin 18 + 18 = 36px so height should be greater than 36px, same goes for height
By applying this you will be able to type
.complete-profile__input-container input {
padding: 18px 12px;
width:180px;
height:100px;
}
Working Demo:
.complete-profile__input-container input {
padding: 18px 12px;
width:180px;
height:60px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form action="" class="complete-profile__input-container">
<div class="form-group col-lg-4">
<label for="">Nombre: </label>
<input type="email" class="form-control" placeholder="Tu nombre">
</div>
</form>
</body>
</html>