Позиционирование текста.

[Нуб]

Приветствую!

index.html:

<div class="str1"><span class="cpu">Центра́льный проце́ссор.</span></div>

css:

.str1 { width: 100%; height: 100px; background-color:#3399ff; background: linear-gradient(130deg, #3399ff 50%, #ffffff 50%); }

.cpu {border:0px solid red; color:#3399ff; font-size: 40px; line-height:100px; margin-left: 600px;}

================================================================

При просмотре на разных мониторов с разным разрешением, происходит следующие:

На разный текст, не обращайте внимание,  нужно как-то правильно оформить , посмотрите код и напишите правильный.

[klierik]

А в чём проблема? Работает код совершенно правильно, как и написан.

Может стоит выровнят текст по правому краю на -767px;

[Нуб]

Т.е. применить команду margin-right: -767px;

?

—————————

Хотелось бы чтобы картинка на разных мониторах отображалась правильно.

Edited February 28, 2018 by Нуб

[klierik]

@media (max-width: 767px) {
	.cpu {
		margin-left: 0;
		padding-right: 15px;
		text-align: right;
	}
}

Как-то вот так.

  On 2/28/2018 at 6:05 PM, Нуб said:

Хотелось бы чтобы картинка на разных мониторах отображалась правильно.

Expand  

Что значит "правильно"?

[Нуб]

Правильно, чтобы текст отображался на всех мониторах полностью:

Монитор 4:3 (разрешение монитора не смотрел, но могу посмотреть если надо), показывает вот так:

[klierik]

Дело не в мониторе а в ширине документа. У текста и фона один и тот же цвет. Так же текст имеет фиксированный отступ слева, что и накладывает соответствующие проблемы на отображение контента данными стилями.

[Нуб]

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

Я ввел в CSS:

@media (max-width: 767px){.cpu {color:#3399ff; font-size: 40px; line-height:100px; margin-left:0; padding-right:15px; text-align: right; }}

За место этого:

.cpu {border:0px solid red; color:#3399ff; font-size: 40px; line-height:100px; margin-left: 600px;}

Но ничего не поменялась.

 

Edited March 2, 2018 by Нуб

[Нуб]

По сути @media - это есть адаптивная верстка?

[klierik]

В адаптивной вёрстке используется @media, но @media — это не адаптивная вёрстка, а лишь CSS свойство.

[mrnobody]

Может так?

 

[Нуб]

Смотрите сколько ошибок нашел вебматрикс в коде!

[AlexZaw]

Ваш вебматрикс не знает флексы и не умеет работать с препроцессорами  - отсюда и ошибки

[mrnobody]

И вы еще вставили в CSS  вложенные правила, как в Sass. Нужно было выбрать в выпадашке "View Compiled CSS" и скопировать CSS:

[Нуб]

  On 3/8/2018 at 8:59 AM, AlexZaw said:

Ваш вебматрикс не знает флексы и не умеет работать с препроцессорами  - отсюда и ошибки

Expand  

Мне кажется этот матрикс много с чем не умеет работать.

А какое ПО лучше использовать?

[klierik]

  On 3/14/2018 at 5:25 PM, Нуб said:

Мне кажется этот матрикс много с чем не умеет работать.

А какое ПО лучше использовать?

Expand  

 

Atom, Sublime Text, Webstorm являються негласным стандартным ПО в мире фронт-энд разработки. Первые 2 лучше редакторы на рынке, последний - IDE. Каждый выбирает себе под задачи

[Нуб]

Можете пояснить, что значит являются негласным стандартным ПО в мире фронт-энд разработки.?

[mrnobody]

В основном все ими пользуются.

https://htmlacademy.ru/blog/40-editors-for-the-coders

[AlexZaw]

  On 3/15/2018 at 2:29 AM, Нуб said:

Можете пояснить, что значит являются негласным стандартным ПО в мире фронт-энд разработки.?

Expand  

Значит то что удовлетворяют большинству требований разработчика, как то: поддержка синтаксиса различных языков, работа с фтп, мультиокна (одновременное отображение нескольких вкладок с кодом), форматирование кода, автозаполнение, различные колорпикеры и т.д. и т.п...

[Нуб]

Вы имеете ввиду большинству требований разработчика браузера?

[AlexZaw]

Я имею в виду всех тех кто пользуется тем или иным редактором, а уж кто это - не имеет значения.

Вообще можно хоть в блокноте писать, если это вас это устраивает.