Libiros

Задумался о грамотном коде при верстке логотипов и вообще ссылок с картинками без текста. Казалось бы, что может быть проще <a href="#" title="title"><img src="#" alt="alt" /></a>Но, проследив за подгрузкой изображений на сайте, я повернулся в сторону спрайтов. Вот небольшая задачка. Дано: 1 логотип, 6 социальных кнопок. Итого - 7 изображений. Задача: Объединить изображения в спрайт и выдавать его в нужных местах. Вероятное решение: Обыкновенное. Мы пишем что-то вроде <a href="#" title="logo"></a>Но в этом случае у нас нет ключевых слов. Тег а пустой. Изменяем его так: <a href="#" title="logo">Logo</a>В дизайн не вписывается строчка Logo. Вероятные решения: 1. Скрыть текст путем visibility или display:none или чем-то еще подобным. Какие недостатки? Мы скрываем от пользователя текст с ключевым словом. Чего не советует делать, гугл, например. У нас не много ключевых слов. Лишь слово Logo. И для каждой социальной кнопки. Такие слова как: Follow us on Twitter/VK/FB/etc. 2. Написать text-indent: -9999px; По сути, это Однако этим методом пользуются уже лет 10. Выходит за пределами экрана на расстоянии -9999px у нас будет минимум 7 строк для каждой ссылки с использованием изображения. Но я хочу, чтобы всё было по уму. А потому закономерный вопрос к знатокам: Как решить проблему правильно, с точки зрения СЕО?

Ещё актуально

Сам поддерживаю блочную верстку. Однако, иногда приходится центрировать элементы по центру какого-то блока и самый простой способ - display:table. но Получается так, что табличная верстка плоха множеством своих тегов и семантической нерациональностью и этого можно избежать, присваивая всем div'ам display:table и просто продолжать верстать в табличном стиле?

Отсюда Из спецификации: Эти значения ведут себя как табличный элемент. То есть как табличный или элемент или являются им?

Задумался вот над следующим: В верстке в таблицу лучше заносить табличные данные (тег <table>), относится ли это к свойству display:table-cell и его подобным? То есть, хочется мне грамотно отцентрировать, например, в блоке некоторые элементы по вертикали и я могу использовать табличную верстку, что нерационально, а могу задать диву table-cell и vertical-align:middle. Будет ли это правильным? Что скажут специалисты и эксперты?

Картинке задать float:left, а тексту margin'ы, padding'и. Было бы легче сказать, если бы был исходный код.

Это раздел "для начинающих"

Если я правильно понял проблему, то в li a нужно вставить box-sizing: border-box;

Да, иначе зачем в нижний фон записывать весь сайт?

Всё будет правильно работать. Плохо то, что каждая новая картинка будет иметь id с названием id1, id2, id3, ..., idn.

Возможно, с помощью css этого не достичь, а может, просто не хватает моих знаний. Но тогда код будет такой: <div class="block"> <div class="block2"> <a href="#"><img src="img.jpg" onmouseover="document.getElementById('test').style.color='#f00';" onmouseout="document.getElementById('test').style.color='';"/></a> </div> <a href="#" id="test"><h3>Заголовок</h3></a> </div> Если будет много картинок и ссылок, то каждый раз придётся менять id. Можно как-то это автоматизировать, но здесь мои знания js заканчиваются

Ну до идеала я доводить не стал, но суть ты должен уловить. http://jsfiddle.net/Libiros/7DUCw/ Слишком много было абсолютно позиционированных элементов. Зачем подобные вставки? background-image:none; background-repeat: repeat-y; Некоторые части убрал. Может, зря, потому что они могли использоваться при дальнейшей разработке, но добавить их не составит труда. Также в начале вставил сброс, без него всё худо ul,ol {list-style: none;} ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;} img {border: 0;} Резиновым меню делается, если position:relative, потому как элементы с absolute не будут сжиматься, зачем им? Тем самым, пункты меню будут автоматически выходить во вторую, третью, четвертую и т.д. строки. В элементах для такого меню не уверен, но делаю с помощью ul, хотя, видимо, это неправильно, ведь ul - нумерованный список.

Думаю, копать стоит внутри <div id="header"> и его стилей. Поставь border:1px solid black в .LayerContacts и посмотри куда уходит рамка. А еще у тебя всё тело (всё, что после body) сидит в <div id="topback">.

Начинать с самых основ (желательно с таких, где первые 50-100 страниц посвящено тому, что такое сервер, как он работает и как настроить свой локальный сервер). А заканчивать той книгой, которая рассматривает ООП в PHP.

Идет речь о GET-запросе?

Та, что <a href="#"><h3>Заголовок</h3></a> ?

Далее всё зависит от требований. Если в .block2 будет несколько div'ов, в которых есть картинка и ссылка с текстом, то можно сделать так: <div class="block2"> <div id="test"> <a href="#"><img src="img.jpg"/></a> <a href="#" id="link">Ссылка с текстом</a> </div> <div id="test"> <a href="#"><img src="img.jpg"/></a> <a href="#" id="link">Ссылка с текстом</a> </div> <div id="test"> <a href="#"><img src="img.jpg"/></a> <a href="#" id="link">Ссылка с текстом</a> </div> </div> #link{ display:none; position:absolute; background:#aaa; font:normal 10px verdana; opacity:0.8; margin:-30px auto; width:100px; height:30px; border:1px solid green; } .block2{ width:400px; height:200px; border:1px solid black; } #test{ display:inline-block; width:100px; margin:10px; border:1px solid black; } #test:hover #link{ display:block; } Если критично количество div'ов, то можно переделать. Также можно избежать изобилие div'ов (заменив их на p или списки) и изобилие id, вписав простые :first-child и :last-child. Но это, опять же, зависит от конечных требований. Вдруг, там будет тысяча ссылок и тогда :last-child не подойдет и т. п.

index.html <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="block"> <div class="block2"> <a href="#"><img src="img.jpg" /></a> <a href="#" id="link">Ссылка с текстом</a> </div> <a href="#"><h3>Заголовок</h3></a> </div> </body> </html> css/style.css #link{ display:none; position:absolute; background:#aaa; font:normal 10px verdana; opacity:0.8; top:80px; width:100px; height:30px; } .block2:hover #link{ display:block; } Так? Если я правильно понял, что нужно сделать, то можно допилить до того, чтобы именно при наведении на картинку подсвечивалась ссылка, а то сейчас только при наведении на весь блок.

Тем не менее, ответа нет. Или я не понял. Нужно знать по какому именно принципу выбирает элемент без отступов. Этот принцип записать через nth-child и всё. На мой взгляд, это самое простое решение, не требующее знаний php, только css.

<div id="header"> <div id="for_statements"> Число правит миром, научись управлять<br/> числом <div id="for_doplnitelny_statement"> Для того кто открывает свою душу для самопознания, кто знает, что способ достижения духовного и материального совершенства можно открыть в себе, кто понимает, что он – часть Вселенной и вибрирует в гармонии с Силами Космоса, обретая полноту человеческого бытия. </div><!-- #for_doplnitelny_statement--> </div><!-- #for_statements--> </div><!-- #header--> Здесь ты в div с главной надписью вставил уезжающий блок. До меня потом дошла твоя логика, но так делать не нужно. Можно обойтись без div'a. Ведь надписи (выделим ее тегом <p>) можно задать стиль text-align:right и у тебя останется место под подсказку, которую также просто можно вставить в любое место шапки, используя абсолютное позиционирование. С другой стороны, можно просто использовать абсолютное позиционирование для подсказки и больше ничего не делать, но я переделал, как описал выше. Вот, что у меня получилось: <div id="header"> <p> Число правит миром, научись управлять<br/> числом </p> <div id="for_doplnitelny_statement"> Для того кто открывает свою душу для самопознания, кто знает, что способ достижения духовного и материального совершенства можно открыть в себе, кто понимает, что он – часть Вселенной и вибрирует в гармонии с Силами Космоса, обретая полноту человеческого бытия. </div> </div> В style.css можно удалить все стили для #for_statement, они все равно не используются, да и сам этот div тоже. И меняем #for_doplnitelny_statement #for_doplnitelny_statement { position:absolute; width:470px; height:70px; top:80px; margin-left:20px; padding:5px; background:#ffffff; border:#000000 2px solid; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; font-size:12px; font-weight:normal; font-style: italic; } В carcase.css задаем стили для параграфа #header p { font-size:44px; font-weight:bold; text-align:right; padding-right:225px; top:-40px; display:block; position:relative; } Зачем только стили разделены по разным файлам?

Из-за того, что сайт очень контрастный (черное бьёт по глазам на белоснежном фоне), то по нему не хочется бегать глазами и акцентировать внимание на определенном месте. Я посмотрел шапку, опустил взгляд ниже и заболели глаза. Набери в гугле "черно-белые сайты" и заметь, что нет ни одного с яркой черно-белой гаммой. Как вариант, можешь на фон поставить серый, как в шапке, а черный заменить на темно-серый. Даже художники говорят, что нельзя оставлять чисто белый цвет в картинах. В плане добавления текста - возможно, нужно будет его пересмотреть для SEO. Но не читал, подробнее сказать не могу. Это к тому, чтобы критика не воспринималась так остро. Текст, добавленный в поля тоже черный, от этого кажется, что они уже заполнены и если я нажму, то придется сначала стереть этот текст, а потом вводить свой, поэтому даже жать не хочется (может, я один такой, но я бы сделал текст светло-серым). Справка (где написано "Заполните поля которые находятся слева от этого текста.") должна быть выделена другим цветом, чтобы было понятно, что это вообще справка. Из-за того, что вообще никакой текст этого сайта не хочется читать, то и справку тем более. В первый раз я не прочитал дальше "Заполните поля...". В плане типографики и гарнитуры есть неплохая статья, хотя, мне здесь сказали, что к ней нужно относиться с осторожностью. Но это всё мой субъективный взгляд. Потому как в начале я тоже написал сайт, где был черный фон и золотые буквы и его невозможно было читать больше минуты, поэтому имею небольшие представления о том, что нужно сделать, чтобы хоть как-то его улучшить. Этот домик служит ссылкой на первую страницу и расположен в блоке который я думаю использовать как блок основных ссылок. Ну там гостевая, перелистывание экрана и прочее. Долго с этим блоком мучился. Но то что есть сейчас это вершина моих возможностей нынешних. Моё решение такое: 1. Переместил <div id="main_references"> <a href="index.php" title="Главная страница сайта"><img src="v/img/index.png"></a> </div> внутрь <div id="wrapper"> 2. Добавил в carcase.css padding-left:50px в #wrapper 3. Для #main_references я сделал так: #main_references { width:45px; height:0px; margin:auto 0; background-color:#ffffff; position:fixed; text-align:center; margin-left:-50px; }

Не выдержал и все подсказки в .js посмотрел

Поменял с верданы на джорджию, прочитав статью на вебстандартсе. То есть мне нужно использовать 33% высоты для шапки и остальное для контента? А также 33% для левого меню? То есть мой сайт не адаптивный и нужно сделать его легче? Да, я понял, спасибо! Что еще плохого в плане самой верстки?

Почему? Что именно не так? Я же должен учиться Не слишком ли много таблиц (и тегов) для такой мизерной информации? Может, можно решить как-то иначе? Что, Если я сделаю с помощью <p> (display:table-cell) ? А насчет дизайна согласен, но пока первостепенной целью является научиться грамотно верстать, потому как я могу сверстать любой макет, но качество верстки будет ужасно.

Здравствуйте! Прошу оценить вёрстку шаблона для интернет-магазина одежды, а именно мне нужна критика, указывание ошибок и объяснение их. В общем, тыкайте носом, бейте, пинайте, но с объяснением что не так и почему, чтобы я не допускал больше таких ошибок и понимал их. А также как можно исправить мои ошибки. Также приму критику по дизайну (всегда испытываю проблемы с цветовыми гаммами и структурой сайта), потому как мне она кажется не достаточно хорошей. Приму любые советы. Благодарю за внимание. http://jsfiddle.net/Libiros/dWcJY/13/ http://jsfiddle.net/...mbedded/result/