www.webdeveloper.com
Results 1 to 13 of 13

Thread: [RESOLVED] form field backgrounds and positing

  1. #1
    Join Date
    Apr 2011
    Posts
    46

    resolved [RESOLVED] form field backgrounds and positing

    White fields with set width and height will not go away, also they won't position. Form works fine otherwise. The purple areas are where I want the fields to fit.
    here's the page with the form FORM ISSUES



    Code:
    body{
    background: #000000; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzkyMWNmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzE0NzhmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #000000 0%, #921cf6 50%, #1478fd 50%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#921cf6), color-stop(50%,#1478fd), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* IE10+ */
    background: linear-gradient(to right,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-8 */
    color:#0eea09;
    text-transform:uppercase;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    
    a img {border: none; }
    
    div, h1, form, fieldset, textarea
    {
    	outline:none;
    	border:none;	
    	} 
    	
    h1{
    	font-size:25px;
    	font-family:Arial, Helvetica, sans-serif;
    	text-align:center;
    	text-transform:uppercase;
    	color:#0eea09;	
    	padding-left:5px;
    	}
    	h1:hover{
    	color:#921cf6;		
    		}
    #container
    {
    	margin: 0 auto;
    	width: 1025px;
    	min-height:768px;
    	height: 100%;
    	background-image:url(http://www.warpedentertainments.adklicks.info/images/background.jpg);
    	background-position: top center;
    	background-repeat: no-repeat;
    	float: none;
    	outline:none;
    		-moz-border-radius:55px;
    	border-radius:55px;
       -webkit-box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.87);
       -moz-box-shadow:    -2px 4px 3px rgba(0, 0, 0, 0.87);
       box-shadow:         -2px 4px 3px rgba(0, 0, 0, 0.87);
    	
    	
    	
    }
    
    #header
    {
    	
    	padding: 0px;
    	width: 100%;
    	height:78px;
    }
    
    #header h1 {
    	margin: 0; 
    	
    	}
    
    
    /*nav menu*/
    #navigation
    {
    	float:inherit;
    	width:895px;
    	height:78px;
    	outline:none;
    	padding-left:55px;
    	padding-top:20px;
    }
    
    #navigation ul
    {
    	margin: 0;
    	padding: 0;
    outline:none;
    }
    
    #navigation ul li
    {
    	list-style-type: none;
    	display: inline;
    outline:none;
    }
    
    #navigation li a
    {
    	display: block;
    	float: left;
    	padding:0px;
    	text-decoration: none;
    	outline:none;
    
    }
    
    /*content div to contain form*/
    
    #content
    {
    	clear: right;
    	background-image:url(http://www.warpedentertainments.adklicks.info/images/contactbox.png);
     	background-repeat:no-repeat;
       background-position:left top;
       width:1028px;
    	min-height:668px;
    	margin-top:-50px;
    	
    
    }
    
    
    #info{
    	float:left;
    	background-image:url(http://www.warpedentertainments.adklicks.info/images/contactinfo.png);
    	background-repeat:no-repeat;
    	background-position:left top;
    	width:524px;
    	min-height:194px;
    	margin-top:100px;
    	margin-left:18px;
    	
    	}
    	
    /*contact form*/
    
    #form_wrapper{
    	position:relative;
    	width:365px;
    	height:400px;
    	display:block;
    	float:right;
    	top:50px;
    	right:100px;
    	border-radius:100px 5px 100px 5px;
    	-moz-border-radius:100px 5px 100px 5px;
    	-webkit-border-radius:100px 5px 100px 5px;	
    	background: rgb(43,43,43); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMmIyYjJiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(45deg,  rgba(43,43,43,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(43,43,43,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(43,43,43,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(43,43,43,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(43,43,43,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(43,43,43,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
    overflow: visible;
    -webkit-box-shadow: 4px 4px 2px rgba(0, 0, 0, 1);
    -moz-box-shadow:    4px 4px 2px rgba(0, 0, 0, 1);
    box-shadow:         4px 4px 2px rgba(0, 0, 0, 1);
    
    	}
    
    #h2{
    	position:relative;
    	text-align:center;
    	font-size:22px;
    	padding:10px;
    	font-family:Comic Sans MS, sans-serif;
    	
    	}
    	
    #form{
    	text-transform:uppercase;
    	font-family:Comic Sans MS, sans-serif;
    
    		}
    		
    
    	
    .selector{
    	
    	padding-left:20px;
    	left:20px;
    	font-size:14px;
    	
    		
    		
    	}
    .input{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	height:30px;
    	left:20px;
    	width:170px;
    	overflow:visible;
    	background-color:#8e1bf0;
    	
    		
    	}
    	
    #textarea{
    	position:relative;
    	height:120px;
    	resize:none;
    	width:170px;
    	max-width:170px;
    	max-height:120px;
    	left:20px;
    	overflow:visible;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    		background-color:#8e1bf0;
    	
    		}
    		
    #submit{
    	
    	
    	left:40px;
    	height:30px;
    	width:80px;
    	background-color:#8e1bf0;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	}

  2. #2
    Join Date
    Jun 2012
    Posts
    48
    Hello gellegbs,

    Something like this ?

    1- Search in css file for
    Code:
    .input{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	height:30px;
    	left:20px;
    	width:170px;
    	overflow:visible;
    	background-color:#8e1bf0;
    	
    		
    	}
    	
    #textarea{
    	position:relative;
    	height:120px;
    	resize:none;
    	width:170px;
    	max-width:170px;
    	max-height:120px;
    	left:20px;
    	overflow:visible;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    		background-color:#8e1bf0;
    	
    		}
    		
    #submit{
    	
    	
    	left:40px;
    	height:30px;
    	width:80px;
    	background-color:#8e1bf0;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	}
    and replace with
    Code:
    .input{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	height:22px;
    	/*left:20px;*/
    	width:165px;
    	overflow:visible;
    	background-color:#8e1bf0;
    	padding:5px;
    	}
    	
    input {
    	width: 160px;
    	height: 16px;
    	}	
    
    #textarea{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	height:80px;
    	width:165px;
    	overflow:visible;
    	background-color:#8e1bf0;
    	padding:5px;
    	}
    
    textarea {
    	width:162px;
    	height:75px;
    	}
    	
    #submit{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	height:22px;
    	width:80px;
    	padding: 2px;
    	}
    
    .submit {
    	width: 80px;
    	height: 22px;
    	}
    2- Search in contact.htm for
    Code:
    					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">
    	
    	<div class="selector">Name</div><br></br>
       <div class="input"> <input type="text" name="cf_name"></input></div><br></br>
    	<div class="selector">Email</div><br></br>
        <div class="input"><input type="text" name="cf_email"></input></div><br></br>
    	<div class="selector">Message</div><br></br>
        <div id="textarea"><textarea name="cf_message" rows="5" cols="1"></textarea></div><br></br>
    	<div id="submit"><input type="submit" value="Send"></input></div><br></br>
    	
    					</form>
    and replace with
    Code:
    					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">
    						<div class="selector">Name</div>
    						<div class="input"> <input type="text" name="cf_name" /></div><br />
    						<div class="selector">Email</div>
    						<div class="input"><input type="text" name="cf_email" /></div><br />
    						<div class="selector">Message</div>
    						<div id="textarea"><textarea name="cf_message"></textarea></div><br />
    						<div id="submit"><input type="submit" value="Send" class="submit"></div></br />
    					</form>
    I hope this is what you were looking for.
    Tested in the latest versions of IE - FF - Chrome - Opera - Safari

    Regards
    Last edited by coderunner; 07-25-2012 at 11:37 AM.

  3. #3
    Join Date
    Apr 2011
    Posts
    46
    ok I implemented what you said and that fixed my aligning issues but the white floating fields still remain and the submit button is half showing. If you can think of any that would be hreat I appreciate the help so far.

  4. #4
    Join Date
    Jun 2012
    Posts
    48
    Hello gellegbs,

    When I look at the source code of your page contact.html then I see that you didn't change the code I mentioned in my earlier reply.
    You only changed the code in the css file but not the code on the contact.html page!
    Re-read my earlier reply #
    2- Search in contact.htm for
    Code:
    					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">
    	
    	<div class="selector">Name</div><br></br>
       <div class="input"> <input type="text" name="cf_name"></input></div><br></br>
    	<div class="selector">Email</div><br></br>
        <div class="input"><input type="text" name="cf_email"></input></div><br></br>
    	<div class="selector">Message</div><br></br>
        <div id="textarea"><textarea name="cf_message" rows="5" cols="1"></textarea></div><br></br>
    	<div id="submit"><input type="submit" value="Send"></input></div><br></br>
    	
    					</form>
    and replace with
    Code:
    					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">
    						<div class="selector">Name</div>
    						<div class="input"> <input type="text" name="cf_name" /></div><br />
    						<div class="selector">Email</div>
    						<div class="input"><input type="text" name="cf_email" /></div><br />
    						<div class="selector">Message</div>
    						<div id="textarea"><textarea name="cf_message"></textarea></div><br />
    						<div id="submit"><input type="submit" value="Send" class="submit"></div></br />
    					</form>
    please.

    PS the tag <input ...> doesn't have a closing tag!

    Regards

  5. #5
    Join Date
    Apr 2011
    Posts
    46
    ok made the changes you said including the <input..... />, still wierd floating white fields, the only change I made to your code was to take the / off of </br /> on the line with a submit ID I made it a <br /> should it be that?

  6. #6
    Join Date
    Jun 2012
    Posts
    48
    New code.

    1- Replace in contactform.css file
    Code:
    .input{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	height:22px;
    	/*left:20px;*/
    	width:165px;
    	overflow:visible;
    	background-color:#8e1bf0;
    	padding:5px;
    	}
    	
    input {
    	width: 160px;
    	height: 16px;
    	}	
    
    #textarea{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	height:80px;
    	width:165px;
    	overflow:visible;
    	background-color:#8e1bf0;
    	padding:5px;
    	}
    
    textarea {
    	width:162px;
    	height:75px;
    	}
    	
    #submit{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	height:22px;
    	width:80px;
    	padding: 2px;
    	}
    
    .submit {
    	width: 80px;
    	height: 22px;
    	}
    with
    Code:
    .input{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	height:22px;
    	left:20px;
    	width:165px;
    	overflow:visible;
    	background-color:#8e1bf0;
    	padding:5px;
    	}
    	
    input {
    	width: 160px;
    	height: 16px;
    	}	
    
    .textarea{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	left:20px;
    	height:80px;
    	width:165px;
    	overflow:visible;
    	background-color:#8e1bf0;
    	padding:5px;
    	}
    
    textarea {
    	width:162px;
    	height:75px;
    	}
    	
    .submit{
    	position:relative;
    	border-radius:5px 5px 5px 5px;
    	-moz-border-radius:5px 5px 5px 5px;
    	-webkit-border-radius:5px 5px 5px 5px;
    	left:20px;
    	height:22px;
    	width:80px;
    	overflow:visible;
    	background-color:#8e1bf0;
    	padding: 3px;
    	}
    
    .submit_button {
    	width: 80px;
    	height: 22px;
    	}
    2- Replace in contact.html the code between <form> and </form>
    with
    Code:
    					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">
    						<div class="selector">Name</div>
    						<div class="input"> <input type="text" name="cf_name" /></div><br />
    						<div class="selector">Email</div>
    						<div class="input"><input type="text" name="cf_email" /></div><br />
    						<div class="selector">Message</div>
    						<div class="textarea"><textarea name="cf_message"></textarea></div><br />
    						<div class="submit"><input type="submit" value="Send" class="submit_button"></div></br />
    	
    					</form>
    PS What browser + version do you use ?

    Regards

  7. #7
    Join Date
    Jun 2012
    Posts
    48
    Screenshot in IE8 - IE9 - FF - Chrome
    Attached Images Attached Images

  8. #8
    Join Date
    Apr 2011
    Posts
    46
    I got it now thanks

  9. #9
    Join Date
    Apr 2011
    Posts
    46
    I had to kill the #input.. I mean #textarea, hmm nvm posted too early textarea works now oh browser firefox 13 linux
    Last edited by gellegbs; 07-25-2012 at 04:52 PM.

  10. #10
    Join Date
    Apr 2011
    Posts
    46
    ok forms hate class css I get it.. its working thanks you soo much

    if you know, how come I cant name a css class rule for a field? Or am i not getting the point? i thought everything began with a . class or an # ID in a stylesheet

  11. #11
    Join Date
    Jun 2012
    Posts
    48
    Okay I see you didn't want the purple div around the input, textarea and submit button althought it was in your first code but it looks good.
    Next time you better use "class=..." in stead of "id=..." (eg as in textarea and submit) in code and css.

    You're welcome.

    If your problem has been solved then is it possible to mark this topic as "Resolved".
    (menu bar above your nickname --> Thread Tools --> option: "Mark Thread Resolved")

    Regards

  12. #12
    Join Date
    Jun 2012
    Posts
    48
    You give a div around an input a class but if you want to style the input itself you have to add a class in the input tag as wel or if the styling is the same for all the input fields you can just write input in the stylesheet
    eg.

    All input fields have different styling
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    	<style>
    		.test1 {
    			width:100px;
    			height: 22px;
    			color: #FFFFFF;
    			background-color: #0000FF
    		}
    		.test2 {
    			width:200px;
    			height: 22px;
    			color: #FFFFFF;
    			background-color: #0000FF
    		}
    	</style>
    </head>
    
    <body>
    	Name<br />
    	<input type="text" name="name" class="test1">
    	<br />
    	Email<br />
    	<input type="text" name="email" class="test2">
    </body>
    </html>
    All input fields have the same styling
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    	<style>
    		input {
    			width:100px;
    			height: 22px;
    			color: #FFFFFF;
    			background-color: #0000FF
    		}
    	</style>
    </head>
    
    <body>
    	Name<br />
    	<input type="text" name="name">
    	<br />
    	Email<br />
    	<input type="text" name="email">
    </body>
    </html>
    Regards

  13. #13
    Join Date
    Apr 2011
    Posts
    46
    Well I'm never gonna name my fields input again! Lesson learned. thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles