Верстка, CSS, HTML, SVG

Непонятные черточки после использования тега img

Ставлю 3 картинки подряд в блок css и между картинками появляются непонятные нижние подчеркивания, незнаю как их убрать.
1. Перед написанием своих стилей всегда подключай файл reset.css. Это сброс стандартных стилей, который разом снимет с твоего пути огромную кучу подобных проблем. Ты что-то не сбросил. Точнее сказать не могу, т. к. нихрена не видно, а реального сайта посмотреть вживую ты не дал.

2. Никогда не пили картинки там, где их можно избежать. Этот шрифт стопудово есть на распространенных сайтах со шрифтами. Посмотри в фотошопе или другом графическом редакторе, где ты пилил эти пички, как называется шрифт, нагугли, скачай его, положи в отдельную папку в корень (вот так: /fonts/) и подключи. Как подключаются шрифты, можно почитать на htmlbook . ru . Это вообще просто делается, загугли.

3. Если тебе нужно сделать несколько ссылок подряд для меню, никогда не делай просто ссылки. Пили список ul и прописывай ему и стили. Кроме того, даже если бы у тебя реально была необходимость использовать изображения вместо подключенного шрифта (например, даже логотип твой можно разбить на "человечка" и "8 BIT"), не следует для этого совать img внутрь ссылок. Прописал бы тогда background-ом, что ли.

4. Не делай переносов строки между закрывающим head и открывающим body. Вообще не следует таких переносов между тегами делать делать в тех местах, которые не отображаются на странице — можешь перепутать однажды и запилить что-нибудь между теми же хэд и боди. Кроме того, не нужно делать внутренних пробелов перед закрывающими тегами, как уже сказали выше. Выглядит, может, и "красивше", вот только в некоторых случаях они тебе неочевидных проблем создадут, а ты будешь долго думать, что ж это такое.

5. Пропиши кодировку. Возможно, еще в ней дело. Мало ли. В общем, в перед всем ставишь вот это:

угловая_открывающая_скобка meta charset="utf-8" угловая_закрывающая_скобка (пробелов между скобками и содержимым быть не должно)

А в самом начале, на первой строке, пишешь это:

угловая_открывающая_скобка! DOCTYPE html угловая_закрывающая_скобка (пробелов между скобками и содержимым быть не должно)

Если это сделаешь, можешь, кстати, не прописывать эти устаревшие type="text/css", type="text/javascript" и прочее.

6. Не используй id нигде, кроме JavaScript. Даже если у тебя только один элемент с таким именем, все равно используй классы.

7. Футер — это подвал сайта, а не шапка. Футером называется то, что снизу всего сайта.

8. Все стили, весь внешний вид — ТОЛЬКО в отдельном css-файле. Никаких атрибутов background на body.

9. Не используй position: absolute; , если хочешь сверстать два смежных блока. Используй флоаты (float: left; можно нагуглить на том же htmlbook)

10. Никогда не используй местный сервис прикрепления скриншотов. Он сосет тем, что ни черта нельзя разглядеть на уменьшенных изображениях, а через какое-то время — довольно быстро — все скрины подчищает. Юзай фотохостинги без авторизации и с пожизненным хранением пикч. Я юзаю pichome . ru . Он, канеш, "простоват" и на флэше, но робит получше многих и не трахает, как тот же радикал или даже имгур.
Андрей Пак
Андрей Пак
637
Лучший ответ
Андрей Пак Бл*ть, майл ру, ты г*вно. Сожрал все теги. Разрабы — е*ланы. Ща подредактирую.
Андрей Пак Подправил.
Сергей Игнатьев Спасибо огромное за такое большое и внятное обьяснение, дело в том что я недавно занимаюсь html и css задали придумать тему и написать небольшой сайт, думаю что для моего уровня пойдет вставка картинки, дело в том что вставил картинки, так как не знал что можно привязать шрифт к сайту и писать этим шрифтом использую family. Про футер не понял зачем вы про это написали я вроде знаю что такое футер. И почему лучше юзать фотохостинги, чем хуже то что картинка хранится в самом сайте + проблема в том что в месте сдачи интернета не будет.
Пробел перед закрывающим тегом a поубирайте во всех трех строках
все просто у тебя ссылки подчеркиваются ...пропиши в css

a {text-decoration: none; }