Azadi
-
Posts
178 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Azadi
-
Что можно найти, если воспользоваться поиском Сам же пользуюсь в разных случаях разными способами. если макет простой, то или игры с border'ом, или вот так Если сильно припрёт, то expression использую обычно такого вида: *HTML BODY { width: expression(documentElement.clientWidth > 1400 ? (documentElement.clientWidth == 0 ? (body.clientWidth > 1400 ? "1400px" : "auto") : "1400px") : "auto"); } и не забудьте это все заключить в Condition Comments
-
Не тянется при добавлении текста? Или вы невнимательно просмотрели код, или я чего-то совсем-совсем не понимаю... А понимаю я вот так: Пример
-
А может вам надо чтобы ссылки выглядели как кнопки? Тогда вам сюда: Simple Round CSS Links ( Wii Buttons ) P.S. Прилагать скриншот кода на форуме, посвещенном HTML-верстке... Ужас!
-
Прошу совета по организации работы над созданием сайта
Azadi replied to cand88's question in HTML Coding
В сторону CMS не смотрели? Книжки - это хорошо, но чтобы написать с нуля что-то нормально функционирующее, нужно время... Много времени и сил. Уж проще бесплатную CMS под себя перелопатить... Хотя все зависит от масштаба портала и его предполагаемых функций. -
CSS - каскадные таблицы стилей. Подробное руководство Э. А. Мейера - лучшая. Основы CSS даются от А до Я. Главное ее прочитать и понять. Наиболее типичные техники верстки, а также часто встречающиеся ошибки можно найти в книгах Д. Седерхольма "Пуленепробиваемый Web-дизайн" и "Мастерская CSS" Э. Бадда. А классический ответ на ваш вопрос выглядит примерно так: Когда деревья были большими или с чего все начали?
-
Два блока в контйнере, При изм.размеров браузера - сползает в ИЕ
Azadi replied to SteaM's question in HTML Coding
http://n-snork.ru/rit2008/arefieva-debugging-2.pdf -
Хосподи, какой ужасный и неаккуратный код... было очень неприятно в нем разбираться, поэтому решение может быть не кроссбраузерным: template_styles.css: #left_verh {float:left;} #right_verh {float: right;white-space:nowrap;}
-
Учу. 1. Открывам нужну страничку Яндекса. 2. Смотрим код этой странички. 3. Вырываем нужный кусок HTML (да, FireBug рулит - в вашем случае это <form id="b-head-search" ). 4. Ищем CSS. Т.к. это Яндекс, то CSS, естественно, сжат и труден в понимании. Но нас это не пугает. http://css.yandex.net/css/search/r4/_serp.css - для нормальных браузеров http://css.yandex.net/css/search/r4/_serp.ie.css - то что вам нужно для кроссбраузерной реализации - вариант для IE! 5. В итоге у вас все, что нужно для понимания данного фрагмента. P.S. да, код Яндекса это жесть. Высшая математика, если хотите. Лично я понял фрагмент примерно так: <!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" /> <style type="text/css"> * { padding:0; margin:0; border:0; } BODY { color:#000; } #yandex { margin:50px 200px; position:relative; height:1%; } #search { background:#fc0; padding-right:8%; height:50px; } #arr { background:url('arr.png') center right no-repeat; display:block; position:absolute; width:8%; top:0; right:0; bottom:0; } </style> <!--[if lt IE 7]> <style type="text/css"> #arr { height: expression(parentNode.offsetHeight+'px'); } </style> <![endif]--> </head> <body> <div id="yandex"> <div id="search"> abasgasb </div> <i id="arr"></i> </div> </body> </html>
-
Вот занятный вариант с Хабра: <div style="border-top:34px solid #FFF; border-left:17px solid #FFCC00; border-bottom:34px solid #FFF;"></div> http://habrahabr.ru/blogs/webdev/46033/ А вообще Девятилап прав, тебе поможет баааальшой уголок, запихнутый в слой, который абсолютно спозиционирован вправо (с height:100%; от высоты родителя)
-
http://cssing.org.ua/2008/08/29/float-mess/ - читайте статью, разбирайтесь. По моему мнению, таблицу в 1 столбец и 2 строки можно легко заменить на список определений.
-
Вижу 2 решения проблемы: 1). Для нормальных браузеров пишем display:table; display:table-cell; и т.п., а для IE6 используем expression'ы для отсчитывания отступов сверху и снизу при изменении высоты блока. 2). Загнать блок в таблицу и не мучиться. Еще можно поискать какой-нибудь скрипт, который бы выравнивал блок по центру окна. Я бы загнал блок в таблицу и не мучился с IE... <!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" /> <style type="text/css"> * { padding:0; margin:0; border:0; } HTML,BODY { height:100%; } .center { vertical-align:middle; width:100%; height:100%; text-align:center; } .wrap { width:34%; background-color:#c3f6ff; text-align:center; margin:0 auto; } </style> <title>Title</title> </head> <body> <table class="center"> <tr> <td> <div class="wrap"> <p>Text text text</p> <p>Text text text</p> <p>Text text text</p> <p>Text text text</p> <p>Text text text</p> </div> </td> </tr> </table> </body> </html>
-
<!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" /> <style type="text/css"> * { padding:0; margin:0; border:0; } #wrap { height:1%; border-bottom:#000 1px solid; } #wrap:after { content:''; display:block; clear:both; } div.col { float: left; width: 25%; background:#eee; overflow:hidden; } </style> <title>Title</title> </head> <body> <div id="wrap"> <div class="col">11111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111000000000000000000000</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div> </body> </html> То есть для первой проблемы единственное что нужно было - очистить float'ы. Способов много, я привел метод под названием "самоочистка плавающих блоков". Ослика урезонивает простое height:1%; Теперь вторая проблема. Я бы сделал так: картинку разделительной косой черты сделать в графическом редакторе подлиннее (т.е. увеличить размер изображения), и при увеличении размеров шрифта будет открываться все большая часть картинки. Отступ слева от текста советую задать в em, а картинку спозиционировать в левый нижний угол (left bottom).
-
Учитесь пользоваться поиском: http://nigma.ru/index.php?s=%D0%B3%D0%BE%D...=1〈=all
-
Три колонки, крайние тянутся, центральная фиксированной ширины.
Azadi replied to mozart's question in HTML Coding
С картинками можно? Очень сложно представить все ваши уровни фона и что куда должно тянуться. При этом пример кода мало что дает. А вообще абсолютное позиционирование должно решить большинство ваших проблем. -
.tbsrv {height:100%} У вас почему-то было height:auto;
-
Дайте ссылку на сайт или опишите проблему еще раз, более подробно/понятно/читабельно... P.S. быть может проблема с наследованием?
-
Футер всегда прижат к нижнему краю окна просмотра браузера, или вы просто неудачно выразили свою мысль? Если так и надо, то используйте position:fixed для FF и position:absolute для IE (за подробностями в Гугл, в инете куча статей про эмуляцию фиксированного позиционирования для IE). А вообще, техник много: http://trifler.ru/blog/i/layouts/ideal/pro...end_ugg_100.htm http://gruzzilkin.110mb.com/three-col-layout/
-
не отображаються таблицы на некоторых браузерах
Azadi replied to mephistophile_ua's question in HTML Coding
Как-то так: .post_body P {float:left} .snap_noshots {clear:left;display:block;} Вообще-то общепринятой практикой является сначала разработка сайта под совместимые со стандартами браузеры (FF, Opera, Safari), а потом уже подгонка их под IE. -
<!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="en" lang="en"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #wrap { background:#eee; overflow:hidden; height:1%; min-width:760px; } .center { float:left; width:100%; margin-right:-100%; } .center DIV { margin:0 200px 0 25%; background:#ffe; } .left { float:left; width:25%; background:#fef; } .right { float:right; width:200px; background:#efe; } /* Additional styles*/ * { padding:0; margin:0; border:0; } P { margin:0 1em 1em; } H1 { text-align:center; padding:.5em; } </style> </head> <body> <div id="wrap"> <div class="header"> <H1>Заголовок</H1> </div> <div class="center"> <div> <p>Text</p> </div> </div> <div class="left"> <p>Text</p> </div> <div class="right"> <p>Text</p> </div> </div> </body> </html> Вот как-то так. Основа: http://trifler.ru/blog/post_1219421644.html
-
Оборачиваете все содержимое в дополнительный DIV, а уже в этот блок вставляете фоном картинку бордеров. Так как у вас сайт с фиксированной шириной, то картинка должна выглядеть примерно так: "левый бордер" —- 1000px —- "правый бордер". Можно вообще к BODY этот фон прикрутить при желании. Ну и overflow:hidden; никто еще не отменял.
-
Великолепная весчь, призванная уменьшить количество кода HTML на страничке. Уже сейчас использую в своих проектах по мере возможности, а для IE в таких случаях приходится пользоваться expression.
-
position:relative; margin-top:-(x)px; где х - высота подвала. При это придется использовать обертывающий div... а вообще, проблема очень обсуждаемая и при использовании поиска можно найти много много материала для размышления.
-
Уберите width:865px; для UL
-
Первый не имеет поддержки IE < 6 (если это еще кого-то волнует) и бесполезен для выравнивания плавающих блоков. Второй является более универсальным, но мне не нравится, что при сильном сужении окна просмотра половина блока уходит за край и он не подходит для блоков неизвестной ширины. Способ klierik'а рассмотрю подробнее, интересное решение.
-
Простого способа нет, если только ваши блоки не имеют фиксированной ширины. Для фиксированной ширины все достаточно просто: обрамляющий div отбиваете отступом слева на 50%, а потом смещаете каждый плавающий блок влево на половину ширины этого плавающего блока, используя отрицательные отступы. Если же ширина плавающих блоков заранее неизвестна, то выровнять блок становится очень сложно. Посмотрите решение Владимира Токмакова.