Подскажите метод верстки для этого макета
182 сообщения
#11 лет назад
Загвоздка в узорах слева/справа и в том, что ширина центрального блока должна быть статичной. Была бы она динамичной, никаких проблем, а так сижу уже битых пару часов ломаю голову, каааак?
И скажите, это я настолько отдаленный от верстки, или дизайнер мой не в курсе что такое адаптивность?
ссылка
297 сообщений
#11 лет назад
Может так<body>
<div class="center">Это центральный блок</div>
</body>
<style type="text/css">
body {
background: url("../images/bg.png") no-repeat center top;
}
.center {
width:1000px;
margin:0 auto;
background: #fff;
}
</style>
3543 сообщения
#11 лет назад
Цитата ("Stan-87"):дизайнер мой не в курсе что такое адаптивностьА что это и как вам должно помочь с фоном?
Я понимаю адаптивность и по-моему так есть: отображение сайта в браузере различных устройств, кроме обычного ПК.
В браузерах отображение одинаковое — это кроссбраузерность.
Что же касается фона:
1. можно нарисовать максимально большое;
2. можно как есть, но нарисовать так, чтобы не было ощущения обрыва;
3. можно блоками. Левую часть к левой стороне привязать, правую соответственно вправо.
Назначить там оверфлоу позиционирование по оси Z написать, чтобы фон был за верхним колонтитулом (шапкой).
182 сообщения
#11 лет назад
NeoMurderer, спасибо. но не то..Summer_Rain, я имел ввиду адаптивность к разным соотношениям мониторов + мобильные...
1. целиковый и максимально большим я рассматривал такой момент, но это не оч круто выглядит, и весит много ((
меня наверное осенило на основе ваших советов, что если вырезать левый и правый декор, и сделать им width динамично растягиваемым, а центральный блок как и должен 900px будет статичным
это выход?
3543 сообщения
#11 лет назад
Stan-87, Как вариант. Тогда картинка будет вытягиваться по ходу расширения монитора.Это что я писал про оверфлоу.
Вес, кстати, через svg решить можно, нет? Плюс судя по картинке и гиф можно было попробовать, но вектор еще лучше, конечно.
182 сообщения
#11 лет назад
Summer_Rain, о спасибо! не слышал про SVG. А этот макет как раз в векторе. Буду дальше сам разбираться. Тему пока не закрываю, авось что случится 
Не нравиться правда его поддержка ((
Internet Explorer 9+
Mozilla Firefox 1.5+
Netscape Navigator 9.0+
Google Chrome 3.0+
Safari 4.0+
Opera 8.0+
мне кажется еще есть пользователи с IE 8кой, или я ошибаюсь?
3543 сообщения
#11 лет назад
Цитата ("Stan-87"):пользователи с IE 8койВозможно есть. Для уникумов можно отдельно стили прописать.
Хотя, конечно, лучше когда, по возможности, сайт отображается корректно в любой версии.
359 сообщений
#11 лет назад
Цитата ("Stan-87"):мне кажется еще есть пользователи с IE 8кой
те у кого стоит win XP - у тех IE8, поэтому нужно чтобы верстка хотя-бы не разваливалась в этом старичке. Но если сверстано нормально, то в большинстве своем в 8-м не разваливается. Имею в виду что на XP - IE9 не становится, и те кто пользуются осликом - используют 8-ю версию, хотя один мой знакомый только недавно поставил IE7, до этого использовал 6-ку. Убедить поставить Хром или Мозиллу - не удалось, говорит привык.
182 сообщения
#11 лет назад
TitokR, да, уже продумал, в IE8 вместо боковых узоров будет просто заливка.
2195 сообщений
#11 лет назад
Цитата ("Stan-87"):Загвоздка в узорах слева/справа
Как дизайнер, я бы такой макет не отдавала. Сделала бы плавные края (без ощущения обрыва). Или нарисовать на ширину 2500пх.
182 сообщения
(
15 сообщений
#11 лет назад
Ацкая вёрстка у вас. Только без обид. Таблицами не верстают. Само по себе понятие «табличная вёрстка» придумали дилетанты.По-вашему вопросу про тень:
td.slider {position:relative;}
.shadow.sr {position:absolute; width:100%; height:100%;}Здесь в первой строке я использовал не самый быстрый селектор тэга, т.к. слово slider не такое уж редкое. Лучше присвоить id-шнег, например #my-slider.
6863 сообщения
349 сообщений
#11 лет назад
В чем заключается сложность, так и не поняла.У вас нет полного изображения backgroundа? Вставьте его полностью применив сжатие для Web
561 сообщение
#11 лет назад
Цитата ("Forcreative"):понятие «табличная вёрстка» придумали дилетанты.
Сказал человек со ссылкой в аккаунте на сайта с table-ами)))))
Цитата ("Forcreative"):
Лучше присвоить id-шнег
Лучше не использовать id в верстке.
359 сообщений
#11 лет назад
Цитата ("starki"):Лучше не использовать id в верстке.
согласен на 100%! Оставим id программистам.
3543 сообщения
#11 лет назад
Ребят, а я в верстке не селен, подскажите, почему id лучше не использовать?
15 сообщений
#11 лет назад
Цитата ("floppox"):Цитата ("Forcreative"):Само по себе понятие «табличная вёрстка» придумали дилетанты.
Вы ошибаетесь. В свое время это был прорыв в верстке и веб-дизайне. Если бы не эти "дилетанты", то по сей день интернет выглядел бы как сайт ]http://lib.ru/
В своё время, это, я так понимаю, до принятия CSS2.0, во времена нетскейп навигатора и третьего IE? Напомню, что в то время, которое я застал кстати, вёрстку не называли табличной как таковой, это был единственный возможный способ вёрстки. Термин «табличная вёрстка» и «смешанная вёрстка» появились позже, когда нехорошие люди стали верстать на div-ах, т.е., так называемой, «блочной вёрстки». Про всё это написано множество статей в сети, но я попробую вам кратко объяснить:
Есть понятия «содержание» и «представление». Грубо говоря, таблица, параграф, картинка, список — это всё содержание. Для представления используются такие тэги, как div и span, т.е. которые не представляют «веса» с точки зрения семантики. Так вот, весь сайт целиком — это не таблица, это документ. Отключив стили мы можем примерно представить реальную структуру сайта. Про «поток контента» думаю понятно из самого термина.
Цитата ("starki"):
Цитата ("Forcreative"):понятие «табличная вёрстка» придумали дилетанты.
Сказал человек со ссылкой в аккаунте на сайта с table-ами)))))
Серьёзно? Я думал, что у меня в портфеле только дизайны лежат. А вы вероятно по картинке предсказываете будущее, т.е. то, как я буду верстать. Жжёте.
Цитата ("starki"):
Цитата ("Forcreative"):Лучше присвоить id-шнег
Лучше не использовать id в верстке.
Серьёзно?
Обоснуйте пожалуйста.Мои доводы: наивысшая скорость селектора и наибольшая специфичность при каскадировании. Ваши?
15 сообщений
#11 лет назад
Цитата ("Summer_Rain"):Ребят, а я в верстке не селен, подскажите, почему id лучше не использовать?
Только id и нужно использовать. Правда, нужно всегда учитывать, что id на странице всегда один! Конечно современные браузеры худо/бедно и несколько одинаковых id стилизуют на странице, но это грубейшая ошибка валидности.
Можно делать, например, так:
весь каркас вёрстки вы обозначаете id:
<body>
<div id="header">
<div id="content">
<div id="footer">
А повторяющиеся элементы классами:
<div id="content">
<div class="moduletitle">
<div class="modulecontent">
Так же, рекомендуется писать всё строчными, а для разделений исползовать дефис, т.е., вот так совсем правильно будет: class="module-title"
15 сообщений
#11 лет назад
Цитата ("Stan-87"):Summer_Rain, о спасибо! не слышал про SVG. А этот макет как раз в векторе. Буду дальше сам разбираться. Тему пока не закрываю, авось что случится
Не нравиться правда его поддержка ((
Internet Explorer 9+
Mozilla Firefox 1.5+
Netscape Navigator 9.0+
Google Chrome 3.0+
Safari 4.0+
Opera 8.0+
мне кажется еще есть пользователи с IE 8кой, или я ошибаюсь?
Всё решаемо. Для отображения SVG на всяческих тостерах/микроволновках есть проверенный годами Raphael и, совсем недавно обнародованный SVG.js. Последний вообще няшка. Только не очень понял, зачем тут SVG в конкретно вашем проекте? О_о. Можно ещё и Canvas-ом сделать. Только это всё забивание гвоздей микроскопом.