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

CSS

Posted by Jimmy Mannan
Jimmy Mannan
5,201 Points

Styling form fields with css

I am making a form as per this image: http://prntscr.com/9snpgl <br> I cant get my textarea and radio button fields to fall in line, literally! <br> This is what I am getting http://prntscr.com/9snryw <br> I have marked the problem areas in red<br> This is my code

<form>
       <p class= "step">Step1: Your details</p>
    <span class="details"><label>Name</label>   <input type="text" ></span><br>

    <span class="details"><label >Email address</label> <input type="text"></span><br>
    <span class="details"><label >Phone</label> <input type="string"></span>

    <p class= "step">Step2: Delivery address</p>
    <span class="details"><label>Address</label><textarea rows="3"></textarea></span><br>

    <span class="details"><label>Post code</label><input type="text" ></span><br>
    <span class="details"><label>Country</label>    <input type="text" ></span><br>

    <p class= "step">Step3: Card details</p>
    <span class="details"><label>Card type</label><br>

    <input  type= "radio" class="radio" name = "card" > Visa 
    <input type= "radio" class="radio" name = "card">AmEx 
    <input type ="radio" class="radio" name = "card">Mastercard </span><br>

    <span class="details"><label>Card number</label>    <input type ="text"></span><br>
    <span class="details"><label>Security code</label>  <input type ="text"></span><br>
    <span class="details"><label>Name on card   </label><input type ="text"></span><br>

    <p id="buy"><input type="submit" id ="ibuy" value="BUY IT!">
</form> 

form {
    background-image: url("bluebg.jpg");
    width: 330px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    opacity: 0.8;
    border: 1px solid skyBlue ;
    border-radius: 5px;
    overflow: auto;
}

.details {
    background-color: rgba(255,255,255,0.5);
    padding: 10px;
    /**margin-left: 10px;
    margin-right: 10px;**/
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 5px;
}
.step {
    color: white;
    margin-bottom: 20px;
}

input { 
border: none; 
margin-left: 20px;
margin-bottom: 30px; 
padding-right: 50px; 
width: 100px;}

label{
    display:inline-block;
    width:100px;
    color: black;
}

#buy {
    margin-left: auto;
    margin-right: auto;
    width:100px;
                }

#ibuy {
    color: white;
    background-color: midnightBlue;
    margin-bottom: 10px;
    border: 2px solid navy;
    border-radius: 13px;
    width: 70px;
}

Anyhelp would be greatly appreciated as I have already spent many hours on it.

2 Answers

Casey Ydenberg
Casey Ydenberg
15,622 Points
Casey Ydenberg
Casey Ydenberg
15,622 Points

Your biggest problem is that your .details elements are all spans: ie. inline elements. If these were block elements, they would expand vertically (textarea) and not break (radio buttons). Change these to divs, and it will be much easier to position the inside elements.

Jimmy Mannan
Jimmy Mannan
5,201 Points

Great!! almost done, Thanks a lot, you really did a big help.

Any tips on aligning the "Address" label at the topline of textarea iso bottomline.

Casey Ydenberg
Casey Ydenberg
15,622 Points

Try vertical-align: top -- on the label and on the parent div ... vertical-align is really complicated though and I can't remember off the top of my head if this will work itself or needs some more tinkering.

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

Great!! almost done, Thanks a lot, you really did a big help.