Serlutin

Один из моих довольно спорных логотипов, используется на сайте write2know.ru:

Уже говорил и скажу снова: на лиру не похоже. Зато похоже понятно на что

Очень похоже на эфы у скрипки (дырки на скрипке в виде буквы f), так что можно подумать что-то в таком роде. Если нужна именно лира, то вместо точек нужно провести полоску, символизирующую струны. Так будет хоть немного похоже, хотя если сравнивать с настоящим инструментом, то это конечно неправильно.

P.S. Я не дизайнер. Я музыкант.

Кстати, Google тоже с ошибкой написано, и ничего. Должно быть Googol

Да, это несомненно аргумент!

Ну юзеру может и пофиг, но зато верстать приятнее. То есть теперь можно в разы меньше использовать классы и идентификаторы, что сказывается на удобстве чтения css. Ну это кому как.

Моя главная проблема с меню - я не могу цвет капли краски изменить..

Я никак понять не могу причём тут фотошоп. Или вы в фотошопе не умеете цвет менять.

Вам уже в сотый раз говорят используйте :hover

table-cell это ячейка таблицы. Вы видели, как ячейки в таблице выстраиваются?

если строка длиннее ста процентов, то не произойдет корректного переноса

Почему? Что значит корректный перенос.

Вообще мне кажется, что всё возможно решить более лёгким способом, только надо понять как. Может вы выложите, то что хотите сделать, а то на пальцах не понятно.

Господа!) Вопрос касался валидации вендорных префиксов

Вроде бы валидатор стал поддерживать префиксы. Только вот значка он не выдаёт

Мне одному показалось, что оранжевые кубики пуленепробиваемые. Я сначала подумал, что их вообще уничтожить нельзя.

А в целом мне очень понравилось.

Имеется ввиду, что

margin-bottom: -32767px;
padding-bottom: 32767px;

нужно присвоить колонкам. Но прежде всё колонки надо обернуть в общий контейнер с overflow: hidden

Правда у этого варианта есть огромный недостаток: не будут работать ссылки-якоря.

Во-первых, покажи лучше то что хочешь сделать, а не объяс

няйте на пальчах. Если в фотошопе уже нарисовано, почему бы не показать.

онтальное меню делается с помощью списков (UL LI). Есть несколько вариантов: делать с помощью float: left (или Right).

Смену картинки делаем, через :hover

На мой взгляд решение с картинкой не совсем то. Это не метод верстальщика

Тогда Тебе помогут теги <map></map> и <area coords="shape" coords="X1,Y1,X2,Y2 …Xn,Yn" /> и вырисовывай капли.

Ага, картинку подложить не метод верстальщика, а вот использовать обычные картинки, да и ещё с map - это прям идеал.

<footer> — он и есть футер. Он не нуждается ни в каких id. Он один на странице.

Не согласен. Подвалов может быть сколько угодно. Общий подвал сайта, подвал статьи, да мало ли чего подвал ещё может быть.

* {
margin: 0;
padding: 0;
}

Можно подумать, что браузер от этого зависнет. Теоретически, может, но практически ещё не разу такого не было. Скорее всего браузер ляжет из-за JS, чем от маленькой строчки в CSS. Правда при использовании * встречается неприятные казусы, при использовании текстовых полей, кнопок и т.д. Далее при использовании * сбивается стандартные отступы у списков, поэтому их нужно заново прописать. Это нужно для тех, кто потом будет контентом заниматься. Захочется ему сделать список, а он выглядит кое-как. Поэтому логичнее всего вообще не использовать css сборсы, даже от Мейера, хотя некоторые приёмы стоит взять на заметку. Такие как удаление кавычек из тега Q.

Теперь по вёрстке. Вместо html5-fix лучше использовать modernizr, который надо уже подключать всем браузерам, а не только IE.

Дальше. Почему так странно свёрстано меню .top-nav? Просто, если Google будет оценивать ваше меню, то он совершенно ничего там не найдёт. Добавляем текст в ссылки, используем свойство text-indent, убираем стандартный focus c помощью a:focus {outline: none;} и делаем нестандартный focus, например таким же, как :hover. Да и меню желательно на списках делать, это теперь почти общепринятый стандарт, но это так, чисто субъективно, ваш вариант тоже имеет место быть.

По мимо DIV в новом HTML есть тег SECTION. Например <div class="content">, можно заменить на <section class="content">, чтобы код читать приятнее было.

Закругление уголков без картинок с помощью тегов b - красивое решение. Но почему бы не сделать с помощью border-radius, а для ie картинку с уголками подложить. Ведь всё равно у вас сайдбар имеет фиксированную ширину.

Еще, хотелось, чтобы кнопка "GO" рядом с поиском тоже подсвечивалась при наведении.

В целом же хорошо свёрстано. Код чистый и понятный, во многом семантичный.

прижать именно к низу дива/ячейки

Так DIV или TR? Это разные вещи.

vertical-align работает для изображений, в ячейках и блоках с display: table-cell (в IE6-7 не работает).

Как отступ сделать у кнпок?

Смотря какие кнопки. Но в основном margin (вншний) и padding (внутренние).

Кстати, хочу заметить, что вы пропустили один очень важный шаг. Между наброском от руки и вёрсткой есть psd макет. То есть вам надо в Фотошопе (или в Coreldraw) сделать макет, который будет уже полностью готовым. Там должны быть отражены цвета, шрифты, расположения кнопок ит.д. А потом останется это всё только сверстать, не задумываясь о цветах ссылок.

Ху из ит Цукерберг?

Ваш главный конкурент, создатель Facebook.

Знаете, главная проблема вашей соц. сети не в плохом дизайне, корявом движке или отсутствием функциональности. Москва тоже не сразу строилась. Главная проблема, что там не с кем общаться. ВКонтакте изначально был создан для студентов университета. То если ты в нём зарегистрировался, то у тебя уже будет определённое количество людей-друзей, с которыми можно общаться. Тоже самое и сейчас. Люди регистрируются в них, потому что там есть друзья, знакомые ит.д. В вашей соц. сети моих друзей нет (кроме Геннадия Малахова и Ксюши Собчак). Каких-то крутых фишек у вас нет, а люди просто ради интереса насиженное место не покинут. Да ладно ваша соц. сеть, сейчас людей из контакта в facebook не заманишь, потому что там нет порно музыки и абузоустойчивого видео.

То есть в вашем случае имеет смысл создать некое сообщество для своих. Тут уже может сработать психология. Контакт полностью открыт для регистрации, да и информация в нём практически вся доступна. Если же создать соц. сеть жителей дома номер 5, в которою пускать только своих, то создастся эффект закрытости, некой таинственности. Живой пример Хабра, на которой хотят зарегистрироваться все, но если бы регистрация была бы постоянно открытой, то скорее всего интереса не было.

Сейчас свой вариант попробовал, так правда ерунда получилась.

Конечно с дочерними элементами вариант очень красивый. Хотя бы тем, что получаешь больший контроль. Но с IE6 всё ещё нужно пока мириться, так что приходится использовать не очень изящные решения.

Немного подумал и сделал вот что. (в ie6 не тестировал, но если подключить .htc, то должно работать) Смысл в том что LI, который будет активировать меню и самому меню задаём одинаковый класс. Сделано это для того, чтобы не запутаться. Да, кстати, всё полностью валидно. Единственно но, css выглядит немного монструозно.

И к нему js который раздает нужным лишкам классы

Не .htc предпочтительнее тем, что его можно прописать только IE6. IE7, если я не ошибаюсь, уже поддерживает :hover в полной мере. А вариант с js будет грузить страничку немного большее в других браузерах. Само по себе это не страшно, но иногда каждая миллисекунда на счету.

HTML по своей сути статичен, поэтому он выглядит так, как его создали. В PHP же страница формируется на сервере, а потом отдаётся пользователю стачной страничкой.

Нет, конечно можно использовать iframe, или даже, о ужас, обычные фреймы, но это жутко не удобно и не рационально.

UL по своей сути является просто контейнером. То есть, это как бы урезанный вариант DIV, но со своими особенностями.

TR же является не контейнером, а структурной единицей, которая объявляет сколько столбцов будет в таблице.

Вариант без знака дочернего селектора не пройдет, тогда при наведении на ссылку, будет открываться все уровни сразу и помеченные цветом выделения, все без исключения.

Тогда вложенному UL задаём класс, и обращаемся к нему уже как LI:hover .class_name

К ссылке обращаемся так LI:hover .class_name a

Ни то, ни другое в IE6 не поддерживается. Но если с :hover проблему можно решить, то с дочерним селектором никак. Когда-то он даже использовался для того, чтобы скрывать стили от IE6.

Как вариант можно сделать так.

LI:hover {
position: relative;
}
LI:hover UL {
visibility: visible;
}
LI:hover A {
background: #99FF99;
font-weight: bold;
}

Либо если нужно больше гибкости, то использовать классы.

1.кто дримвивиром умеет пользоваться?

Профессиональные верстальщики не пользуются визуальными редакторами. То есть верстальщик может использовать его, но, например, для того, чтобы код подсвечивался, а не для того, чтобы тыкнуть мышкой в середине ячейки.

2.как стать грамотным верстальщиком и веб программистом?нужны источники книги ,сайты, видеокурсы,где написано будет понятным и доходчивым языком,чтобы уметь делать к примеру вот такие сайты,как зенита

http://www.fc-zenit.ru/main/

Чтобы создать сайт, как у зенита, надо позвать дизайнера, верстальщика и веб-программиста.

Ну ладно, даже если вы решите стать универсалом, то есть знать всего по чуть-чуть, то нужно грамотно подойти к обучению.

Учить вёрстку по Попову, это тоже самое, что учиться медицине по передаче Малахов+

Во-первых, сам формат видеоурока не способствует обучению. Всё сводиться лишь к "нажмите сюда, а теперь сюда, но не в коем случае не нажимайте сюда". А объяснить для чего это нужно нажимать в уроке просто не успеют, иначе он разрастётся на несколько тысяч часов. Книги в этом варианте лучше, потому что в какой-то момент автор отказывается ввести читателя за ручку, а просто начинает рассказывать что и для чего нужно. То есть обычно если в первой главе рассказывается, как подключить стили на страничку. Во второй главе по пунктам рассматривается, как сделать курсивный текст, то уже в 10 главе будет описан атрибут и его действие. Видеоурок же будет каждый раз говорить одно и тоже.

Чтобы научиться хорошо верстать, нужно всего-лишь прочитать хорошую книжку про CSS. Потом найти стандартные двух и трёхколонные макеты и понять, как они устроены. Попробовать самому сделать макет, а потом понять, чем он хуже традиционных. Ну, а потом попробовать сверстать что-нибудь. Вот и всё.

Как вариант можно со значением position:relative поиграться в #middle

Жалко, что через css нельзя реализовать это

CSS — это таблица стилей. Каким образом текст относится к стилям? Вы же не пишете тексты баллончиком с краской.

Обычные фреймы умерли. Прчём давно, уже лет 5, как минимум. И умерли не потому, что их запретили в W3C, а потому что ими не удобно пользоваться. Да и не нужны они были. W3C на этом фоне разошлись и запретили iframe, но вот это было конечно зря сделано, поэтому в HTML5 его возвращают.

Да и вообще идея заставлять пользователей сидеть на одном сайте - абсурдна.

видео уроках Попова по «HTML и CSS»

Слишком уж поверхностные знания даются в этих уроках.

Если сейчас говорить о HTML и CSS, то изучение таблиц стилей намного важнее. Ушло в прошлое время, когда отступы делались <blockquote>, а сайдбары с помощью фреймов.

Из курсов HTML нужно знать совсем немного. Про таблицы, про списки, про формы. Ну и элементарные вещи, типа как картинку добавить.

Совсем другое дело CSS, особенно если говорить о дивной вёрстке. В обязательном порядке нужно прочитать

Эрик А. Мейер - CSS. Каскадные таблицы стилей (правда я вот не читал).

Ещё бы посоветовал книгуДена Седерхольма "Пуленепробиваемый Web-дизайн. Хотя её многие критикуют, но в ней есть несколько интересных советов, правда уже немного устаревших.

Ну и конечно же верстать макеты. В обязательном порядке смотреть вёрстку других сайтов, особенно посвященных HTML тематике (например сайты известных дизайн-студий). обязательно загляните на csszengarden.com Там можно проникнуться идей дивной вёрстки, правда немного мазохисткой. Основная идея в том, что дизайн меняется только за счёт css файла, а вёрстка во всех дизайнах одинаковая. JavaScript и PHP там тоже недопустимы (ещё бы), поэтому для вроде бы простых решений придумывается мозговыносящий css.

Ах да, ради интереса почитайте ещё про HTML5 и CSS3. Знаете новые теги очень увлекают и превращают обычного верстальщика в идеалиста, повёрнутого на семантике.

У меня всё нормально. Сверху отступ в 100px есть. Если не верите, могу даже скрин сделать.