Jump to content
  • 0

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


Нуб
 Share

Question

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

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

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

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

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

1.png

2.png

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

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

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

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

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

Expand  

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Я ввел в 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 by Нуб
Link to comment
Share on other sites

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

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

Expand  

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

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

Link to comment
Share on other sites

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

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

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

Expand  

 

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

Link to comment
Share on other sites

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

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

Expand  

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy