Jump to content
  • 0

padding "ломает" верстку


]-[иколай
 Share

Question

Здравия желаю всем форумчанам. Прошу помощи в тривиальном вопросе.

Нужно сверстать три колонки 40 20 и 40 процентов по ширине. Все нормально до тех пор, пока для внутренних элементов этих блоков я не указываю padding. В результате их(внутренних элементов) реальная ширина становится больше указанной.

На примере верхние текстовые поля со стандартным padding-ом, нижние - с увеличенным.

Есть ли какое-нибудь решение проблемы??? Спасибо!

И еще смежный вопрос: почему родительский див, содержащий несколько детей с float:left по высоте будет 0px? В данно примере div#containerMain имеет высоту 0px... И как это исправить?

Всем спасибо за помощь!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div#containerMain {
width: 80%;
background-color:lime;
}
div#left, div#right {
width: 40%;
background-color: #FDFF81;
float:left;
height: 500px;
}
div#center{
width: 20%;
height: 500px;
float:left;
background-color: #FED69A;
}

input{
width: 100%;
border: none;
background-color:lime;
}
input.wtf{
padding: 50px;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="containerMain">
<div id="left">
<h1>LEFT</h1>
<input type="text" value="Нормальное текстовое поле" /><br />
<input type="text" class="wtf" value="Разбухшее текстовое поле" />
</div>
<div id="center">
<h1>CENTER</h1>
</div>
<div id="right">
<h1>RIGHT</h1>
<input type="text" value="Нормальное текстовое поле" /><br />
<input type="text" class="wtf" value="Разбухшее текстовое поле" />
</div>
</div>
</body>
</html>

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
-[иколай' timestamp=1315566533' post='221876]

И еще смежный вопрос: почему родительский див, содержащий несколько детей с float:left по высоте будет 0px? В данно примере div#containerMain имеет высоту 0px... И как это исправить?

<div style="clear: both;"></div>

После последнего блока с float

Edited by Bonzash
Link to comment
Share on other sites

  • 0

по поводу паддингов - раз вы все делаете в %, то и паддинги задайте в %

input.wtf{width: 90%;padding:5%;}

не забывайте, что паддинг добавляется к результирующей высоте/ширине

Edited by irinablue
Link to comment
Share on other sites

  • 0

<div style="clear: both;"></div>

Не надо в мусорить такой бякой в коде. Поставьте вместо этого overflow: hidden для родителя.

В результате их(внутренних элементов) реальная ширина становится больше указанной.

Фактическая ширина видимой части блока = width + ширина боковых паддингов + ширина боковых бордеров.

В вашей ситуации, например, можно не задавать паддинги для родителей, а задавать марджины для детей. Тогда родители не пострадают.

Link to comment
Share on other sites

  • 0
А в чём же заключается "бякность"?

В том, что это мусор, которому в коде не место, поскольку он (мусор) никак не отражает его (кода) структуру. Это как несколько <br> ставить вместо стилевых отступов.

Link to comment
Share on other sites

  • 0
А в чём же заключается "бякность"?

В том, что это мусор, которому в коде не место, поскольку он (мусор) никак не отражает его (кода) структуру. Это как несколько <br> ставить вместо стилевых отступов.

А, ну понятно... Опять мантры про семантику и заветы W3C... Я тоже раньше этим увлекался - везде ставил

html4/strict.dtd

, всё делал только на Div-ах, почти всю графику в бэкграунды, в закладках всегда валидатор был и т.д.

До тех пор пока не стал верстать серъёзные проекты со сквозными шаблонами... Где порой на одной странице напихано столько блоков и подключено столько стилевых свойств... Что попытка поправить "разъезжающуюся" структуру "невинным"

overflow:hiding

ведёт к непредсказуемым последствиям (ну типа в Файербаге всё ОК, а потом тестеры говорят что в IE всё рухнуло и т.п.). Так что я как-нибудь по старинке - после каждого нового внедрённого плавающего блока подчищу "бякой"

<div style="clear:both"></div>

... И при возможности пускаю таблицы в ход... Порой очень удобно знаете ли, чтобы не лепить ещё большую бяку навроде

div{_width:99%}

.

В браузерах в конце-концов не код смотрят, а отрендеренный результат!

Я и не против верстать по стандартам, если бы "физики-ядерщики" (подразумевается консорциум) удосужились хотя бы реализовать внятную, интуитивно понятную модель позиционирования, угу...

А так, да, раз уж ратуете за чистоту коды, строгое разграничение струкуры и оформления, семантику и т.д. можно поёти ещё дальше - к семиотике, т.е. писать код так, чтобы теги в редакторе образовывали некие узоры - вот уж красотища будет! А главное, насколько процесс вёрстки станет рациональным!

P.S. И таки иногда действительно лучше поставить несколько

<br>

, чем потом ломать голову над такими правилами -

div{margin:4ex 1em 10px 2%;}

:lol:

P.P.S. Кстати, для любителей семантики - проверьте насколько "семантично" (по мнению W3C, конечно) Вы верстаете, поставьте Амайю и гляньте на свои проекты...

Edited by Nanto
Link to comment
Share on other sites

  • 0
А так, да, раз уж ратуете за чистоту коды, строгое разграничение струкуры и оформления, семантику и т.д. можно поёти ещё дальше - к семиотике, т.е. писать код так, чтобы теги в редакторе образовывали некие узоры - вот уж красотища будет! А главное, насколько процесс вёрстки станет рациональным!

Ваша аргументация наповал сражает. Сила – в утрировании!

ведёт к непредсказуемым последствиям

Ой ли. Для того, кто не знает, как она работает, – конечно. Некоторые и во флоутах путаются.

Я и не против верстать по стандартам, если бы "физики-ядерщики" (подразумевается консорциум) удосужились хотя бы реализовать внятную, интуитивно понятную модель позиционирования, угу...

Плохому танцору...

Вы правда умеете <br>-ами вот такое заменять, да?

div{margin:4ex 1em 10px 2%;}

Научите?

Мне, кстати, ни разу в жизни такие марджины ставить не приходилось. Что я делаю не так?

Edited by Gaspode
Link to comment
Share on other sites

  • 0

ведёт к непредсказуемым последствиям

например?

Ты собрался дискутировать с верстальщиком, который не знает как пишется overflow: hidden? :)

а может у него как раз в этом вся загвоздка? Он, написав так, ждет одного эффекта, а получается совсем иное.

Link to comment
Share on other sites

  • 0

ведёт к непредсказуемым последствиям

например?

Ты собрался дискутировать с верстальщиком, который не знает как пишется overflow: hidden? :)

а может у него как раз в этом вся загвоздка? Он, написав так, ждет одного эффекта, а получается совсем иное.

Не, тут загвоздка в другом, более материальном :D

Link to comment
Share on other sites

  • 0

Ой ли. Для того, кто не знает, как она работает, – конечно. Некоторые и во флоутах путаются.

Я тоже иногда путаюсь - когда четыре блока вложены друг в друга и все плавающие

Вы правда умеете <br>-ами вот такое заменять, да?
div{margin:4ex 1em 10px 2%;}

Научите?

Ну по логике: <br>=2ex, не? ;)

ведёт к непредсказуемым последствиям

например?

ну так с ходу...

<div id="wrap">
<div class="layer1"></div>
<div class="layer2"></div>
</div>
<div class="layer3"></div>

и

#wrap{width:1000px;overflow:hidden}
.layer1{width:300px;float:left}
.layer2{width:300px}
.layer3{width:1200px}

Не? layer3 не обрежет ваше "семантически-корректное" overflow:hidden?

Какого чёрта давать заведомо большую ширину? Ну мало-ли... Графика порой из партнёрского контента тянется - надо чтобы влезла.

Пример утрированный, но суть думаю ясна...

Чаще конечно использую

<div class=".. cb"> .cb{clear:both}

...

P.S. И кстати, с точки зрения W3C, как раз таки подобная запись "семантически" более корректна - стилевое свойство "clear" используется по назначению, а не подставляются невнятные костыли "очичающие поток растягиванием на высоту".

Edited by Nanto
Link to comment
Share on other sites

  • 0

Товарищи, а у меня творится вообще что-то паранормальное.

Какого-то черта стиль для блока радокнопок:

#selectors p {
padding-bottom: .2em;
}

сдвигает всю обертку сайта на это значение ПО ГОРИЗОНАЛИ!

Кто-нибудь встречался с подобным?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy