Недавно начал верстать сайт, решил верстать на блоках, так как в интернете их все расхваливают, но сейчас я стал сомневаться в этих похвалах...
И тому есть причины:
1) Свойство vertical-align не работает ни в одном браузере (и вообще не понятно как делать выравнивание по вертикали)
2) Если есть 2 колонки, совершенно непонятно, как сделать их высоту одинаковой
3) Отступ padding не включается в указанную ширину
4) Непонятно, как при фиксированной ширине левой колонки, сделать так, чтобы правая колонка заполняла всё оставшееся пространство справа и при этом не сползала налево, когда заканчивается левая колонка
5) Неинтуитивность в использовании многих свойств.

Сейчас мне нужно написать стандартный макет(заголовок, левая колонка, правая колонка(содержимое), подвал) в 2 колонки фиксированной ширины с некоторыми особенностями:
1) Содержимое "Заголовка" верикально выровнено по середине и выглядит примерно так:

2) Левая колонка не подстраивается под ширину правой (но как сделать подстраиваемость тоже хотелось бы узнать) и имеет фиксированную ширину
3) Правая колонка занимает остаток места
4) Есть отступы padding
5) Желательно, чтобы для изменения какой-либо характеристики(ширина макета, ширина левой колонки, ширина отступов и т.п.) достаточно было бы изменить как можно меньше чисел(в идеале - одно)

Скажите, являются ли мои причины объективными, или я что-то не так делаю?
И помогите пожалуйста сверстать данный макет    (в интернете не нашёл ничего, удовлетворяющего условиям).

Это сообщение отредактировал(а) nns2009 - 15.10.2011, 19:16

1. А так?

2.

3. В разных браузерах по разному
5. Есть такое дело, не хватает к примеру vertical-align:center;


Если время не терпит для проблемных мест сам использую таблицы

5-я причина объективная, логику создателей CSS порой понять очень трудно. Блочная модель, считающаяся "изнутри наружу" (ширина задает ширину контента, а паддинги и бордеры плюсуются к ней сверх) — лишь одно из таких мест (хотя, пожалуй, самое заметное). Есть еще одна объективная причина — в современном CSS нет механизма специально для компоновки блоков, в основном он "заточен" под оформление текста, и для типовых задач верстки приходится использовать инструменты не по назначению (напр. делать колонки "как бы врезками"). Ну и вечная проблема старых браузеров, само собой (впрочем, с таблицами в них тоже хватает своих "приколов").

Выравнивание высоты колонок — проблема известная, теме "equal height columns" (кое-где именуемой ни много ни мало "Граалем вёрстки") посвящены гигабайты статей. В простых случаях однородного фона часто довольствуются имитацией равной высоты с помощью фоновой картинки для контейнера (метод "ложных колонок" — "faux columns") или с помощью бордеров, например, так. Для более сложных случаев — см. здесь.

Vertical-align работает, но по-разному в разных ситуациях. В ячейках таблиц оно выравнивает содержимое относительно ячейки (как атрибут valign), а для строковых элементов — выравнивает их в строке (по умолчанию картинки, элементы форм и инлайн-блоки выравниваются по базовой линии текста, а с помощью vertical-align можно выровнять их по центру, верху или низу строки, а также поднять/опустить относительно базовой линии на заданную величину).


Как вариант: text-align: right (для меню) + float: left либо position: absolute с подходящими координатами (для логотипа) + достаточно большой line-height (для вертикального центрирования).


Как вариант — см. пример. Для "подстраиваемости" нужно задавать ширину в процентах, правда, тогда не получится имитировать колонку бордером, но это решаемая проблема.


Универсальный вариант — вложить в каждую колонку еще один оберточный div и задать отступы ему. Современный, но, увы, еще не достаточно кроссбраузерный подход — использовать CSS3. Еще можно (и нужно;) использовать тот факт, что без явного указания ширины блок вписывается в предка (сумма ширины контента, паддингов, бордеров и маргинов равна внутренней ширине родительского элемента).


А вот здесь почти всегда придется искать компромиссы. Часто "идеологически чистые" и предельно гибкие в теории решения оказываются недостаточно кроссбраузерными и т.п. Но всегда есть возможность приблизиться к совершенству еще хоть на пиксель! 

В простых случаях - помогло! Но не во всех... Например, в случае, когда поначалу идёт текст, а потом див. (Моя текущая проблема)


border-left: 200px solid #cfc;
Оригинально!


Вот это я запомню (если пойму)


Я опечатался. Имелось в виду, что высоты колонок не объзательно равны (в моём случае не надо).


Попробовал - у меня заработало во всех браузерах. Это хорошо  

Сейчас у меня такая основная проблема:


Вертикально выровнять всё содержимое внешнего дива. Название сайта - поместить слева, а все кнопочки поместить справа.

Маленький пример на тему

Не просто спасибо, а супер спаибо  

А как сделать всё так-же, но фон (и только фон) каждой кнопки полупрозрачен.
Пробовал: opacity: 0.5; Но это затрагивает не только фон, но и текст.

Современный и, на мой взгляд, самый правильный подход — RGBA. Альтернативы — полупрозрачная однотонная png-шка для фона (минус: лишний запрос к серверу) и игры с наложением слоев (сложно и негибко).

По мотивам вашего примера, переделал свой. Получил: Хедер
Через данный сервер страница отображается полностью правильно, но, сохранённая на мой компьютер, она же ужасно отображается через Оперу (и только) - а это ведь мой любимый(как у пользователя интернета) браузер.....
Вот код:


Что надо переделать?

Как минимум, доктайп <!DOCTYPE html> добавить, без него страница валится в Quirks mode. Подробнее про доктайпы и режимы браузеров здесь и здесь.

Помогло! Хотя, на основной странице моего шаблона стоял доктайп(я посылал сокращённую), он почему-то не работал, как и половина доктайпов с вашей ссылки.
В вашем шаблоне было указано: display: inline-block - чем это отличается от просто инлайн?
Продолжаю искать ошибки.....

Там в табличке как раз помечено, грубо говоря, какие доктайпы в каких браузерах "работают" (включают стандартный режим), а какие — нет. Этот самый надежный, т.к. самый простой и короткий.


"Снаружи" он инлайновый (вписывается в строку, как обычное слово или картинка), а "внутри" — блочный (может иметь полноценные паддинги и фон, не разрывается при переносе строки и т.п.). Правда, не работает в FF2 (уже года 3 как неактуально) и есть приколы в IE6-7 (только для изначально строчных элементов, но для изначально блочных тот же эффект дает display:inline + hasLayout).

Проблемы обнаружились   
Теперь в IE. Проблема, полностью совпадающая с моей, видна тут: http://jsfiddle.net/nns2009/QYQqv/2/
Эта проблема видна при просмотре данной странице через IE - левое меню сезжает вправо.
Почему?

Ещё задача: нужно сделать приблизительно так - http://jsfiddle.net/nns2009/ewz2p/, но чтобы ширина заголовка подгонялась под ширину содержащегося текста и сам заголовок(вместе с фоном) наехал наполовину на колонки(съехал чуть чуть вниз).

Это сообщение отредактировал(а) nns2009 - 26.10.2011, 21:00

Похоже, из-за какого-то глюка левая колонка умудряется "зацепиться" за логотип, clear:left (или both) для нее решает проблему.


Как вариант. Вместо display:table можно поставить inline-block, только центрировать придется иначе (через text-align предка). Под IE7 придется чуть "допилить", но это можно и "на закуску" оставить.