Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't Get Form to Look Like Picture

    Hi all

    I created a form in Photoshop.


    It's very basic. I am trying to convert it into HTML/CSS, but I am struggling and would like to ask for your assistance.

    This is the best I've gotten.



    Can anybody please put me out of my misery and help me achieve the first picture using HTML/CSS. I've been at it for a few hours now but this is the best I've gotten.

    Code:
    <style type="text/css">
    
    * {
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .group:after {
      content: "";
      display: table;
      clear: both;
    }
    .container2 {
    overflow: hidden;
    background: #C6DEFF;
    width: 982px;
    }
    
    .right2 {
     float: right;
    outline: 1px solid #8191a6;
     width: 30px;
    }
    .left2 {
     float: left;
    outline: 1px solid #8191a6;
     width: 152px;
    }
    .middle2 {
     outline: 1px solid #8191a6;
     width:800px;
    }
    </style>
    
    <h1>E-mail US</h1>
    <form action="confirmed.php" method="get">
    <div class="group container2">
    <div class="group right2">
    <img width="25" src="http://i.imgur.com/zZE0y3y.png">
    </div>
    <div class="group left2">
     Name
     </div>
     <div class="group middle2">
     <input type="text">
     </div>
    
    <div class="group right2">
     <img width="25" src="http://i.imgur.com/zZE0y3y.png"> 
     </div>
     <div class="group left2">
     Description 
     </div>
     <div class=middle2>
     <textarea rows="4" cols="50">
    
    </textarea> 
     </div>
    
    
    <div class=right2>
     <img width="25" src="http://i.imgur.com/zZE0y3y.png"> 
    </div>
    <div class=left2>
    E-mail<br><br>Phone
    </div>
     <div class=middle2>
    <input type="text">
    <br> OR <BR>
    <input type="text">
    </div>
    <input type="submit" value="SUBMIT">

  • #2
    New to the CF scene
    Join Date
    Jan 2014
    Location
    USA
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I came up with something for you, the submit button is a little off, but you can play with that on http://www.colorzilla.com/gradient-editor/. I had to rework the whole form, the original was missing a lot.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    
    body{
    	width:1024px;
    	height:768px;
    	font-family:verdana;
    }
    
    input{
    	position:relative;
    	left:143px;
    	width:70%;
    	height:50px;
    	padding:10px;
    }
    
    textarea{
    	position:relative;
    	left:68px;
    	width:70%;
    	height:150px;
    }
    
    .label{
    	display:inline;
    	width:140px;
    }
    
    .icon{
    	float:right;
    }
    
    .divdr{
    	padding:10px;
    	padding-left:20px;
    	background-color:#BFD6F6;
    	border-top:1px solid #7C94A0;;
    	border-bottom:1px solid #7C94A0;;
    }
    
    .field{
    	background-color:#C6DEFF;
    	border:1px solid #7C94A0;
    }
    
    #sub{
    	width:80px;
    	height:40px;
    	left:0px;
    	border:1px solid #7C94A0;
    	border-radius:5px;
    	
    	/*button maker css*/
    	background: #a8bcd5; /* Old browsers */
    	background: -moz-linear-gradient(top,  #a8bcd5 0%, #a8bcd5 50%, #a6bed8 50%, #7db9e8 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8bcd5), color-stop(50%,#a8bcd5), color-stop(50%,#a6bed8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  #a8bcd5 0%,#a8bcd5 50%,#a6bed8 50%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  #a8bcd5 0%,#a8bcd5 50%,#a6bed8 50%,#7db9e8 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  #a8bcd5 0%,#a8bcd5 50%,#a6bed8 50%,#7db9e8 100%); /* IE10+ */
    	background: linear-gradient(to bottom,  #a8bcd5 0%,#a8bcd5 50%,#a6bed8 50%,#7db9e8 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8bcd5', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    
    }
    
    #mail{
    	left:149px;
    }
    
    #phone{
    	left:139px;
    }
    
    #name{
    	width:1024px;
    	height:50px;
    }
    
    #cntct{
    	width:1024px;
    }
    
    #desc{
    	width:1024px;
    	border-style:none;
    }
    
    #dlabel{
    	vertical-align:top;
    }
    
    </style>
    <title>PSguy's Form</title>
    </head>
    
    
    <body>
    <h1>E-mail Us</h1>
    <form action="confirmed.php" method="get">
    	
    	<div class="divdr" id="name">
    	
    		<h2 class="label">Name</h2>
    		<input class="field" type="text"/>
    		<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
    		
    	</div>
    	
    	<div class="divdr" id="desc">
    		
    		<h2 id="dlabel" class="label">Description</h2>
    		<textarea class="field"></textarea>
    		<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
    		
    	</div>
    	
    	<div class="divdr" id="cntct">
    	
    		<h2 class="label">Email</h2>
    		<input id="mail" class="field" type="text"/>
    		<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
    		<br/><span id="or">Or</span><br/>
    		<h2 class="label">Phone</h2>
    		<input id="phone" class="field" type="text"/>
    		<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
    		<br/>
    		<br/>
    		<input id="sub" type="submit" value="SUBMIT">
    		
    	</div>
    	
    	
    	
    </form>
    </body>
    </html>

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,091
    Thanks
    23
    Thanked 593 Times in 592 Posts
    In case you do come back to check, this is close:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    	font-size: x-large;
    	font-weight:bolder;
    }
    .container{
    overflow: hidden;
    width: 805px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #C6DEFF;
    border-bottom: 1px solid #8191a6;
    }
    .left{
    	float: left;
    	width: 152px;
    	padding-left: 46px;
    }
    .right{
    	width:800px;
    }
    input{
    	background-color: #A4BBBC;
    }
    img{
    	margin-left: 40px;
    }
    textarea{
    	background-color:#A4BBBC;
    }
    </style>
    </head>
    
    <body>
    <form action="confirmed.php" method="get">
    <div class="container">
    	<div class="left">Name</div>
    	<div class="right"><input type="text" size="40" /><img width="25" src="http://i.imgur.com/zZE0y3y.png"></div>
    </div>
    
    <div class="container">
    	<div class="left">Description</div>
    	<div class="right"><textarea rows="4" cols="42"></textarea>
    	<img width="25" style="position:relative;top:-40px;right:6px;" src="http://i.imgur.com/zZE0y3y.png"></div>
    </div>
    
    <div class="container">
    	<div class="left">E-mail</div>
    	<div class="right"><input type="text" size="40" /></div>
    	<div style="position:relative;left:400px;padding-bottom:2px;"><span style="font:large normal;margin-right:300px;">OR</span><img width="25" src="http://i.imgur.com/zZE0y3y.png"></div>
    	<div class="left">E-mail</div>
    	<div class="right"><input type="text" size="40" /></div>
    </div>
    <input type="button" style="background-color:#A4BBBC;" value="Submit" >
    </form>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •