Помогите с отступами

mydba · July 13, 2009

помогите, кто может. не могу увеличить отступ от текста до формы. если же отступ увеличивается, то возникает проблема:

текст и форма находятся на разном уровне (как бы на разных строках). как этого избежать? спасибо.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>
New project
</title>
<style type="text/css">
 .layer1 {

	padding-left: 80px; /* Отступ слева */
    background-image:url(topfon.jpg);
	color: lightblue; /* Цвет шрифта */
   }
  .ots {
  margin-left: 80px; /* Отступ слева */
  padding: 0px;
  }
  .layer2 {
    margin: 0; /* Убираем отступы вокруг */
    padding-left: 10px; /* Поле слева */
   }
   .ots2 {
  margin-left: 180px; /* Отступ слева */
  padding: 0px;
  </style>
 </head> 
  <div class="layer1">
Главная
   </div>
</style>
</head>
<body bgcolor = "black" background="topfon.jpg">

 <div class="ots">
<img src = "top.jpg" width = "1070" height = "200">
</div>
<b>
<center><h4><font face = "Verdana" color = "white">Регистрация нового пользователя</font></h4>
</center>
<br>
<form name = "id" action = "2.php" method = "POST">
 <div class="ots2">Введите своё имя
<input type = "text" name = "login" style="background-image:url(topfon4.jpg)"></div>
<br><br>
Введите пароль
<input type = "text" name = "password" size="22" MAXLENGHT="20" style="background-image:url(topfon4.jpg)">
<br><br>
Подтвердите пароль
<input type = "text" name = "password2" size="17,5" MAXLENGHT="20" style="background-image:url(topfon4.jpg)">
<br><br>
<font color = "lightblue">
<br>
Дополнительная информация о себе
<br>
<br>
<textarea name = "info" rows = "10" cols = "50" style="background-image:url(778.jpg)"></textarea> 
<br>
<input type = "submit" name = "a" value = "Добавить" style="background-image:url(sub3.jpg)">
</form>
</font>
<br>
</b>
</body>
</html>

Justnewone · July 14, 2009

избавтесь, для начала, от глупостей

...

</head>

Главная

</div>

</style>

</head>

<body ...

x11 · October 8, 2009

У меня не совсем "помогите", просто интересно как это большие братья решают.

Такая штука, бокопорят FF и Opera. IE нормально.

Задача довольно простая, есть див с фоном-картинкой, в него нужно втулить текст.

HTML:

<div class="right"> 
<div class="wel">
много текста
</div></div>

CSS:

.right {
float: left;
width: 725px;
margin: 0px 5px 0 15px;
text-align: justify;
font-size: 13px;
color: #383633;
}

.wel {
background-image: url('images/wel.png');
width: 725px;
height: 160px;
padding: 5px;	-  вот этот паддинг и сразу бока
}

Как только я ставлю padding, так сразу изображение wel.png вправо и вниз дублируется ровно на 10 px.

Гуглом нашел такое

дело в странной для многих боксовой модели от WWW-консорциума - паддинги и бордеры плюсуются к ширние/высоте. IE в режиме совместимости со стандартом (при соответствующем DOCTYPE) ведет себя так же.

А как тогда делать чтобы фиксировать блок?

Edited October 8, 2009 by x11

Searcher · October 9, 2009

ну во-первых это прикол:

.right {
float: left;

а во-вторых, ничего странного. padding - внутренний отступ от границ, вот и получилось, что внутреннее пространство увеличилось с каждой стороны на 5px. Естественно и фон занимает все внутреннее пространство, а по умолчанию он размножается. А вы хотели чтобы внутреннее пространство уменьшилось? Тогда если внутренний отступ будет больше, чем ширина или высота, элементу наизнанку чтоли выворачиваться?

А в вашей ситуации много вариантов решений.

Например, уменьшить высоту и ширину на 10px

или задать no-repeat для фона и указать ему координаты

ну и т.д.

ну и DOCTYPE обязательно указывайте, а то будут у вас в разных броузерах разные сайты при одном исходнике

Edited October 9, 2009 by Searcher

x11 · October 9, 2009

Searcher

Спасибо что отозвался, а то думал уже не ответит никто

ну во-первых это прикол

у меня там и left есть, и у него тоже float: left, я пробовал right, на диве .right - разница почти не видна, потому сделал его лефтом, налево мне больше нравиццо это ж без разницы если отображается нормально?

Доктип поставил, теперь и IE бокопорит

Но вот что, задача у меня такая, нужно в этот блок с фоном текст вставить, типа вот так :

Т.е. мне нужно чтобы текст внутри этого блока имел отступы со всех сторон от краев блока. А красным обозначен бордер блока .right а там где на изображении коричневая штука с круглыми углами, это блок .wel

Edited October 9, 2009 by x11

psywalker · October 9, 2009

Searcher
Спасибо что отозвался, а то думал уже не ответит никто
у меня там и left есть, и у него тоже float: left, я пробовал right, на диве .right - разница почти не видна, потому сделал его лефтом, налево мне больше нравиццо это ж без разницы если отображается нормально?
Доктип поставил, теперь и IE бокопорит
Но вот что, задача у меня такая, нужно в этот блок с фоном текст вставить, типа вот так :
Т.е. мне нужно чтобы текст внутри этого блока имел отступы со всех сторон от краев блока. А красным обозначен бордер блока .right

значит задай паддинги блоку с текстом, он у тя в теге <p> скорее всего, вот ему и задавай

x11 · October 9, 2009

psywalker

Я понял, тогда так и сделаю, спасибо странник

psywalker · October 9, 2009

psywalker
Я понял, тогда так и сделаю, спасибо странник

да, странник тот ещё, не за что

Sign In

Помогите с отступами

Question

mydba

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

x11

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

x11

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

x11

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information