vr201
-
Posts
22 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by vr201
-
Иван, а почему не стоит этого делать в принципе? Дело не в том, "хочется не хочется". Бывают случаи, когда так уже есть.
-
интересует мнение. 1. когда количество строк css становится более 4000, есть ли смысл разбивать их на отдельные файлы согласно разделам? (news.css, comments.css и т.д.) 2. (возможно не в тему) когда на большом проекте стили уже разбиты на файлы согласно разделам. но имена классов совпадают. Пример .news.css -- .nav {color: red;} .comments.css -- nav {color: green;} есть ли какое-то программное решение для того, чтобы объединить стили в один файл, а имена изменить на .news_nav и .comments_nav соответственно? 3. Насколько пример из пункта 2 можно считать злом?
-
спасибо огромное. как я сам не додумался
-
CSS .chatBodyTabs { height: 46px; overflow: hidden; list-style: none; } .chatBodyTabs li { float: left; } .chatBodyTabs li a { display: block; border: 1px solid blue; padding: 0 10px; color:red; height: 25px; } HTML <ul class="chatBodyTabs"> <li> <a href="#">link 1</a> </li> <li> <a href="#">link 2</a> </li> </ul> DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Задача стоит следующая. Надо в ряд выставить n-ное количество блоков с шириной в зависимости от текста внутри. Пример, указанный выше, работает в FF и IE 7. В IE 6 блоки растягиваются по ширине на 100%; Если из chatBodyTabs li a убрать height, то ширина в IE 6 становится нормальной. Подскажите, пожалуйста, как выйти из ситуации? Без высоты блока - никак. Там будет фоновое изображение.
-
body { height: auto !important; height: 100%; min-height: 100%; } Как ни странно, это работает. Альтернативные браузеры правильно обрабатывают !important, поэтому из двух объявлений height срабатывает первое. IE не понимает !important, поэтому в н?м побеждает второе объявление. (Напомним, что в CSS из нескольких конфликтующих объявлений при прочих равных выигрывает то, которое ид?т последним.) Это второе объявление в IE по‑прежнему срабатывает неправильно, поэтому и получается то, что надо взято с http://webtest.chebykin.ru/articles/footer/
-
я в таких случаях использую таблицы. но самому интересно есть ли какой кроссбраузерный способ реализации подобного.
-
интересует мнение о правильной реализации нижней части страницы. а конкретно о том, что - стоИт ли прижимать футер к низу окна браузера или нет? много обсуждений и готовых решений реализации, но в есть ли такая необходимость? иногда прикрепление футера к низу окна требует дизайн макета и в этом случае вариантов для выбора мало. интересуют ваши мнения по этому вопросу. (желательно обоснованные за и против) мое мнение - нижняя часть страницы должна идти непосредственно сразу за контентной частью.
-
Что именно ужас? Код в последнем посте?
-
нашел то, что искал. тему можно закрывать. спасибо всем откликнувшимся на помощь. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="description" content="description" /> <meta name="keywords" content="keywords" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title> mens </title> <style type="text/css"> * {margin: 0; padding: 0;} html, body, #all, #name {height: 100%;} #all2 { position: relative; height: 100%; min-height: 100%; } html>body #all2 {height: auto;} #footer { position: absolute; left: 0; bottom: 0; width: 100%; } #footer {background: green;} #footer, #empty {height: 50px;} /* украшательства */ body { background-color: #BBD9C1; } #content { background: yellow; } </style> </head> <body> <div id="name"><div id="all"><div id="all2"> <div id="content"> 1 <div style="height: 500px; background: red;"></div> </div> <div id="empty"> </div> <div id="footer"><span> </span></div> </div></div></div> </body> </html>
-
пока работает только первый вариант из поста ?7 но работает для одного дива. источник http://webtest.chebykin.ru/articles/footer/ как сделать, чтобы работало для двух - пока неясно. подскажите, может вообще не в ту сторону смотрю и этот метод не подходит?
-
2yopopt Да, согласен, этот код мало приспособлен. Чтобы в этом убедиться стоит всего лишь добавить в .content <div style="height: 500px;"></div> Подвал становится не внизу страницы.
-
2scrum к html нежелательно. с шириной потом не пооперируешь
-
почти, но не то. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="description" content="description" /> <meta name="keywords" content="keywords" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title> mens </title> <style type="text/css"> *{margin:0; padding:0;} html{height:100%;} body{height:100%; position: relative;} #content_table{height:100%; width:100%; background: red;} #content_table td {vertical-align: top; padding-bottom: 400px;} .one{background: url(test/test1.gif) repeat-y 0 0; width:26px;} .two{background: url(test/test2.gif) repeat-y 100% 0;width:26px;} .podval { position: absolute; left: 0; bottom: 0; background: green; height: 114px; width: 100%; } </style> </head> <body> <table id="content_table" cellpadding="0" cellspacing="0"> <tr> <td class="one"></td> <td>контент</td> <td class="two"></td> </tr> </table> <div class="podval"></div> </body> </html> смотри, что с подвалом происходит.
-
для такого доктайпа, по-моему, не работает.
-
Давайте вообще отбросим футер, я его привел для наглядности. Оставим только одно - две фоновые картинки, которые вертикально повторяются на всю высоту окна браузера. Одна картинка слева, вторая справа. div.one {height 100%} div.two {height: 100%} Вот так не работает. И похоже задать высоту диву 100% при таком доктайпе (см. выше) невозможно. Для одного дива работает прекрасно следующее * {margin: 0; padding: 0;} html, body {height: 100%;} div.one { height: auto !important; height: 100%; min-height: 100%; background: url('image-fixed-width.gif') left top repeat-y; } А вот такая конструкция уже не работает * {margin: 0; padding: 0;} html, body {height: 100%} div.one { height: 100%; background: url('image1.gif') left top repeat-y; } div.two { height: auto !important; height: 100%; min-height: 100%; background: url('image2.gif') right top repeat-y; } Ищу другое решение. Может как-то на таблицах можно сделать? нет.
-
по-моему, задачу я описал понятно. ключевые слова: подвал внизу, два дива с фоном на всю высоту окна браузера. извините, но то, что приводите вы, в качестве примера, к теме никак не относится.
-
извините, может я неправильно объяснил? Надо чтобы подвал был внизу, - это я знаю как реализовать. Не получается два фоновых изображения повторить на всю высоту окна браузера. А вышеприведенный код никак не помог.
-
постановка задачи следующая: есть такой макет. необходимо реализовать для доктайпа quot;-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> чтобы div.one и div.two растягивались на всю высоту окна браузера. Буду благодарен за любую идею по реализации. Совершенно не имеет различия таблицами или дивами. Главное, чтобы работало.
-
странно, но добавление вот такой функции function ie_bug() { document.getElementById('podval').style.background = "#fff"; } все исправило. кто-нибудь знает объяснение?
-
помогите решить проблему HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="description" content="description" /> <meta name="keywords" content="keywords" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title> JM - Job Market </title> <style type="text/css"> * { margin:0; padding:0; } html {height: 100%;} body { position: relative; height: auto !important; height: 100%; min-height: 100%; } .podval { position: absolute; bottom: 0; left: 0; height: 100px; background: red; width: 100%; } .hidden_content { display: none; padding: 100px; background: green; } .light { width: 250px; height: 800px; background: yellow; } </style> <script type="text/javascript"> <!-- function list(obj) { if(document.getElementById(obj).style.display == "block"){ document.getElementById(obj).style.display = "none"; }else{ document.getElementById(obj).style.display = "block"; } } --> </script> </head> <body> <div><a href="#" onclick="list('r1');return false;">самое интересное в сообществах</a></div> <div id="r1" class="hidden_content"> <div class="light">111111 </div> </div> <div class="podval">111</div> </body> </html> при нажатии на ссылку в ие красный блок продолжает оставаться на месте, хотя размер body уже изменился. подскажите, пожалуйста, как решить проблему.
-
точно.. ответ как всегда лежал на поверхности
-
доктайп хтмл 1,0 транситионал задача. заставить три дива растягиваться на 100% по высоте окна. внутри них четвертый див с минимальной высотой 500px; хотелось бы, чтобы когда текста было много (т.е. суммарно больше высоты в 500px) one, two и three "тянулись" вниз.. CSS * {margin: 0; padding: 0;} html, body {height: 100%;} .one {height: 100%; background: red url('image.gif') top repeat-x;} .two {height: 100%; background: green url('image2.gif') bottom repeat-x;} .three {height: 100%; background: #fff; margin: 0 200px;} .text {min-height: 500px; height: auto; //height: 500px;} HTML <div class="one"> <div class="two"> <div class="three"> <div class="text">текст</div> </div> </div> </div> поиск не помог.. целый день колдую, ничего толкового не получается.