Любителям блочной верстки на засыпку!

[shamahn]

Ну, во первых, здравствуйте!

Начал я совсем недавно пытаться верстать дивами. Не скажу, что получаю удовольствие, что были моменты, которых я бы не сделал таблицами, но тем не менее стремлюсь к прогрессивному. А теперь, уважаемые знатоки, вопрос:

2столбцовый макет. Ширина левого меняется произвольно (в зависимости от содержимого). Правый - от конца левого и до конца экрана.

С помощью таблиц - решается очень прозрачно. Хотелось бы увидеть, что существует такое же прозрачное решение и для дивов

Спасибо за внимание

[Иван Шумов]

можешь положить пока в карман, меня распер азарт и без них)

[Victor Ananiev]

Подождите! Что же это за макет, ну для чего он нужен, вот если там какой нибудь нормальный текст в левой колонке будет, то правая зажимается полностью, в задании изначально предполагался не макет, а просто два слоя и при увеличении левого правый уменьшается. А макеты делаются так чтобы при вставке нормального текста вторая колонка не зажималась до упора и не кочевала под левую. Значит у каждой колонки должна быть блокирована максимальная ширина.ИМХО

[Victor Ananiev]

2 shamahn

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

[Sotnikov]

shaman, в таком случае честно нихрена не понятно...

дайте пример табличной верстки, прямо так, как вы этого хотите, чтобы выглядело, тянулось, на div'ах, а то создается такое ощущение, что вы сюда пришли за online уроками.

[Victor Ananiev]

[shamahn]

Vindex10, слева может быть картинка, 1 буква, строка текста с запрещенным переносом. Ширина левой колонки изменяется в зависимости от содержимого.

Правая занимает всю оставшуюся ширину!!! Вот и все.

Таблицами делается просто. Нужно показать, что слоями это тоже делается, либо доказать обратное.

А вот тебе живой пример:

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

ТАКОЙ ВОТ ТЕКСТ ЗАГОЛОВКА /——————————————————————————-

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

Кроме как таблицей, я сломать эту головоломку не смог. Даю 5 баксов тому кто это рационально реализует не табличными элементами

[Victor Ananiev]

Я вам предлагал пример, вы его не откомментировали еще до сих пор, ну хотя бы дали пример, уже хорошо.

P.S. не вижу ниодного коммета по поводу работ.

[shamahn]

Vindex10, коментарии были оставлены. Последнее решение вполне приемлемо. за исключением того что в ИЕ между левым и правым блоками есть разрыв, и при уменьшении ширины окна до ширины левого блока, правый блок прыгает на следующую строчку. Вот, собственно и все.

Sotnikov, мне не нужны онлайн уроки. Мне необходимо быть уверенным, что есть моменты, которые и не стоит пытаться реализовывать блоками, что бы не говорили ярые поклонники этого метода.

Вот он заголовок в нормальном виде:

[Sotnikov]

красиво.. а что это?

[shamahn]

Sotnikov, не оптимизированный для вэб jpg. Все исправлено, можете посмотреть.

Vindex10, специально, комментарии оставленные ранее:

jhhsdjfhaskjhfalksdhjflaskdjhflaksjhdfasdjhflkasjhfkljahfklajhfkashfklashfkalsjhflkashfkashkljlkjlj

Попробуйте это вставить вместо первого дива smile не замечаю чтобы ширина его изменилась smilesmile

Конкурс продолжается

и почему то

улетел куда-то (я его еле нашел) вниз...sad

Девятилап, слушай, шикарно! не думал, что это ваабще возможно smile

2 проблемки: владигер которую озвучил, и 2-я в ИЕ белая полосочка разделяющая слои.

И деньги твои smile

Думаю достаточно? или просто лень по страничкам потыкать, а мне нужно подготовить резюме?

[shamahn]

Девятилап, ок.. я подожду всегда готов

[Sotnikov]

тут конечно еще и от самой картинки многое зависит.

[shamahn]

Sotnikov, Вы ударяетесь в частности, а мне необходимо общее решение: 2 блока, поведение которых описано неоднократно выше. А потом как во второй вложить что надо - не проблема

[Victor Ananiev]

shamahn посмотрите картинку поближе, там все равно отступ. И к тому же кому вздумается кроме вас уменьшать страничку до таких размеров тем более что в ИЕ сидит не весь мир а чать? в вашем случае мой пример полностью должен подходить.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css">
body
{
margin:0;
padding:0;
height:100%;
} 
#left, #right
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#left
{ 
float:left; 
color:orange;
} 
#main
{ 
margin:0;
padding:0; 
position:absolute;
width:100%; 
} 
#img
{ 
position:absolute; 
height:20px;
} 
</style>
</head>
<body> 
<div id="main"> 
<div id="left">О компании</div>
<div id="right"><img id="img" src="http://gkng.ru/h1.gif" width="100%" border="0"/></div> 
</div>
</body>
</html>

[shamahn]

Vindex10, Оригинальное решение но это кастыли. в ФФ - неисчезающая полоса прокрутки. В опера - вроде ничего. В ИЕ, вообще непонятный эффект. Если залить фон правого блока, то можно увидеть, что вертикальный его размер изменяется вместе с горизонтальным.

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

[Иван Шумов]

ха! движение против таблиц против! ))))

[Victor Ananiev]

Блин, чем вам не нравится, вот подрихтований код, уже писали, что бы убрать полосу прокрутки overflow:hidden. Как вы увидели что там изменяется не знаю, залил фон синим, и ничего. Мне кажется что все решимо.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css">
body
{
margin:0;
padding:0;
height:100%;
} 
#left, #right
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#left
{ 
float:left; 
color:orange;
overflow:hidden;
} 
#main
{ 
margin:0;
padding:0; 
position:absolute;
width:100%; 
overflow:hidden;
} 
#img
{ 
position:absolute; 
height:20px;
} 

#right
{
background-color:blue;
} 
</style>
</head>
<body> 
<div id="main"> 
<div id="left">О компании</div>
<div id="right"><img id="img" src="http://gkng.ru/h1.gif" width="100%" 

border="0"/></div> 
</div>
</body>
</html>

[Sotnikov]

http://sotnikovs.com/funny-funky-files/tyaga/

все.. мозг мой умер..

[Victor Ananiev]

Изза картинки-заборчика второй слой съезджает гораздо раньше. Хотя тоже выход, если сделать заборчик одним элементом-досточкой.

Мы все таки победили табличную верстку!!!!!!!!!!!

[shamahn]

Vindex10, он все равно в конечном перепрыгнет на следующую строку. А если у тебя ширина левого блока будет приблизительно равна ширине окна - это произойдет сразу! В ИЕ так и остался отступ между левым и правым блоком

Vindex10, мой заказчик сидит на ИЕ и эт гораздо больше части мира сидящей на ней . Я ему стану объяснять, что ИЕ, отстой! Давайте будем проверять бровзер клиента перед передачей страницы, и если это ИЕ - предупредим: не пугайтесь, у Вас ИЕ и изображение которое вы сейчас будите наблюдать немножко искажено, а так оно очень красивое

Если кто-нить считает, что он справился с заданием, - при поддержке большинства участников он получит заработанные "честно" 5 баксов, но если быть откровенным - меня не убедило...

[Victor Ananiev]

На вашем примере левый блок не настолько широк. Тем более вам никто не запрещает пользоваться таблицами, блочная верстка означает что Контент на странице рассортирован с помощью блоков, но никто не говорил что таблицами пользоваться нельзя. Советую вам почитать вот это.

[shamahn]

1) Vindex10, прочитай предыдущий пост, я кое-что подправил.

2) заголовок может быть очень длинным

3) я знаю что можно пользоваться таблицами. Меня интересовало лишь можно ли от них совсем отказаться

сейчас почитаю

[Victor Ananiev]

Я ему стану объяснять, что ИЕ, отстой! Давайте будем проверять бровзер клиента перед передачей страницы, и если это ИЕ - предупредим: не пугайтесь, у Вас ИЕ и изображение которое вы сейчас будите наблюдать немножко искажено, а так оно очень красивое

Улыбнуло))

А что не так в осле? При маленьком разрешении конечно перепрыгнет, но для мобилок html это жестоко, для мобилок сайты на WML. Это единственное устройство где может быть настолько маленький экран, и все же я не понимаю, чем вам не нравятся примеры.

[shamahn]

Чет сам не почитал, что написал :)

Думаю можно закрывать тему. Но я все еще жду Девятилап'а. Просто генератор идей мне кажется он что-нить придумает

[Victor Ananiev]

Да правда интересно.