Comments 105
В закладки однозначно
на мониторе от 1600px - левые уголки отваливаются. Нужно либо ограничение по ширине ставить, либо что-то переделывать.
Угу, та же ситуация :)
Просто ширина картинки - 1600px. Решил поставить max-width:1580px; и не заморачиваться с этим :)
нехорошо. мониторы 1600 довольо распространены..
а так - отличная верстка!
а так - отличная верстка!
1600 я редко сейчас вижу. в основном 1680х1050 берут. Фильмы на них удобнее смотреть )
собственно, один очень известный в области юзабилити товарищ недавно писал про большие мониторы (активно их всем советовал) и в его статье раза два точно упоминалось, что на больших мониторах окно браузера довольно редко развернуто во весь экран.
в это есть, как минимум, доля истины: лично я, работая в разрешении 1280* крайне редко вижу всю ширину в 1280 пикс - 99% времени в моем FF слева открыта панель закладок (или другие информационные панели).
при верстке макетов я, чаще всего (читай - там, где это уместно), фиксирую ширину макета так, чтоб комфортно было просматривать сайт с разрешением 1024*.
да и пока жив шестой ишак с его отношением к max-width...
возможно, ограничивать горизонтальную картинку нужно 2000-ми пикс...
в это есть, как минимум, доля истины: лично я, работая в разрешении 1280* крайне редко вижу всю ширину в 1280 пикс - 99% времени в моем FF слева открыта панель закладок (или другие информационные панели).
при верстке макетов я, чаще всего (читай - там, где это уместно), фиксирую ширину макета так, чтоб комфортно было просматривать сайт с разрешением 1024*.
да и пока жив шестой ишак с его отношением к max-width...
возможно, ограничивать горизонтальную картинку нужно 2000-ми пикс...
распространены, но веб смотреть неудобно. Проще увеличение делать сразу.
Блин, о чем вы говорите? Хорошая верстка должна удовлетворять ЛЮБЫМ разрешениям! Разве не так?
нет конечно. может его ещё и на плазме смотреть будут, теперь что, дрочиться с размерами под кинотеатры?
стандартное расширение для интернета - 1024*768, постепенно оно растёт, хоть и крайне медленно
стандартное расширение для интернета - 1024*768, постепенно оно растёт, хоть и крайне медленно
Конечно же! Хорошая книга должна удовлетворять любому зрению читателя, даже если у него -14!
Хорошая вёрстка должна быть хороша композиционно (соответствие размеров и стилей шрифтов), а так же видна на среднем мониторе. Это значит что мне надо равняться не на свой ламповый особо яркий из линейки про и разрешение 1600х1200, а на офисное плоское [фекалии] со стандартными 1024х768 и слабой цветопередачей, которая де-факто чуть хуже 16 бит Включаем зум и кайфуем (благо шрифты изначально векторные).
Хорошая вёрстка должна быть хороша композиционно (соответствие размеров и стилей шрифтов), а так же видна на среднем мониторе. Это значит что мне надо равняться не на свой ламповый особо яркий из линейки про и разрешение 1600х1200, а на офисное плоское [фекалии] со стандартными 1024х768 и слабой цветопередачей, которая де-факто чуть хуже 16 бит Включаем зум и кайфуем (благо шрифты изначально векторные).
И ещё: даже если экран туеву хучу пикселей в ширину, это не значит, что абзац тоже должен. Абзац должне быть удобочитаем (5-8 слов)
>> макет не разваливается при изменении размеров страницы и масштабировании шрифтов;
в Опере 9.1 при увеличении масштаба (минус на клавиатуре) верхняя и нижняя часть внешней рамки сьезжает ближе к середине
в Опере 9.1 при увеличении масштаба (минус на клавиатуре) верхняя и нижняя часть внешней рамки сьезжает ближе к середине
Мог бы поставить плюс — поставил бы!
Спасибо за статью. Со всеми пунктами согласен, кроме
>содержимое обрамляется красивой рамкой со скругленными углами;
По моему, это уже на усмотрение дизайнера, не думаю, что стоить делать это обязательным условием хорошего шаблона.
>содержимое обрамляется красивой рамкой со скругленными углами;
По моему, это уже на усмотрение дизайнера, не думаю, что стоить делать это обязательным условием хорошего шаблона.
в опере 9.51 не растягивается на весь экран
итак, пошагово:
Doctype XHTML 1.0 Strict
а нахуя (простите) козе баян? что такого в этом strict? сам всегда тоже придерживался этого типа, но последнее время документ верстаю или в XHTML 1.0 Transitional или в HTML Strict. Почему? Вот вам пара (думаю их больше) причин: frame и target
Ах да? фреймы конечно зло, как и таргет, Тока вот баннерный код размещают в iframe. Можно конечно сделать через object, но я хотел бы посмотреть на такое решение, где в Internet Explorerне будет отображаться полоска скроллбара. Про target в ссылках и рекомендации использовать для этой цели скрипты (!) я даже упоминать не хочу...
дальше-больше...
Doctype XHTML 1.0 Strict
а нахуя (простите) козе баян? что такого в этом strict? сам всегда тоже придерживался этого типа, но последнее время документ верстаю или в XHTML 1.0 Transitional или в HTML Strict. Почему? Вот вам пара (думаю их больше) причин: frame и target
Ах да? фреймы конечно зло, как и таргет, Тока вот баннерный код размещают в iframe. Можно конечно сделать через object, но я хотел бы посмотреть на такое решение, где в Internet Explorerне будет отображаться полоска скроллбара. Про target в ссылках и рекомендации использовать для этой цели скрипты (!) я даже упоминать не хочу...
дальше-больше...
UFO just landed and posted this here
+1
Согласен
Правильно, незачем использовать XHTML 1.0. Используйте XHTML 1.1 — он включает mod Target.
UFO just landed and posted this here
В той ссылке, что я предоставил.
UFO just landed and posted this here
Я сам теряюсь в догадках.
UFO just landed and posted this here
История тёмная, да.
Кстати, в этом DTD указана версия 1.1 от 16 июля 2008, а в этом — 4.0 от 2 февраля 2001. Забавно, не правда ли?
Но идентификаторы в обоих указывают, что основной адрес — http://www.w3.org/MarkUp/DTD/xhtml-targe…
В DTD для XHTML 1.1 написано:
Кстати, в этом DTD указана версия 1.1 от 16 июля 2008, а в этом — 4.0 от 2 февраля 2001. Забавно, не правда ли?
Но идентификаторы в обоих указывают, что основной адрес — http://www.w3.org/MarkUp/DTD/xhtml-targe…
В DTD для XHTML 1.1 написано:
<!ENTITY % xhtml-target.module "INCLUDE" >. Если это не означает подключение модуля target, то даже и не знаю.
–1, Transitional — это «извините, но не могу в Strict, ибо б*дские баннеры», а тут стерильный пример, так почему не Strict? Мне кажется, вы слишком нервно отреагировали.
Мне мой макет нравится больше тем, что там нет отдельного стиля для IE)
заявленный доктайп "Doctype XHTML 1.0 Strict" существенно ограничивает заявленную кроссбраузерность. MSIE не знает что такое XHTML
на первый взгляд весьма респектно :)
посмотрел по внимательнее, все смотрится отлично, за исключением пустых дивов, но без них все разваливается..
спасибо за проделанную работу, особенно порадовала полукруглая рамочка
спасибо за проделанную работу, особенно порадовала полукруглая рамочка
как можно было бы оптимизировать данный макет?
факинь парсер съел мой коммент((
- уже есть другие способы, намного проще моего и удовлетворяют всем описанным выше требованиям.
здесь всё очень плохо и не только из-за несемантических элементов, а в самой основе плохо: логически ненужные padding для контэйнера, полётыво сне и наяву отрицательным margin и position-relative...
проблема в том что вы изначально взяли очень плохой пример за основу.
сверстайте всё сами, с нуля, тут всё очень просто и у вас в принципе всё есть:
как можно было бы оптимизировать данный макет?
- уже есть другие способы, намного проще моего и удовлетворяют всем описанным выше требованиям.
здесь всё очень плохо и не только из-за несемантических элементов, а в самой основе плохо: логически ненужные padding для контэйнера, полёты
проблема в том что вы изначально взяли очень плохой пример за основу.
сверстайте всё сами, с нуля, тут всё очень просто и у вас в принципе всё есть:
- overflow:hidden и hasLayout для контэйнера
- float: left и * html display: inline для блоков
- отрицательный margin для перемещения столбцов
- :after/before и insertAdjacentHTML для закруглений
UFO just landed and posted this here
Спасибо за ценный комментарий. В свою защиту могу сказать только то, что я понамешал здесь очень много всего и сразу. Обошелся 3 картинками вместо 4 или 6 - это дополнительные блоки плюс проблемы, возникающие с их позиционированием. Еще я очень хотел, чтобы ,было как можно меньше скриптов. Вы все верно говорите, я согласен. Можно и нужно в реальной работе упрощать и делать так, как будет лучше (быстрее, надежнее) для данного проекта. За упоминание insertAdjacentHTML большое спасибо, не знал.
Посмотрите еще мой вариант (сайт не принадлежит мне, только этот файл): http://nick123.ru/test/uuu.html
Преимущество этого макета в минимальном количестве блоков.
Преимущество этого макета в минимальном количестве блоков.
спасибо! очень полезный шаблон для обучения!!!!!!
Ну а на счет косячков ничего идеального не бывает.
Проэкты со сложным дизайном чаще всего имеют отдельный код для разных браузеров, я так думаю))
Ну а на счет косячков ничего идеального не бывает.
Проэкты со сложным дизайном чаще всего имеют отдельный код для разных браузеров, я так думаю))
Не надо думать, надо читать книжки и знать точно ;)
Думать надо всегда.
Спасибо за совет)) Не хочу что бы это звучало как оправдание, но я вообще-то по образованию юрист, а вебом занялся без 5 дней - неделя... Так что не хочу отказываться от мысли на счет того, что это "очень полезный шаблон для обучения". Код откомментирован и отформатирован, в общем будет удобно разобрать как он работает, хотя он и не идеален.. А на счет книжек я с радостью выслушаю ваши предложения.
я продолжу. про доктайп написал, теперь буквально два слова про
макет не разваливается при изменении размеров страницы и масштабировании шрифтов
с одной оговоркой, если браузер не Mozilla Firefox 2
тут как не крути, при таком методе масштабирования, вёрстка разлезется по-любому
макет не разваливается при изменении размеров страницы и масштабировании шрифтов
с одной оговоркой, если браузер не Mozilla Firefox 2
тут как не крути, при таком методе масштабирования, вёрстка разлезется по-любому
UFO just landed and posted this here
Вы выбрали плохой метод создания колонок одинаковой высоты. Существует вариант в котором этот баг не проявляется, но он слишком перегружен лишними элементами. На данный момент, самый хороший метод это сделать faux columns
Блин, ссылки нельзя ставить)
плохой: http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems
вариант: http://www.satzansatz.de/cssd/companions/percpercpercfsa.html
faux columns: http://www.communitymx.com/content/article.cfm?cid=afc58
плохой: http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems
вариант: http://www.satzansatz.de/cssd/companions/percpercpercfsa.html
faux columns: http://www.communitymx.com/content/article.cfm?cid=afc58
Очень интересно. Надо будет на досуге поразбираться с "плохими" вариантами. Хороший вариант всем хорош, но некрасив с отключенными картинками. А я решил, что для меня в данном случае это важно :-)
В работе я, как правило, всегда пользуюсь faux columns
В работе я, как правило, всегда пользуюсь faux columns
вариант: http://www.satzansatz.de/cssd/companions/percpercpercfsa.html в опере, так же лагает как и все макеты здесь представленные — при масштабировании окна браузера, футер прижимается к верху.
Только мне кажется, что javascript для min-width это плохо?
В FF 2.0.0.12 косяк, содержимое контейнера прячется за боковыми панелями (хотя firebug обрамляет див с контентом в нужном месте %\ ).
И про какую "красивую рамку со скругленными углами" вы говорите?!
И про какую "красивую рамку со скругленными углами" вы говорите?!
На счёт последнего пункта. Было бы здорово, если бы было:
…и ничего лишнего. Блин, о чём я говорю… Забудьте. :)
<div>Header</div>
<div>Left</div>
<div>Main</div>
<div>Right</div>
<div>Footer</div>…и ничего лишнего. Блин, о чём я говорю… Забудьте. :)
Спасибо конечно за статью, но на настоящий момент хотелось бы больше информации по верстке с помощью CSS Tables (IE8 будет поддерживать) & display: inline-block (поддерживает Firefox 3).
а если добавит вместо пустых div, следуйшее:
<div class="bi">
<div class="bt"><div></div></div>
=>
<div class="bi">
<div class="bt clear"></div>
.clear:after {
height: 0;
content: ".";
clear: both;
visibility: hidden;
display: block;
}
.clear { display: block; }
<div class="bi">
<div class="bt"><div></div></div>
=>
<div class="bi">
<div class="bt clear"></div>
.clear:after {
height: 0;
content: ".";
clear: both;
visibility: hidden;
display: block;
}
.clear { display: block; }
Смысл этих блоков в том, что они содержат бэкграундом картинку скругленного угла, а не в том, что они нужны для очистки. Про самоочистку float я в курсе. Кстати, предпочтительнее в таких случаях использовать overflow:hidden;
Полезная статья по теме.
Полезная статья по теме.
а по-поводу приведённого примера создания гибких рамок хочу сказать вот что: это конечно всё интересно, но уж слишком элементарно. Давайте усложним задачу, а? Давайте представим, что нужно сверстать блок с полупрозрачной тенью (png), со скруглёнными углами (png), без фиксированной ширины (определяемой содержимым), да ещё и абсолютно позиционированный. Вот это действительно задачка над которой можно cломать голову. Если у вас есть готовое решение или видели нечто такое работаюott в Internet Explorer 6, выложите пожалуйста ссылку.
Идеального варианта я не встречал. Могу предложить вылизанный и отредактированный мной вариант от студии Лебедева: http://gruzzilkin.110mb.com/artlebedev-p….
Оригинал
Оригинал
UFO just landed and posted this here
http://gruzzilkin.110mb.com/png-corners - посмотрите. Метод пока не отлажен и не оптимизирован, но думаю, он получше и попроще варианта студии Лебедева.
В Win Safari ни фига не работает - виден только хидер и контент.
Хрен с ними со скругленными краями, от них никакого толку, только мусор один графический.
Тут хоть кто-нибудь знает как сделать что бы этот макет масштабировался нормально в Опере?
Тут хоть кто-нибудь знает как сделать что бы этот макет масштабировался нормально в Опере?
нашёл серьёзный баг при тестировании «идеального» макета
Если в кололнку (допустим среднюю) поместить абсолютно позиционированный блок (позиционируем его относительно дополнительного блока контейнера с position:relative) то этот блок некорректно отображается. его содержимое просто "обрезается", а не растягивает колонку по вертикали
Если в кололнку (допустим среднюю) поместить абсолютно позиционированный блок (позиционируем его относительно дополнительного блока контейнера с position:relative) то этот блок некорректно отображается. его содержимое просто "обрезается", а не растягивает колонку по вертикали
Извините за то что позаимствовал вашу верстку (хотите копирайт поставлю), но я программист, не верстальщик. Заодно потестировал. Изменений в верстке минимум, но (извините если вина моя) заметил пару багов.
1. http://rsmfans.ru/index.php?module=Blogs…
Браузер проматывает страницу вниз до комментов, но все что выше скрывается где-то за границами браузера. Firefox 3
2. В IE 6 футер закрывает половину страницы вместе с текстом и столбцами
1. http://rsmfans.ru/index.php?module=Blogs…
Браузер проматывает страницу вниз до комментов, но все что выше скрывается где-то за границами браузера. Firefox 3
2. В IE 6 футер закрывает половину страницы вместе с текстом и столбцами
скриншотs:
1.
2.
1.
2.
Для вашего макета я бы посоветовал пофиксить высоту подвала в
И еще. Зря вы взяли шаблон целиком и впихнули его к себе на сайт. Многие вещи, используемые в моем шаблоне, на реальном портале не нужны. Это
padding-bottom:1000em;
margin-bottom:-1000em;
и пляски с overflow:hidden
А разбираться в вашем сайте у меня сейчас нет ни времени, ни особого желания. Т.к. данный макет, как я уже успел убедиться, не годен для использования в реальных условиях.
#item1 .sap-content,#item2 .sap-content,#item3 .sap-content {
padding-bottom:5em; /* Отступ снизу равный высоте подвала */
}
И еще. Зря вы взяли шаблон целиком и впихнули его к себе на сайт. Многие вещи, используемые в моем шаблоне, на реальном портале не нужны. Это
padding-bottom:1000em;
margin-bottom:-1000em;
и пляски с overflow:hidden
А разбираться в вашем сайте у меня сейчас нет ни времени, ни особого желания. Т.к. данный макет, как я уже успел убедиться, не годен для использования в реальных условиях.
да, я тоже обнаружил баг с "якорями" (при переходе на "якорь", всё что выше него куда-то прячется) но думаю проблема не у автора кода. я делал подобную вёрстку сам и немного по-другому, однако принцип создания колонок одинаковых по высоте у меня тот же. пока не понял в чём дело...
UFO just landed and posted this here
как уже выше отмечалось, про скругленные углы спорно, а так, надо запомнить это топик…
UFO just landed and posted this here
Sign up to leave a comment.
В поисках идеала