Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ryan Carter
6,939 PointsWould love some help/guidance in setting up this form.
Hello everyone,
I've been trying for hours to get this to work but in favor of not pulling out any more hair I've come to you for help. The picture below is what I am trying to achieve.
Mockup of what I'm trying to accomplish
It is basically four columns of information, three of which are inputs and the fourth is the submit button. I'm currently in the web design track and I know there is a section on forms but it is pretty far ahead of where I am currently at. I've tried searching the the internet but can't seem to find anything very helpful on it. You don't have to do it all for me, just offer some guidance.
Here is the CSS I've been using for the rectangle (#input is what I have for the form id):
'#input {
width: 75%;
height: 5%;
background-color: #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
}```
Ryan Carter
6,939 PointsGood call
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<title>Title will go here</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="line1">Here I have one line of text</h1>
<h2 id="line2">Here I have a second line of text</h2>
<form id="input">
<label for="input1">Line One<br>Line Two</label><br>
<input type="text" id="budget" />
<select name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
<select name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
</form>
</body>
</html>
CSS
body{
background-repeat: no-repeat;
background-image: url("background_image.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
font-family: 'Open Sans', sans-serif; font-weight: 300;
color: #fff;
}
#line1 {
font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 25px;
color: #fff;
text-align: center;
padding-top: 15%;
}
#line2 {
font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px;
color: #fff;
text-align: center;
}
#input {
width: 75%;
height: 10%;
background-color: #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
color: #131313;
2 Answers
George Cristian Manea
30,787 PointsYou could create 4 divs, for each column, then use float left or display inline-block to make them stand side by side. After that you can use margin left and right to create a spacing between them. You can use text-align center to align "line 1" and "line 2".
div{ display:inline-block; text-align:center; width:22%; margin-left:1.5%; margin-right:1.5%; }
Bálint Ihász
4,296 Pointshey,
i rewrote your code. hope you like it.
HTML
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<title>Title will go here</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="line1">Here I have one line of text</h1>
<h2 id="line2">Here I have a second line of text</h2>
<div id="form-frame">
<form id="input">
<div>
<label class = "labels" for="budget">Line One<br>Line Two</label><br>
<input class="button" type="text" id="budget" value="Type text here" />
</div>
<div>
<label class = "labels" for="select1">Line One<br>Line Two</label><br>
<select class="button" name="select" id="select1">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
</div>
<div>
<label class = "labels" for="select2">Line One<br>Line Two</label><br>
<select class="button" name="select" id="select2">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
</div>
<div>
<input type="submit" value="Submit button" class="submit button">
</div>
</form>
</div>
</body>
and here is the CSS
body {
background-image: url("background_image.jpg");
background-repeat: no-repeat;
background-size: cover;
}
body {
color: #000;
font-family: 'Open Sans',sans-serif;
font-weight: 300;
}
#form-frame {
background-color: lightblue;
min-width: 875px;
padding: 10px;
}
form {
background-color: white;
border-radius: 10px;
margin: 0 auto;
min-height: 130px;
padding: 1%;
width: 90%;
}
form div {
float: left;
height: 130px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 24%;
}
form div label, .button {
display: inline-block;
margin: 7px auto;
font-family: 'Open Sans',sans-serif;
}
.button {
border: 2px solid lightgrey;
border-radius: 9px;
font-family: open sans;
padding: 10px;
text-align: center;
width: 70%;
}
.submit {
background-color: lightblue;
border: medium none;
color: white;
font-size: 1.2em;
height: 50px;
margin: 40px;
width: 70%;
}
#line1 {
color: #fff;
font-family: 'Open Sans',sans-serif;
font-size: 25px;
font-weight: 300;
padding-top: 15%;
text-align: center;
}
#line2 {
color: #fff;
font-family: 'Open Sans',sans-serif;
font-size: 15px;
font-weight: 300;
text-align: center;
}
George Cristian Manea
30,787 PointsGeorge Cristian Manea
30,787 PointsYou should post your html code also