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

shamahn · June 9, 2008

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

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

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

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

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

shamahn · June 11, 2008

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

На счет обиделся - нет. Просто потерян интерес к теме, а Вы его намеренно раздуваете, чем вызываете некоторое раздражение. На мой взгляд это юношеский максимализм. Годикам к 18ти пройдет.

Victor Ananiev · June 11, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню</title>
<style type="text/css">
#menu
{
width:218px;
font-family: "Arial Narrow", Arial;
} 
#top
{
width:100%;
background-image:url("http://www.tsplast.ru/images/bltop.gif");
height:29px;
color:white;
font-weight:600;
} 
.top_label
{
display:block;
margin-left:27px;
}
#butts
{
background-image:url("http://www.tsplast.ru/images/blbg.gif");
}
.button
{ 
width:195px;
color:white;
font-weight:800;
height:13px; 
margin-left:15px;
display:block; 
cursor:pointer;
letter-spacing:1px;
}
.button:hover
{
background-color:#044682;
}
#bot
{ 
background-image:url("http://www.tsplast.ru/images/blbot.gif");
height:21px;
width:218px;
}
</style>
</head>
<body>
<div id="menu">
 <div id="top"><div class="top_label">Новости</div></div>
 <div id="butts">
 <div class="button">Первый посетитель</div>
 <div class="button">Открытие сайта</div>
 </div>
 <div id="bot"> </div>
</div>
</body>
</html>

Ну вот))

З.Ы. Это не максимализм, а стремление научится большему и попрактиковаться на задачах.

ZoNT · June 11, 2008

в фф бэк подсвечивается выше чем надо...

Victor Ananiev · June 11, 2008

Не знаю, я не вижу, разве что есть проблемка с вертикальным выравниванием. Но это не проблема, ее можно исправить уменьшив строки до нужного размера или добавив line-height. Пресмотрись к картинке, может это кусок колоны ты имел ввиду?

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

shamahn · June 11, 2008

не пойму что ты делаешь.. Зачем это? да, молодец. Ты смог это сверстать. В конечном итоге можно было просто картинку прикрутить.

Задача: 2 БЛОКА! ЛЕВЫЙ ПО ШИРИНЕ СОДЕРЖИМОГО, ПРАВЫЙ ДО КОНЦА ОКНА!

аааа... я щас плакать буду.. если я тебе дам 5 баксов ты от меня отстанешь?

Victor Ananiev · June 11, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню</title>
<style type="text/css">
#menu
{
width:218px;
font-family: "Arial Narrow", Arial;
} 
#top
{
width:100%;
background-image:url("http://www.tsplast.ru/images/bltop.gif");
height:29px;
color:white;
font-weight:600;
} 
.top_label
{
display:block;
margin-left:27px;
}
#butts
{
background-image:url("http://www.tsplast.ru/images/blbg.gif");
}
.button
{ 
width:195px;
color:white;
font-weight:800;
margin-left:15px;
display:block; 
cursor:pointer;
}
.button:hover
{
background-color:#044682;
}
#bot
{ 
background-image:url("http://www.tsplast.ru/images/blbot.gif");
height:21px;
width:218px;
}
</style>
</head>
<body>
<div id="menu">
 <div id="top"><div class="top_label">Новости</div></div>
 <div id="butts">
 <div class="button">Первый посетитель</div>
 <div class="button">Открытие сайта</div>
 </div>
 <div id="bot"> </div>
</div>
</body>
</html>

Вот решение, в осле не работает ховер, а мы договорились без скриптов, так что на это внимания не обращаем.

shamahn · June 11, 2008

все. отписываюсь. Вообще ухожу с форума 0_0

Victor Ananiev · June 11, 2008

Нет, пятью баксами не откупишься))) А на самом деле не ради денег то делаю... Самому интересно, а по поводу колонок, признаю, не знаю решения. Во всем виноваты отступы в осле и бек для слоев((((((((( Но все остальное то решил)

P.S. Зачем это делаю написано в пост-скриптуме позапрошлого сообщения))

Fu-tai · June 11, 2008

Чем больше я читаю этот бред тем больше у меня появляется желание отправить всех вас учить мат.часть!

То shamahn и Vladiger

Задача была изначально поставлена некорректно. Ибо вы абсолютно не понимаете что есть симантика кода и каковы принципы блочной верстки!!! Учитесь читать и начинайте штудировать литературу по этой теме.

То Vindex10

А вам товарищь я бы рекомендовал еще раз проштудировать тоже самое и внимательно читать то что пишут!!!

То Девятилап

Стыдно товарисчь стыдно, вот так вот вестись на провокации незведающих. Повнимательнее надо быть!!!

Кароче ребят читайте побольше, думайте еще больше, делайте меньше но качественно.

А теперь по поводу вашей задачи.

Vindex10, коментарии были оставлены. Последнее решение вполне приемлемо. за исключением того что в ИЕ между левым и правым блоками есть разрыв, и при уменьшении ширины окна до ширины левого блока, правый блок прыгает на следующую строчку. Вот, собственно и все.
Sotnikov, мне не нужны онлайн уроки. Мне необходимо быть уверенным, что есть моменты, которые и не стоит пытаться реализовывать блоками, что бы не говорили ярые поклонники этого метода.
Вот он заголовок в нормальном виде:
http://gkng.ru/h1.gif

Как мы видим на рисунке изображен заголовок чего-то там. Повторюсь именно заголовок, даже сам автор уважаемый shamahn, обозначил его как заголовок первого уровня. А значит задача с блоками был поставлена некоректно, ибо заголовок это другой, кстати по своей сути блочный, элемент страницы. Так какого же спрашивается рожна этот заголовок должен быть сверстан двумя блоками???!!!

Да все просто господа. потому что автор темы недопонял в чем соль блочной верстки и видно незнает что такое симантичный код!!! Отсюда и некорректная постановка задачи, а соответственно если вопрос поставлен некорректно то и ответ на него будет некорректный.

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

Ох и злой я седня!!!

Извиняюсь если кого-то обидел, не хотел!

Вот так вот просто в пару строчек решается эта до безобразия простая задача, которую автор сам себе усложнил и другим мозг выковырял!!!

http://xvoct.com/mut.htm

Заметь семантично и в тоже время кросбраузерно!!!

shamahn · June 11, 2008

Fu-tai, не злой ты, а тупой. Не чего меня никуда посылать читать ересь всякую. Изначально уважаемым должно было быть понятно, если бы вы читали хотя бы свои же (на этом сайте описанные статьи) по блочной верстке, то поняли бы, что сделать так чтобы правый блок не слезал под левый можно только указав левый отступ по ширине левого блока. А так как его ширина не известна (подстраивается под ширину контента) - не реализуемо! Но мне было интересно на сколько это может затянуться. И была некоторая неуверенность (может я ошибаюсь).

Про заголовок было сказано гораздо позже, а изначально интересовала МОДЕЛЬ!!!! Читать умеешь?? МОДЕЛЬ!!! Как ее можно (если можно ваабще) реализовать. Верстать блоками начал 2 дня назад. Но уже в отличии от Вас уважаемый отличить костыли могу. Сверстанный свой пример с белым цветом фона можете засунуть в одно местно... думаю почему Вы не спросите, ибо умный так как много читаете!

ЗЫ: если кого обидел - извиняюсь. Я не просил участвовать в дискуссии того кто не желал бы сам. А мозго*** не позволю себя называть...

Vladiger · June 12, 2008

Fu-tai - Зачем людей обижаешь?

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

Задача озвученная в сообщении #1 проста и понятна.

Реализуема она на блоках? Будьте добры представьте решение и получите свои 10 баксов.

Не реализуема? Тогда зачем это объяснять людям, которые итак в этом уверены (в частности я и shamahn).

По вашему примеру http://xvoct.com/mut.htm уменьшите окно браузера до того момента, кода ваши блоки залезут один под другой. Думаю это очень эффектное решение задачи.

Почему такие жесткие требования в поставленной задаче? Я могу объяснить:

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

Ну если до сих пор не удалось решить такую простую задачу, стоит ли думать о более сложных?

На самом начальном этапе, создав всего только 2 колонки на блоках, мы уже знаем: - Возможно что правый блок вывалится вниз под левый. То есть мы уже знаем, что наш макет не стабилен. Остается уповать на то, что пользователь не будет сильно сворачивать окно браузера или контент не будет превышать ширину страницы. И все это на 1-ом этапе верстки.

И кстати... Макет представленный мной в табличном виде, вместе с CSS гораздо меньше чем на блоках - а это размер HTML страницы и соответственно скорость ее загрузки клиенту.

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

Sotnikov · June 12, 2008

Fu-tai +

shamahn · June 12, 2008

Vladiger, спасибо за поддержку.

Такое часто бывает когда люди не умеют признать, что им что-то не под силу

Fu-tai · June 12, 2008

To shamahn and Vladiger

:) :( :) :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:

Больше сказать нечего. Может когда вырастите из своих штанишек поймете. А сейчас сказать больше нечего, кроме как учите мат. часть!

То Vladiger

Дружище там вообще нету блоков. :lol:

То shamahn

Да нет, почему же. Я тупой яки пробка :lol: Поэтому давай уж объясни почему мой вариант не решение твоей задачи? Которую ты не смог сформулировать правильно, уж извини, но это так! Ты просто за два дня так и не понял что блочная верстка отталкивается от контента, а не от твоего незнания. И боюсь если ты этого не поймешь, то вымрешь аки динозавр в качестве веб мастера. Подозреваю что в этих трех строчках кода, ты уже открыл для себя целую вселенную которую непотрудился понять, поэтому и столько желчи из тебя и полилось!

Поясняю для упертых школьников, любящих ударятся в крайности и не прислушивающимся к взрослым:

У тебя на рисунке изображен заголовок, который имеет дурацкую линию справа. И ты непонимая что, это заголовок, и что заголовком можно управлять , и что он сам является блочным хоть и другой породы чем div, ты решил сверстать его блоками, но так как недодумался запихнуть один блок в другой, решил делать из них погремушку из рядом стоящих блоков. ибо незнал что так делают только люди ухватившие вершки и забывшие про корешки. Но сути это не поменяло, ты изначально пошел не по тому пути. Соответственно задача была некоректна, а значит и решения она не имеет.

ЗЫ: Кстати ребят вам для справки, минимальное разрешение под которое верстают это 800х600. Меньше это уже прерогатива смартфотоф и наладонников, а значит и совсем другой подход к верстке.

Vladiger · June 12, 2008

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

Вот с "мат частью" у вас уважаемый, как раз все в порядке, жалко что конкретики ни капли...

Столько флуда, мамачка-мая, а где код с решением задачи сообщения #1?

PS Я уже предполагаю ответную реакцию. Это очередная лекция, о правилах верстки и Юрском периоде, в котором можете оказаться сами.

Не трудитесь Fu-tai, ваши лекции не интересны только потому, что они направлены не на решение проблемы, а просто на ее локализацию.

shamahn · June 12, 2008

задача решена сто лет назад. И работает: http://tsplast.ru. Мало того: валидна, без лишнего кода, без белых фонов (как в вашем решенииhttp://xvoct.com/mut.htm безобразно, по вашим словам, простой задачи, решенной не менее безобразно), без перепрыгивающих на следующу строчку блоков и пр.пр.пр. Я не отвергаю блочную верстку, и прекрасно понимаю, что тип элемента зависит только от того какой он по умолчанию и каким мы его сделали в последсвтвии. Вы не пытались даже внимнуть в задачу и понять, что задачи нет!!! Конкретной задачи нет! есть модель!!! Выделю жирным НЕТ ЗАДАЧИ И ЗАГОЛОВКА, есть просто модель которую нужно было попровать реализовать блоками. Может на китайском еще написать, что именно мне надо было.

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

shamahn · June 12, 2008

Ну, во первых, здравствуйте!
Начал я совсем недавно пытаться верстать дивами. Не скажу, что получаю удовольствие, что были моменты, которых я бы не сделал таблицами, но тем не менее стремлюсь к прогрессивному. А теперь, уважаемые знатоки, вопрос:
2столбцовый макет. Ширина левого меняется произвольно (в зависимости от содержимого). Правый - от конца левого и до конца экрана.
С помощью таблиц - решается очень прозрачно. Хотелось бы увидеть, что существует такое же прозрачное решение и для дивов
Спасибо за внимание

Вот. Цитата.... Где тут заголовок? где неверно сформулированное задание?

Azadi · June 12, 2008

Мне кажется, что решить данную задачу кроссбраузерно и без заморочек сейчас невозможно. Если не брать в расчет IE6, тогда все было бы достаточно просто: оперируем display:table, display:table-cell; и т.д. В ослике же поддержка данных свойств отсутствует.

Ну а блочная верстка действительно не обладает свойствами для воссоздания поведения табличного макета, о котором написал автор топика. Таблица вообще уникальный элемент, так как в ней реализовано взаимодействие целой группы элементов (table-cell).

Элементы с display:block так не могут. Хотя... если писать костыли специльно для IE6, то, возможно, что извращенный вариант и будет найден. Но здесь как раз такой случай, когда "игра не стоит свеч, а результат труда".

shamahn · June 12, 2008

Azadi, где Вы были раньше

Azadi · June 13, 2008

Azadi, где Вы были раньше

А вдруг кто-нибудь взял бы да и сверстал?

Victor Ananiev · June 13, 2008

Да нет, почему же. Я тупой яки пробка Поэтому давай уж объясни почему мой вариант не решение твоей задачи? Которую ты не смог сформулировать правильно, уж извини, но это так! Ты просто за два дня так и не понял что блочная верстка отталкивается от контента, а не от твоего незнания. И боюсь если ты этого не поймешь, то вымрешь аки динозавр в качестве веб мастера. Подозреваю что в этих трех строчках кода, ты уже открыл для себя целую вселенную которую непотрудился понять, поэтому и столько желчи из тебя и полилось!

Поясняю для упертых школьников, любящих ударятся в крайности и не прислушивающимся к взрослым:
У тебя на рисунке изображен заголовок, который имеет дурацкую линию справа. И ты непонимая что, это заголовок, и что заголовком можно управлять , и что он сам является блочным хоть и другой породы чем div, ты решил сверстать его блоками, но так как недодумался запихнуть один блок в другой, решил делать из них погремушку из рядом стоящих блоков. ибо незнал что так делают только люди ухватившие вершки и забывшие про корешки. Но сути это не поменяло, ты изначально пошел не по тому пути. Соответственно задача была некоректна, а значит и решения она не имеет.
ЗЫ: Кстати ребят вам для справки, минимальное разрешение под которое верстают это 800х600. Меньше это уже прерогатива смартфотоф и наладонников, а значит и совсем другой подход к верстке.

%201_Smile.gif

shamahn · June 13, 2008

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

А с разных страниц можешь?

Fu-tai · June 13, 2008

Вот за это http://tsplast.ru тебе не только руки надо отрубить, но еще и прибить остатки гвоздями к полу!!!

Мне ооочень жаль твоих заказчиков.

Кстати ты уже вымер, просто ты еще этого не заметил!

Уж извини что так варварски, но как ты сам сказал я очень люблю читать лекции.

Это наверное потому что раз в месяц ко мне приходят вот такие вот горе верстальщики и начинают с пеной у рта доказывать что они уже 12 лет (2008-12=1996 год. Че правда прям вот с этого времени и верстаешь? ну ну! "1995?2008 Студия Артемия Лебедева") верстают и вааабще "отцы" так сказать. Вот только эти "отцы" сдуваются на вторую неделю и начинают потихоньку заползать под стол, потому что создать качественный продукт немогут. И даже не потому что тупые, а потому что привыкли делать непотребность и получать свои 50 буказойдов на фриланс.ру!

Въобщем, то мне плевать и на твою верстку и на твои личные проблемы, да и на все остальное тоже плевать. Просто вот ты добавишь еще пару постов ниочем. И это будет третий топик на этом форме с такой длиной обсуждения ))

А мат часть все-таки учи. Это тебе же на пользу будет!

ARA · June 14, 2008

Ну, во первых, здравствуйте!
Начал я совсем недавно пытаться верстать дивами. Не скажу, что получаю удовольствие, что были моменты, которых я бы не сделал таблицами, но тем не менее стремлюсь к прогрессивному. А теперь, уважаемые знатоки, вопрос:
2столбцовый макет. Ширина левого меняется произвольно (в зависимости от содержимого). Правый - от конца левого и до конца экрана.
С помощью таблиц - решается очень прозрачно. Хотелось бы увидеть, что существует такое же прозрачное решение и для дивов
Спасибо за внимание

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title>Test</title>
 <style type="text/css"><!--
 html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 background: #fff;
 font-family: sans-serif;}

 #carrier {
 width: auto;
 height: auto;
 margin: 0px;
 padding: 0px;
 border: none;
 background: #ff1;}

 #left {
 width: auto;
 height: 100px;;
 margin: 0px;
 padding: 0px;
 border: none;
 background: #ff1;
 float: left;}

 #right {
 width: auto;
 height: 100px;
 margin: 0px;
 padding: 0px;
 border: none;
 background: #ff9;}

 // --></style>
</head>

<body>

<div id="carrier">
<div id="left">left left left left left left left left left</div>
<div id="right">rigth</div>
</div>

</body>
</html>

проверялся в осле 6-ом. опере и лисе, вот скрин

теперь вопрос:

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

Вот тут этот пример решает эту задачу! И тут не нужно себе придумывать геморрой! Нужно принять блоки такими, какие они есть, зачем из блоков пытаться реализовывать то, что когда-то делалось только таблицами, для чего тогда появилось это направление? Что бы прийти к правильной систематичной верстке, ну и скользнул блок вниз, умереть теперь что-ли? Для этого наверно и появилось блочная верстка, иначе зачем она? У не? прекрасное поведение в разных браузерах, приятный код.

тут Fu-tai прав!

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

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

Я по себе сужу, то что на словах бесполезно объяснять этот факт, тут по щупать надо!

Универсальное решение бывает очень редко..

Victor Ananiev · June 14, 2008

2 shamahn

У кого то тут нервы здают...

2 Fu-tai, ARA

C вами полностью согласен.

З.Ы. Мне кажется пора закрывать тему, а то тут спор перешел в драку.

Sign In

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

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

141 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information