How can I align this code:
CSS:
input {
border: none;
}
input.name {
color: #f39200;
background: url('../images/name.png') no-repeat left top;
width: 368px;
height: 48px;
padding-top: 1px;
padding-left: 100px;
font-size: 24px;
}
input.company {
vertical-align: middle;
color: #f39200;
background: url('../images/company.png') no-repeat left top;
width: 368px;
height: 48px;
padding-top: 0px;
padding-left: 140px;
font-size: 24px;
}
HTML:
<form id="contact-form" action="contact.php" method="post" style="list-style-type: none; width: 400px;">
<input type="hidden" name="redirect" value="/sent" />
<ul>
<li>
<input type="text" name="name" class="name" value="" />
</li>
<li>
<input type="text" name="company" class="company" value="" />
</li>
</ul>
</form>
I want to align them next to each other. So it will look something like this:
http://dflzqrzibliy5.cloudfront.net/images3/contact-form-generator.png
The first two are next to each other the others are not.. etc..
You could use float:left; and display: inline-block;. And you should check the width of the form and the width + padding of the input fields.
Here is a JSFiddle.
Try this:
ul li{
display: inline-block;
}
Related
I'm trying to do a google advanced search. I'm having trouble with the input text, I want to align them right just like Google, at a close distance and all accordingly.
This is my html:
<form action="https://www.google.com/advanced">
<div id="advanced">
Find pages with...<br/><br/>
all these words:<input type="text" name="words"><br/><br/>
this exact word or phrase:<input type="text" name="exact"><br/><br/>
any of these words:<input type="text" name="any"><br/></br>
none of these words:<input type="text" name="none"><br/><br/>
</div>
<input type="submit" value="Advanced Search">
</form>
This is my css:
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
display: block;
float: right;
}
But that makes them go to the right... Way too much. I wish I could adjust it. This is how it looks like.
[1]: https://i.stack.imgur.com/zX83k.png
Any help is appreciated, thank you.
You can simply apply a width or max-width to the container (#advanced) in your current code:
#advanced {
width: 100%;
max-width: 520px;
}
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
display: block;
float: right;
}
<form action="https://www.google.com/advanced">
<div id="advanced">
Find pages with...<br/><br/> all these words:<input type="text" name="words"><br/><br/> this exact word or phrase:<input type="text" name="exact"><br/><br/> any of these words:<input type="text" name="any"><br/></br>
none of these words:<input type="text" name="none"><br/><br/>
</div>
<input type="submit" value="Advanced Search">
</form>
use flexbox
#advanced {
flex: 1;
flex-direction: column;
}
and remove
display: block;
float: right;
and remove the BR's
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>
Alright, I know how the fieldset/legend works out in HTML.
I cannot encircle form html with legend
i don't know why it is not working please HELP!
why my form is not surrounded with my legend
<form id="contact_form" action="#" method="post">
<h5>Contact me</h5>
<fieldset>
<legend>Formularz kontaktowy</legend>
<ul>
<li>
<label for="nom">Nom</label>
<input id="nom" type="text" />
</li>
<li>
<label for="prenom">Prenom</label>
<input id="prenom" type="text" />
</li>
<li>
<label for="mel">Email</label>
<input id="mel" type="text" />
</li>
<li>
<label for="telephone">Telephone</label>
<input id="telephone" type="text" />
</li>
<li>
<label for="mobile">Mobile</label>
<input id="mobile" type="text" />
</li>
</ul>
<p class="submit">
<input type="button" value="ok" alt="send form" id="btn-send" />
</p>
</fieldset>
</form>
MY CSS:
/* --FORMULAIRE-- */
#content #c2 #contact_form{
margin: 5em auto;
width: 330px;
background-color:#E03336;
}
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: 3px #000000 solid;
}
#content #c2 #contact_form h5 {
display: none;
}
#content #c2 #contact_form fildset {
overflow: hidden;
}
#content #c2 #contact_form ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#content #c2 #contact_form ul li {
margin-bottom: 10px;
}
#content #c2 #contact_form ul li label {
float: left;
padding: 8px 10px 0 0;
width: 90px;
background-color:#36A643;
color: #348096;
font-size: 1.2em;
font-weight: bold;
text-align: right;
}
#content #c2 #contact_form ul li input {
border-style: ridge;
padding: 3px;
width: 200px;
font-size: 1.2em;
}
#content #c2 #contact_form p.submit {
text-align: center;
}
#content #c2 #contact_form #btn-send{
border-radius:10px;
background-color: #348096;
border-color: #348096;
color: #fff;
}
/* #content #c2 #form_contact {
width: 300px;
margin-left:118px;
margin-top: 59px;
}
#content #c2 input {
float:right;
display:inline;
}
#content #c2 #form_contact label{
font-size: 20px;
width:50px;
display: block;
color: #348096;
clear:both;
float:left;
}
#content #c2 #form_contact #btn_sub {
width: 40px;
margin-top: 25px;
margin-left: 25px;
border-radius:10px;
background-color: #348096;
border: #348096;
}
*/
what i'm doing wrong
Because it is NOT wrapped in legend. Your html should be like so, if you really want to wrap it with the legend tag:
<form id="contact_form" action="#" method="post">
<h5>Contact me</h5>
<fieldset>
<legend>Formularz kontaktowy
<ul>
<li>
<label for="nom">Nom</label>
<input id="nom" type="text" />
</li>
<li>
<label for="prenom">Prenom</label>
<input id="prenom" type="text" />
</li>
<li>
<label for="mel">Email</label>
<input id="mel" type="text" />
</li>
<li>
<label for="telephone">Telephone</label>
<input id="telephone" type="text" />
</li>
<li>
<label for="mobile">Mobile</label>
<input id="mobile" type="text" />
</li>
</ul>
<p class="submit">
<input type="button" value="ok" alt="send form" id="btn-send" />
</p>
</legend>
</fieldset>
</form>
But this makes me wonder why you want to wrap it with legend? Your code was correct. A legend tag in html is just to define the caption of a fieldset.
In addition the answer of uapuap: What you might want to do is to give the fieldset, or the formular the css border.
hello i have a problem using my editor. i'm using dreamweaver cs6 and would like to use a fieldset.
the problem with that is that i tried to implement my original code from here:
original code
where i thought it used to be same style in my editor. but it is not the same as in the example. as a result i will get this:
as you can see on left hand side it seems to be that there are automatically added tabs in there so that the input fields not flushes with the dark frame.
if there is someone who could tell me how to solve this i really would appreciate. thanks a lot.
UPDATE:
the picture above is what i will see in dreamweaver.
when i publish it on my webserver with that code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#left {
height: 400px;
width: 500px;
float: left;
border: solid 2px #f23;
}
#left #frame {
background-color:#444444;
height: 337px;
width: 440px;
margin-top: 36px;
}
#left #frame form fieldset {
height: 337px;
width: 440px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
border: none;
}
#left #frame form fieldset h1 {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
}
#left #frame form fieldset h2 {
font-size: 13px;
font-weight:lighter;
margin-left: 10px;
margin-top: 3px;
}
#left #frame form fieldset ul {
list-style-type: none;
margin-top: 30px;
}
#left #frame form fieldset ul .fl label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul .fr label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul input {
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
}
#left #frame form fieldset ul .fl {
width: 180px;
float: left;
margin-bottom: 15px;
background-color: #f23;
margin-left: 0px;
}
#left #frame form fieldset ul .fr {
width: 180px;
float: right;
margin-bottom: 15px;
background-color: #0F6;
margin-right: 0px;
}
</style>
</head>
<body>
<div id="left">
<div id="frame">
<form action="" method="post">
<fieldset>
<h1>Text 1</h1>
<h2>text 2</h2>
<ul>
<li class="fl">
<label for="label1">Label 1</label>
<input type="text" id="label1" name="label1" tabindex="10" autocomplete="off">
</li>
<li class="fr">
<label for="label2">Label 2</label>
<input type="text" id="label2" name="label2" tabindex="20" autocomplete="off">
</li>
<li class="fl">
<label for="label3">Label 3</label>
<input type="text" id="label3" name="label3" tabindex="30" autocomplete="off">
</li>
<li class="fr">
<label for="label4">Label 4</label>
<input type="text" id="label4" name="label4" tabindex="40" autocomplete="off">
</li>
<li class="fl">
<label for="label5">Label 5</label>
<input type="text" id="label5" name="label5" tabindex="50" autocomplete="off">
</li>
<li class="fr">
<label for="label6">Label 6</label>
<input type="text" id="label6" name="label6" tabindex="60" autocomplete="off">
</li>
</ul>
</fieldset>
</form>
</div>
</div>
</body>
</html>
i will get as a result:
and entering the same code on jsfiddle will result:
this
It will probably be an automatic padding/margin issue, try 0'ing out all your values as the first thing you do, then you can set the values as you want
* {
margin:0;
padding:0;
}
Here is the html:
<body>
<div id="container">
<div id="banner">
</div>
<div id="navigation">
<img src="images/front_end/nav_home.png" alt="Home" /><img src="images/front_end/nav_portfolio.png" alt="Portfolio" /><img src="images/front_end/nav_about.png" alt="About" /><img src="images/front_end/nav_contact.png" alt="Contact" />
</div>
<div id="content">
<div id="title">
Contact
</div>
<form id="emailform" method="POST" action="">
<label for="name">Name: </label><input class="inputs" type="text" name="name" />
<p><label for="email">Email: </label><input class="inputs" type="text" name="email" /></p>
<p><label for="phone">Phone: </label><input class="inputs" type="text" name="phone" /></p>
<p><label for="message">Your Message: </label><textarea id="largemessage" name="message"></textarea></p>
<input type="submit" id="submit" value="Send Message"/>
</form>
</div>
and the CSS:
body {
background-color: #111014;
background-image: url("images/front_end/bg.png");
background-repeat: repeat-x;
}
#container {
height: auto;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
margin-top: 45px;
margin-bottom: 38px;
height: 68px;
width: 1000px;
background-image: url("images/front_end/bannerbg.png");
}
#navigation {
height: 36px;
width: 1000px;
margin-left: 49px;
}
#content {
background-image: url("images/front_end/contentbg.png");
background-repeat: repeat-y;
height: 100%;
width: 1000px;
padding-left:80px;
padding-right:60px;
padding-bottom: 20px;
margin-bottom: -8px;
}
#title {
height: 90px;
width: 542px;
padding-left: 60px;
padding-top: 36px;
background-image: url("images/front_end/titlebg.png");
background-repeat:no-repeat;
font-family: tahoma;
font-size: 2.5em;
color: #dad8df;
margin-left: -80px;
}
#emailform {
color: #dad8df;
font-family: tahoma;
}
.inputs {
float: right;
margin-right: 675px;
width: 200px;
font: .9em tahoma;
}
#largemessage {
float: right;
clear: both;
margin-right: 175px;
width: 700px;
height: 150px;
resize: none;
font: .9em tahoma;
}
#submit {
margin-right: 175px;
clear: both;
float: right;
}
and a picture of what is happening:
A link to a picture of what is happening is here: The Picture
I realise i have really given you a heap of stuff to sort through but I have looked multiple times and just can't figure it out.
Thanks for the help in advance.
The reason that the textarea and submit button doesn't affect the height of the form is that they are floating.
You can use the overflow style to make the form contain floating elements also:
#emailform {
color: #dad8df;
font-family: tahoma;
overflow: hidden;
}
(What setting you use for overflow doesn't matter as you haven't specified a size for the element.)
Give your "content" <div> the style overflow: hidden; and see if that helps.
Add
<div style="clear: both;"></div>
to the bottom of the page, before the closing body tag.