How to style this form using CSS?


Tags: html,css

Problem :

i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ...

enter image description here

I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out

Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ...

Here's my HTML & CSS3 code (for chrome) :

<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
    <input type="text" name="yourName" placeholder="YOUR NAME"/>
    <input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
    <textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
    <input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
    <button>Submit</button>
</form>

#getAfreeQuote form {
 display:-webkit-box;
 -webkit-box-orient:vertical;
    height:500px;
}

 #getAfreeQuote input[name="yourName"]{
-webkit-box-ordinal-group:1;
 }

 #getAfreeQuote input[name="yourEmail"]{
-webkit-box-ordinal-group:1;
 }

 #getAfreeQuote textarea{
-webkit-box-ordinal-group:2;
 }

 #getAfreeQuote input[name="timeScale"]{
-webkit-box-ordinal-group:3;    
 }

 #getAfreeQuote button {
-webkit-box-ordinal-group:4;    
 }

and the result : enter image description here



Solution :

Here's how I'd do it:

enter image description here

<section id="getAfreeQuote">
<form method="post" action="#">
<h2>Get a free quote</h2>
    <input type="text" name="yourName" placeholder="YOUR NAME"/>
    <input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
    <textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
    <br /><input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
    <br /><input type="submit" value="Submit!" />
    <div class="clear"></div>
</form>
</section>


<style>
#getAfreeQuote h2 {
  text-transform: uppercase;
  color: blue;
}

div.clear {
  clear: both;
}

#getAfreeQuote form {
 width: 25em;
 position: relative;
}

 #getAfreeQuote input[name="yourName"]{
 width: 43%;
 }

 #getAfreeQuote input[name="yourEmail"]{
 width: 55%;
 float: right;
 }

 #getAfreeQuote textarea{
 width: 100%;
 height: 10em;
 }

 #getAfreeQuote input[name="timeScale"]{
  width: 100%;
 }

  #getAfreeQuote input[type="submit"]{
    text-transform: uppercase;
    background: orange;
    border: none;
    padding: 1em 2em;
    color: white;
    float: right;
  }

</style>

    CSS Howto..

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    How to create an interactive circular links using CSS [closed]

    How to Vertically Center 2 anchor tags with CSS?

    How to create the + button with CSS?

    How to alternate background colour on DIV rows? (Jquery and/or CSS)

    How do I use CSS to give a section a background that doesn't scroll with the page?

    jQuery .css, how to translate it into Javascript

    In a framework using rewrite rules, how best to integrate CSS and JS?

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    How to develop a solid CSS strategy?

    How to view browser's calculated CSS specificity?

    How to increase or decrease space between two lines in same paragraph?

    How to maintain hover state even when mouseout of main drop down link

    HTML/CSS - How do I fill background of region to left of div that shrinks on zoom out?

    How can I use bootstrap in css file?

    How to select an element that must have more than one css class?

    How to change css styles of a jQuery plugin?

    How to apply CSS class on current element using jQuery

    How to stretch vertical scroll?

    Linking CSS button to email - How can it be done?

    How to build a mobile version of a non-mobile website? [closed]

    Sitefinity 5.3: How do I order my CSS?

    How do I get the background image to not repeat and take up the entire section?

    How to get all images(overlapping allowed) in one line using css?

    How to remove spacing around in CSS? [duplicate]

    How prevent inheriting “position: relative” CSS

    Show / Hide HTML using swatch / HTML 5 - dynamic HTML

    how do I float a div over a background image in a different div

    How to check if an element has a hover property and do something to another element in css [closed]

    How can I use CSS to add a blank column between paired column groupings?