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)
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'm looking get this code:
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
To look like this
minus the colors, checkbox, value, etc. Essentially I want it to look just like a legend tag does in a field set but without either tags and the label inside the border of the text input. Thanks in advance!
Here is what you need. You can change the CSS values according to your need. Also important is to set the background-color of label to the same color as your form/html.
.form-group{
padding:10px;
border:2px solid;
margin:10px;
}
.form-group>label{
position:absolute;
top:-1px;
left:20px;
background-color:white;
}
.form-group>input{
border:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
Hope this helps :).
You can use legend tag.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Contact</legend>
Name <input type="text"><br>
Email <input type="text"><br>
</fieldset>
</form>
</body>
</html>
When I look at the answers here, all of them are answered to save the moment, that is, when the background picture changes, the examples made explode, there is no such problem in my example, you can use it as you wish
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
.textOnInput {
position: relative;
}
.textOnInput label {
position: absolute;
top: -15px;
left: 23px;
padding: 2px;
z-index: 1;
}
.textOnInput label:after {
content: " ";
background-color: #fff;
width: 100%;
height: 13px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
label {
font-size: 16px;
font-weight: 500;
display: inline-block;
margin-bottom: .5rem;
}
.form-control {
box-shadow: none !important;
}
</style>
</head>
<body>
<div class="col-md-4 mt-5">
<div class="textOnInput">
<label for="inputText">Email</label>
<input class="form-control" type="text">
</div>
</div>
</body>
</html>
you should add position relative if you want more than one box and add some padding:
.form-group{
padding:10px;
border:2px solid;
margin:10px;
}
.form-group>label{
padding-left: 5px;
padding-right: 5px;
position:relative;
top:-20px;
left:20px;
background-color:white;
}
.form-group>input{
border:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
<div class="form-group">
<label>Second name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
you can create an input and wrap it inside a fieldset:
<fieldset>
<legend>text creator</legend>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
</fieldset>
and some basic css to remove the input border:
input {
border:none;
width:100%;
}
input:focus, textarea:focus, select:focus{
outline: none;
}
input {
border:none;
width:100%;
}
input:focus, textarea:focus, select:focus{
outline: none;
}
<fieldset>
<legend>text creator</legend>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
</fieldset>
<fieldset class="border col-12 pt-0 pb-1 mx-auto ">
<legend class="w-auto mb-0">First Name</legend>
<input type="text" id="fname" name="fname" class="border-0 p-0 mx-auto pl-1" placeholder="abc#gmail.com">
</fieldset>
if you are using bootstrap4 play with class and easily solved it its worked for me you can adjust your class like p-1,ml-2.... etc
This can be achieved using pure html. It happens automatically when you nest legend tags in fieldsets
<fieldset>
<legend>Here is the legend<legend>
</fieldset>
below is my code
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
i have created two columns in one row
first column has label and under that input box
next column has only label and it should be aligned inline with input box, but since only label was there it used to display on top. So i wrote one dummy label. Still it is not aligned with input box.
how to do this? Is there any way to do it in bootstrap?
Add between label. There should be some content inside label to make it work. So just add html code of empty space.
<label> </label>
However a better approach will be without bootstrap columns and using custom css as follows:
.column-holder {
table-layout: fixed;
display: table;
width: 100%;
}
.column-holder .column {
vertical-align: bottom;
display: table-cell;
padding: 0 15px;
}
label {
display: block;
}
input {
display: block;
width: 100%;
}
<div class="column-holder">
<div class="column">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="column">
<label>test</label>
</div>
</div>
Without Bootstrap :
that is happens because you put every label inside same div tag again and again.
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
when you remove those two same div tags or put all labels and input tag inside a single label then all elements will gets inline automatically.
HOW TO DO :
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
Using Bootstrap :
Yes you can do same thing using bootstrap even that is more easy and looks more beautiful. here is a simple example for you.
copy this code and run with chrome or firefox or safari this code will work perfectly
you can visit this site:for more detail
or check this outinline form using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.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>
<div class="container">
<h2>Example of inline form</h2>
<form class="form-inline" role="form">
<div class="form-group">
<label >Name : </label>
<input type="email" class="form-control" id="name" placeholder="Enter your name ">
</div>
<div class="form-group">
<label for="email">Email : </label>
<input type="password" class="form-control" id="email" placeholder="enter your email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
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.
Right now I'm working on a school project where I create a bookstore. I have created the front page and now I'm trying to use php to create the login and register system. I've created the Register page (php) and I created a CSS File to go along with it, however I can't get the two to connect properly. When I run it in localhost the css won't render. I don't see a error in my code and I don't understand why it's not working. I tried to change the css name around a bit to see if the problem was the naming however nothing else seems to work.
/* Import Google Font */
#import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
.form-div {
margin: 50px auto 50px;
padding: 25px 15px 10px 15px;
border: 1px solid #80ced7;
border-radius: 5px;
font-size: 1.1em;
font-family: 'Lora', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<!--Bootstrap 4 CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Other CSS File --->
<link rel="stylesheet" href="registerandlogin.css" type="text/css">
<title>Register</title>
</head>
<body>
<p>Register Today and Join the Royal Reader Community</p>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="signup.php" method="post">
<h3 class="text-center">Register</h3>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="passwordConf">Confirm Password</label>
<input type="password" name="passwordConf" class="form-control form-control-lg">
</div>
<div class="form-group">
<button type="submit" name="signup-btn" class="btn btn-primary btn-block btn-log">Sign Up</button>
</div>
<p class="text-center">Already a member?</p>Sign In
</form>
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Try to add a class to your form or whatever like this:
<form class="form-div" action="signup.php" method="post">
Here you can read about css selectors: https://www.w3schools.com/html/html_css.asp
You do not have an element named .form-div, which is why your CSS does not affect anything. Try adding an element with that class name in your <form> tag.