lavr-ik

1. Обычно в СС для ИЕ я включаю и 7 версию (у них есть несколько схожих багов, hasLayout, например). 2. <center> - за это тебе на палец надо наступить. 3. Стили в html - у тебя же xhtml 1.0, хоть и transitional. Намеревался сделать подробный линч, давно уже не делал, но после <img alt="enteruptSlogan.png"> понял, что все слишком безнадежно. <div id="searchInputTL"><div id="searchInputTR"><div id="searchInputBL"><div id="searchInputBR"> меня убило окончательно. Советы: 1. Почитай про блочную модель построения html. Плюсы, минусы. Для чего вообще и почему используются блоки. 2. Почитай про DOCTYPE, зачем он нужен, какие виды бывают, для каких целей. 3. Уясни для себя всю мощь CSS (я, если честно, тоже не сразу смог осознать, насколько это мощный инструмент). Как только уяснишь, сразу поймешь, почему стили в html прописывать нельзя. 4. Каждый раз верстая, при создании новых классов, элементов, спрашивай себя: а. Смог бы я разобраться в своем коде, если бы не был его автором? б. Как может вести себя этот элемент в дальнейшем? Может ли у него изменяться контент, соседи? Прогнозируй и программируй дальнейшую жизнь верстки. в. Можно ли это сделать другим образом? Лучше, компактнее? Если не будешь постоянно спрашивать себя при работе, больших высот в верстке не добьешься. Harder, better, faster, stronger и все такое.

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

Моя верстка Из примечательного: логика галереи и слайдеров реализована на "чистом" jquery, без плагинов. На выходе имеем 4 Кб для всей страницы Сайт резиновый, конечно, валидный, кроссбраузерный (graceful degradation for ie6). Время работы: 3 дня на html+css+кроссбраузерность, 2 дня на Jquery. Кстати, верстка npcl.ru сейчас ужасна, конечно.

Должно получиться так, как на рисунке: .neighboor должен по высоте занимать собой все свободное место до #right. Сейчас же получается так, что т.к. .neighboor имеет абсолютное позиционирование, ему абсолютно безразлично, какой высоты #right - он его перекрывает либо находится под ним (в зависимости от z-index, разумеется). Необходимо добиться такого результата, чтобы .neighboor занимал собой все свободное пространство до #right по высоте, как на рисунке, вне зависимости от высоты #left, #right и самого .neighboor. Естественно, решение на Javascript элементарно, однако хотелось бы решения на чистом CSS.

<style> #content:after { // чтобы родительский блок принимал высоту наибтольшего находящегося в нем ребенка content: ""; display: block; clear: both; } #content { position: relative; // задаем относительное позиционирование, чтобы div.neighboor выравнивался относительного него } #left { float: left; width: 50%; height: 300px; // в этом блоке выводятся статьи, поэтому высота может быть разной } #right { float: right; width: 50%; } #right div.garbage { height: 100px; // здесь выводятся последние новости, поэтому высота тоже может быть разной } #right div.neighboor { position: absolute; bottom: 0; } </style> <div id="content"> <div id="left"> Some content here. </div> <div id="right"> <div class="garbage"> Some garbage. </div> <div class="neighboor"> Блок, который мне нужен. </div> </div> </div> Необходимо сделать так, чтобы div.neighboor выравнивался по нижней границе #left. Сейчас это происходит, однако я никак не могу придумать, как заставить этот блок занимать все свободное место до div.garbage по высоте. Т.к. верстка, естественно, резиновая, при большом разрешении и фиксированной высоте div.neighboor получается, что величина вертикального отступа div.neighboor от div.garbage очень велика - появляется пустое пространство - некрасиво и неэстетично. Хотелось бы решения на чистом CSS, без использования javascript (решения с его помощью не предлагать, уже есть Всем заранее спасибо за внимание.

Уважаемый RUSA, внимательнее прочитайте предыдущие комментарии в этом посте.

Странно, почему тогда мой ИЕ6 с DOCTYPE XHTML 1.0 Strict не центруется, если я убираю text-align? Windows XP Professional SP2 И да - при чем тут вообще quirks mode?

Verder +1. По поводу помощи - тоже.

Автор тоже ломал голову в поисках решения, к сожалению, нормального кроссбраузерного решения на чистом CSS, видимо, нет. Пришлось прописывать фиксированную ширину в CSS (на случай noscript) и на js подгонять для каждого блока размеры от изображения. Заказчику были оставлены комментарии, что эту роблему лучше обходить серверным решением Спасибо всем, особенно JustNewOne - про возможное, хотя и с костылями и не кроссбраузерное, решение с абсолютным позиционированием я даже как-то и не задумывался

Давай не будем офтопить. Есть условия задачи - и все. Жду комментариев по теме.

... Смотри ситуация: каталог товаров, товары добавляются через админпанель каждый день. Размеры изображений самые разные (естественно, что они заранее неизвестны). Серверное решение в жестком присваивании <div style="width: 100px"> тоже не принимается.

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

<div><img src="img.jpg" width="100" /><p>Какое-то количество текста, причем количество текста разное во всех блоках</p></div> <div><img src="img.jpg" width="150" /><p>В этом блоке может быть меньше текста</p></div> <div><img src="img.jpg" width="50" /><p>А в этом наоборот - может быть очень много, вплоть до нескольких предложений и словосочетаний.</p></div> Блоки обтекают друг друга слева ( float: left; ). Текст, находящийся в блоке, разумеется, идет в одну строку. Задача: сделать так, чтобы блок имел ширину, равную ширине находящегося в нем изображения для того, чтобы текст переносился на следующую строку. Условие: не использовать javascript, чистый CSS (на js решение элементарно). Также не использовать серверное решение жетского присваивания <div style="width: 100px"> Я сейчас копаю в сторону width: inherit.

Перечитайте еще раз, пожалуйста. Если никакого эффекта - поясню (чем меньше логический вес, тем больше приоритет): <h1>О нас</h1> - логический вес 1 <h2>Наша миссия</h2> - логический вес 2, т.к. относится к тексту "О нас" <h2>Персонал</h2> - логический вес 2, т.к. относится к тексту "О нас" <h3>Низший персонал</h3> - логический вес 3, т.к. относится к тексту "Персонал" <h3>Высший персонал</h3> - логический вес 3, т.к. относится к тексту "Персонал" <h1>О вас</h1> - логический вес 1, т.к. является началом нового параграфа, главы и т.д.

Не уверен, но мне кажется, подход использован одинаковый. Покопайтесь здесь

Ага. Во-первых, "такой код не сЕмантичен", разумеется. Во-вторых, прошу прощения с путаницей с использованием слова "вложенность", надо было взять его в кавычки. Разумеется, имеется в виду логическая вложенность, а не структурная, т.е.: <h1>О нас</h1> <h2>Наша миссия</h2> <h2>Персонал</h2> <h3>Низший персонал</h3> <h3>Высший персонал</h3> <h1>О вас</h1> И неверно использование разных тэгов для заголовков с одинаковым логическим весом: <h1>О нас</h1> <h2>О вас</h2> Равно как и использование заголовков второго уровня без "вложения" в заголовок первого. <h2>О нас</h2>

max-width прописали - молодец Ясна логика - "мониторы с разрешением выше 1920 редки, поэтому не ошибусь если сделаю 2000". Однако, я считаю (и это часто подтверждается практикой), что владельцы широких мониторов никогда не просматривают сайты на всю ширину (обычно размещают два-три окна). По крайней мере, я в своих проектах выставляю max-width 1350, потому что, имхо, при резине до 2000 дизайн неминумемо рассыпается. И да - прописывая максимальную иширину, желательно устанавливать какое-то фоновое изображение или заливку для body (белый цвет создает слишком резкий, эстетически неприятный переход). В вашем случае идеально было бы установить body фон в #E7EBE7. margin: 0px auto; Необязательно указывать величину при выставлении нулевого значения. Соблюдайте семантику заголовков. h2 может быть использован только "внутри" h1, как подзаголовок. Т.е. семантически верна конструкция <h1>О нас</h1><h2>Руководство</h2><h2>Персонал</h2><h3>Низший персонал</h3><h3>Высший персонал</h3>. Стили для ИЕ все-таки лучше выносить в отдельный файл - значительно облегчает дальнейшую поддержку проекта <div class="copirait">, <div class="nevs">, <div id="lupa"> Именуя элементы по-английски, будьте последовательны и, что более важно, грамотны <div id="cons">Круглосуточная консультация по телефону:<br/> Старайтесь любой текст оборачивать в семантически верный для него тэг. Спецификация XHTML 1.0 и выше не позволяет использование "голого" текста. ИМХО, более логичной была бы следующая разметка: <div id="cons"><p>Круглосуточная консультация по телефону:</p><span>(495) 123-45-67</span> И да - определяя стили для элементов через структуру документа, а не классы и идентификаторы, будьте очень осторожны, думайте о том, могут ли в перспективе в этом блоке быть размещены дополнительные элементы, которые получат то же оформление и т.д. Я тоже люблю определять стили таким образом

1. Кроссбраузерности нет (смотрите ИЕ6, FF 3.5.2). 2. Зря прижали футер к низу - при большом разрешении между футером и контентом вырастает уродливое пустое пятно. <div class="lamp"></div> <div class="lamp"></div> <div class="lamp"></div> Такую конструкцию лучше заменить на прямую вставку изображений в html. <div id="wrapper"> <div id="page_pos"> Непонятно, зачем вам два обрамляющих блока? Я все понимаю, центрирование и т.д., но это все легко осуществляется и в один блок. 5. У вас там что, отбивка текста по ширине? Уберите немедленно. <table class="table_list"> <tr class="tr_odd"> <td><h2>!Новая запись</h2> <div><p></p> <a href="?mode=news&c=view&rec_id=9">Подробнее</a></div> </td> </tr> </table> Что эта таблица выполняет? <h2>!Новая запись</h2> Согласно спецификации, тэг заголовков h нумеруется не по логике размерности, как бы это ни было очевидно, а по уровню вложенности. Т.е. h2 находится внутри h1. Т.е. семантически неверно использовать h2 без вложения в h1. Резюме: очень много пустых блоков - снижает интуитивную понятность верстки. Нет древовидной структуры кода - трудно отслеживать вложенность элементов (хотя это не критично, разумеется). Нет отдельных стилей для ИЕ - и проблемы сразу же становятся: верстка ползет в моем 6.0.2

Действительно, я адепт информационного дизайна. Возможно, именно для сайта LOVE Radio действительно требуется буря чувств и эмоций Что ж, тогда оценивайте верстку (все-таки из навыков верстки и дизайна для меня приоритетным является верстка).

Очень люблю LOVE Radio, поэтому не смог пройти мимо их ужасного сайта http://www.loveradio.ru Страдая альтруизмом, решил сделать редизайн - http://iknowyouwantme.ru/loveradio/index.html. Верстка моя, смотреть можно на любом браузере, при любом разрешении. При добавлении контента любой высоты, любого количества ничего не разъезжается. Есть одна незначительная ошибка в отображении одного элемента в одном браузере. Кто найдет какая - тому пирожок. i love validator

Дизайн - это представление информации, причем это представление слабо связано с графикой - вот мое определение термина "дизайн". Я ждал, что вы ответите примерно в такой же форме (без ненужных фраз о нравится\не нравится, примерах "хороших" работ и т.д.) "Мое мнение совпадает с общепринятым" - озвучьте тогда общепринятый вариант. Я просто хочу знать мотивы человека, когда он говорит: "У Яндекса плохой дизайн". Вы игнорируете то, что я говорю: не применяйте к такому крупному ресурсу, как Яндекс, обычные суждения ("полсекунды ни на что не повлияют"). И про трудоустройство - я читал, что вы написали "Я бы пошел". Именно поэтому - "Вас бы не взяли". Хотя, наверное, надо было сказать: "Вас бы не взяли, даже если бы вы захотели\попробовали".

Про "всегда внизу" - вам сюда А по поводу примера - я бы лучше сделал так - div#content весь имеет бэкграунд с повторением по x и y, и внутри него размещается дополнительный блок, скажем, div.innerContent, в свойствах у которого прописать внешние отступы на толщину рамки и задать фон, разумеется. Эффект получится тот же самый, зато с кроссбраузерностью проблем быть не должно. Просто мне кажется, так было бы более логично

О господи, я же задал, по-моему, вполне конкретный вопрос: что такое "дизайн"? Дайте свое определение этому термину. Не то, что вам нравится в дизайне, не примеры работ, которые вам понравились, а вообще - какова смысловая нагрузка слова "дизайн" для вас? По поводу верстки Яндекса: мне КАЖЕТСЯ, добавление переносов для "читабельности" кода (непонятно кому и зачем нужной) могло бы стоить такому ресурсу, как Яндекс, ощутимых затрат (это как увеличение времени загрузки google на 0.2 секунды уменьшило их прибыль от контекста на 20 или 30%, точно не помню). Конечно же, именно поэтому происходит минимальное количество обращений к серверу - всего одно и в теле полученного документа содержатся все стили и скрипты. Табличная верстка, я считаю, использована потому, что, если уж быть честным, господа верстальщики, таблицы - это самый простой и самый НАДЕЖНЫЙ в перспективе способ верстки. Опять же, такому ресурсу, как Яндекс, я думаю, положить на семантику Чтобы не холиварить, я замечу, что я совсем не сторонник табличной верстки. Однако ошибка в том, что к главной странице Яндекса вы применяете такой же подход, как к обычному сайту в плане дизайна, верстки и т.д. В первую очередь надо понимать, что это - абсолютно другое. Если вы не понимаете этих вещей, не надейтесь, что вас взяли бы в Яндекс. P.S.: У меня наболело про Яндекс просто, почти все знакомые тоже "ну че за верстка, ну че за дизайн".

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

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