Sign in to follow this  
shamahn

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

Recommended Posts

Это на таблицах? Мда, но на блоках такое можно сделать вроде бы, если пару часиков подождете(занят немного), то сделаю такое на блоках))

P.S. простите если чем то обидел.

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

<!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>

Ну вот))

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

<!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>

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

То shamahn и Vladiger

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

То Vindex10

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

То Девятилап

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

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

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

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

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

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

http://gkng.ru/h1.gif

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

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

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

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

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

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

http://xvoct.com/mut.htm

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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. Меньше это уже прерогатива смартфотоф и наладонников, а значит и совсем другой подход к верстке.

Share this post


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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
Ну, во первых, здравствуйте! :)

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


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

:)

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

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

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

%201_Smile.gif

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites
Ну, во первых, здравствуйте! :(

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

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 картинку сайта, и тогда станет все на свои места, и лица участвующие в этой тему уже иначе посмотрят на этот вопрос!

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors