Libiros
-
Posts
73 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Libiros
-
-
Ещё актуально
-
Если вы задумались над семантикой, то display: table; табличными данными не является, просто блок ведет себя как таблица.
Сам поддерживаю блочную верстку. Однако, иногда приходится центрировать элементы по центру какого-то блока и самый простой способ - display:table.
но
Получается так, что табличная верстка плоха множеством своих тегов и семантической нерациональностью и этого можно избежать, присваивая всем div'ам display:table и просто продолжать верстать в табличном стиле?
-
Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).
Из спецификации:
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).The computed value is the same as the specified value, except for positioned and floating elements (see Relationships between 'display', 'position', and 'float') and for the root element. For the root element, the computed value is changed as described in the section on the relationships between 'display', 'position', and 'float'.
Note that although the initial value of 'display' is 'inline', rules in the user agent's default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.
Эти значения ведут себя как табличный элемент.
То есть как табличный или элемент или являются им?
-
Задумался вот над следующим:
В верстке в таблицу лучше заносить табличные данные (тег <table>), относится ли это к свойству display:table-cell и его подобным?
То есть, хочется мне грамотно отцентрировать, например, в блоке некоторые элементы по вертикали и я могу использовать табличную верстку, что нерационально, а могу задать диву table-cell и vertical-align:middle. Будет ли это правильным?
Что скажут специалисты и эксперты?
-
Картинке задать float:left, а тексту margin'ы, padding'и. Было бы легче сказать, если бы был исходный код.
-
Это раздел "для начинающих"
-
Если я правильно понял проблему, то в li a нужно вставить box-sizing: border-box;
-
Да, этот див - элемент фона. По уму наверное нужно его сразу закрыть, и просто дать ему нижний z-index?
Да, иначе зачем в нижний фон записывать весь сайт?
-
Всё будет правильно работать. Плохо то, что каждая новая картинка будет иметь 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 не подойдет и т. п.
-
Всем привет, такая проблема
<div class="block">
<div class="block2">
<a href="#"><img src="img.jpg" /></a>
</div>
<a href="#"><h3>Заголовок</h3></a>
</div>Как можно сделать, что бы при наведении на картинку подсвечивалась ссылка с текстом, засунуть весь блок в <a> не вариант, может быть есть на js решение?
Помогите, кто чем может
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 посмотрел
-
1. Чем меньше семейств шрифтов используется на сайте - тем лучше, особая неудача - Джорджия.
Поменял с верданы на джорджию, прочитав статью на вебстандартсе.
4. Есть еще одна штука - золотое сечение, погуглите.
То есть мне нужно использовать 33% высоты для шапки и остальное для контента? А также 33% для левого меню?
5. Есть специфика поведенческих сценариев пользователя на странице - погуглите.
То есть мой сайт не адаптивный и нужно сделать его легче?
Программист может конечно выдрать из разных ячеек таблицы слова, нужные для одного товара, но ведь куда удобнее будет, если товар будет лежать в одной, своей ячейке, а уж внутри этой ячейки можно и остальное вписать. Плохо объяснил, но может поймете.
Да, я понял, спасибо!
Что еще плохого в плане самой верстки?
-
Если программист возьмет вашу верстку, он намучается.
Почему? Что именно не так? Я же должен учиться
Пусть он будет в ячейке таблицы, но как единое целое, т.е. лучше бы внутри ячейки еще одну таблицу сделали.
Не слишком ли много таблиц (и тегов) для такой мизерной информации? Может, можно решить как-то иначе? Что, Если я сделаю с помощью <p> (display:table-cell) ?
А насчет дизайна согласен, но пока первостепенной целью является научиться грамотно верстать, потому как я могу сверстать любой макет, но качество верстки будет ужасно.
-
Здравствуйте!
Прошу оценить вёрстку шаблона для интернет-магазина одежды, а именно мне нужна критика, указывание ошибок и объяснение их.
В общем, тыкайте носом, бейте, пинайте, но с объяснением что не так и почему, чтобы я не допускал больше таких ошибок и понимал их. А также как можно исправить мои ошибки.
Также приму критику по дизайну (всегда испытываю проблемы с цветовыми гаммами и структурой сайта), потому как мне она кажется не достаточно хорошей. Приму любые советы.
Благодарю за внимание.
text-indent, о размусоленном
in HTML Coding
Posted
Задумался о грамотном коде при верстке логотипов и вообще ссылок с картинками без текста.
Казалось бы, что может быть проще
Но, проследив за подгрузкой изображений на сайте, я повернулся в сторону спрайтов.
Вот небольшая задачка.
Дано:
1 логотип, 6 социальных кнопок. Итого - 7 изображений.
Задача:
Объединить изображения в спрайт и выдавать его в нужных местах.
Вероятное решение:
Обыкновенное.
Мы пишем что-то вроде
Но в этом случае у нас нет ключевых слов. Тег а пустой. Изменяем его так:
В дизайн не вписывается строчка Logo.
Вероятные решения:
1. Скрыть текст путем visibility или display:none или чем-то еще подобным.
Какие недостатки?
Мы скрываем от пользователя текст с ключевым словом. Чего не советует делать, гугл, например.
У нас не много ключевых слов. Лишь слово Logo. И для каждой социальной кнопки. Такие слова как: Follow us on Twitter/VK/FB/etc.
2. Написать text-indent: -9999px;
По сути, это
Однако этим методом пользуются уже лет 10.
Выходит за пределами экрана на расстоянии -9999px у нас будет минимум 7 строк для каждой ссылки с использованием изображения.
Но я хочу, чтобы всё было по уму. А потому закономерный вопрос к знатокам:
Как решить проблему правильно, с точки зрения СЕО?