Jump to content

Great Rash

Expert
  • Posts

    7,974
  • Joined

  • Last visited

  • Days Won

    144

Everything posted by Great Rash

  1. Нет, в макете картинки нормальные. А у вас они ужасны. Какие-то артефакты по краям, неужели вы этого не видите? Ок, фотошоп заменил, но хоть размер шрифта под макет подогнать можно было? Статья нормальная, а меню вы сделали плохо Очень плохо засовывать разделители в <li>. Вот это я имел в виду: <ul class="hr"> <li>home</li> <li>|</li> <li>Products</li> <li>|</li> <li>Specials</li> <li>|</li> <li>Pro Tour</li> <li>|</li> <li>Club Hire</li> </ul> должно быть так: <ul class="hr"> <li>home</li> <li>Products</li> <li>Specials</li> <li>Pro Tour</li> <li>Club Hire</li> </ul> Все от незнания (или непонимания) блочной модели. Ширина блока складывается из, собственно, ширины и паддингов. У вас написано width: 435px; padding-left: 10px; padding-right: 30px;. В итоге получается что ширина блока равна не 435px, а 435 + 10 + 30 = 475px. А вы правой колонке продолжаете назначать отступ в 435px и она, естественно, съезжает вниз т.к. не помещается по ширине. Удивительно что не съезжает в остальных браузерах. Тут ИЕ вам совершенно верно все показал. Все оттого, что меню сверстано неправильно.
  2. Great Rash

    Логотип

    Как это вы так пишете? <img src="http://i030.radikal.ru/1104/de/14f2e5f220cb.jpg" width ="15%" border ="0px" vspace ="40" hspace ="230" position: fixed > Это не будет работать, потому что вы допустили как минимум 2 ошибки в этой строке.
  3. Картинки ужасны Шрифты не по макету. Меню сделано совершенно неправильно (я когда-то давно так тоже делал). Но в целом рациональное зерно есть! Верстка совсем не плохая. Для первого раза очень даже неплохо. Продолжайте учиться.
  4. Что-то не понятно как завязана прозрачная рамка и флоат между собой... То что вы нашли ответ - замечательно. Но я реально не понимаю что, в вашем понимании, есть обтекание одного блока другим... Вот возьмем ваш пример номер 1: <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> .wrap { width: 50%; margin: 0 auto; border: 1px solid; } .float { float: left; width: 150px; height: 150px; margin: 10px; background: red; } </style> </head> <body> <div class="wrap"> <div class="float"></div> <p> я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок </p> </div> </body> </html> Вот тут <p> ничего не обтекает. Обтекает только текст. Если вам надо чтобы обтекал именно блок, т.е. <p>, то надо его сделать инлайн-элементом (или, на худой конец, задать новый контекст форматирования), тогда флоат будет обтекать именно блок, а не текст как обычно.
  5. sifilis, советую к прочтению. И вообще.
  6. А вы в две строки попробуйте элементы расположить UPD: Да, оказался не прав, в Хроме пофиксили. Но в Сафари проблема осталась до сих пор. UPD2: И да, не с line-height, а с letter-spacing. Все зависит от аудитории сайта. Если это интернет-магазин по продаже, скажем, периферии для макбуков, то доля Safari будет стремиться к 100%.
  7. Не вопрос. Писать ничего не буду, так как все уже за меня написано. Всем, кто хочет понять что такое float и как должны вести себя элементы написано тут. Читайте на здоровье и к вам обязательно придет понимание того что именно вы делаете неправильно. Вместо того чтобы меня тут на "слабо" ловить лучше б показали скрин того что вам надо...
  8. Вы реально не понимаете разницу между обтеканием текстом и обтеканием блоком! Это разные вещи. Потрудитесь объяснить по-человечески что вам надо получить. Возможно лучше всего будет если вы покажете скрин того, что вам надо получить, т.к. у вас явные проблемы с терминологией.
  9. Нет не кажется, ваши скрины это подтверждают. Обтекание блоком на скринах есть только в ИЕ. Прежде чем писать советую вам самому разобраться что такое обтекание и как оно работает.
  10. Не так все просто. Вот так кроссбраузерно: <!-- HTML --> <ul> <li>inline-block</li> <li>inline-block</li> <li>inline-block</li> <li>inline-block</li> </ul> /* CSS */ ul { list-style: none; letter-spacing: -1px; line-height: 0; font-size: 0; } li { letter-spacing: normal; line-height: normal; font-size: 12px; vertical-align: top; border: 1px solid; }
  11. Обтекания не происходит не только в ИЕ6. Его нигде не происходит. Вот так все будет обтекать: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> html,body{width:100%;height:100%;padding:0px;margin:0px;} #wrapper{background:#dedede;width:100%;height:100%;} .one{margin-left:20px;width:200px;background:red;float:left;} .two{display:inline-block;width:300px;background:green;//display: inline;//zoom:1;} .three{display:inline-block;width:300px;background:yellow;//display: inline;//zoom:1;} </style> </head> <body> <div id="wrapper"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> </div> </body> </html>
  12. Есть если хотите поддерживать максимум браузеров (в том числе и старых).
  13. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > Не надо так делать! Пропишите такие стили таблице: table { border: 0; border-spacing: 0; border-collapse: collapse; } И все должно заработать.
  14. Я бы брал 300 рублей в час минимум.
  15. Great Rash

    ЧаВО

    Дефолтный текст в инпуте Проблема: Необходимо сделать так чтоб по дефолту в <input> показывался некий текст, а когда элемент получает фокус нужно чтоб текст пропадал. Решение: Использовать новый атрибут тега <input> - placeholder, который был добавлен в HTML5. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>placeholder</title> </head> <body> <form action="" method="post"> <fieldset> <input type="text" placeholder="Default value" /> </fieldset> </form> </body> </html> Это решение будет работать только в последних версиях браузеров! Кроссбраузерное решение с поддержкой старых браузеров: Если нужна поддержка старых браузеров, то наилучшим выходом будет задействовать JavaScript, используя DOM-свойство элемента <input> defaultValue. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>placeholder</title> <script type="text/javascript"> function setClear(elem) { if (elem.value == elem.defaultValue) { elem.value = ''; } } function setDefault(elem) { if (!elem.value) { elem.value = elem.defaultValue; } } </script> </head> <body> <form action="" method="post"> <fieldset> <input type="text" value="Default value" onfocus="setClear(this);" onblur="setDefault(this);" /> </fieldset> </form> </body> </html>
  16. #general{ margin:auto; background-color:#9CF; width:80%; border:5px solid #CCCCCC; overflow: hidden; //zoom: 1; }
  17. Ну что ж так безуспешно то? Покажите что у вас получилось после того как задействовали?
  18. Надо просто к изчезновению таймаут добавить, тогда чтоб начать сначала надо будет сделать очень неловкое движение
  19. Постарайтесь задействовать один очень полезный девайс - мозг
×
×
  • 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