Помощь новичку.

[Багдыч]

Всех с Новым годом! Если никто не против - создам эту тему, где буду задавать мелочные вопросы продвинутым вебмастерам, верстальщикам.

 

1. Есть ли разница между:

background: url('ссылка на картинку')background: url("ссылка на картинку")background: url(ссылка на картинку)

2. Что значит:

<link rel="stylesheet" type="text/css" href="/css/_all.css?23"> 

(Интересуют именно цифры после знака "?").

 

Спасибо!

[SelenIT]

1) Разницы практически нет. Разве что без кавычек нужно экранировать спецсимволы в файловых путях (пробелы, скобки, сами кавычки и т.п.).

 

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

[Багдыч]

1) Разницы практически нет. Разве что без кавычек нужно экранировать спецсимволы в файловых путях (пробелы, скобки, сами кавычки и т.п.).

 

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

 

Спасибо за ответ.

 

Для меня все равно мало понятно определение "экранировать", я просто взял и поставил кавычки у таких вот строк. Не страшно? Их там было совсем чуть-чуть.

 

P.S. это я встретил в CSS.

Edited January 1, 2014 by Багдыч

[SelenIT]

Для меня все равно мало понятно определение "экранировать", я просто взял и поставил кавычки у таких вот строк. Не страшно?

Не страшно. Вообще экранирование — просто добавление обратного слеша перед символом. Например, если в имени файла а-ля 'image(2).jpg' есть скобки, то без кавычек придется писать или так: url(/image\(2\).jpg), или с кавычками: url('/image(2).jpg'). Иначе вторая скобка будет воспринята как закрывющая от url().

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

[Багдыч]

 

Для меня все равно мало понятно определение "экранировать", я просто взял и поставил кавычки у таких вот строк. Не страшно?

Не страшно. Вообще экранирование — просто добавление обратного слеша перед символом. Например, если в имени файла а-ля 'image(2).jpg' есть скобки, то без кавычек придется писать или так: url(/image\(2\).jpg), или с кавычками: url('/image(2).jpg'). Иначе вторая скобка будет воспринята как закрывющая от url().

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

 

 

Теперь все встало на свои места, спасибо огромное!

[Багдыч]

Подскажите пожалуйста, такой вариант считается правильным?:

 

<div id="block-cont" style="padding-bottom:10px;"><ul class="bnav">Меню</ul></div>

и можно ли воспользоваться таким:

 

<div id="block-cont"><ul class="bnav">Меню</ul> <br></div>

Какой из этих вариантом менее нубский?

 

Конечно, можно было бы прописать отступ в стилях block-cont, но в других случаях он нужен мне без отступа.

 

Спасибо!

Edited January 5, 2014 by Багдыч

[hypnocolor]

Внутри <ul> должны быть только <li> и ничего более.

[Багдыч]

Внутри <ul> должны быть только <li> и ничего более.

Моя ошибка, исправил. И все-таки, как будет лучше? Или оба варианта ужасны?

[hypnocolor]

Можно сделать дополнительный класс, навроде .pb10, задать ему padding-bottom: 10px; и применить к обёртке списка:

.pb10{   padding-bottom: 10px;}

<div id="block-cont" class="pb10"><ul class="bnav">Меню</ul></div>

Касаемо ваших вариантов — оба некошерны. Инлайновые стили вообще не рекомендуется использовать, равно как и <br> для подобных целей.

 

Да, только заметил. Надеюсь, идентификатор #block-cont не используется для стилей. Использование идентификаторов в стилях — также плохая практика. Подробнее можно почитать в блоге Робертса — http://csswizardry.com/2013/05/hashed-classes-in-css/.

Edited January 5, 2014 by hypnocolor

[Багдыч]

Надеюсь, идентификатор #block-cont не используется для стилей.

 

Не используется.

 

Теперь всё предельно понятно, огромное спасибо!

[klierik]

Можно сделать дополнительный класс, навроде .pb10, задать ему padding-bottom: 10px; и применить к обёртке списка:

 

Теперь всё предельно понятно, огромное спасибо!

 

Хочу обратить внимание что классы типа ".pb10" -- это зло! Я допускаю что сушествуют ситуации когда классы такого плана требуются, но такова вероятность равна 0,001% всех возможных ситуаций которые когда либо тебе попадутся.

 

А так как ты пока только учишся, то рекомендую не брать вреных привычек.

 

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

Для применения стилей не надо использовать идендификаторы. У тебя есть пространство класов -- ими и пользуйся!

[Nirealto]

 

Можно сделать дополнительный класс, навроде .pb10, задать ему padding-bottom: 10px; и применить к обёртке списка:

 

 

 

Теперь всё предельно понятно, огромное спасибо!

 

Хочу обратить внимание что классы типа ".pb10" -- это зло! Я допускаю что сушествуют ситуации когда классы такого плана требуются, но такова вероятность равна 0,001% всех возможных ситуаций которые когда либо тебе попадутся.

 

А так как ты пока только учишся, то рекомендую не брать вреных привычек.

 

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

Для применения стилей не надо использовать идендификаторы. У тебя есть пространство класов -- ими и пользуйся!

 

По поводу названия стилей ".pb10" - это точно ибо через пару дней и сам запутаешься в таком коде, а другому так вообще захочется закрыть такую вёрстку и никогда больше не открывать, а вот по вопросу использования идентификаторов не соглашусь, они явно показывают что этот стиль уникально применяется только к этому элементу, естественно злоупотреблять ими не стоит ибо в 99% можно и даже нужно использовать классы ибо повторяющийся код - зло, естественно всё ИМХО.

[klierik]

а вот по вопросу использования идентификаторов не соглашусь, они явно показывают что этот стиль уникально применяется только к этому элементу, естественно злоупотреблять ими не стоит ибо в 99% можно и даже нужно использовать классы ибо повторяющийся код - зло, естественно всё ИМХО.

 

 

завтра прийдёт программист, повесит на этот элемент DOM'a свой #id и нет стилей. и будет прав, потому что #id, в первую очередь -- для программистов. А то что в CSS можно применить к нему стили -- это фича, а не основое его предназначение.

[Багдыч]

klierik

 

Nirealto

 

Учту мнения обоих. Спасибо.

 

Кто хоть немного разбирается в версте, помогите переделать меню, пожалуйста.

 

Есть вот такое меню:

 

<ul class="rnav"> <li><a class="mgreen" href="Ссылка"><span><i class="ico ico_rv"></i>$Название</span></a></li> </ul>

и стили к нему:

.rnav {margin: 0;padding: 0;width: 595px;margin: auto;display: block;list-style: none;}.rnav li {margin: 0;border-bottom: 1px solid #e4e2e0;}.rnav li:last-child {border-bottom: 0;}.rnav li a {display: block;color: #747474;text-decoration: none;}.rnav li a span {height: 36px;line-height: 36px;display: block;color: #747474;padding: 0 0 0 36px;position: relative;}.rnav li a.mgreen:hover span {color: #ffffff;text-shadow: 0 1px 1px #3d9510;background: #6eb521;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;}

.ico {display: inline-block;vertical-align: middle;background-position: 0 0;width: 16px;height: 16px;}.ico_rv {background: url(../images/ico.png) no-repeat 0 -83px;position: absolute;left: 12px;top: 10px;}

Но, всё бы хорошо, если бы не тот факт, что у конструктора моего сайта для этого меню уже прописаны несуществующие стили, выглядит меню вот так:

<ul class="uRelatedEntries"><li class="uRelatedEntry"><a href="Ссылка">Название</a></li></ul>

uRelatedEntries и uRelatedEntry - нет в CSS, их и нужно прописать/соединить со стилями первого меню, чтобы меню выглядело точно так же. 

 

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

 

Помогите пожалуйста, не пройдите стороной, дело на 10 минут, кину на пиво.))

Edited January 9, 2014 by Багдыч

[ShumNo]

Багдыч наверное вы имели ввиду не хостинг, а какой-то конструктор сайта?

 

везде в стилях "rnav"  замените на "uRelatedEntries"

а "mgreen" соответственно на "uRelatedEntry"

 

 

 

Могу по мелочи что-то подсказать, скайп: ShumNo

Edited January 9, 2014 by ShumNo

[Багдыч]

ShumNo,

 

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

Если бы было всё так просто...

Строения меню разные.

[ShumNo]

Ааа там еще картинка, ее крепим к тегу а

uRelatedEntries a {  стили  }

либо к li

Картинка ведь везде одинаковая?

[Багдыч]

ShumNo,  

 

 

Да, картинка одинаковая. Заменил - не работает.

[ShumNo]

Работает

http://jsfiddle.net/X5S36/

[Багдыч]

Да, действительно работает. А можно ли сделать, чтобы при наведении на ссылку - иконка не исчезала?

[ShumNo]

можно

http://jsfiddle.net/X5S36/1/

[Багдыч]

http://jsfiddle.net/X5S36/2/

 

Я совсем чуточку изменил, нет ли ошибок в css?

[ShumNo]

Ошибки проверяет валидатор http://jigsaw.w3.org/css-validator/

Если есть строчка background-position: 12px;

то тоже самое из background  можно убрать. Оно тоже самое просто сокращенный вариант

[Багдыч]

Ошибки проверяет валидатор http://jigsaw.w3.org/css-validator/

Если есть строчка background-position: 12px;

то тоже самое из background  можно убрать. Оно тоже самое просто сокращенный вариант

 

Убрал, но, если оставляю у бэкграунда  

0 12px

, то меню кривится, а если оставлю просто 

12px

, то всё нормально. Хотя, на сколько я понял, правильно, когда эти 2 значения присутствуют.

 

Как будет правильнее?

 

http://jsfiddle.net/X5S36/3/

или

http://jsfiddle.net/X5S36/4/

???

Edited January 10, 2014 by Багдыч

[ShumNo]

посмотрим в справочнике http://htmlbook.ru/css/background-position

 

 

"У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах"

 

Так же если мы посмjтрим в инспекторе, то увидим что например FF исправит ошибку с одним значением добавив "center"

[Багдыч]

А что делать тогда, если, добавляя 2-е значение, меню кривится?