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

[Нуб]

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

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;
	}
}

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

15 минут назад, Нуб сказал:

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

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

[Нуб]

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

Монитор 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:

[Нуб]

В 08.03.2018 в 11:59, AlexZaw сказал:

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

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

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

[klierik]

49 минут назад, Нуб сказал:

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

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

 

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

[Нуб]

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

[mrnobody]

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

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

[AlexZaw]

7 часов назад, Нуб сказал:

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

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

[Нуб]

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

[AlexZaw]

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

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