Jump to content

Red Planet

User
 View Profile  See their activity

  • Posts

    101

  • Joined

  • Last visited

 Content Type 

Everything posted by Red Planet

  1. Red Planet
    MC WEST, верно, но тренироваться буде уже на других макетах.
  2. Red Planet
    Всем спасибо за комментарии. Это narod.ru виноват. А нужно ли делать лишнюю обертку, если и без нее обойтись можно? Из каких соображений делать? Так я же и использовал в стиле для IE 6 скрипт, но похоже, что надо еще подумать.
  3. Red Planet
    Добрый вечер. Переделал свой первый макет в резину. Использовал немного тегов HTML 5. Проверял на тех же браузерах, на тех же экранах. Прошу оценить. Из проблем осталось: Ссылка в тексте вверху ставится куда угодно, но только не в конце предложения. Честно сказать, совсем не понимаю причины данной проблемы. На Internet Explorer 6 (а может на него заглушку поставить и все дела, надоел он уже своими причудами) при сжатии окна баннер и текст с картинками, что ниже баннера улетает вниз. Изменял отступы, минимальную ширину, но не пойму, в чем дело. Макет Верстка
  4. Red Planet
    psywalker, понял. Выходит, что между <head> и </head>.
  5. Red Planet
    Добрый вечер. Вопрос в названии темы. Встречал и до тега <title> и после и еще много где. А где правильно-то или не так важно это?
  6. Red Planet
    Какой же <strong>, когда мне нежирный нужен? Не понял.
  7. Red Planet
    sigma77, попробую, но в данном макете можно поставить footer'у побольше margin-top и не делать никакую эмуляцию. Почему я тему-то начал. Получилось у меня, что колонка с контентом меньше, чем боковые по высоте, а боковые эти со свойством float. Вот и открыл для себя то, что футер-то начинается там, где заканчивается блок с контентом и плевать ему на то, что левая и правая колонка еще не закончилась (вероятно потому что у них это самое свойство float). Еще есть вопрос по этому же макету. Есть там заголовки некоторые (салатовый, например), у которых шрифт нежирный. Но ведь теги <h1> - <h6> изначально сделаны жирными. В таких случаях не используют теги заголовков или же как-то делают их нежирными?
  8. Red Planet
    Здравствуйте, при эмуляции одинаковой высоты можно как-либо сделать границы центрального блока невидимыми? Верстаю макет, решил одинаковую высоту сэмулировать (А может и не нужно было?). Поставить синий цвет тоже не могу, так как градиент все же дает о себе знать, ставил border-left: hidden и border-right: hidden, но тогда колонки разбегаются по сторонам.
  9. Red Planet
    psywalker, теперь ясно все. Спасибо.
  10. Red Planet
    Хотя стоп. Читал, что новые теги <header>, <footer> индексируются поисковыми системами. Выходит, они индексируются, а названия классов нет?
  11. Red Planet
    Vlad, спасибо.
  12. Red Planet
    Поисковая.
  13. Red Planet
    Здравствуйте. Влияют ли имена классов и идентификаторов на оптимизацию сайта или же мы только для удобства пишем #content, #header и т. п.?
  14. Red Planet
    Еще вопрос. Верстаю блок с контентом, правую и левую колонку. Логотип и верхние панели (меню и белая) различаются по высоте. При установке отступа margin-top для контента и боковых колонок каждый браузер по своему решает: один от логотипа все отступы считает, так как логотип ниже белой панели заканчивается, другой считает левой колонке от логотипа, правой - от белой панели, а нужно, чтобы для всех от одного считало. Сделал пустой блок (называется for-margin), чтобы все ровно было. Правильно так делать? Смотреть верстку
  15. Red Planet
    psywalker, спасибо, проблема решена. Но появился более общий вопрос. В коде указано и для строки меню и для белой области float: right. На макете они оба прижаты к правой стороне. Но! Ведь если указано float: right для двоих, подряд идущих, то они должны располагаться в линию, а не друг за другом. Не располагаются они в линию только лишь потому, что блок wrapper имеет фиксированную ширину. Не является ли безграмотным решение поставить float: right для двоих, подряд идущих?
  16. Red Planet
    В Internet Explorer 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" lang="ru" xml:lang="ru"> <head> <title>Bluish</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="my-style.css" rel="stylesheet" type="text/css" media="all" /> <!--[if lt IE 7]> <script defer type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></script> <link href="my-style-ie.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div id="wrapper"> <ul class="menu"> <li><a href="#" class="home"></a></li> <li><a href="#" class="about"></a></li> <li><a href="#" class="what"></a></li> <li><a href="#" class="support"></a></li> <li><a href="#" class="privecy"></a></li> <li><a href="#" class="blog"></a></li> <li><a href="#" class="contact"></a></li> </ul> <div class="top-white-bar"> A Totaly Different Age With <span class="red">100%</span> Safety For Future </div> <a href="#" title="Bluish"><img src="images/logo.png" alt="Bluish - varius ullamcorper" /></a> <div id="left-sdbr"> </div> <!--left-sdbr --> <div id="right-sdbr"> </div> <!--right-sdbr --> <div id="content"> <img src="images/pictures.png" alt="Gallery" /> </div> <!--content --> </div> <!-- wrapper --> </body> </html> CSS. body { background: url('images/bg-gradient.png') repeat-x #075d79; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #b3d8e4; } * { margin: 0; padding: 0; } ul { list-style: none; } img { border: none; } #wrapper { width: 942px; margin: 30px auto 0; } ul.menu, div.top-white-bar { float: right; } ul.menu li { float: left; } ul.menu li a { display: block; height: 37px; background-position: left top; } ul.menu li a:hover { background-position: left 37px; } a.home { background: url('images/menu/home.png'); width: 83px; } a.about { background: url('images/menu/about.png'); width: 90px; } a.what { background: url('images/menu/what.png'); width: 161px; } a.support { background: url('images/menu/support.png'); width: 85px; } a.privecy { background: url('images/menu/privecy.png'); width: 119px; } a.blog { background: url('images/menu/blog.png'); width: 65px; } a.contact { background: url('images/menu/contact.png'); width: 92px; } div.top-white-bar { background: url('images/white-bar.png'); width: 675px; height: 23px; padding: 7px 0 0 20px; margin-top: 5px; font-weight: bold; color: #2b2b2b; } div.top-white-bar span.red { color: #bf0505; } #left-sdbr { float: left; width: 150px; } #right-sdbr { float: right; width: 150px; } #content { margin: 0 150px 0; }
  17. Red Planet
    Есть вопрос по второму макету. Там спрайты используются (сделаю без выпадающего меню, пусть будут просто спрайты). Насколько я понял, ссылка должна отображаться как блочный элемент, чтобы работала смена фона. Но у меня-то список в строчку. Код следующий, но проблема в том, что значения table-cell для свойства display седьмой и более ранние Intenet Explorer'ы не поддерживают. Правильным ли пошел путем для организации спрайтов и что сделать, чтобы в строку ссылки были в IE? 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" lang="ru" xml:lang="ru"> <head> <title>Blue and Green</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="my-style.css" rel="stylesheet" type="text/css" media="all" /> <!--[if lt IE 7]> <script defer type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></script> <link href="my-style-ie.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div id="wrapper"> <ul class="menu"> <li><a href="#" class="sprite1"></a></li> <li><a href="#" class="sprite2"></a></li> </ul> <a href="#" title="Bluish"><img src="images/logo.png" class="logo" alt="Bluish - varius ullamcorper" /></a> </div> <!-- wrapper --> <div id="footer"> </div> <!-- footer --> </body> </html> CSS. body { background: url('images/bg.png') repeat-x #075d79; } * { margin: 0; padding: 0; } ul { list-style: none; } img { border: none; } #wrapper { width: 942px; margin: 0 auto; } img.logo, ul.menu { margin-top: 30px; } ul.menu { float: right; } ul.menu li { display: table-cell; } a.sprite1 { display: block; background: url('images/menu/home.gif') left top; width: 82px; height: 37px; } a.sprite1:hover { background-position: left 37px; }
  18. Red Planet
    Если будет совсем невмоготу, то возьмусь за другой, а к этому вернусь потом.
  19. Red Planet
    Нет, не будет. Я учел ваши замечания, многое понял, чему-то научился. Но свет клином не сошелся именно на этом макете, хочу что-нибудь новое сделать. Я обновил ссылку в шапке, можете посмотреть. Проверял тех же экранах и на тех же браузерах. Недостатки: Футер не прижат к низу (слишком поздно об этом задумался, тогда уже обновленная верстка была почти сделана, учту при верстке следующего макета). Горизонтальная полоса прокрутки все таки зажевывает левый край (тоже разберусь). Буду рад комментариям. Следующий макет, за который хочу взяться. Сразу вопросы. Там pop-up'ы. Я с ними дела не имел. В какую сторону посмотреть? Как поступить с футером? Высота его слишком большая, прижимать как-то, мне кажется, неправильно. Пустить в общий поток?
  20. Red Planet
    Добрый вечер. Недавно открыл для себя то, что можно применять одновременно и class и id. <div id="x" class="y"> Привет, мир! </div> <!-- wrapper --> Задаем одни свойства через class, другие через id. Код работает. Хорошо ли так делать или лучше не надо?
  21. Red Planet
    psywalker, верстку фиксированной сделал. Если можно чем-то исправить ситуацию, подскажите. Не буду размещать пока что, просто прикреплю. Можете заодно и вцелом посмотреть. Верстка
  22. Red Planet
    Почти завершил, но только что обнаружил проблему: при уменьшении размеров окна по горизонтали левый край зажевывается (на скриншоте показано, левую часть картинки мы так и не увидим). В чем причина и как устранить?
  23. Red Planet
    И этот метод неуниверсален. Он работает только тогда, когда текста много. А вот, когда его мало, начинаются сюрпризы. Пока что не нашел ничего лучше кроме создания блоков-оберток и задания им фиксированной высоты. div.div-pic-and-text { height: 150px; } h3 { font-size: 14px; font-weight: bold; padding: 0 0 10px; } img.pic-and-text { padding-right: 20px; float: left; } <div class="div-pic-and-text"> <img src="images/pic_01.jpg" alt="Apple iPhone" class="pic-and-text" /> <h3>Sed mi ipsum, gravida eget</h3> <p>Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus <strong><a href="#">orci luctus et.</a></strong></p> </div> <!-- div-pic-and-text --> <div class="div-pic-and-text"> <img src="images/pic_02.jpg" alt="Table" class="pic-and-text" /> <h3>Sed mi ipsum, gravida eget</h3> <p>Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus <strong><a href="#">orci luctus et.</a></strong></p> </div> <!-- div-pic-and-text -->
  24. Red Planet
    psywalker, чтобы обтекал и в месте, где я нарисовал знак вопроса. Если убрать overflow: hidden, то тогда обтекает.
  25. Red Planet
    psywalker, но тогда текст ведет себя следующим образом, если его много. Почему? #content { margin-right: 290px; padding: 0 25px; border-right: #dbd4c6 1px solid; overflow: hidden; } h3 { font-size: 14px; font-weight: bold; padding: 0 0 10px; } img.pic-and-text { padding-right: 20px; float: left; } p.content-text { overflow: hidden; } Все это находится в блоке "content". <img src="images/pic_01.jpg" alt="Apple iPhone" class="pic-and-text" /> <h3>Sed mi ipsum, gravida eget</h3> <p class="content-text">Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus orci luctus et. Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus orci luctus et. Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus orci luctus et. </p>
×
×
  • 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

  I accept