Vensdale

Почему padding не работает?

Recommended Posts

Я в сайтостроении новичок, та что сильно не пинайте. Вобщем есть HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Главная</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<!-- top_header -->
<div id="t_header">
<div id="t_header_middle">
<p>Левый текст| E-mail: <a href="mailto:xxxxx@mail.ru" title="Написать нам письмо">xxxxx@mail.ru</a></p>
<a href="http://www.mailxxx.ru" target="_blank" title="Посетить сайт" class="sm">"Правый текст"</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>

Есть CSS к нему


* {
margin: 0;
padding: 0;
}

body {
font: 12px Arial, sans-serif;
text-align: left;
}

a {
text-decoration: none;
color: #cccccc;
}

#wrapper {
width: 100%;
}

#t_header_middle, #b_header_middle, #nav_middle, #content_middle, #footer_middle {
width: 960px;
margin: 0 auto;
display: block;
position: relative;
}

#t_header {
background-color: #000000;
}

#t_header_middle {
color: #ffffff;
outline: 1px solid #cc0000;
padding: 10px 0; /* вот этот padding */
}

#t_header_middle p {
float: left;
}

#t_header_middle a.sm {
float: right;
}

.clear {
clear: both;
}

Пожалуйста объясните новичку почему padding: 10px 0; не дает ожидаемых внутренних отступов в контейнере #t_header_middle? Причем если не давать #t_header_middle a.sm - float: right; то padding: 10px 0; работает. Это связано с float? Если задать padding для родителя #t_header - то все работает, но мне необходимо разобраться в чем проблема в описанном выше случае.

Наглядный пример

Share this post


Link to post
Share on other sites

padding: 10px 0; в блоке #t_header_middle не работает потому что все его потомки имеют свойство float(а float выходит из нормального потока), поэтому высота блока #t_header_middle равна 20 пикс(вертикальный паддинг 10пикс+10пикс), то есть #t_header_middle является пустым блоком.

А в блок #t_header паддинг работает, потому что его потомок #t_header_middle имеет высоту 20пикс, и уже от него отсчитывается паддинг блока #t_header.

Share this post


Link to post
Share on other sites

overflow:hidden для #t_header_middle , а div.clear можно убрать. он не нужен, да и находится не там, где должно ): если уж совсем хочется clear:both, то можно использовать after для #t_header_middle

Share this post


Link to post
Share on other sites

Ежели не работает padding,то может быть какой то конфликт полей.

Попробуйте задать падингу !important; или диву в котором находится нужный padding, рамку.

Share this post


Link to post
Share on other sites

Господа, большое спасибо за разъяснения. overflow:hidden для #t_header_middle помог. У меня остался один вопрос - почему здесь padding работает в таком же же блоке (#topbar) как у меня, но без прописки overflow?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,530
    Total Members
    3,128
    Most Online
    6eJlbIu
    Newest Member
    6eJlbIu
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Ну, как я понял, это для динамичных сайтов, и все товары должны быть в какой то базе данных?
      А как через javascript обратиться к базе данных?
       
    • начнем с того, что данные ваших товарных позиций должны быть структурированы, например если они хранятся в SQL, то в вашем случае это может выглядеть:

      table
      date_start | date_stop | type | color | capacity | carrying

      одна строка - одна позиция
      SQL запрос к данной таблице вернет массив объектов с данными свойствами из таблицы (table)
      Без каких либо условий - это будут все записи. Если вам нужен фильтр по какой-либо колонке/колонкам или сортировка, то для этого в SQL запрос добавляются условия которые передаются в скрипт через POST или GET запрос с помощью формы
      например:

      <form method="post">
      <input name="date_start">
      <input name="date_stop">
      ....
      type и color логично сделать через select чтобы выбирать из существующих возможных вариантов
      capacity и carrying возможно потребуется возможность указания диапазона (от и до)
      ....
      </form>

      все выше перечисленное только в рамках возможных вариантов которых можно еще придумать
      если мы например укажем date_start то в скрипте используя $_POST['date_start'] можно будет добавить условие в SQL запрос
      ... WHERE `table`.`date_start` = $_POST['date_start']
      в этом случае на странице вывода позиций будут присутствовать только с Дата начала аренды указанной в фильтре

      в целом данная система - это большой комплекс разных механизмов в котором очень много нюансов, но если задаться целью, то можно сделать простенький фильтр на сайте
       
    • Здравствуйте. До сегодняшнего дня, я только занимался версткой макетов, и не совсем понимаю как в принципе после верстки сайты оживают и начинают работать. 

      Вот например, я сверстал карточки товаров, и там есть сортировка, но понятия не имею как его делать.

      Там есть формы: 
      - Дата начала аренды
      - Дата конца аренды
      - Тип транспорта
      - Цвет
      - Вместимость
      - Грузоподъемность Буду очень благодарен тому кто распишет как все это работает, а то понять не могу, что-то для меня это совсем темное и туманное.... 
  • Popular Contributors