mishka
-
Posts
2,118 -
Joined
-
Last visited
-
Days Won
11
Content Type
Profiles
Forums
Calendar
Store
Everything posted by mishka
-
если такой класс всретится не только в хедере но и в контенте и при этом эти блоки будут похожи по логике но разны по оформлению то #header .main #content .main если есть эти блоки и в контенте и в хедере и они одинаковы то .main если только в хедере то .main потому что, а вдруг в дальнейшем захотите и в контент перенести
-
http://psywalker.ru/Forum/Column/main6.html Если ты это считаешь сложным - то готовся к еще большим трудностям На самом деле это только сразу сложным кажется. Я несоветую делать это таблицей. Таблицам табличное, или если действительно решение дивами будет слишком сложным, а таблицей можна сделать проще, то тогда можна и таблицей.
-
незнаю что там у вас за ситуация, но <p> это абзац, и его желательно использовать как раз для абзаца. А класс на абзаце - вызывает подозрение в правильности верстки. При нормальном подходе абзацам задают только верхний-нижний маргин. И то не через класс на нем же, а через родителя.
-
Дык я же сам подсказал тебе решение... Но признаю что я поленился так сделать, а ты не Все это окончательный вариант, обжалованию неподлежит
-
если уже пишите стили в хтмл, то пишите так: <body style="margin:0 auto;"> ТС задумайся над этим: неповеришь, но блок 100% отсчитывает от родителя!!! А не от дочернего елемента.
-
у боди по умолчанию есть margin, обнули их. Ты ненаходишь эту запись странной? Почему не так? width:100%;
-
http://www.kelvinluck.com/assets/jquery/jS...ScrollPane.html там есть Examples и куча ссылок под ним с названием скролбаров.
-
нее.. минимальную ширину ставляю конено. Но минимальную высоту - нет ну блин... я наверное плохо свои мысли высказываю, потому что ты меня непонимаешь.
-
прочти еще раз мое предыдущее сообщение, я его подредактировал
-
ну ты же поставил минимальную ширину, все поправилось. Проверяй всегда - делай ширину окна так чтобы появился горизонтальный скролл. Двигай скролл вправо до упора, и смотри на бг блоков. Бывает обрезается бг, если на боди минимальную ширину не поставить. Вот убери ее в этом примере и проверь - увидишь Избавится от блока враппер можна и в моем примере, а минимальную высоту ставить на боди... ну так как ты и делал. Но я не поклонник такого, даже незнаю почему. привык с боди по минимальному работать. Ну тоесть бг, фонт, колор. Ну и если надо то высоту
-
Ответный удар будет не от туда откуда ждешь: Сделай окно браузера маленьким и посмотри! Куда подевался бг, куда подевался текст футера? Слишком много релейтивов. Запомни чем больше релейтивов тем нестабильнее верстка, это особо проявляется на сложных страницах с кучей мелких елементов. Поэтому избегай по возможности. Еще и експрешн прилепил.. Ну ты даешь
-
<!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> <title>Footer at bottom</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- html,body{ height:100%; } body{ margin:0; background:url(bg.gif) repeat-x; } #wrapper{ min-height:100%; height:auto !important; height:100%; width:900px; margin:0 auto; background:#f0f; } #wrapper .wrap{ width:100%; padding:0 0 100px; overflow:hidden; } #footer{ height:100px; margin:-100px 0 0; position:relative; background:url(bg.gif) repeat-x 0 100%; } #footer .wrap{ width:900px; margin:0 auto; height:100%; background:#ff0; overflow:hidden; } --> </style> </head> <body> <div id="wrapper"> <div class="wrap"> <p>Lorem ipsum dolor sit amet consectetuer nec et urna at rhoncus. Vestibulum Nunc a semper magna porta leo vitae orci Phasellus nibh. Sed semper dolor Aenean feugiat et hac In Morbi faucibus enim. Adipiscing et tincidunt Nam cursus malesuada ac dolor ut laoreet et. Ornare at velit magnis lacus augue tincidunt suscipit vitae volutpat est. In justo Curabitur condimentum.</p> <p>Pretium pretium vel turpis mi turpis nisl ac tincidunt Pellentesque quis. Adipiscing faucibus In eu Cras vitae dolor eget tempor at netus. Urna wisi consequat Phasellus nibh laoreet Nullam Nunc nibh fames tincidunt. Sapien tempus et et Vestibulum justo cursus lorem mauris tellus Maecenas. Pellentesque et Pellentesque lobortis ligula Curabitur mauris a sit Nulla vel. Phasellus dis pellentesque morbi mauris lobortis Maecenas iaculis quis.</p> <p>Nulla ut turpis velit vel pellentesque Vestibulum nisl lorem fringilla lacus. Vestibulum enim justo malesuada Sed dignissim orci faucibus ac laoreet et. Nibh pellentesque velit vel Phasellus leo massa nunc enim nec lacus. Eu augue risus sagittis lacus semper cursus lacinia Nunc adipiscing Vestibulum. Ut Sed est laoreet sem platea netus non fermentum libero et. </p> <p>Vitae orci pretium auctor sapien est facilisi Nam sapien Vivamus habitasse. Sem interdum Pellentesque sit justo Curabitur pellentesque lacus Vivamus ut Nam. Auctor dui Morbi hendrerit feugiat metus pretium urna tincidunt tellus massa. Ac sagittis feugiat Aenean sed et turpis mi interdum leo at. Senectus tortor cursus in condimentum Fusce Donec venenatis malesuada Sed ac. Nullam consequat magna enim cursus volutpat eget laoreet.</p> </div> </div> <div id="footer"> <div class="wrap"> footer </div> </div> </body> </html> На самом деле неозадачил. Это несложно. Просто изза нехватки времени хотел навскидку ответить - неполучилось. В этом примере есть ограничение - высота футера фиксированна. Высота нижнего градиента ограничивается высотой футера
-
а на хтмл и на боди бекграундами никак не разбросать?
-
http://www.psywalker.ru/Forum/Column_height/main4.html - все хорошо, минус только в том что невозможно делать блоки с круглыми углами. Да и всеже осторожным надо быть с таким подходом. Как по мне так 4й ( http://www.getincss.ru/2009/07/11/4-sposob...nakovoj-vysoty/ ) способ надежнее. http://psywalker.ru/Forum/Column_height/main2.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> <title>two columns</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{ margin:0; } #wrapper{ position:relative; overflow:hidden; height:1%; } #sidebar{ width:25%; float:left; position:relative; z-index:1; } .back-sidebar{ background:#ff0076; width:25%; height:9999em; position:absolute; top:0; left:0; } #content{ overflow:hidden; height:1%; position:relative; z-index:1; } .back-content{ background:#ffb700; position:absolute; top:0; left:25%; width:75%; height:9999em; } </style> </head> <body> <div id="wrapper"> <div id="sidebar"> <p>Lorem ipsum dolor sit amet consectetuer nunc vel id metus dolor. Suspendisse sem malesuada lacus vel Duis tincidunt pede Curabitur vel aliquet. Vestibulum pellentesque sagittis urna.</p> </div> <div class="back-sidebar"></div> <div id="content"> <p>Lorem ipsum dolor sit amet consectetuer urna magnis aliquam at porttitor. Tincidunt velit et eget velit et dolor ante convallis sem malesuada. Nonummy nascetur orci velit congue metus.</p> <p>Auctor tortor Nulla enim netus Sed lacus adipiscing Quisque lacus gravida. Phasellus mus Vivamus ipsum.</p> <p>Semper Curabitur massa est Vestibulum morbi Curabitur pellentesque et Curabitur nibh. Aliquam augue eget sit ligula laoreet.</p> <p>Accumsan risus ipsum elit venenatis hac Quisque Nam Nam Fusce.</p> <p>Penatibus Pellentesque Nullam pretium congue Curabitur et felis felis felis Vestibulum. A eros cursus tempus mauris Sed.</p> <p>Nunc vel augue sit volutpat in Nullam dui risus est at. </p> <p>Vestibulum ut convallis non quis sem a congue auctor sem ipsum. Tincidunt eu laoreet Morbi Praesent laoreet fringilla Donec tortor nunc vel. </p> <p>Pretium nibh ut nunc nec adipiscing quis augue vitae feugiat eros. Aliquam wisi id Nullam adipiscing id ipsum metus ut pretium Vivamus. Neque pellentesque at.</p> <p>Pellentesque eros consequat vitae dignissim consectetuer volutpat libero laoreet Maecenas nulla. Phasellus tincidunt.</p> </div> <div class="back-content"></div> </div> </body> </html>
-
короче я завис.... все те 4 способа знаю... повторятся нехотелось. Поэтому я смог решить только с джс... И спасибо Great Rash, - при написании джс консультировался у него как выловить класс регулярным выражением. <!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> <title>sameHeight</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- body{ margin:0; font:16px/18px Verdana,Tahoma,sans-serif; } .holder{ width:100%; overflow:hidden; margin:10px 0 0; } .sidebar{ float:left; width:200px; padding:0 10px; background:#ccc; _margin:0 -3px 0 0; } .content{ overflow:hidden; padding:0 10px; background:#eee; _zoom:1; } p{ margin:10px 0; } --> </style> <script type="text/javascript"> <!-- function initScript(){ startSameHeight(); window.onresize=function(){startSameHeight()}; } function startSameHeight(){ sameHeight({ tagName:'div', tagClass:'block' }); sameHeight({ tagName:'div', tagClass:'block2' }); } function sameHeight(_options){ var _tagName=_options.tagName; var _tagClass=_options.tagClass; var maxHeight=0; var _elements=document.getElementsByTagName(_tagName) var re=eval('/'+_tagClass+'\\'+'b/'); if(_elements){ for(var i=0;i<_elements.length;i++){ if(re.test(_elements[i].className)){ _elements[i].style.height='auto'; if(_elements[i].offsetHeight>=maxHeight){ maxHeight=_elements[i].offsetHeight; } } } for(var i=0;i<_elements.length;i++){ if(re.test(_elements[i].className)){ _elements[i].style.height=maxHeight+'px'; } } } } if(window.addEventListener){ window.addEventListener("load",initScript,false); }else if(window.attachEvent){ window.attachEvent("onload",initScript); } //--> </script> </head> <body> <div class="holder"> <div class="sidebar block"> <p>sidebar</p> </div> <div class="content block"> <p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p> <p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p> </div> </div> <div class="holder"> <div class="sidebar block2"> <p>sidebar</p> </div> <div class="content block2"> <p>Lorem ipsum dolor sit amet consectetuer Curabitur at sagittis felis lacinia. </p> <p>Nibh tellus semper In semper sapien rutrum mus est dolor aliquet. Tellus vitae nibh faucibus augue Curabitur vestibulum amet elit.</p> <p>Sed non tellus Nunc Morbi tempus Curabitur tempus dui nibh a. Pellentesque Nullam semper vitae volutpat ut adipiscing lobortis.</p> <p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p> </div> </div> </body> </html> Если делать без джс, то лучше чем способ предложенный Максом ( http://psywalker.ru/Forum/Column_height/main2.html ) немогу придумать...
-
Я только что в ие6 сделал - все ок
-
убери с right релейтив, а контейнеру пропиши либо 100% ширины либо 1% высоты, либо зуум
-
способ который там представлен с джс, он не совсем коректный. Там джс выполнится только при загрузке страницы. Тоесть один раз, значит для резины негодится. Потому что если окно браузера уменьшить то колонки станут ужЕ, значит должны стать выше, но тот джс высоту не пересчитает, так как выполняется один раз только при загрузке страницы. Там надо добавить вызов функции еще и при ресайзе окна.
-
способ с дисплей тейбл нормальный способ, а для ие6-7 експрешн написать можна
-
Для поисковика наверное ну очень интересно будет этот булет в роли имги... Ставь на бг какраз таки в целях сео.
-
я тоже такой пример сюда хотел привести. Но непривел, потому что думал что ТС сам додумается до этого. Паддинг и маргин нижние лучше в емах задавать. Чтобы тоже увеличивались при увеличении шрифта. неповеришь, но один раз нашел такой сайт где этот способ неработал так как его длинна была больше чем 9999px (там величина маргина и паддинга были -9999px и 9999px соответственно) И у меня такой вопрос - какое максимальное число можна ставить для маргинов-паддингов?
-
Если разберется в этом и сделает и двух и пятиколоночный макет самостоятельно, то это уже будет неплохо.
-
Помощь зала http://matthewjamestaylor.com/blog/equal-h...er-css-no-hacks
-
ксожалению не все... Но и того что можна настроить списочек огого Ну дык это безспорно