Almaz
-
Posts
3 -
Joined
-
Last visited
Almaz's Achievements
Explorer (1/14)
0
Reputation
-
Огромная благодарность s0rr0w за оперативную помощь. Проблема решена.
-
Здравствуйте все. У меня такая проблема: никак не могу выравнять текстовое поле формы с изображением (каптчей) по вертикали, почему-то изображение располагается не на одном уровне с полем, а выше. Пожалуйста, подскажите, в чем может быть дело? Далее привожу код двух файлов (стили в отдельном файле), которые размещаются в одной папке. form.htm <HTML> <TITLE>Form</TITLE> <LINK rel="stylesheet" type="text/css" href="style.css"> </HEAD> <BODY> <FORM method="post" class="cform" id="cformsform"> <FIELDSET class="cf-fs1"> <OL class="cf-ol"> <LI id="li--1"><LABEL for="cf_field_2"><SPAN>Your name</SPAN></LABEL><INPUT type="text" name="cf_field_2" id="cf_field_2" class="single fldrequired" value=""></LI> <LI id="li--2"> <LABEL for="cforms_captcha" class="seccap"><SPAN>Verification code</SPAN></LABEL><INPUT type="text" name="cforms_captcha" id="cforms_captcha" class="secinput" value=""><IMG id="cf_captcha_img" class="captcha" src="cforms-captcha.png" alt=""> </LI> </OL> </FIELDSET> <P class="cf-sb"><INPUT type="submit" name="sendbutton" id="sendbutton" class="sendbutton" value="Submit" onclick="return cforms_validate('', true)"></P> </FORM> </BODY></HTML> style.css /* */ /* custom code on top the default style sheet */ /* */ /* ** if you want this to apply to a different */ /* ** form than to just the 2nd form change the '2' */ /* ** (or remove for your 1st, default form) */ @import "calendar.css"; .cform fieldset.cf-fs1 { padding-bottom:0; } .cform fieldset.cf-fs1 ol.cf-ol { margin:31px 0 0 0!important; } /* */ /* main 'top-level' form elements */ /* */ .cform { margin:10px auto 0 auto; width: 559px; } .cform fieldset { margin:10px 0 0 0; padding:5px 0 15px 0; border:none; background:white; } .cform .cf_hidden { display:none; border:none!important; background:none!important; padding:0!important; margin:0!important; } .cform legend { display:none; } ol.cf-ol { margin:0!important; padding:0!important; } ol.cf-ol li { background:none!important; margin:5px 0!important; /*some themes may interfere otherwise*/ padding:0; list-style:none!important; text-align:left; line-height:1.3em; } /* */ /* just for text-only fields (no input) */ /* */ ol.cf-ol li.textonly { color:#a2a2a2; padding:4px 0; text-align:center; } /* */ /* global definitions for field labels */ /* */ .cform label { color:#555555; width:128px; margin:4px 10px 0 0; display:-moz-inline-box; /*for mozilla*/ display:inline-block; /*for Opera & IE*/ text-align:right; vertical-align:top; } .cform label span { color:#555555; width:128px; /* must be the same as above!*/ display:block; } label.cf-before { margin:4px 10px 0 0; } label.cf-after { margin:4px 2px 0 6px; width:70px; text-align:left; } label.cf-after span { width:70px; display:block; } label.cf-group-after { margin:4px 4px 0 2px; width:125px; text-align:left; } label.cf-group-after span { width:125px; display:block; } /* */ /* FORM FIELDS general formatting */ /* */ .cform input, .cform textarea, .cform select { color:#555555; padding:3px; background: #FFFFFF; border: 1px solid #CCCCCC; vertical-align:top; letter-spacing:1px; line-height:normal; padding:4px 3px; vertical-align:top; font:bold 11px Arial; } .cform input:hover, .cform textarea:hover, .cform select:hover { background:#F0F9FF; } .cform input:focus, .cform textarea:focus, .cform select:focus { background:#FFFFFF; } .cform textarea, .cform input { width:275px; } .cform select { /*width:183px; /* attempt to have equal length */ } /*.cform select*/.cfselectmulti { height:15px; } .cform textarea { overflow:auto; } /* */ /* formatting for text: "(required)" & other */ /* */ span.reqtxt, span.emailreqtxt { color:#777777; margin:3px 0 0 5px; font:normal 10px Tahoma; display: -moz-inline-box; vertical-align:top; letter-spacing:1px; } /* */ /* radio button title */ /* */ ol.cf-ol li.cf-box-title { color:#a2a2a2; padding-left:100px; /* check with label 'width' incl. */ margin:6px 0 0 0!important; } /* */ /* check boxes */ /* */ input.cf-box-a, input.cf-box-b { margin:2px 0 0 0; width:16px; height:22px; border:none!important; background:none!important; } input.cf-box-a { margin-left:100px; /* check with label 'width' incl. */ } /* */ /* check box groups */ /* */ ol.cf-ol li.cf-box-group { margin:0pt !important; padding: 0 0 5px 100px; } /* */ /* FORM submit button */ /* */ p.cf-sb { text-align:right; padding:0!important; margin:0; height:67px; } .cform input.sendbutton { color:#FFFFFF; font:13px Verdana; font-weight:bold; height:21px; line-height:21px; margin: 0px 15px 15px 0px; padding: 0 0 5px; width:105px; background: #555555; border: 1px solid #CCCCCC; } .cform input.sendbutton:hover { font:12px Verdana; font-weight:bold; } /* */ /* FORM FIELDS enhanced error display */ /* */ ol.cf-ol li.cf_li_err { border-color:#DF7D7D; border-color:#DF7D7D; border-style:solid; border-width:1px 0pt; padding:5px 0!important; margin:5px 0!important; } ol.cf-ol li ul.cf_li_text_err { margin:0 0 0 100px; padding:0; color:#333; } ol.cf-ol ul.cf_li_text_err li { background:url(icon-alert.png) no-repeat left 1px!important; list-style:none!important; font-weight:bold; text-indent:0; margin:0 0 2px!important; padding-left:15px; } ol.cf-ol ul.cf_li_text_err li:before { content:''; } /* */ /* 'visitor verification' related styles */ /* */ label.secq, label.seccap { vertical-align:text-bottom; margin-bottom:4px; } input.secinput { vertical-align:text-bottom; } #cforms_captcha6, #cforms_captcha5, #cforms_captcha4, #cforms_captcha3, #cforms_captcha2, #cforms_captcha { /*height:15px;*/ width:50px; padding: 4px 4px; margin: 0; vertical-align:text-top; } img.captcha { vertical-align:text-bottom; margin:0 0 0 5px!important; padding:0!important; border:none!important; float:none!important; } img.captcha-reset { vertical-align:text-bottom; background:url(captcha_reset.png) no-repeat; margin:0 0 2px 3px; width:21px; height:21px; border:none; } img.imgcalendar { border:none; } /* */ /* change formatting of response msgs here */ /* */ div.cf_info { color:#333; display:none; padding:10px 15px!important; width:380px; line-height:1.3em; margin:10px auto; } div.cf_info ol { margin:0; padding:5px 15px 0 30px; } div.cf_info ol li { padding:1px 0; margin:2px 0; } div.cf_info a { color:#ad2929!important; text-decoration:underline!important; } div.success { background:white none repeat scroll 0%; color:#000000; display:block; font-size: 1.5em; text-align:center!important; } div.failure { display:block; text-align:center!important; font-size: 1.5em; color:#FF0000; } div.waiting { background:#FFFFFF; color:#AAAAAA; display:block; } /* */ /* formatting for invalid user inputs */ /* */ .cform .cf_error { color:#ad2929; border:1px solid #ad2929; } div.mailerr { display:block; } .mailerr, .cform .cf_errortxt { color:#ad2929; } /* */ /* disabled fields [disabled] does not work on IE! */ /* */ [disabled] { color:#dddddd; border-color:#dddddd!important; background:none!important; } .disabled { border-color:#dddddd!important; } /* */ /* upload box styling */ /* */ .cform input.cf_upload { width:220px; background: #f9f9f9; border:1px solid #888888; } /* */ /* Other: link love */ /* */ .linklove { width:410px; margin:0 auto 10px!important; padding:0!important; text-align:center!important; } .linklove a, .linklove a:visited { font-size: 0.8em; font-family: Tahoma; color:#aaaaaa!important; } /* */ /* Other: browser hacks */ /* */ * html ol.cf-ol, * html ol.cf-ol li, * html span.reqtxt, * html span.emailreqtxt { display: inline-block; /*for ie6*/ } *+html ol.cf-ol, *+html ol.cf-ol li, *+html .cform label, *+html span.reqtxt, *+html span.emailreqtxt { display: inline-block; /*for ie7*/ } *+html img.captcha { margin-bottom:1px!important; } * html img.captcha { margin-bottom:1px!important; } * html select { margin-top:3px!important; } Спасибо всем откликнувшемся.
-
Напишите, плиз, как это делается с двумя картинками. Заранее благодарен.