Jump to content

Azadi

User
 View Profile  See their activity

  • Posts

    178

  • Joined

  • Last visited

 Content Type 

Everything posted by Azadi

  1. Azadi
    Под меню. Фоном кладете сначала повторяющиеся по горизонтали фрагменты. Потом навешиваете шапку, подвал и середку.
  2. Azadi
    В принципе, ничего сложного. Можно по-разному рещить вашу проблему, но в любом случае придется резать рамку на 3 части + вам надо будет продумать, как рамка будет себя вести при увеличении количества пунктов в меню. Вырезаете шапку и подвал рамки, оставляете середину. Эту середину можно засунуть в обрамляющий DIV (или любой другой доступный элемент, исходя из кода) с background-position:center; и повторять по горизонтали. Но так будет не совсем красиво, мне кажется. Можно середину не репитить, а добавить картинку рамки высотой 1px, вырезанную из более-менее ровной части боковой рамки. Вот как-то так я бы сделал...
  3. Azadi
    Забудьте про то, что вы наверстали и внимательно присмотритесь к приведенным выше примерам.
  4. Azadi
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <style type="text/css"> * { padding:0; margin:0; } .block { position:relative; width:90%; margin:0 auto; padding:30px; overflow:hidden; } .inner { float:left; width:23%; margin:1%; background:#eee; } .inner P { margin:1em 2em; } </style> </head> <body> <div class="block"> <div class="inner"><p>Малиньит, либо из самой плиты, либо из астеносферы под ней, относительно слабо стягивает пегматитовый хребет, поскольку непосредственно мантийные струи не наблюдаются. Магма слагает топаз, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Застываение лавы отмыто. Метаморфическая фация восстановлена. Эвтектика сдвигает оливин, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий. Лакколит разогревает аморфный силл, так как совершенно однозначно указывает на существование и рост в период оформления палеогеновой поверхности выравнивания.</p></div> <div class="inner"><p>Малиньит, либо из самой плиты, либо из астеносферы под ней, относительно слабо стягивает пегматитовый хребет, поскольку непосредственно мантийные струи не наблюдаются. Магма слагает топаз, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Застываение лавы отмыто. Метаморфическая фация восстановлена. Эвтектика сдвигает оливин, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий. Лакколит разогревает аморфный силл, так как совершенно однозначно указывает на существование и рост в период оформления палеогеновой поверхности выравнивания.</p></div> <div class="inner"><p>Малиньит, либо из самой плиты, либо из астеносферы под ней, относительно слабо стягивает пегматитовый хребет, поскольку непосредственно мантийные струи не наблюдаются. Магма слагает топаз, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Застываение лавы отмыто. Метаморфическая фация восстановлена. Эвтектика сдвигает оливин, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий. Лакколит разогревает аморфный силл, так как совершенно однозначно указывает на существование и рост в период оформления палеогеновой поверхности выравнивания.</p></div> <div class="inner"><p>Малиньит, либо из самой плиты, либо из астеносферы под ней, относительно слабо стягивает пегматитовый хребет, поскольку непосредственно мантийные струи не наблюдаются. Магма слагает топаз, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Застываение лавы отмыто. Метаморфическая фация восстановлена. Эвтектика сдвигает оливин, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий. Лакколит разогревает аморфный силл, так как совершенно однозначно указывает на существование и рост в период оформления палеогеновой поверхности выравнивания.</p></div> </div> </body> </html> Так сойдет?
  5. Azadi
    А что должно получиться в итоге? Из вашего куска кода, соверщенно непонятно, как блоки должны располагаться на странице... UPD И в догонку: указывайте единицы измерения для свойств!!! И перед тем, как выкладывать код, советую привести его в удобочитаемый вид, убрать лишнее, выделить нужное...
  6. Azadi
    Вот довольно занимательный пример верстки с использованием display:table и т.п. От себя хочу добавить, что такая верстка не стоит той головной боли, которую доставляет "коррекция под IE". Хотя у некоторых получается изголяться: nowrap floats
  7. Azadi
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <style type="text/css"> * { padding:0; margin:0; } HTML,BODY { height:100%; } BODY { background: #FFF; font-family:Verdana,Arial,sans-serif; } .verstka { text-align:center; position:relative; height:auto !important; min-height:100%; height:100%; } .verstka H3 { background:#ffe4c4; position: absolute; bottom:0; left: 10px; right:10px; color:#FF4500; font-size:110%; line-height:3; } .verstka SPAN { text-decoration:line-through; } </style> <!--[if lte IE 6]> <style type="text/css"> .verstka H3 { width:expression(document.body.clientWidth-20); } </style> <![endif]--> </head> <body> <div class="verstka"> <h3>**************Дизайн и <span>верстка</span> - Тимур Ярматов**************</h3> </div> </body> </html> Если я вас правильно понял, то хотели вы что-то подобное. А насчет вашего примера... Тэги вроде и использовать в верстке не советую, т.к. они являются устаревшими и документ , содержащий в себе эти тэги не проходит проверку на валидность. Про семантику кода молчу. Сотни точек в HTML-коде это, простите, все-таки извращение.
  8. Azadi
    Слов нет. Литературных. А к чему вам вся эта порнография, чего вы хотели добиться в итоге?
  9. Azadi
    overflow:hidden не поможет?
  10. Azadi
    Но если хотите помучиться, то вот вам такой монстрик в помощь: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <style type="text/css"> * { padding:0; margin:0; } BODY { background: #FFF; font: .85em Arial,sans-serif; } ul.nav { overflow:hidden; height:1%; } .nav li { float:left; display:block; } .nav li a { display:list-item; list-style: disc url(separator.jpg); font-family:'Times New Roman', Georgia, Times, serif; font-size:20px; margin:0 20px; color:#3f92bf; } </style> </head> <body> <ul class="nav"> <li><a href="index.html">Главная</a></li> <li><a href="02.html">Ипотека</a></li> <li><a href="04.html">Документы</a></li> <li><a href="05.html">Информация</a></li> <li><a href="06.html">Контакты</a></li> </ul> </body> </html>
  11. Azadi
    Поставьте маркер фоновой картинкой к элементу списка и не мучайтесь.
  12. Azadi
    Я сегодня очень не выспался, но мне кажется, что данный макет удовлетворяет большинству требований. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> BODY { color:#fff; } .line { float: left; width: 100%; display: block; position: relative; overflow:hidden; } .item { position: relative; float: left; overflow: hidden; left: 100%; padding-bottom:1000em; margin-bottom:-1000em; } .sap-content { overflow: hidden; padding:5px; } #left { margin-left:-100%; width:60%; } #right { margin-left:-40%; width:40%; background-color:green; } #item1 { margin-left:-100%; width:50%; background-color:black; } #item2 { margin-left:-50%; width:50%; background-color:red; } #item3 { margin-left:-100%; width:100%; background-color:blue; } #line3 { padding-bottom:1000em; margin-bottom:-1000em; } </style> </head> <body> <div id="wrap"> <div class="line" id="line1"> <div class="item" id="left"> <div class="line" id="line2"> <div class="item" id="item2"> <div class="sap-content">Center: В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. <!--В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. --> </div> </div> <div class="item" id="item1"> <div class="sap-content">Left: Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. <!--Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.--> </div> </div> </div> <div class="line" id="line3"> <div class="item" id="item3" > <div class="sap-content">Bottom: Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной в?рстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. <!--Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной в?рстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной в?рстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной в?рстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной в?рстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной в?рстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной в?рстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.--> </div> </div> </div> </div> <div class="item" id="right"> <div class="sap-content">Right: Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. <!--Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.--></div> </div> </div> </div> </body> </html>
  13. Azadi
    Если нужно центрировать строчные элементы, то можно попробовать поиграться с line-height. Но так как у вас там картинка, то лично я не знаю, что из этого может получиться.
  14. Azadi
    У меня аналогичный набор + иногда IE5.5 (Win), а также FF2 и FF3 под Linux. Но это редко. Еще реже Browsershots.org.
  15. Azadi
    Clear для плавающих блоков
  16. Azadi
    Нагуглил за минуту.
  17. Azadi
    Потестите код кто-нибудь, а то у меня, кажется, все работает: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> BODY { color:#fff; padding:0; margin:0; text-align:center; } div.inline { display:inline-block; margin:10px 40px; padding:20px; background-color:red; } div.inline P { margin:5px; } </style> <!--[if lte IE 7]> <style type="text/css"> div.inline { display:inline; } </style> <![endif]--> </head> <body> <div class="inline"> <img src="bg.jpg" /> <p>подпись</p> </div> <div class="inline"> <img src="bg.jpg" /> <p>подпись</p> </div> <div class="inline"> <img src="bg.jpg" /> <p>подпись</p> </div> <div class="inline"> <img src="bg.jpg" /> <p>подпись</p> </div> <div class="inline"> <img src="bg.jpg" /> <p>подпись</p> </div> <div class="inline"> <img src="bg.jpg" /> <p>подпись</p> </div> <div class="inline"> <img src="bg.jpg" /> <p>подпись</p> </div> <div class="inline"> <img src="bg.jpg" /> <p>подпись</p> </div> <div class="inline"> <img src="bg.jpg" /> <p>подпись</p> </div> </body> </html> Размер bg.jpg - 100х100.
  18. Azadi
    Подобное обсуждалось здесь. Может быть поможет?
  19. Azadi
    Согласен. + высоту можно задать в em.
  20. Azadi
    Табличный макет идеально подходит под все ваши требования. На блоках так не сверстаешь... Вот мой примерный вариант: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> BODY { color:#fff; } .line { float: left; width: 100%; display: block; position: relative; /*prevents shifting when changing viewport in IE;thanks to Alan Gresley*/ } .item { position: relative; float: left; overflow: hidden; left: 100%; } .sap-content { overflow: hidden; } #left { margin-left:-100%; width:60%; background-color:black; } #right { margin-left:-40%; width:40%; background-color:green; } #item1 { margin-left:-100%; width:50%; background-color:black; } #item2 { margin-left:-50%; width:50%; background-color:red; } #item3 { margin-left:-100%; width:100%; background-color:blue; } #line1 { background-color:green; } </style> </head> <body> <div id="wrap"> <div class="line" id="line1"> <div class="item" id="left"> <div class="line" id="line2"> <div class="item" id="item1"> <div class="sap-content">Left: Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</div> </div> <div class="item" id="item2"> <div class="sap-content">Center: В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</div> </div> </div> <div class="line" id="line3"> <div class="item" id="item3"> <div class="sap-content">Bottom: Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной в?рстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div> </div> </div> </div> <div class="item" id="right"> <div class="sap-content">Right: Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. </div> </div> </div> </div> </body> </html> Признаюсь сразу, что технику слизал с ALA. Просто решил попрактиковаться. При переполнении зеленой колонки случится кака. Если верстать блоками - обязательно условие, то без JS не обойтись...
  21. Azadi
    Рисунки не соответствуют коду, который вы выложили в #1 посте.
  22. Azadi

    Отступы в IE6.

    Azadi replied to PNZ's question in HTML Coding

    Демо макета рамки со скругленными углами: 2 изображения, подходит для создания блока любой ширины и высоты. Если сделать 3 изображения (разбив на 2 изображения borders.gif), то можно избавиться от парочки лишних блоков и не заморачиваться с фоном.
  23. Azadi
    Не понял, про какие отступы идет речь. Добавьте Doctype, уберите строчку _margin-... и просто добавьте display:inline; для плавающих блоков... не забудьте очистить #line...
  24. Azadi
    Вот вы хотите, чтобы у Вас при увеличении ширины #main автоматически растягивались шапка и подвал, так? Только таблицы или придется делать псевдострочки при помощи фона для BODY "как в шапке" и для еще одного вложенного блока, чтоб тянулся подвал. И тогда абсолютное позиционирование будет не к месту. Но это еще та ересь Кстати, мне всегда нравился вариант с overflow:auto; для #main. Но дизайнеры бесятся
  25. Azadi
    Самый простой способ исполнить ваш каприз - использовать таблицу. Я бы просто добавил oveflow:hidden для #main...
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept