Great Rash
-
Posts
7,974 -
Joined
-
Last visited
-
Days Won
144
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Great Rash
-
Вы забыли указать абсолютное позиционирование диву: position: absolute; Только после этого начнут работать правила left:0;, top:0; и z-index: 100;. fixed - ИЕ6 и правда не понимает, тут наверное без скрипта не обойтись... хотя есть один способ эмулировать fixed в ИЕ, но он потребует переделывания всей страницы плюс в ИЕ появятся 2 скролла - один активный, а другой нет.
-
Brodyaga Вот так можно обойтись без <area> http://www.alistapart.com/d/sprites/ala-blobs2.html Тут собссно статья на эту тему http://www.alistapart.com/articles/sprites
-
Удивительный баг IE (6.0.2900 а может и других)
Great Rash replied to aruru's question in HTML Coding
В семерке такая же фигня, что лишний раз подтверждает мое мнение об этом браузере. Кстати, в Мозилле изначально ширина левого блока такая какая в ИЕ получается после добавления "уууууу". Переделайте все на дивах. -
В ТЗ ИЕ6 не присутствует, поэтому на него плевать. Сейчас при первом же апдейте Винды юзеру автоматически устанавливается семерка. Разумеется мы говорим о лицензии Особые нужды появятся (будет тонны две закругленных углов), буквально каждый первый пример некорректно работает в Эксплорере (естественно седьмом). Для примера, даже меню глубоко уважаемого мной сайта alistapart.com оказалось бесполезным. min-height: 1px; обязательно попробую UPD: Наверное нужно пояснить, почему мне не подходят предлагаемые меню из сети. У них всех используется фиксированная ширина ссылки. Я же не знаю какой ширины у меня может быть ссылка, поэтому меню должно быть резиновым. Кстати, min-height тоже "убивает" стопроцентную ширину у элемента списка. Плюс заметил еще один баг: если навести курсор на самое глубокое меню, потом увести курсор с него, а потом снова навести, то отобразятся сразу оба вложения. Все это относится естественно к ИЕ.
-
На ИЕ6 мне плевать. Погуглить я догадался, но примеров, подходящих под мои нужды не нашел. Если кинете ссылку буду благодарен.
-
Здравствуйте! Есть горизонтальное выпадающее меню: 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" xml:lang="en" lang="en"> <head> <title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="111.css" media="all" rel="stylesheet" type="text/css" /> </head> <body> <ul class="dropdown"> <li class="top"><a href="#">Level 1 link</a></li> <li class="top"><a href="#">Level 1 link</a> <span>v</span> <ul> <li><a href="#">Level 2 link</a></li> <li class="dir"><a href="#">Level 2 link</a> <ul> <li><a href="#">Level 3 link</a></li> <li><a href="#">Level 3 link</a></li> </ul> </li> <li><a href="#">Level 2 link</a></li> <li><a href="#">Level 2 link</a></li> </ul> </li> <li class="top"><a href="#">Level 1 link</a> </li> <li class="top"><a href="#">Level 1 link</a> </li> <li class="top"><a href="#">Level 1 link</a></li> </ul> </body> </html> css * { margin: 0; padding: 0; font: 12px Tahoma, Arial, sans-serif; } ul.dropdown, ul.dropdown li, ul.dropdown ul { list-style: none; margin: 0; padding: 0; } ul.dropdown { position: relative; } ul.dropdown li { float: left; vertical-align: middle; padding: 7px; background-color: #f00; color: #000; } ul.dropdown li:hover { position: relative; cursor: pointer; } ul.dropdown ul { display: none; position: absolute; top: 100%; left: 0; min-width: 150px; border: #000 1px solid; } ul.dropdown ul li { float: none; } ul.dropdown ul ul { top: 0; left: 100%; } ul.dropdown li:hover > ul { display: block; } В Мозилле все работает как часы, а в ИЕ меню работает только если убрать все отступы у LI или если к элементу списка добавить правило zoom: 1;. Ни то ни другое делать нельзя, т.к. без отступов по дизайну нельзя, а если добавить зум, то LI не растягивается на ширину всего контейнера и меню начинает колбасить. Всю голову сломал, так и не придумал как победить ИЕ. Подскажите, что делать?
-
а какая версия Оперы? У меня в 9,63 вроде ничего не скачет. А расскажите, что должно быть, а то из первого поста нифига не понятно? Я замучу если время будет.
-
Не знаю, что точно должно получиться, но вот так у меня Мозилла переставляет черную черту: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>222</title> <script> function switchmenu(l_top){ document.getElementById("content").style.top=l_top+'px'; } </script> </head> <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" > <div style="position:relative; z-index:5;" id="content"> <div style="width:99%; position: absolute; top:0px; left:10px; z-index:6;"> <div style="background:black; height:2px; width:100%; z-index:7;" ><img height=2 src="interface/spacer.gif"></div> <div style="height:100%; width:2px; z-index:7;"> <table border=0 cellpadding=0 cellspacing=0 > <tr> <td width=2 bgcolor=black height=100%><img width=2 src="interface/spacer.gif"></td> <td>testtest<br>test<br>test<br>test<br>test<br>test<br></td> </tr> </table> </div> </div> </div> <div style="position:relative; z-index:8;" id="menu"> <div style="min-width:50px; position: absolute; text-align:right; top:10px; right:20px; z-index:9;"> <div style="height:20px; min-width:50px;"><a href=# onclick="switchmenu(40);">Дизайн интерьера</a></div> <div style="height:2px; min-width:50px; z-index:10;"><img height=2 src="interface/spacer.gif"></div> <div style="height:20px; min-width:50px; z-index:10;"><a href=# onclick="switchmenu(62);">Ландшафт</a></div> <div style="height:2px; min-width:50px; z-index:10;"><img height=2 src="interface/spacer.gif"></div> <div style="height:20px; min-width:50px; z-index:10;"><a href=# onclick="switchmenu(84);">Декор</a></div> <div style="height:2px; min-width:50px; z-index:10;"><img height=2 src="interface/spacer.gif"></div> <div style="height:20px; min-width:50px; z-index:10;"><a href=# onclick="switchmenu(106);">Арт</a></div> <div style="height:2px; min-width:50px; z-index:10;"><img height=2 src="interface/spacer.gif"></div> <div style="height:20px; min-width:50px; z-index:10;"><a href=# onclick="switchmenu(128);">Фотография</a></div> <div style="height:2px; min-width:50px; z-index:10;"><img height=2 src="interface/spacer.gif"></div> </div> </div> </body> </html> UPD: А вообще у Мозиллы есть полезная вещь - Консоль ошибок! Мне часто помогает. Ну и Firebug для нее конечно установить неплохо бы.
-
romanist Вы мой код пробовали запускать в отдельном файле? Он точно рабочий и бреда не должен выводить.
-
Я бы сделал так: img { position: relative; top: 50%; margin-top: -270px; } UPD: В общем вот код целиком: <!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> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <div style="width: 600px; height: 600px; border: #000 1px solid;"> <img src="img.gif" style="position: relative; top: 50%; left: 50%; margin: -256px 0 0 -270px;" /> </div> </body> </html>
-
Вообще есть хак для МАК'ов .class { /* hide from IE5/Mac */ /* \*/ bla bla bla /* */ }
-
Victor Ananiev Вот мой код (к вашему добавил бордеры и контент для наглядности): <!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>Valid XHTML 1.0 Strict template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; } #wrap { height: 50%; border: #f00 1px solid; } #inner { height: 100%; } #content { margin: 30px 0; overflow: auto; border: #000 1px solid; } </style> </head> <body> <div id="wrap"> <div id="inner"> <div id="content"> text<br /><br /><br /><br /><br /><br /> text<br /><br /><br /><br /><br /><br /> text<br /><br /><br /><br /><br /><br /> </div> </div> </div> </body> </html> Нету скролла, хотя стоит overflow: auto;. Собссно нужен скролл, причем именно у дива content. Searcher Камрад, откуда столько негатива? Если мой ответ вас разозлил, тогда прошу прощения. Если вас напрягает отвечать на мои вопросы, тогда смысл на них отвечать? Только нервы себе портить. UPD: Кстати, не знал, что если у родителя указать position: absolute;, то потомок будет позиционироваться относительно него. В общем проблема решена, всем спасибо.
-
Это к родителю надо применить? Собссно даже смысла нет применять никуда... если сделать по вашему, то див растянется на всю высоту окна, а мне надо чтобы он растянулся на всю высоту родительского дива минус отступы.
-
Ничего не выйдет: т.к. если не задавать явно высоту у дива с маргинами, то тогда высота дочернего дива не будет 100%, а если задать высоту явно, то опять возникнет проблема с увеличением дива в размерах.
-
Есть див высотой 50% от окна. Внутри него есть еще один див, который должен быть высотой 100% от родительского дива минус 30 пикселей сверху и снизу. Если я добавляю padding к родительскому диву, то его высота получается больше 50%. Возможно ли сделать нужные отступы, не увеличивая высоту родительского дива, не используя JavaScript? Сделать высоту родительского дива меньше 50% нельзя, т.к. иначе размер будет немного разный по высоте при различных разрешениях, что недопустимо.
-
Как задать цвет маркеров у LI при этом не затрагивая цвет текста?
Great Rash replied to rug_1's question in HTML Coding
Во-первых: DOM-дерево как-нить переживет такую нечеловеческую нагрузку как <span> Во-вторых: если у юзера отключены картинки, то, предложенный мной код, все равно покажет все так как надо. В-третьих: может этот "лишний" <span>, куда-нить пригодится в последствии? Короче, сплошные плюсы елки-моталки... -
Victor Ananiev Видимо вы невнимательно прочитали мой пост. Такое лично со мной часто случается... zwie Нет не поможет, можете попробовать если интересно. Если выйдет, то запостите сюда решение, буду только рад Vlad Огромное спасибо! То что нужно!
-
Как задать цвет маркеров у LI при этом не затрагивая цвет текста?
Great Rash replied to rug_1's question in HTML Coding
Цвет маркеров заменить не просто, а очень просто! CSS ul, li { color: #f00; } li span { color: #000; } HTML <ul> <li><span>text</span></li> </ul> -
Здравствуйте! Сразу оговорюсь, что прижимать просто так футер книзу я умею (хоть и считаю это совершенно ненужным...). Теперь к сабжу. Есть такой код (код не мой, просто подходит для примера): Код можно посмотреть на этой странице http://www.xs4all.nl/~peterned/examples/csslayout1.html Там макет из хедера, контента и футера. Причем контент растянут на 100% по высоте. Мне надо сделать так: 1. надо сделать хедер, допустим 100px по высоте 2. надо сделать футер, допустим 100px по высоте 3. самое интересное: надо сделать так чтобы между ними был контент, чтобы он был растянут на всю оставшуюся высоту экрана (как в примере по ссылке), но чтобы, если высота контента превышает высоту экрана, то у дива с контентом появлялся бы скролл (overflow: auto;). Надеюсь понятно объяснил? Т. е. совершенно фиксированные хедер и футер, а между ними скролится контент. Всю голову сломал, не могу придумать как это сделать... И вообще возможно ли такое без скриптов?
-
mafinok Может все-таки лучше заменить <div> внутри <a> на <span>? Ну и плюс в ИЕ сие творение работать не будет (по крайней мере в шестерке)...
-
В общем все так и происходит, только через AJAX. Правда рисуется все только после того как readystate равняется 4, т.е. ответ получен. Но уже это я менять не могу... т.к. таким макаром отрисовывается не только форма, но и все остальное содержимое окна. UPD: Не придумал ничего лучше, чем написать вот такую портянку: (ALERT!!! Портянка!!!) <input type="text" style="width: expression((this.parentNode.parentNode.parentNode.parentNode.offsetWidth/2)-(this.parentNode.parentNode.parentNode.parentNode.offsetWidth*20/100));" value="Черезтридцатьтризабораногозадерищенко" />
-
Дело в том, что данные в value приходят с сервера. Надо 100% обязательно. Дело в том что div резайзится яваскриптом (есть такой яваскрипт dragresize.js - типа эмуляция окон). Вот такая ситуевина у меня: <!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>Valid XHTML 1.0 Strict template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> @import url('style.css'); .table1{ width: 100%; border: #f00 1px solid; border-collapse: collapse; } td { width: 30%; padding: 3px; } td.text { width: 20%; } td.input-td { padding-right: 7px; } input { width: 100%; } </style> </head> <body> <div style="width: 550px;"> <table class="table1"> <tr> <td class="text">текст</td> <td class="input-td" style="border-right: #f00 1px solid;"><input type="text" value="" /></td> <td class="text">текст</td> <td class="input-td"><input type="text" value="Черезтридцатьтризабораногозадерищенко" /></td> <tr> </table> </div> </body> </html>
-
Есть таблица шириной 100%, которая состоит из 4-х столбцов. первый столбаец - ширина 20% второй столбец - ширина 30% третий столбец - ширина 20% четвертый столбец - ширина 30% В первом и третьем столбцах находится текст, во втором и четвертом столбцах находятся инпуты (<input type="text">). У инпутов ширина 100%. Проблема: В браузере Интернет Испортил, если в инпуте много текста колонка расширяется больше положенных 30%. Вопрос: Как бы так сделать, чтобы в ИЕ ничего не ломалось? Пробовал ставить у <input> overflow: hidden; - толку никакого.
-
Ага, внатуре дело в height: 100%; у body.
-
body { background: url('img/111.png') bottom left repeat-x; } Странно, у меня все выравнивается без проблем. Mozilla Firefox/3.0.6, больше нигде не проверял. И даже так выравнивается без проблем body { background: url('img/111.png') repeat-x bottom; } А у вас фон вообще видно где-нибудь на странице? А то может путь до картинки кривой?