paddingtrouble
здравствуйте, плз подскажите...
см. имадж -> http://musicxchange.narod.ru/paddingtrouble.png
дело в том, что я пытаюсь поставить отступ от фразы "Ваш телефон:"
сверху на 50пикс (к примеру) до 1-го белого поля, но, как видно на картинке, отступ вроде как делается
(голуб. цвет-ето я просто выделил текст мышкой, (ето вроде и есть отступ)), но как-то странно, а точнее..
ерунда какая-то получается...отступ проходит под полями инпутов...
делаю я так:
-в пхп-файле:
<span class=\"headers\">Ваш телефон:</span>
-в цсс файле:
.headers {
FONT-SIZE: 8pt;
COLOR: #00CC33;
FONT-FAMILY: Tahoma,Verdana;
FONT-WEIGHT: bold;
text-align: left;
padding-top: 50px;
}
знаю, надоел, но всё же.. оч. прошу подскажите..
спасибо.
см. имадж -> http://musicxchange.narod.ru/paddingtrouble.png
дело в том, что я пытаюсь поставить отступ от фразы "Ваш телефон:"
сверху на 50пикс (к примеру) до 1-го белого поля, но, как видно на картинке, отступ вроде как делается
(голуб. цвет-ето я просто выделил текст мышкой, (ето вроде и есть отступ)), но как-то странно, а точнее..
ерунда какая-то получается...отступ проходит под полями инпутов...
делаю я так:
-в пхп-файле:
<span class=\"headers\">Ваш телефон:</span>
-в цсс файле:
.headers {
FONT-SIZE: 8pt;
COLOR: #00CC33;
FONT-FAMILY: Tahoma,Verdana;
FONT-WEIGHT: bold;
text-align: left;
padding-top: 50px;
}
знаю, надоел, но всё же.. оч. прошу подскажите..
спасибо.
попробуй в стилях паддинг поставить первым
.header {
margin: 0px;
padding: 50px 0px 0px 0px;
}
часто из-за этого возникают проблемы
.header {
margin: 0px;
padding: 50px 0px 0px 0px;
}
часто из-за этого возникают проблемы
Цитата:
Originally posted by DaRON
<span class=\"headers\">Ваш телефон:</span>
-в цсс файле:
.headers {
FONT-SIZE: 8pt;
COLOR: #00CC33;
FONT-FAMILY: Tahoma,Verdana;
FONT-WEIGHT: bold;
text-align: left;
padding-top: 50px;
}
<span class=\"headers\">Ваш телефон:</span>
-в цсс файле:
.headers {
FONT-SIZE: 8pt;
COLOR: #00CC33;
FONT-FAMILY: Tahoma,Verdana;
FONT-WEIGHT: bold;
text-align: left;
padding-top: 50px;
}
Для подписей к элементам <input> имеется специально предназначенный для этого элемент <label>. При щелчке по подписи поле, чекбокс или радокнопка становиться активным.
Вот пример формы с http://www.webmasterworld.com/forum83/6090.htm :
Код:
form{
width: 100%;
margin: 0;
padding: 0;
}
form p{
clear: both;
padding: 0 0 20px 0;
/* для того, чтобы сделать отступ сверху можно задать padding: 50px 0 20px 0; или line-height: 50px;*/
}
label, .nolabel, .fbutton{ /* for the labels, unlabelled text (for checkbox and radio) and buttons*/
width: 20%;
float: left;
}
.fbutton{ /* some margin to align the buttons under the input boxes */
margin-left: 20%;
}
input, textarea{ /* for the text boxes and textarea */
width: 75%;
float: left;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #666;
}
.rcinput, .rclabel{ /* for the radio buttons and checkboxes */
width: 10%;
text-align: right; /* moves text closer to input field */
}
<form>
<label for="name">name</label> <input type="text" id="name" value="please enter your name" tabindex="1" onfocus="value=''" /></p>
<label for="email">email</label> <input type="text" id="email" value="please enter your email address" tabindex="2" onfocus="value=''" /></p>
<label for="pcode">Postcode</label> <input type="text" id="pcode" value="please enter your postcode" tabindex="3" onfocus="value=''" /></p>
<label for="address">address</label> <textarea cols="30" rows="5" id="address" tabindex="4" onfocus="value=''" >please enter your address</textarea></p>
<span class="nolabel">Would you like a choice?</span><label for="choiceyes" class="rclabel">Yes</label> <input name="choice" type="radio" id="choiceyes" value="yes I want a choice" class="rcinput" tabindex="5" />
<label for="choiceno" class="rclabel">No</label> <input name="choice" type="radio" id="choiceno" value="no I don't want no choice" class="rcinput" tabindex="6" /></p>
<span class="nolabel">Wish to be contacted</span><label for="contacted" class="rclabel">Yes</label><input name="choice" type="checkbox" id="contacted" value="yes I want to be contacted" class="rcinput" tabindex="7" /></p>
<input name="Submit" type="submit" class="fbutton" tabindex="8" value="Send"/><input name="cancel" type="reset" class="fbutton" tabindex="9" value="Cancel"/></p>
</form>
width: 100%;
margin: 0;
padding: 0;
}
form p{
clear: both;
padding: 0 0 20px 0;
/* для того, чтобы сделать отступ сверху можно задать padding: 50px 0 20px 0; или line-height: 50px;*/
}
label, .nolabel, .fbutton{ /* for the labels, unlabelled text (for checkbox and radio) and buttons*/
width: 20%;
float: left;
}
.fbutton{ /* some margin to align the buttons under the input boxes */
margin-left: 20%;
}
input, textarea{ /* for the text boxes and textarea */
width: 75%;
float: left;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #666;
}
.rcinput, .rclabel{ /* for the radio buttons and checkboxes */
width: 10%;
text-align: right; /* moves text closer to input field */
}
<form>
<label for="name">name</label> <input type="text" id="name" value="please enter your name" tabindex="1" onfocus="value=''" /></p>
<label for="email">email</label> <input type="text" id="email" value="please enter your email address" tabindex="2" onfocus="value=''" /></p>
<label for="pcode">Postcode</label> <input type="text" id="pcode" value="please enter your postcode" tabindex="3" onfocus="value=''" /></p>
<label for="address">address</label> <textarea cols="30" rows="5" id="address" tabindex="4" onfocus="value=''" >please enter your address</textarea></p>
<span class="nolabel">Would you like a choice?</span><label for="choiceyes" class="rclabel">Yes</label> <input name="choice" type="radio" id="choiceyes" value="yes I want a choice" class="rcinput" tabindex="5" />
<label for="choiceno" class="rclabel">No</label> <input name="choice" type="radio" id="choiceno" value="no I don't want no choice" class="rcinput" tabindex="6" /></p>
<span class="nolabel">Wish to be contacted</span><label for="contacted" class="rclabel">Yes</label><input name="choice" type="checkbox" id="contacted" value="yes I want to be contacted" class="rcinput" tabindex="7" /></p>
<input name="Submit" type="submit" class="fbutton" tabindex="8" value="Send"/><input name="cancel" type="reset" class="fbutton" tabindex="9" value="Cancel"/></p>
</form>
спасибо, Carpus! выставил паддинги в
, и всё заработало...
только помимо мною выставленного паддинга появляются какаие-то ненужные пробелы...
(см. картинку -> http://musicxchange.narod.ru/pust_probeli.png , на имадже они отмечены зелён. цветом)
вот код .пхп (от "вам необходим" до "ваш телефон"):
Вам необходим:</p>
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"300\">
<tr>
<td width=\"150\"><input type=\"radio\" class=\"radio\" name=\"sender_need\" value=\"vitraj\"> Витраж</td>
<td width=\"150\"><input type=\"radio\" class=\"radio\" name=\"sender_need\" value=\"peregorodka\"> Перегородка</td>
</tr>
<tr>
<td width=\"150\"><input type=\"radio\" class=\"radio\" name=\"sender_need\" value=\"moza\"> Мозаика</td>
<td width=\"150\"><input type=\"radio\" class=\"radio\" name=\"sender_need\" value=\"rospis\"> Роспись</td>
</tr>
</table>
<label for=\"two\">* Ваш e-mail:</label></p>
<input name=\"sender_mail\" class=\"big\" id=\"two\" size=\"30\">
<label for=\"three\">* Ваш телефон:</label></p>
<input name=\"sender_tel\" class=\"big\" id=\"three\" size=\"30\">
__________________________________
вот классы в цсс-файле (если потребуются):
INPUT.big {
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #ffffff 1px solid;
BORDER-LEFT: #ffffff 1px solid;
BORDER-BOTTOM: #ffffff 1px solid;
CURSOR: default;
COLOR: #01094A;
FONT-FAMILY: Verdana;
font-size : 8pt;
BACKGROUND-COLOR: White;
width: 300px;
}
INPUT.radio {
width: 12px;
}
________________________
подскажите плз...
, и всё заработало...
только помимо мною выставленного паддинга появляются какаие-то ненужные пробелы...
(см. картинку -> http://musicxchange.narod.ru/pust_probeli.png , на имадже они отмечены зелён. цветом)
вот код .пхп (от "вам необходим" до "ваш телефон"):
Вам необходим:</p>
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"300\">
<tr>
<td width=\"150\"><input type=\"radio\" class=\"radio\" name=\"sender_need\" value=\"vitraj\"> Витраж</td>
<td width=\"150\"><input type=\"radio\" class=\"radio\" name=\"sender_need\" value=\"peregorodka\"> Перегородка</td>
</tr>
<tr>
<td width=\"150\"><input type=\"radio\" class=\"radio\" name=\"sender_need\" value=\"moza\"> Мозаика</td>
<td width=\"150\"><input type=\"radio\" class=\"radio\" name=\"sender_need\" value=\"rospis\"> Роспись</td>
</tr>
</table>
<label for=\"two\">* Ваш e-mail:</label></p>
<input name=\"sender_mail\" class=\"big\" id=\"two\" size=\"30\">
<label for=\"three\">* Ваш телефон:</label></p>
<input name=\"sender_tel\" class=\"big\" id=\"three\" size=\"30\">
__________________________________
вот классы в цсс-файле (если потребуются):
INPUT.big {
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #ffffff 1px solid;
BORDER-LEFT: #ffffff 1px solid;
BORDER-BOTTOM: #ffffff 1px solid;
CURSOR: default;
COLOR: #01094A;
FONT-FAMILY: Verdana;
font-size : 8pt;
BACKGROUND-COLOR: White;
width: 300px;
}
INPUT.radio {
width: 12px;
}
________________________
подскажите плз...
Цитата:
Originally posted by DaRON
выставил паддинги в
, и всё заработало...
только помимо мною выставленного паддинга появляются какаие-то ненужные пробелы...
выставил паддинги в
, и всё заработало...
только помимо мною выставленного паддинга появляются какаие-то ненужные пробелы...
Если использовался код из приведенного мною примера form p{
clear: both; padding: 50px 0 20px 0;}, то это паддинг и есть. Более наглядно то же самое можно записать так:
form p {
/* элемент не должен быть смежным с другими блоками слева и справа, см. CSS 2.1 */
clear: both;
/* внутренние отступы сверху, справа, снизу и слева */
padding-top: 50px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
}
Так что можно задать для всех абзацев в форме нулевой отступ, а там, где необходимо, отступ сверху 50 px:
form p {
padding: 0;
margin: 0;
}
form p.pdng {
padding: 50px 0 0;
}