HTML+CSS+JavaScript

Я при блочной верстке использовала position:absolute; но мне нужно, чтобы при дабавлении в блок текста бло не наезжал на другой, а смещал его вниз. С position:absolute это не возможно. Но без position:absolute я не могу задавать координаты блокам, блоки разбегаются. Простой макет сверстать можно: Шапка, меню, подвал. А вот сложный шаблон у меня без position:absolute не получается. Подскажите как быть? Как верстается блочная верстка без position:absolute, но при этом должны указываться координаты блоков?

Спасибо!

вместа указания координат надо ставить явно значения ширин и высот блоков.

проще показать на макете, который вызывает затруднение.

Вот макет

постараюсь вечерком разрисовать..

Спасибо. Вот только дело в том, что мне это самой нужно научится делать.

так я разрисовать, а не разрезать предлагаю =)

А понятно. Спасибо. Просто я первый раз верстаю без absolute и вот возникли проблемы: блоки расползаюся.

стрелки обозначают блоки ширину и высоту которых можно задать в px.

и где тут может понадобиться абсолютное позиционирование?
для создания 3х колонок?

сайт предполагается резиновый?

Сайт не резиновый. Проблема в том, что без абсолютного позиционирования я не могу задовать координаты блоков. Они разбегаются. Вот я и хочу узнать как это сделать.

смотрите:
1) делим на блоки ширина которых равна ширине сайта (синий) .после каждого такого контейнера стивим <div class=clear></div>
2) в нутри этих контейнеров делаем коноки - ставим для <div> float:left; width:***px (черные)

и того получаем
<style>
.clear{clear:both;height:1px; line-height:1px;font-size:1px;}
.col{float:left;width:200px}
</style>
<div>
<div class=col>
колонка1
</div>
<div class=col>
колонка2
</div>
<div>
<div class=clear></div>

Кажется поняла. Сейчас попробую. Спасибо.

И еще вопрос. А если нужно чтобы расстояние между этими двумя колонками было 60 рх?

указываете для одного из блоков padding-left:60px (padding-right:60px) или margin-left (margin-right)

для этого есть свойства стиля ( margin | padding )

А в Мозиле и Explorer расстояния отображаются по разному

с чего бы?

Не знаю. Но когда меняю значения height:1px; line-height:1px;font-size:1px; то в Мозиле и в Explorer изменяется по разному.

надо еще padding:0px; указывать

Да по разному, а еще в Опере тоже по разному, ибо каждый браузер считает пикселы по своему. А также в ИЕ есть глюк, когда ставишь два дива рядом с шириной одного (например) 30%, а другого 70% на определенных размерах экрана они начинают скакать.

В. Токмаков написал две статьи:
«Еще один способ борьбы с «прыгающими» блоками в IE»
«Борьба с «прыгающими» блоками в IE»

я так и не понял что именно изменяется поразному...

давайте или код приводите или принтскрины.

«давайте или код приводите или принтскрины.»
не буду, но если будет желание, то можешь вставить в страничку рисунок шириной, например 200рх и посмотреть на его длину в ИЕ, ФФ и Опере.

Lelik, я если честно не тебе писал :)

>>вставить в страничку рисунок шириной, например 200рх

я могу получить в результате этой операции выведенный рисунок ширина котого будет отлична от указанного значения ???? 0_0

«я могу получить в результате этой операции выведенный рисунок ширина котого будет отлична от указанного значения ???? 0_0»

:))))) нет. просто в разных браузерах 200рх будут разной длины (в смысле визуально будут отличаться)

чето ты глупость какаю-то сказал :)

проверь сам. визуально 200рх в ИЕ отличаются от 200рх в ФФ

переработал?

проверь. если бы сам своими глазами не видел, то не говорил бы.

ты намекаешь на то что область просмотра у opera и FF шире из-за отсутсвия полосы прокрутки когда она не нужна? :)))

ну ты уморист!

нет я намекаю не на это. я говорю, что 200рх в ИЕ будут примерно 5—6 см длинной, а в ФФ будет на пару мм отличаться.

ты знаешь, то , может оно и так, может у меня линейка размер меняет , или вам какой-то особенный FF выдают, но ты лучше такие заявления не офишируй, особенно перед начальством...

>200рх в ИЕ будут примерно 5—6 см длинной, а в ФФ будет на пару мм отличаться.

Вопрос - как это физически может произойти? Все что отображается на экране монитора - это не текст, не картинки и линии, это одна большая картинка в конечном итоге, а получается она посредством обращения программ к контексту устройства, в данном случае это экран монитора Screen - для рисования на нем. Именно так все и происходит, по крайней мере в Windows, почитайте WinAPI, про Linux я не знаю. Физические параметры контекста этого устройства задаются системой, и если программа не изменяет его, а я такого не наблюдал при запуске FF, то они остаются такими какими и определены системой. Получив контекст устройства, программа просто ресует свое, при необходимости перерисовывая участки изображения "под собой" и пр. Не может контекст устройства нарисовать линию в 200рх длинне в IE, чем в FF. Если бы размер был указан в процентах, то можно допустить, что IE более "грамотней" чем FF и считает лучше, или наоборот. Но в физических величинах экрана, ну это нонсенс.

Если я открою в обоих браузерах картинку 200рх по ширине, совмещу окна этих программ, выравняв изображения по левой их стороне, потом приложу вертикально к правой стороне изображений линейку, например, то она у меня вертикальная без уклона. И вообще не надо ничего прикладывать, я визуально разницы не вижу. Вы извините, но у вас либо "специфическое" зрение, либо странный монитор, а может WinAPI, позволяющая заигрывать с собой браузеру FF. То что вы утверждаете, это полная чушь.

Когда меняешь значения height:1px; line-height:1px;font-size:1px; то в разных броузерах отображается по-разному

смотри мой пост за 09.07.2007 в 14:48

вопрос: зачем вообще трогать класс .clear{} ??? не надо его трогать.

И кагда я использую margin-left:120px; то в Мозиле и Опере отображается одинаково, а вот в IE совсем подругому. Как быть?

1) body,html{padding:0;margin:0}
2) все font-size и line-heiht указывать в px или pt

Все это я указала. Вот файл:

вы издеваетесь?

Почему я издеваюсь?

Откройте этот файл в Мозиле и IE расстояние между блоками будет разное.

не заметил. действительно проблема есть. поставте вместо margin, padding

Да работает. Но только не весь блок целиком отодвигается от главного блока, а его сожержимое от блоко в котором находиться. Это нормально?

если устраивает, то нормально. почитайте чем отличаются padding и margin

css-info.narod.ru

Да, спасибо. Я знаю чем они отлечаются поэтому и спросила.