баг сайта - HTML и CSS

Fesssss · 13.09.2018, 17:07

Здравствуйте , я начинающий веб программист
Я столкнулся с проблемой , когда я добавил в код больше одной фотографии (формата JPG). Забагался заголовок , не знаю что делать прошу помочь , вот код .
HTML

Код HTML:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
    <title>  Photos.ru </title>
    <link href="you.css" rel="stylesheet" type="text/css"/>
 
 </head>
 
 
 <body>
   
    <div><center>
	<a id="qq">Иван Токмаков , болие известный как spb_foto_ivan.</a>
   <br><br><br><br><br>

   
     
	Это начинающий инстраграмер на аккаунте которого	<br>
	насчитывается уже болие 60ти подписчиков.<br>
	 </div><center>
     <div>
	<p><img src="rr.JPG" alt=" Стамбул, Турция" height="300px" width="300px"></p><br>
    <p><img src="tt.JPG" alt=" Стамбул, Турция" height="300px" width="300px"></p><br>
	<p><img src="yy.JPG" alt=" Стамбул, Турция" height="300px" width="300px"></p><br>
	<p><img src="uu.JPG" alt=" Стамбул, Турция" height="300px" width="300px"></p><br>
	<p><img src="ii.JPG" alt=" Стамбул, Турция" height="300px" width="300px"></p><br>
     </div>

</body>


</html>

CSS

Код:

body{
	background-color:#3f3f3a;
}
div{
	color:#e3e4df;
}

#qq{
	font-size:20px;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:405px;
	padding-right:405px;
	background-color:#5c5c59;
}

Заранее спасибо всем , кто отзовется)))

_____
Код программы нужно выделять (форматировать) тегами [CODE] (читать FAQ)
Модератор

Вадим Мошев · 13.09.2018, 17:38

1.

Код:

<link href="you.css" rel="stylesheet" type="text/css"/>

Не надо непарные теги закрывать слешем с угловой скобкой. Скобка должна быть одна, то есть, просто <link... >

2.

Код:

<div><center>
	<a id="qq">Иван Токмаков , болие известный как spb_foto_ivan.</a>
   <br><br><br><br><br>

   
     
	Это начинающий инстраграмер на аккаунте которого	<br>
	насчитывается уже болие 60ти подписчиков.<br>
	 </div><center>

Закрывающие теги следует писать в порядке, обратном тому, как они были открыты, то есть, <div> <center> </center> </div>. Кстати, тег center уберите - он не поддерживается современной спецификацией и его использование делает код невалидным. Есть много других способов разместить содержимое по центру. И ещё. Более одного тега <br> я бы не использовал. Если надо сделать большой отступ, используйте свойство в CSS, которое называется margin-bottom. Также для CSS я бы советовал использовать классы, а не id.

3.

Код:

<p><img src="rr.JPG" alt=" Стамбул, Турция" height="300px" width="300px"></p><br>

. Во-первых, тег <br> используется только для переноса текста на новую строку, во-вторых, нет смысла его здесь использовать, так как параграф - это блочный элемент, и следующий за ним контент будет перенесён автоматически (если иное не настроено в CSS).
4. Если вы используете у нескольких элементов одинаковые атрибуты с одинаковыми значениями, то есть смысл вынести всё это в CSS-класс, который прописать каждому из этих элементов. Это я о width/height. Также с помощью CSS можно добиться того, что необходимость в тегах <p> пропадёт вообще.

5. Будьте готовы к тому, что, если расширения ваших фотографий имеют нижний регистр, вы можете столкнуться с тем, что при загрузке на хостинг фотографии не будут отображаться. Для имён файлов лучше использовать буквы нижнего регистра.

Naive · 13.09.2018, 19:25

Интереса ради: а можно незабагованый код посмотреть?
Насколько я понял, твой заголовок ломают горизонтальные поля. А в вертикальных, вообще смысла нет, так как они применяются к строчному элементу.
2 Вадим:
1. доктайп хтмл5 — можно закрывать. Но в любом случае стоит придерживаться одного стиля, то есть <img /> & <br /> тоже надо закрыть. Очень важный навык — следить за единообразием кода, соблюдать код-стайл. Ну а навык закрывать одиночные теги поможет освоить, скажем, реакт... Ну или под че там еще пишут на JSX?
2. Опять же, в хтмл5, некоторые теги не обязательно закрывать, они самозакрываются перед закрытием родителя или открытием родственного тэга, <center> из их числа. Самозакроются текстовые блоки, типа абзацев, списков, элементов списка, заголовков... Не закрываются стилевые, ссылки, и еще че-то там. Браузер, конечно, при рендере их "условно закроет", но также будет враппить любой текстовый узел, идущий после них — самое главное проклятие визивигов))
3. Вполне сносно-костыльный метод добавить отступ, юзается ВСЕМИ контент-редакторами.
4. В целом, тут согласен... Но опять же лучше так, для случая, когда CSS не знает размеры картинки, а оператор (контент-редактор) знает: имея размеры, страница при построении не будет ждать загрузки картинки.
5. все так, но комментс.

ps. Вадим, могу тебе подогнать книженцию по хтмл5 =)
pps. Не гонишь на фронттолкс завтра?

Fesssss · 13.09.2018, 19:55

Огромное спасибо , за помощь. Я многое для себя отметил , буду исправлять .
Ps. Это мой первый код)

Вадим Мошев · 13.09.2018, 20:14

Цитата:

Сообщение от Naive

доктайп хтмл5 — можно закрывать. Но в любом случае стоит придерживаться одного стиля, то есть <img /> & <br /> тоже надо закрыть

Очень тяжело будет работать тому, кто привык не закрывать так (/>) одиночные теги, с теми, кто так теги закрывает. Это либо те, кто пишет(сал) на XHTML, либо те, кто вплотную работает с JSX

Цитата:

Сообщение от Naive

Ну а навык закрывать одиночные теги поможет освоить, скажем, реакт

А так, да, такой навык поможет сэкономить немного (или много) времени при написании JSX. Ведь написать <textarea /> будет намного короче, чем <textarea></textarea>

Цитата:

Сообщение от Naive

Опять же, в хтмл5, некоторые теги не обязательно закрывать, они самозакрываются перед закрытием родителя или открытием родственного тэга, <center> из их числа

Я понимаю, что сейчас всё упрощается, но здесь должна быть некая самодисциплина. Это я о закрытии тегов. К тому же, пренебрежении этими правилами не пройдёт без последствий, и ты сам описал их ниже.

Цитата:

Сообщение от Naive

Вполне сносно-костыльный метод добавить отступ, юзается ВСЕМИ контент-редакторами

Но, помнится, меня за использования BR вне текстового контекста ругали однажды. Ну, а контент редакторы, полагаю, работаю с визивигами, они нажимают ENTER, а он вставляет <BR> автоматом, ИМХО.

Цитата:

Сообщение от Naive

В целом, тут согласен... Но опять же лучше так, для случая, когда CSS не знает размеры картинки, а оператор (контент-редактор) знает

Вроде понял...

Цитата:

Сообщение от Naive

ps. Вадим, могу тебе подогнать книженцию по хтмл5 =)

Я не откажусь. Буду благодарен.

Цитата:

Сообщение от Naive

Не гонишь на фронттолкс завтра?

Сорри, но нет.

13.09.2018, 17:38	#2
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	1. Код: `<link href="you.css" rel="stylesheet" type="text/css"/>` Не надо непарные теги закрывать слешем с угловой скобкой. Скобка должна быть одна, то есть, просто <link... > 2. Код: `<div><center> <a id="qq">Иван Токмаков , болие известный как spb_foto_ivan.</a> <br><br><br><br><br> Это начинающий инстраграмер на аккаунте которого <br> насчитывается уже болие 60ти подписчиков.<br> </div><center>` Закрывающие теги следует писать в порядке, обратном тому, как они были открыты, то есть, <div> <center> </center> </div>. Кстати, тег center уберите - он не поддерживается современной спецификацией и его использование делает код невалидным. Есть много других способов разместить содержимое по центру. И ещё. Более одного тега <br> я бы не использовал. Если надо сделать большой отступ, используйте свойство в CSS, которое называется margin-bottom. Также для CSS я бы советовал использовать классы, а не id. 3. Код: `<p><img src="rr.JPG" alt=" Стамбул, Турция" height="300px" width="300px"></p><br>` . Во-первых, тег <br> используется только для переноса текста на новую строку, во-вторых, нет смысла его здесь использовать, так как параграф - это блочный элемент, и следующий за ним контент будет перенесён автоматически (если иное не настроено в CSS). 4. Если вы используете у нескольких элементов одинаковые атрибуты с одинаковыми значениями, то есть смысл вынести всё это в CSS-класс, который прописать каждому из этих элементов. Это я о width/height. Также с помощью CSS можно добиться того, что необходимость в тегах <p> пропадёт вообще. 5. Будьте готовы к тому, что, если расширения ваших фотографий имеют нижний регистр, вы можете столкнуться с тем, что при загрузке на хостинг фотографии не будут отображаться. Для имён файлов лучше использовать буквы нижнего регистра.

13.09.2018, 19:55	#4
Fesssss Регистрация: 13.09.2018 Сообщений: 7	Спасибо Огромное спасибо , за помощь. Я многое для себя отметил , буду исправлять . Ps. Это мой первый код) Последний раз редактировалось Fesssss; 13.09.2018 в 20:06.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Баг в g++	220Volt	Общие вопросы C/C++	7	29.05.2013 06:36
Баг вложений	The SCS	О форуме и сайтах клуба	3	09.07.2012 02:39
Баг в BDS2006	posdnyaa	Софт	1	19.12.2007 12:31

13.09.2018, 19:25	#3
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Интереса ради: а можно незабагованый код посмотреть? Насколько я понял, твой заголовок ломают горизонтальные поля. А в вертикальных, вообще смысла нет, так как они применяются к строчному элементу. 2 Вадим: 1. доктайп хтмл5 — можно закрывать. Но в любом случае стоит придерживаться одного стиля, то есть <img /> & <br /> тоже надо закрыть. Очень важный навык — следить за единообразием кода, соблюдать код-стайл. Ну а навык закрывать одиночные теги поможет освоить, скажем, реакт... Ну или под че там еще пишут на JSX? 2. Опять же, в хтмл5, некоторые теги не обязательно закрывать, они самозакрываются перед закрытием родителя или открытием родственного тэга, <center> из их числа. Самозакроются текстовые блоки, типа абзацев, списков, элементов списка, заголовков... Не закрываются стилевые, ссылки, и еще че-то там. Браузер, конечно, при рендере их "условно закроет", но также будет враппить любой текстовый узел, идущий после них — самое главное проклятие визивигов)) 3. Вполне сносно-костыльный метод добавить отступ, юзается ВСЕМИ контент-редакторами. 4. В целом, тут согласен... Но опять же лучше так, для случая, когда CSS не знает размеры картинки, а оператор (контент-редактор) знает: имея размеры, страница при построении не будет ждать загрузки картинки. 5. все так, но комментс. ps. Вадим, могу тебе подогнать книженцию по хтмл5 =) pps. Не гонишь на фронттолкс завтра? Alar, верни репу!