Jump to content

Serlutin

User
 View Profile  See their activity

  • Posts

    287

  • Joined

  • Last visited

 Content Type 

Everything posted by Serlutin

  1. Serlutin
    Это вам не сюда, это вам к экстрасенсам, которые по фотографиям лечат, привораживают или наоборот порчу наводят. На форуме люди обычные, без спецспособностей. Нам нужно хотя бы код посмотреть, а лучше вообще ссылку на страничку. Тут вопрос по другому надо ставить, что вы сделали для того, чтобы оно тянулось? Если вы просто одну картинку на фон повесили, то естественно ничего не тянется. Тут резать надо.
  2. Serlutin
    Зачем? Неужели так сложно открыть FireBug? Проблема в том, что у вас жёстко заданы и ширина сайта и высота. Ладно ещё ширина, но в высоту сайты ограничивать не принято. Вам нужно убрать высоту с классов .font и .body Только тогда у вас, конечно же, поедет вёрстка во все стороны. Поедет она, потому что сделана кое-как. У вас даже сам текст главной статьи оформлен неправильно. Например, перечисление того, что из себя представляет техникум, это <ol>. Я понимаю, что текст скорее всего оформлялся в визуальном редакторе, но хотя бы на главной странице можно в ручную красиво всё оформить.
  3. Serlutin
    Вариант 1, уже предложенный. li+li, но он как-то плохо выглядит Вариант 2, каждой li прописать свой класс. По сути это практически тот же первый вариант, только работает на долю миллисекунды быстрее. Вариант 3, сделать картинку по принципу "скользящих дверей". То есть одно большое изображение с началом овала и его огромным продложением, вешаем на <a>, задав ему display: block. Второе изображение с окончанием овала добавляем <li>.
  4. Serlutin
    Чтобы туда не поместилось плохое слово "человеконенавистничество"
  5. Serlutin
    Может вместо такой страшной конструкции: <div style='font-style:italic; color:#666; border:1px #999 solid; padding:6px;'> Использовать <span class="i">? Правда, всё-таки лучше просто в css залесть и посмотреть почему <i> не отображается курсивом и добавить стиль если надо.
  6. Serlutin
    Чтобы не съезжал футер, ему нужно задать overflow: hidden Вроде должно помочь.
  7. Serlutin
    <a> - является строчным элементам. К строчным элементам не верхние\нижние паддинги и маргины не применяются. display: block - в помощь.
  8. Serlutin
    Логотип логично поместить в <header>. Я правда привык делать логотип не картинкой, а заменой текста, но чисто практически мой подход очень плох, зато идеологически почти идеален. Наоборот же. Например, этот форум: шапка всего форума, шапка для всего треда (где тема написана), шапка каждого сообщения. Тоже самое и с подвалом. Стили задавать можно, но или через классы, либо через селекторы. То есть вместо header {} лучше писать body > header {} или header.title {} <!doctype html> <title>Простой двухколоночник</title> <body> <header> <hgroup> <h1><img ... /></h1><!-- логотип --> <h2>...</h2><!-- слоган --> </hgroup> <form ...></form><!-- форма поиска по сайту --> <nav>...</nav> <!-- горизонтальное меню на всю ширину --> </header> <aside><!-- фиксированный сайдбар --> <section> <!-- раздел aside --> <h3>Заголовок виджета</h3> <!-- можно ещё всё в article и заголовок в header обернуть, но это не нужно мудрить --> <div>Я виджет 0_0</div> <!-- div если нужно --> </section> </aside><!-- /sidebar --> <div id="content"> <!-- в данном случае лучше div, так как для section требуется заголовок --> <article> <header><h2>Бобро пожаловать на сайт</h2></header> <div>траляля</div> <!-- section тут тоже не к чему, а вот если статья большая, то её можно разбить на главы cекциями --> </article> <article>...</article> </div><!-- /content --> <footer> <!-- Находится на одном уровне с футером из section id="sidebar" --> <small>Тут, допустим, телефон и адрес</small>. </footer> </body>
  9. Serlutin
    Кстати, с народ даёт доступ по FTP, а там можно уже грузить, что хочешь. Можно даже главную страничку index.html в корне изменить, чего не даёт конструктор. — Купи слона. Все говорят, что мне не нужен слон, а ты купи слона.
  10. Serlutin
    Так сначала просто про семантику расскажу (вдруг кто-то быстрее меня расскажет), а потом уже про саму вёрстку. Сначала стоит понять, что <header>, <aside> и др. теги — не аналоги <div id="header"> (кстати, одна из ошибок в этой вёрстке). Новые теги — структурные элементы, которые разделяют всю страницу или статью, или комментарий на логические блоки. <header> — это логическая шапка. Если проводить аналогию с письменными документами, то это верхний колонтитул. Не заголовок. header может использоваться для шапки сайта, для шапки статьи ит.д. Обычно в нём содержится заголовок, если заголовков несколько, то используется <hgroup>. <hgroup> — группирует несколько подряд идущих заголовков. Как вариант, может заменить собой header, а может и входить в него, тут уже нужно смотреть по ситуации. <article> — часть информации, которая может быть обособлена (да, я не умею объяснять). Если проще, это то, ради чего и создавался сам сайт. Выбрасываем весь дизайн, всё навигацию по страницам, и остаётся она — информация. article может использоваться для статей, комментариев (каждый коммент в отдельный article), новостей. Является одним из важнейшими элементами на странице. <section> — логический раздел. Предназначается для структурирования контента. Может использоваться, например, для разделения статьи на главы. В качестве ещё одного примера, можно привести подвал на главной странице htmlbook.ru Блоки "О сайте", "Основные разделы" ит.д. — это разделы подвала. <aside> — выполняется роль дополнительного контента. Например, небольшая историческая справка или интересные факты в статье. Как вариант, можно использовать его для сносок (footer правда подходит немного лучше, но опять всё зависит от ситуации). Если рассматривать всю страницу с точки зрения логики, то <aside> используется (кто бы мог подумать) для боковых колонок. Можно, также использовать для информации, которая менее важна на странице (только тут главное не перемудрить). Ещё одно предназначение, о котором практически никто не знает — это кнопки для лайков и рассшариваний в соц. сетях. Те, кто скажет, что это <nav>, будут не правы, так как нажатие этих кнопок приводит не к переходу к другому контенту, а к какому-либо действию. Те, кто скажет, что это <menu> будут тоже не правы, так как это не производит никаких действий с самим контентом, а нацелено на сторонний ресурс. <nav> — используется для навигации. Теоретически, уже можно отказаться от меню на списках и фигачить на таблицах оставлять одни ссылки без лишних контейнеров. Однако whatwg и w3c, всё-таки рекомендуют оборачивать меню в список ul или ol, но всё-равно нужно смотреть по обстоятельствам. Нужны вам дополнительные контейнеры в виде ul и li, то делайте списком, не нужны, то оставляйте одни ссылки. Внимание! Элементы <nav>, <article>, <section> и <aside> формируют новую логическую единицу структуры. Что это значит? В идеале, в html5 (ну то есть новый html) страничка логически разбивается на структурные элементы, в зависимости от этих четырёх сематических блоков и заголовков. Поэтому желательно, чтобы в каждом семантическом блоке (<nav>, <article>, <section> и <aside>) был заголовок. Если заголовка нет, то подумайте подразумевается ли он. Например, главное меню, да и вообще любая навигация вполне может обойтись без заголовка. С небольшой натяжкой, боковая колонка может обойтись без заголовка. Однако, <article> практически всегда имеет заголовок. Исключения есть, но они только подтверждают правила. Например, безымянное стихотворения. Для проверки логичности разметки нужно использовать outliner (вот ещёoutliner в виде букмарклета). Чем меньше у вас безымянных блоков, тем лучше. В будущем, возможно, это поможет вывести устройства чтения с экрана на новый уровень. Те, кто возможно сталкивался с ними сейчас, понимает, как тяжело с помощью них бродить по интернету). <footer> — используется для некой побочной информации, которая обычно изображается снизу. Для всей старицы — это адреса, телефоны, название дизайн-студии, SEO-ccылки и пр. Для статей, это информация о авторе, о дате публикации. Кстати, если footer не обязательно должен идти снизу. Логически, он может быть использован вверху статьи, если там содержится информация об авторе. Правда такой приём ломает привычный вид на оформление блоков, поэтому право использовать <header> или <footer> для указание инфо об авторе в верхней части статьи, лежит полностью на верстальщике. <menu> — используется для панелей инструментов. <time> — для времени. Не забывайте ещё про семантические элементы из html 4: <abbr>, <code>, <dfn>. А также про немного переиначенные <small>, <cite>, <strong>, <em>, <b>, <i>
  11. Serlutin
    По HTML5 есть что покритиковать, но это только вечером, если Светлана до меня всё не выскажет.
  12. Serlutin
    Жалко. Главное, что там код оформлен просто идеально. И заголовки разных уровней и всякие менюшки, а про id не подумали. На счёт чего? Если про /*o*/ и /*p*/, то это всё к CSS Optimizr. Если честно, то мне такие оптимизаторы не очень нравятся. Так как возможно, что после него всё отображение полетит. Если про id заголовкам, то это просто ради удобства. Вот имеем мы, например, громадную статью, но каждый заголовок имеет id. Тогда я могу просто дать ссылку ввида моястатья.ру#глава10
  13. Serlutin
    Вы не совсем правильно поняли тему. Там обсуждается CSS Optimizer, которые уменьшает СSS не только посредством вырезания пробелов и переносом строк, но и изменения записи свойств (то есть margin-top превратиться просто в margin) /*o*/ и /*p*/ нужны для защиты от парсера. Подробнее тут: https://github.com/afelix/csso/blob/master/MANUAL.ru.md В разделах: 2.2.3.2. Защита от смены порядка 2.2.3.1. Защита от удаления (блин, когда уже все начнут присваивать id заголовкам, особенно в больших статьях. Неудобно ведь ссылку давать)
  14. Serlutin
    Тут ситуация немного другая. Во-первых, преподаватель не обязательно должен знать полностью HTML и CSS. Может быть он программист со знаем 10 языков. Во-вторых, на HTML обычно отводится несколько занятий. Чему можно научиться пару уроков? Только таблицы и выучишь, потому что для понимания CSS, а особенно блочной вёрстки нужен не один и даже не два месяца. Для меня урок, где рассказывалось про строение HTML странички, про заголовки и таблицы дал толчок к самостоятельному изучению. Однако с того времени прошло около 6 лет и то, я не могу сказать, что хорошо разбираюсь в HTML и CSS. Таблица. Серый фон. В шапке громадными красными буквами написано "Сайт Василия Пупкина". В центре сайта небольшая информация о тебе, желательно фотография или картинка (умения использовать <img>). В боковой колонке можешь ссылки разместить (знание тега <a>).
  15. Serlutin
    Если начинающий верстальщик, то поэтапно, чтобы потом не ходить по форумам и не спрашивать, почему везде работает, а в IE. Потом с опытом уже на автомате хаки пишутся, наверное (я ещё не дорос до такого). Лучше уж бесплатно сделать, ради идеи.
  16. Serlutin
    Разрыв строки один из самых старых элементов. Он ведь появился ещё до того, как родились создатели HTML. Поэтому не стоит от него отказываться полностью. Правда этот элемент больше подходит для оформления текста, а не дизайна. <p>Многоканальный телефон в Москве: +7 (499) 234-56-78<br /> Электронная почта: <a href="#">info@hrstorange.ru</a></p> Как вариант, список определений подходит.
  17. Serlutin
    Сейчас поискал, оказываетя разрыв колонок это ноу хау Opera. Поэтому работает естественно только там. Вот где я про разрыв написано: http://dev.opera.com/articles/view/css3-multi-column-layout/
  18. Serlutin
    column-count указывает количество column-width указывает ширину Если одно из значений не задано, то оно задаётся автоматом. Поэтому если мы точно знаем ширину, то кол-во колонок выстроится автоматически. Плюс вроде бы есть возможность прерывать колонку, но не знаю точно работает или нет.
  19. Serlutin
    Постом выше ведь пример выложил :-) http://serlutin.nxt.ru/example/multi-column.html
  20. Serlutin
    Тогда браузер повиснет от количества элементов, и пользователь больше не зайдёт на этот сайт :-) Если серьёзно, то любой из вариантов требует вмешательства в код. Если количество блоков заранее не известно, то можно предположить, что они будут добавляться движком. Тогда каждому блоку можно генерировать id и там уже позиционировать. Хотя, да. Вариант с дополнительным обёрточным блоком лучше. Ещё есть вот такой вариант (работает только в Chrome, FF и последних версиях Opera 11.10 и Safari): http://serlutin.nxt.ru/example/multi-column.html Но нужно дождаться, когда вымрет IE9
  21. Serlutin
    position: absolute не пашет в ИЕ8? А nth-child можно заменить на классы. Хотя всё-таки почему не таблица?
  22. Serlutin
    Вариант, с абсолютом, конечно, хорош, но он немного противоречит: Конечно, можно заранее прописать ещё сразу стили для других блоков, но это тоже как-то не очень.
  23. Serlutin
    Чем вас disqus не устраивает? Вот пример использования. С установкой вроде тоже трудностей возникнуть не должно.
  24. Serlutin
    1) По поводу id. Есть два немного отличающихся мнения. Первый — кардинальный. Это отказаться от использования id вообще, где это возможно (остаются только формы и ссылки-якоря). Смысл в том, кодеру возможно понадобиться навесить на какой-либо элемент id, для того, чтобы привязать его к скрипту. Возможно кодер имеет свои предпочтения в работе, когда он каждый id именует одной буквой алфавита. Однако если верстальщик нависил кучу id на элементы, то ему придётся внимательно следить за именованием, да и ещё пытаться не сломать стили. Второй вариант — более свободный. Он подразумевает использование id только для основных частей: шапка, боковые панели, подвал. Причём контейнер основного контента обычно стилизуют с помощью классов, мало ли что. К тому же у вас есть явная ошибка. В коде id="Header", а в css #header. Имена id и классов — регистрозависимые. Хотя может быть это хак для ie? И ещё у вас у многих элементов схожие названия. Нет, я понимаю, что это дело каждого, как назвать блоки, хоть двумя буквами, но всё же при таком наименовании есть большая вероятность спутать #header и #headerz. Рассмешило назавание #osnoval. Я не сразу догадался, что это osnova-left. Кстати, чисто логически это не основа, а sidebar. Одно дело, когда верстаешь одну страничку, но совсем другое, когда страница формируется с помощью CMS. Может так случиться, что вместе встретятся два блока с одинаковым id. Например, тот же блок #kreditline, вдруг будет страница, которая будет состоять из повторов одного блока. Тут как раз это приемлемо. Как вариант можно было сделать списком, но однако такой вариант тоже имеет право на существование. Использование классов, позволяет потом в блоке использовать вложенный див, если потребуется. Ещё вариант, забить на ie6 и использовать #kreditline > div. Тег img принято использовать, когда картинка непосредственно относится к тексту. Фотография, иллюстрация, схема ит.д. Всё, что относится к дизайну, должно выноситься в css. Проверить можно так: отключить css в браузере. Не должно остаться ничего дизайнерского. Можете и не оптимизировать. Во-первых, потому что это тестовая страничка и так удобнее её изучать, во-вторых, это же как бы малопосещаемый сайт. Вообще с оптимизацией css довольно интересная ситуация, так чего-то ощутимого она не приносит. Обычно страница тормозит от скриптов и больших картинок, но не от css. Возможная польза, это снизить нагрузку на сервер, но это обычно характерно для систем с большой посещаемостью, например Яндекс.
  25. Serlutin
    Как вариант, если не хочется мучиться с PHP, серверами ит. д. можно поставить disqus или Facebook\Вконтакте комментарии.
×
×
  • 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