Goal: I am trying to set up an input on a side project I'm working on where the user inputs some information. Currently I have it set up with the label of the input in the left most bubble followed by two text input bubbles.
Problem: The input fields are about 5 pixels bellow the bubble that is labeling them and I can't figure out how to correct that.
Notes: I'm fairly new to HTML/CSS and am completely self taught so if there is a better way to do what I am trying to do please let me new. Bellow is the section that is giving me trouble
.inputConatiner {
height: 75px;
}
.textContainer {
height: 75px;
width: 500px;
display: inline-block;
}
input[type="text"] {
border: 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-left: 10px;
padding-bottom: 13px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
}
input {
width: 200px;
}
<head>
<title>Side Project</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<body>
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</form>
</body>
I have updated your snippet below. I think this is what you are looking for and was simply fixed by using vertical-align: middle; on the label. Not sure of what you are using this for, however, I would suggest perhaps using a framework such as https://getbootstrap.com/. Most frameworks will have great foundation blocks across all screen sizes and devices (as in the snippet below, you'll have to view in full screen, otherwise it is a mess. Currently, from a UI focus, this implementation is very limited by not being responsive.
Hope this helps.
.inputConatiner {
height: 75px;
}
.textContainer {
height: 75px;
width: 500px;
display: inline-block;
}
input[type="text"] {
border: 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-left: 10px;
padding-bottom: 13px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
vertical-align: middle;
}
input {
width: 200px;
}
<head>
<title>Side Project</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<body>
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</form>
</body>
Use display: flex; for .textContainer to solve 5px problem.
Please see this document for FlexBox
One thing I noticed in your HTML code is your second .inputContainer is missing a .textContainer. Since you've said that you're fairly new to HTML and CSS, I suggest that you use basic properties like float to make elements stacked side by side and margin for spacing/aligning.
.inputConatiner {
height: auto;
}
/* Without this, the layout would be ruined because of float */
.inputConatiner:before, .inputConatiner:after {
content: '';
display: table;
}
.inputConatiner:after {
clear: both;
}
.textContainer {
height: auto;
width: 500px;
margin-top: 20px;
margin-left: 10px;
float: left; /* This makes the elements stacked side by side */
}
input[type="text"] {
border: 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-left: 10px;
padding-bottom: 13px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
float: left; /* This makes the elements stacked side by side */
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
}
input {
width: 200px;
}
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
</form>
Related
I have coded a small form, it is part of a bigger webpage and I am taking small steps, according to specification.
I am curious if I could have done it better in some way. If I could streamlined the code or used some other command or syntax that is better?
Perhaps there are some redundancies?
Also is there a good way to move the Send button so it is centered in the middle and is there a way to move it closed to the bottom without too much hassle? Or to move the placeholder text close to the left?
I will enclose a link to a pen and you can check out the code there.
https://codepen.io/anon/pen/pYNPrw
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<form action="#">
<h2>xyz xyz</h2>
<div class="input-wrapper">
<label for="name">Name:</label>
<input type="text" name="Name" placeholder="Name...." id="name">
</div>
<div class="input-wrapper">
<label for="email">Epost:</label>
<input type="text" name="Epost" placeholder="Epost...." id="epost">
</div>
<button type="submit">Senden</button>
</form>
</body>
</html>
I have changed your code by adding margin property to adjust position of the button and commenting transform property. but if you could use a style library like bootstrap or material design you can sort out a form way more faster
h2 {
margin: 0;
padding: 0;
margin-bottom: 2.3rem;
}
form {
float: left;
display: inline-block;
padding: .5rem;
height: 205px;
width: 168px;
border: 2px solid black;
font-family: Sans-Serif;
font-size: 12px;
}
.input-wrapper {
margin-bottom: .5rem;
}
label {
width: 50px;
display: inline-block;
text-align: left;
font-family: Sans-Serif;
font-size: 14px;
}
input {
width: 90px;
padding: .5rem;
height: 3px;
border: 2px solid black;
text-align: left;
}
button {
padding: .5rem;
display: block;
width: 55%;
background: lightgrey;
color: black;
border: 2px solid black;
text-align: center;
border-radius: 5px;
font-size: inherit;
/* transform: translate(50%, 50%); */
margin: 60px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<form action="#">
<h2>xyz xyz</h2>
<div class="input-wrapper">
<label for="name">Name:</label>
<input type="text" name="Name" placeholder="Name...." id="name">
</div>
<div class="input-wrapper">
<label for="email">Epost:</label>
<input type="text" name="Epost" placeholder="Epost...." id="epost">
</div>
<button type="submit">Senden</button>
</form>
</body>
</html>
I have two different inputs of type text and I'd like to apply different styles to each of them. How would I go about doing that?
div input[type=text] {
background-color: #212121;
border: none;
color: white;
padding: 1px 5px;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 10px;
width: 86px;
height: 35px;
}
.contact-field {
width: 33.33%;
display: inline-block;
vertical-align: top;
}
.contact-field input {
width: 90%;
padding: 10px;
border: 3px solid #dedede;
outline: none;
margin-bottom: 10px;
transition: all .325s;
}
<div class="row">
<div class="column">
<input type="text" name="MAR 7" value="MAR 7">
</div>
<div class="column">
<div class="caption">
<h5>Ziggo Dome</h5>
<h6>NIEUW-AMSTERDAM, NETHERLANDS</h6>
</div>
</div>
<div class="main-container">
<section class="contact-container">
<form method="GET" action="#">
<div class="contact-field">
<input type="text" name="full-name" placeholder="Email Address" required/>
</div>
I am clearly new to this. I hope that you can help me.
In the css, to target the first input you'd do something like this - .row .column input[type="text"]
And the second one like this - .main-container .contact-container form contact-field input[type="text"]
This'll allow you to apply different css styles to your each of your inputs, without them crossing over.
I have been trying to style a Register form. I want the heading to be in the center of the div. I have another login form just beside it.
I have styled them using flex box and then used justify content as center. I also want to add a vertical line between the register form and login form. I don't want to use one of the borders of the form. Apart from using one of the form's border is there any way to do it.
Things I've tried but didn't work
1.text-align: center:
2.margin: 0 auto;
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h1 {
margin: 0 auto;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
It would be helpful if you could post the html and css.
My guess is that the container div has no width settings, so the div is the same width as the text, so you cannot center it. Maybe set the width to 100% of its container and set the text-align to center and see if that helps.
From your code you could try
#register h3 {
text-align:center;
}
this will mean any h3 tags inside the div with the id register will have the text-align:center attribute applied to them
Otherwise post the HTML and CSS and we can take a look. (I see the HTML now, add the CSS too please
you can draw a line in the middle using CSS pseudo selector::after following is the piece of CSS rule to do that.
div#register::after {
content: "";
display: block;
width: 0px;
height: 250px;
border: 1px solid #b6b6b6;
position: absolute;
top: 110px;
left: 50%;
}
.cont h3 {
text-align: center;
}
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h1 {
margin: 0 auto;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
div#register::after {
content: "";
display: block;
width: 0px;
height: 250px;
border: 1px solid #b6b6b6;
position: absolute;
top: 110px;
left: 50%;
}
.cont h3 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
For centering the heading of the register form, use:
#register h3 {
text-align: center;
}
And similarly, for centering the heading of the login form, use:
#login h3 {
text-align: center;
}
And, for the vertical line, create an empty div and style it. I've used divider class here:
.divider {
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
margin-top: 40px;
}
See the full code below:
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h3 {
text-align: center;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#register h3 {
text-align: center;
}
.divider {
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div class="divider"></div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
I would like to display three elements on a single line: one justified to the left; the second in the centre and containing sub-elements; and the third justified to the right and containing a DuckDuckGo search box and a magnifying glass image. At the moment I have got them all on the same line but they aren't justifying properly. My code is as follows:
#row2 { padding: 5px 0 5px 10px;
margin: 35px 0 20px 0;
font-size: 83%;
width: 100%;
border-top: 2px #f00 solid;
border-bottom: 1px #888 solid; }
#row2 a {border: none; }
#row2-col1 {display:inline;
text-align:left;
margin-right: 40px;}
#row2-col2 {display:inline;
text-align:center; }
.row2-col2-inner {display:inline;
text-align:center;
margin: 0 15px; }
#row2-col3 {display:inline;
text-align:right; }
form {
display: inline-block;
vertical-align: middle; }
form input[type="text"] {
height: 16px;
width: 200px;
margin-left: 25px;
margin-top: 2px;
font-size: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
vertical-align: top; }
<div id="row2">
<div id="row2-col1">
text</div><!--close r2-c1-->
<div id="row2-col2">
<div class="row2-col2-inner">One</div>
<div class="row2-col2-inner">Two</div>
<div class="row2-col2-inner">Three</div>
<div class="row2-col2-inner">Four</div>
</div><!--close r2-c2-->
<div id="row2-col3">
<form method="get" id="search" action="http://duckduckgo.com/">
<input type="hidden" name="sites" value="foobar.com"/>
<input type="hidden" name="k8" value="#000000"/>
<input type="hidden" name="k9" value="#0000ff"/>
<input type="hidden" name="kaa" value="#880088"/>
<input type="hidden" name="kt" value="a"/>
<input type="text" name="q" maxlength="255" placeholder=" ..."/>
<img src="images/image.gif" height="20" width="20">
</form>
</div><!--close r2-c3-->
</div><!--close row2-->
There are a hundred different ways to accomplish what you're trying to do:
Floats (Easy)
Flexbox (Advanced)
Display (which you are attempting by the looks of it)
Absolute positioning (Weird, but applicable in some situations)
... and so on ...
Based on your example code I would keep it simple and use floats. Also, IMO, you should stay away from using ids - use classes instead.
In the below example I will assume you want 25%-50%-25%. The simple structure being:
<div class="row">
<div class="column left">Left side</div>
<div class="column center">Center column</div>
<div class="column right">Right</div>
</div>
CSS:
/* overflow and zoom are just to clear the row */
http://learnlayout.com/clearfix.html
.row {
overflow: auto;
zoom: 1;
}
.row .column {
float: left;
}
/* set the width of each column */
.column.left, .column.right {
width: 25%;
}
.column.center {
width: 50%;
}
Note:
This would not account for padding. If you want spacing between the columns then have the inner contents handle that with padding or margins.
This is a specific example to your situation
Nowadays it is quite common to use frameworks for grids. They give you a lot more options and are tried and tested techniques that handle a lot of the edge cases. Search css grid and that will get you started.
If flexbox is an option, you can make row2 a flexbox and use justify-content: space-between to align as required - see demo below:
#row2 {
padding: 5px 0 5px 10px;
margin: 35px 0 20px 0;
font-size: 83%;
width: 100%;
border-top: 2px #f00 solid;
border-bottom: 1px #888 solid;
/*ADDED THESE*/
display: flex;
justify-content: space-between;
}
#row2 a {
border: none;
}
#row2-col1 {
display: inline;
text-align: left;
margin-right: 40px;
}
#row2-col2 {
display: inline;
text-align: center;
}
.row2-col2-inner {
display: inline;
text-align: center;
margin: 0 15px;
}
#row2-col3 {
display: inline;
text-align: right;
}
form {
display: inline-block;
vertical-align: middle;
}
form input[type="text"] {
height: 16px;
width: 200px;
margin-left: 25px;
margin-top: 2px;
font-size: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
vertical-align: top;
}
<div id="row2">
<div id="row2-col1">
text</div>
<!--close r2-c1-->
<div id="row2-col2">
<div class="row2-col2-inner">One
</div>
<div class="row2-col2-inner">Two
</div>
<div class="row2-col2-inner">Three
</div>
<div class="row2-col2-inner">Four
</div>
</div>
<!--close r2-c2-->
<div id="row2-col3">
<form method="get" id="search" action="http://duckduckgo.com/">
<input type="hidden" name="sites" value="foobar.com" />
<input type="hidden" name="k8" value="#000000" />
<input type="hidden" name="k9" value="#0000ff" />
<input type="hidden" name="kaa" value="#880088" />
<input type="hidden" name="kt" value="a" />
<input type="text" name="q" maxlength="255" placeholder=" ..." />
<img src="images/image.gif" height="20" width="20">
</form>
</div>
<!--close r2-c3-->
</div>
<!--close row2-->
i have no idea what the problem is! No matter what i try it wont work, the divs just overlap in the middle of the screen. I tried using every possible combination of display and position.
I need the divs to go one under another.
http://jsfiddle.net/s2dv6agr/
please help :(
#container{
position: relative;
}
#container1{
position: absolute;
z-index: 100;
}
#container2{
position: absolute;
z-index: 110;
}
Assuming the following HTML
<div id="container">
<div id="container1">
Hello
</div>
<div id="container2">
Hello again
</div>
</div>
#container {
position: relative;
}
#container1 {
position: relative;
z-index: 100;
}
#container2 {
position: relative;
z-index: 110;
}
This will display below each other.
http://jsfiddle.net/baLz1tvo/
Remove position:absolute and use position:relative at everywhere.
Use:
#container1{float: left}
#container2{float:right}
Try This : just example
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/stripe.png) repeat;
}
p {
font-size: 1.3em;
margin-bottom: 15px;
}
#page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
#contact-area {
width: 600px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 371px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
margin-top:30px;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">Gaming:</label>
<input type="text" name="Name" id="Name" />
<label for="City">Sports:</label>
<input type="text" name="City" id="City" />
<label for="Email">Watching Tv:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Sleeping:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Hiking:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Skiing:</label>
<input type="text" name="Email" id="Email" />
<input type="submit" name="submit" value="Add my info" class="submit-button" />
</form>
Can you give some explanation for position: absolute , normally if we use position: absolute, everything come over to parent element. Use position: absolute with top, left , right , bottom properties to align different places.