Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!






#1 16.09.2011 22:34

roman111
Новичок
Зарегистрирован: 16.09.2011
Сообщений: 28

Установка одинаковой ширины DIVa

http://webcredible.co.uk/user-frien … icks.shtml
на сайте приведен пример  (п6)
как сделать одинаковую ширину слоя для всех популярных брауз , но так не работает как там написано
что кто может сказать по этому поводу



привожу вырезку с сайта

(6. CSS box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

#box
{
width: 100px;
border: 5px;
padding: 20px
}

This CSS rule would be applied to:

...


This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.

A simple alternative is to use this CSS:

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

And the new HTML would be:

...


Perfect! Now the box width will always be 150px, regardless of the browser!)


какие есть действительно способы которые решают такую задачу.  СПАСИБО

Нет на форуме

 

#2 16.09.2011 23:46

tapazukk
Опытный
Зарегистрирован: 16.01.2010
Сообщений: 349
Вебсайт

Re: Установка одинаковой ширины DIVa

Да вообщем-то для всех браузеров (кроме версий ИЕ до 6-й или если сайт не переведен в quirks mode включая ИЕ-6 ) блочная модель так и работает. Например у нас блок шириной 100px и с паддингом по бокам по 10px и рамкой по 5px. Плюсуем 100px+10px+10px+5px+5px=130px ширина блока. Это действительно для жестко заданных размеров блоков. 
Обычно, если необходимо прописать сразу нескольким блокам, то просто помещаю их в контейнер с жестко заданной шириной (собственно, как и написано в статье wink )

Код:


Some content

Some content

Some content

Perfect!

Отредактированно tapazukk (16.09.2011 23:50)

Нет на форуме

 

#3 19.09.2011 23:14

roman111
Новичок
Зарегистрирован: 16.09.2011
Сообщений: 28

Re: Установка одинаковой ширины DIVa

Хочу продолжить тему
Если мне нужно включить в расчет ширины и  margin.

Если установлен маргин то ширина которую я задал не выдерживается. Или я чего то не понимаю.

Help please

Нет на форуме

 

#4 19.09.2011 23:40

tapazukk
Опытный
Зарегистрирован: 16.01.2010
Сообщений: 349
Вебсайт

Re: Установка одинаковой ширины DIVa

Да, нет. Почему же. Ширина должна выдерживаться, все зависит от конкретных обстоятельств wink  Схлопывание полей действует только для верхних и нижних отступов (margin)

Нет на форуме

 

#5 23.09.2011 12:25

roman111
Новичок
Зарегистрирован: 16.09.2011
Сообщений: 28

Re: Установка одинаковой ширины DIVa

В продолжении темы хочу задать вопрос:

Если нужно установить рамку  {border} вокруг для основного блока так что бы заданные параметры высоты и ширины главного слоя оставались неизмененными и исключить схлопования


например к основному слою ()  для кода нужно добавить рамку:
Код:



 

   

Some content


 


 

   

Some content


 

 
 

   

Some content


 



как в данном случаи измениться код.  ?   Зарание спасибо :-)

Нет на форуме

 

Board footer