Jump to content

NeoXidizer

User
  • Posts

    372
  • Joined

  • Last visited

  • Days Won

    5

Posts posted by NeoXidizer

  1. при просмотре на широком экране (даже 1366x768) - фигня

    в Google Chrome - полная фигня, не хватает clear:both; после логотипа

    http://s017.radikal.ru/i402/1203/b9/a505c6164695.png

    текст в меню в макете сероватого цвета, а не абсолютно белый

    иконки соц. сетей без сглаживания - видны зубцы

    к тому же их(иконки) лучше сделать спрайтом

  2. что по вашему значит "значимость"?

    Тег <code> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера <code> как моноширинный текст уменьшенного размера.

    что вам еще не ясно?

    Этот тег не предназначен для создания структуры страницы (чтобы помещать в него div и т.д.)

    а уж темболее, не нужно пытаться оптимизировать страницу под поисковые системы, путем использования определенных тегов, думая, что это сильно на что-то влияет

  3. Switch74, в HTML5 (<!DOCTYPE html>) для указания кодировки не обязательно так же указывать content-type, тобишь хватит

    <meta charset="utf-8" />

    :) а так-же нет необходимости писать в css свойствах "px", если они приравниваются к нулю, тобишь

    html,body{margin:0;padding:0;height:100%;}

    :) и не упускай возможности указать повторяющиеся свойства в перечислении классов. Финкальный код:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <style type="text/css">
    html,body{margin:0;padding:0;height:100%;}

    #body{position:relative;min-width:800px;width:100%;min-height:400px;height:100%;}
    #site,#header,#content,#footer{position:absolute;left:0;right:0;}
    #site{margin:-200px 0 0 -400px;top:50%;left:50%;width:800px;height:400px;background:#ddd;}
    #header{top:0;height:50px;background:#eee;}
    #content{top:50px;bottom:50px;background:#bbb;}
    #footer{bottom:0;height:50px;background:#eee;}
    </style>
    </head>
    <body>
    <div id="body">
    <div id="site">
    <div id="header">
    header
    </div>
    <div id="content">
    content
    </div>
    <div id="footer">
    footer
    </div>
    </div>
    </div>
    </body>
    </html>

    P.S. работет в последнем Google Chrome, Opera, Firefox, IE7-9

    • Like 1
  4. кроссбраузерно вплодь до IE6

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
    html,body,div,nav{margin:0;padding:0;}
    nav{display:block;}
    .clear{clear:both;}
    .main{margin:0 auto;width:1002px;height:800px;background:#000;}
    nav.menu{width:100%;border-bottom:2px solid #96682E;}
    nav.menu a{display:inline-block;width:80px;margin:3px;padding:10px;font:18px Tahoma,Geneva,sans-serif;text-align:center;text-decoration:none;color:#fff;}
    </style>
    <!--[if lt IE 9]><script type="text/javascript" src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    </head>
    <body>
    <div class="main">
    <nav class="menu">
    <a href="#">новости</a>
    <a href="#">биография</a>
    <a href="#">embed</a>
    <a href="#">audio</a>
    <a href="#">video</a>
    <a href="#">links</a>
    <a href="#">gallery</a>
    <a href="#">contacts</a>
    <a href="#">top10</a>
    <div class="clear"></div>
    </nav>
    </div>
    </body>
    </html>

    Несколько советов:

    Начните уже использовать HTML5, он поддерживается всеми браузерами(даже если частично, этого хватает)

    Не используйте общие селекторы в CSS (ваша строчка *{margin:0;padding:0;}), это приводит к потери производительности

    Используйте UTF8

    либо так

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
    <title></title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .main {background:#000000;
    width:1002px;
    height:800px;
    margin:0 auto;
    }
    .menu {
    list-style:none;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:18px;
    border-bottom:2px solid #96682E;
    overflow:hidden;
    }
    .menu li{
    width:80px;
    float:left;
    padding:10px;
    margin:3px;
    text-align:center;
    }
    .menu li a{
    display:block;
    width:100%;
    color:#FFF;
    text-decoration:none;
    }
    </style>
    </head>
    <body>
    <div class="main">
    <ul class="menu">
    <li><a href="#">новости</a></li>
    <li><a href="#">биография</a></li>
    <li><a href="#">embed</a></li>
    <li><a href="#">audio</a></li>
    <li><a href="#">video</a></li>
    <li><a href="#">links</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">contacts</a></li>
    <li><a href="#">top10</a></li>
    </ul>
    <div style="clear:both;"></div>
    </div>
    </body>
    </html>

    но этот вариант хуже, поверьте, хоть и работает

  5. <!DOCTYPE html>
    <html><head>
    <title>Горизонтальное меню</title>
    <meta charset="UTF-8" />

    <style type="text/css">
    html,body,nav{margin:0;padding:0;}
    nav{display:block;}
    nav.menu{float:left;}
    nav.menu a{display:inline-block;padding:6px;color:#222;text-decoration:none;font-weight:700;}
    nav.menu a:hover{background:#888;color:#fff;}
    </style>
    <!--[if lt IE 9]><script type="text/javascript" src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    </head><body>
    <nav class="menu">
    <a href="#">Пункт 1</a>
    <a href="#">Пункт 2</a>
    <a href="#">Пункт 3</a>
    </nav>
    </body></html>

    html5 нас спасет :)

    P.S. Весь CSS - лишь для задания стиля, без него все работает и меню горизонтальное даже в IE5.5. Лишь javascript для старых IE - обязателен, если в дальнейшем сайт будет верстаться с html5 тегами, а так - все работает и без него, не знаю, в чем вы сложность нашли

×
×
  • 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