Jump to content

mishka

Expert
  • Posts

    2,118
  • Joined

  • Last visited

  • Days Won

    11

Everything posted by mishka

  1. Вы что ничего незнаете про наследование стилей? если вы зададите размер шрифта на body 10px, то и во всех ul и p, и div... будет размер шрифта 10px. (Заголовки это другая история). А также почитайте про line-height И в вашем случае лучше задавать размер шрифта и высоту строки на ul Добавьте ul.test_ul{ font-size:10px; line-height:10px; } ну а с ссылки и с li уберите размер шрифта
  2. В ие6-7 по умолчанию есть эта полоса прокрутки, так уж они устроенны. Я дал код который убирает ее. Вот дальше сам...
  3. Недолжны. Если только они не флотнутые или блочные.
  4. А это как повезет . Если psywalker берется за решение вопроса то обычно подтягиваются и другие , а это значит что решение почти наверняка будет найдено
  5. <!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>test60</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- html,body{ margin:0; overflow:hidden; height:100%; } #wrapper{ height:100%; width:100%; overflow:auto; } #content{ width:800px; margin:0 auto; overflow:hidden; } --> </style> </head> <body> <div id="wrapper"> <div id="content"> <p>Lorem ipsum dolor sit amet consectetuer massa Suspendisse at consequat condimentum. Congue Pellentesque id molestie tortor tortor vitae dolor quis id.</p> <p>Congue auctor justo quis sit ut sem lacus et nonummy eu. Eros ac urna metus vitae massa.</p> <p>Magna feugiat lacinia condimentum feugiat et Nulla non condimentum ut nulla. Vitae Phasellus faucibus montes sem neque.</p> <p>Nibh justo adipiscing eros id natoque gravida est est nibh Quisque. Lorem Ut.</p> <p>Convallis urna ut Vestibulum Praesent turpis nibh semper interdum iaculis Sed. Convallis augue et tortor Quisque sagittis dolor at adipiscing faucibus turpis. Ut quis Duis augue.</p> </div> </div> </body> </html>
  6. Хватит меня хвалить. Реально кто проанализирует полностью всю тему, тот скажет(и будет прав на все 100%) что это ты сделал основную часть работы. Процентов так на 95!!! А моя заслуга маленькая. Я ток в конце подправил чуток!
  7. Для #wrapper релейтив нужен чтобы оверфлов хидден работал, для того чтобы внутренние блоки которые имеют релейтив не вылезли. Если его убрать то появится горизонтальная полоса прокрутки от блока .right. В ие так точно появится
  8. непонял вопрос. На самом деле будет здорово если сделать чтобы центральная часть растягивала по высоте боковые части
  9. Вот конечный результат, с учетом правильной последовательности блоков <!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>Block</title> <style type="text/css"> body{ margin:0; min-width:800px; _width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto"); } #wrapper{ width:100%; overflow:hidden; position:relative; } .wrap{ width:800px; margin:0 auto; position:relative; background:#00f; } .left, .right{ width:200px; background:#f00; position:absolute; left:-200px; top:0; } .right{ right:-200px; left:auto; } .center{ overflow:hidden; _zoom:1; } </style> </head> <body> <div id="wrapper"> <div class="wrap"> <div class="center"> <p>Lorem ipsum dolor sit amet consectetuer Curabitur laoreet Aenean tellus et. Nunc justo ut consequat et Cum amet Maecenas laoreet Nulla felis. </p> <p>In Curabitur id condimentum id Integer dictumst ipsum nunc dictum eget. Nulla et magnis justo justo tincidunt gravida justo Curabitur turpis sagittis. Pellentesque.</p> <p>At eu quis ipsum elit Sed pede nec vestibulum morbi Cum. Et fringilla rhoncus pretium id enim lobortis lacus ut leo nunc. Vivamus Donec elit nunc scelerisque.</p> </div> <div class="left"> <p>Lorem ipsum dolor sit amet consectetuer tempus nibh dolor interdum.</p> </div> <div class="right"> <p>Lorem ipsum dolor sit amet consectetuer magna mauris justo auctor pede. Laoreet Cum lacinia wisi Aliquam nibh id.</p> </div> </div> </div> </body> </html>
  10. Да я то что... Всю работу сделал ты я ток чуток подправил ненадо! так как ширина есть 100% а для .center - можна
  11. <!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>Block</title> <style type="text/css"> body{ margin:0; min-width:800px; _width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto"); } #wrapper{ width:100%; overflow:hidden; position:relative; } .wrap{ width:800px; margin:0 auto; position:relative; background:#00f; } .left, .right{ width:200px; background:#f00; position:absolute; left:-200px; top:0; } .right{ right:-200px; left:auto; } .center{ overflow:hidden; } </style> </head> <body> <div id="wrapper"> <div class="wrap"> <div class="left"> <p>Lorem ipsum dolor sit amet consectetuer tempus nibh dolor interdum.</p> </div> <div class="right"> <p>Lorem ipsum dolor sit amet consectetuer magna mauris justo auctor pede. Laoreet Cum lacinia wisi Aliquam nibh id.</p> </div> <div class="center"> <p>Lorem ipsum dolor sit amet consectetuer Curabitur laoreet Aenean tellus et. Nunc justo ut consequat et Cum amet Maecenas laoreet Nulla felis. </p> <p>In Curabitur id condimentum id Integer dictumst ipsum nunc dictum eget. Nulla et magnis justo justo tincidunt gravida justo Curabitur turpis sagittis. Pellentesque.</p> <p>At eu quis ipsum elit Sed pede nec vestibulum morbi Cum. Et fringilla rhoncus pretium id enim lobortis lacus ut leo nunc. Vivamus Donec elit nunc scelerisque.</p> </div> </div> </div> </body> </html> Еще раз повторюсь - я делаю не на 1000, а меньше так как мне так удобнее тестить
  12. Непонял, так резиновые бока иль всеже фиксированные? Как тема называется?
  13. Ачем ненравится тот вариант который Great Rash уже предложил? Это немного переделанная работа от 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" xml:lang="en" lang="en"> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> body{ margin:0; min-width:800px; _width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto"); } .left, .right{ float:left; width:50%; height:100px; background:#f00; margin:0 -50% 0 0; overflow:hidden; } .right{ float:right; margin:0 0 0 -50%; } .left-inner{ margin:0 400px 0 0; } .right-inner{ margin:0 0 0 400px; } .center{ width:800px; overflow:hidden; position:relative; margin:0 auto; background:#ff0; } </style> </head> <body> <div class="left"> <div class="left-inner">left box</div> </div> <div class="right"> <div class="right-inner">right box</div> </div> <div class="center"> <p>Lorem ipsum dolor sit amet consectetuer malesuada pretium Maecenas Nunc elit. Quisque Morbi malesuada quis mi Phasellus vestibulum magna Mauris penatibus molestie. Suspendisse vel.</p> <p>Vivamus mollis lacinia ut Vivamus convallis nunc Nam Vestibulum vel ante. Elit nisl et quam enim a neque ante at neque netus. Porttitor.</p> <p>Lorem lobortis augue eros senectus id penatibus quis Phasellus semper ornare. Scelerisque nibh et consectetuer nec natoque Aliquam.</p> </div> </body> </html>
  14. как вам такой вариант? Только есть минус - правый и левый блок не растягивается по высоте в зависимости от высоты центрального. Делал ширину 800 так как у меня моник 17" и мне плохо тестить на 1000 <!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"> body{ margin:0; min-width:800px; } .left, .right{ float:left; width:50%; height:100px; background:#f00; margin:0 -50% 0 0; } .right{ float:right; margin:0 0 0 -50%; } .center{ width:800px; overflow:hidden; position:relative; margin:0 auto; background:#ff0; } </style> </head> <body> <div class="left"></div> <div class="right"></div> <div class="center"> <p>Lorem ipsum dolor sit amet consectetuer malesuada pretium Maecenas Nunc elit. Quisque Morbi malesuada quis mi Phasellus vestibulum magna Mauris penatibus molestie. Suspendisse vel.</p> <p>Vivamus mollis lacinia ut Vivamus convallis nunc Nam Vestibulum vel ante. Elit nisl et quam enim a neque ante at neque netus. Porttitor.</p> <p>Lorem lobortis augue eros senectus id penatibus quis Phasellus semper ornare. Scelerisque nibh et consectetuer nec natoque Aliquam.</p> </div> </body> </html>
  15. Теперь сделай окно браузера узким и посмотри что с синим блоком творится
  16. Переделайте меню нормально. Чтобы валидно было. Если вы его просто скопипастили откудато, и непонимаете как его правильно сделать, то попробуйте разобратся. Главное поверьте что это совсем несложно сделать кросбраузерное валидное выпадающее меню. По поводу того что у вас нет строки 98. В браузерах (фф, опера, хром...) - заходите на сайт, ждете пока он загрузится, нажимаете ctrl+u, и смотрите исходный html-код. Еще и после этого скажете что у вас нет строки 98? Ето хостинг добавляет. За бесплатное приходится платить. Но про это надо было сразу предупредить, тогда не возникло бы таких непоняток. Оценка порезки - 3 за старания. Сейчас вы с этим будете спорить. Но через время, когда наберетесь опыта, все сами поймете. Дизайн - простой. В северных краях может лося и считают благородным животным, но на вашей картинке он выглядит просто лосем. Его бы както получше сделать.
  17. Валидатор выдает все ошибки которые есть! Это вы нехотите признать что не совсем понимаете как правильно надо делать! Проверьте еще раз внимательнее хотябы данный пример который я цитировал, может всеже увидите что тут банально неправильно закрыты теги как раз таки на 52 линии ... А если по другому неработает - так это не говорит что вы все правильно сделали, а не совсем компетентные люди из W3 и разработчики браузеров неправильно сделали браузер, рекомендации и валидатор.
  18. Да я же тебе рабочий пример дал, который через классы работает. И дает высоту блокам с одинаковым классом по самому высокому из них. А в этом случае: document.getElementById("r_box").style.height = document.getElementById("box").offsetHeight; во-первых работает через айдишник. во-вторых если содержимое r_box будет выше чем box, то всеравно блоку r_box присвоется высота блока box и содержимое в блоке r_box обрежется, или же некрасиво вылезет. держи еще раз, если что не так - то говори. <!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>
  19. посмотри пример, может подойдет <!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; } .box{ float:left; width:30%; padding:0 10px; } .element{ float:left; padding:0 10px; } .holder{ width:100%; overflow:hidden; } --> </style> <script type="text/javascript"> <!-- function initScript(){ startSameHeight(); window.onresize=function(){startSameHeight()}; } function startSameHeight(){ sameHeight({ tagName:'div', tagClass:'box' }); sameHeight({ tagName:'span', tagClass:'element' }); } 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="box" style="background:#c33"> <p>Lorem ipsum dolor sit amet consectetuer sem tempus tortor hac nunc. Orci Sed dolor parturient In eget parturient sit Nullam ante elit. Non nec Nam tincidunt augue.</p> </div> <div class="box" style="background:#33c"> <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 class="box" style="background:#3c3"> <p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p> <p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p> </div> </div> <div class="holder"> <span class="element" style="background:#e31ed7"> span </span> <span class="element" style="background:#0c8eff"> span<br /><br />span </span> </div> </body> </html>
  20. Мдя, сразу смеялся, потом стало грустно, скоро буду плакать.
  21. 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"> <!-- .box, .block{ float:left; width:300px; padding:0 10px; } .element{ float:left; padding:0 10px; } --> </style> <script type="text/javascript"> <!-- function initScript(){ sameHeight({ tagName:'div', tagClass:'box' }); sameHeight({ tagName:'div', tagClass:'block' }); sameHeight({ tagName:'span', tagClass:'element' }); } 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> <!-- wrapper --> <div id="wrapper"> <div class="boxes" style="background:#ff0;height:1%;overflow:hidden;padding:0 10px"> <p>t</p> </div> <div class="box" style="background:#c33"> <p>Lorem ipsum dolor sit amet consectetuer sem tempus tortor hac nunc. Orci Sed dolor parturient In eget parturient sit Nullam ante elit. Non nec Nam tincidunt augue.</p> </div> <div class="box" style="background:#33c"> <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 class="box" style="background:#3c3"> <p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p> <p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p> </div> <div class="block" style="background:#33AF6B"> <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> <p>Maecenas est ipsum rutrum Sed elit dictumst tristique volutpat In nisl. Natoque felis Cum et parturient amet iaculis In quis lacus quis. </p> <p>Curabitur Curabitur orci wisi ut lorem urna feugiat pretium vitae consectetuer. Hendrerit Nullam eget odio in risus in.</p> </div> <div class="block" style="background:#E3A133"> <p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p> <p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p> <p>Eu id lacus eu Vestibulum egestas vitae enim id mauris ut. Sagittis lorem Curabitur tincidunt semper justo nunc auctor orci gravida adipiscing. Pulvinar sem nunc et semper dapibus.</p> </div> <span class="element" style="background:#E31ED7"> span </span> <span class="element" style="background:#0C8EFF"> span<br /><br />span </span> </div> <!-- end wrapper --> </body> </html>
  22. Во как работать надо! А вы тут развели флейм по поводу стоит ли верстать с учетом ие6. Тут человек говорит Валидатор в попу. Это вам не мыло по тазику ганять
  23. несработало результат тот же
  24. Ну спрайт пнг для ссылок Естественно не рейтинги ие6 http://dimox.name/dinamic_link_buttons_with_css/
×
×
  • 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