Сообщений в теме: 54

[Andrew S.]

Здравствуйте. Суть в следующих фотографиях видно:

- вот так вот классно у вас всё отображается:


- а вот так вот не классно у нас:


Подскажите как это поменять? А то отобюражается с ошибками. Я про это уже спрашивал, никто ничего не ответил. Решил создать отдельную тему.

Если можно - подскажите также как вашу сделать? Она ещё и прозрачная в кайме.. Красиво смотрится!

Ваша фотка - это из админ-панели.

[Rekbes]

Сомневаюсь,если вам кто нибудь ответит,так как не понятно,что вам нужно.Картинки какие то,на 2 скринах они ни чем почти не отличаются. Есть более важные дела,чем делать такую ерунду.

[sengun]

Andrew S. (29 Июнь 2013 - 20:15) писал:

Здравствуйте. Суть в следующих фотографиях видно:

- вот так вот классно у вас всё отображается:
123456789.png

- а вот так вот не классно у нас:
12345678910.png

Подскажите как это поменять? А то отобюражается с ошибками. Я про это уже спрашивал, никто ничего не ответил. Решил создать отдельную тему.

Если можно - подскажите также как вашу сделать? Она ещё и прозрачная в кайме.. Красиво смотрится!

Ваша фотка - это из админ-панели.

Здравствуйте. На данный момент удалось воспроизвести вот что:
В конец main.css добавьте код:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
top: 90% !important;
left:5% !important;
z-index:999;
width: 90%;
}

div#nyroModalFull div#nyroModalWrapper a#closeBut{
top: 90% !important;
right: 5% !important;
background: url({ASSETS_IMAGES_PATH}close_but.png) no-repeat center !important;
border-radius: 12px;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5);
border: 2px solid grey;
z-index: 999;
}
div#nyroModalFull div#nyroModalWrapper{
border-radius: 15px;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:10px;
}

В моем магазине это выглядит так:
И загрузите в раздел Сайт - Редактор шаблонов изображение
Я его для кнопки закрытия использовал.

[Andrew S.]

Rekbes (29 Июнь 2013 - 21:35) писал:

Сомневаюсь,если вам кто нибудь ответит,так как не понятно,что вам нужно.Картинки какие то,на 2 скринах они ни чем почти не отличаются. Есть более важные дела,чем делать такую ерунду.

Да, а ещё лучше заплатить вам и всё будет чики-пуки. Вот только чики сделали пуки. Конечно есть более важные дела. Например, разработка спутника для полёта на Марс, строительство атомной электростанции, очередной конгресс НАТО, проблема наркотиков, террористы, в конце-концов. Но как бы самолет состоит тоже, вроде как, из маааленьких таких делишек.. И чтобы его построить, чтобы он не упал - надо учесть всё. А тут.. Да, можно прайс-лист выложить на главной и закончить с этим. Черным по белому. Всё просто.Но есть одно но.. Кто-то все эти минусы учитывает и стоит впереди нас всех и не читает эти форумы, а платит тем, кто это читает и работает над его сайтами. Если вы хотите держать свой сайт таким какой он у вас есть в анкете - пожалуйста. А нам не мешайте. Здесь все работают на благо себе и окружающим. Помогая облегчить и улучшить свою работу и работу соседних клиентов.

P.S. Есть более важные дела, чем читать каждую тему в форуме и всем писать свои комментарии.

sengun (29 Июнь 2013 - 21:47) писал:

Здравствуйте. На данный момент удалось воспроизвести вот что: 29-06-2013 22-10-37.jpg
В конец main.css добавьте код:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
top: 90% !important;
left:5% !important;
z-index:999;
width: 90%;
}

div#nyroModalFull div#nyroModalWrapper a#closeBut{
top: 90% !important;
right: 5% !important;
background: url({ASSETS_IMAGES_PATH}close_but.png) no-repeat center !important;
border-radius: 12px;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5);
border: 2px solid grey;
z-index: 999;
}
div#nyroModalFull div#nyroModalWrapper{
border-radius: 15px;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:10px;
}

В моем магазине это выглядит так: 29-06-2013 22-47-09.jpg
И загрузите в раздел Сайт - Редактор шаблонов изображение close_but.png
Я его для кнопки закрытия использовал.

sengun (29 Июнь 2013 - 21:47) писал:

Здравствуйте. На данный момент удалось воспроизвести вот что: 29-06-2013 22-10-37.jpg
В конец main.css добавьте код:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
top: 90% !important;
left:5% !important;
z-index:999;
width: 90%;
}

div#nyroModalFull div#nyroModalWrapper a#closeBut{
top: 90% !important;
right: 5% !important;
background: url({ASSETS_IMAGES_PATH}close_but.png) no-repeat center !important;
border-radius: 12px;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5);
border: 2px solid grey;
z-index: 999;
}
div#nyroModalFull div#nyroModalWrapper{
border-radius: 15px;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:10px;
}

В моем магазине это выглядит так: 29-06-2013 22-47-09.jpg
И загрузите в раздел Сайт - Редактор шаблонов изображение close_but.png
Я его для кнопки закрытия использовал.

Тут, я смотрю, можно бордер убрать и будет как у сторэланда (вроде бы). И вроде бы так будет лучше. Но как текст отцентрировать и если вдруг название будет длинное (подпись), она не слезет? Я попробую когда скажете как текст подписи по центру поставить..

Да, и ещё кнопка плохо смотрится. У сторэланд она хорошо смотрится.

И в вашем магазине тоже хорошо кнопка смотрится.

[miyako]

Andrew S. (30 Июнь 2013 - 00:14) писал:

Да, а ещё лучше заплатить вам и всё будет чики-пуки. Вот только чики сделали пуки. Конечно есть более важные дела. Например, разработка спутника для полёта на Марс, строительство атомной электростанции, очередной конгресс НАТО, проблема наркотиков, террористы, в конце-концов. Но как бы самолет состоит тоже, вроде как, из маааленьких таких делишек.. И чтобы его построить, чтобы он не упал - надо учесть всё. А тут.. Да, можно прайс-лист выложить на главной и закончить с этим. Черным по белому. Всё просто.Но есть одно но.. Кто-то все эти минусы учитывает и стоит впереди нас всех и не читает эти форумы, а платит тем, кто это читает и работает над его сайтами. Если вы хотите держать свой сайт таким какой он у вас есть в анкете - пожалуйста. А нам не мешайте. Здесь все работают на благо себе и окружающим. Помогая облегчить и улучшить свою работу и работу соседних клиентов.

P.S. Есть более важные дела, чем читать каждую тему в форуме и всем писать свои комментарии.




Тут, я смотрю, можно бордер убрать и будет как у сторэланда (вроде бы). И вроде бы так будет лучше. Но как текст отцентрировать и если вдруг название будет длинное (подпись), она не слезет? Я попробую когда скажете как текст подписи по центру поставить..

Да, и ещё кнопка плохо смотрится. У сторэланд она хорошо смотрится.

И в вашем магазине тоже хорошо кнопка смотрится.

код :

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
top: 90% !important;
left:5% !important;
z-index:999;
width: 90%;
}

замените на:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
top: 90% !important;
left:5% !important;
z-index:999;
width: 90%;
text-align: center;
}

text-align: center; - выравнивание текста по центру

Не могу понять о какой кнопке вы говорите. Объясните пожалуйста подробнее

[sengun]

Andrew S. (30 Июнь 2013 - 00:14) писал:

Да, и ещё кнопка плохо смотрится. У сторэланд она хорошо смотрится.

И в вашем магазине тоже хорошо кнопка смотрится.

Скриншот вашего магазина сделан до того, как я кнопку выхода поменял на такую, как на скриншоте моего магазина. Т.е. при изменении кода, она будет хорошо выглядеть.

[Andrew S.]

miyako (30 Июнь 2013 - 07:57) писал:

код :

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
top: 90% !important;
left:5% !important;
z-index:999;
width: 90%;
}

замените на:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
top: 90% !important;
left:5% !important;
z-index:999;
width: 90%;
text-align: center;
}

text-align: center; - выравнивание текста по центру

Не могу понять о какой кнопке вы говорите. Объясните пожалуйста подробнее

О кнопке.. Да вроде всё ок с кнопкой получилось.
Вот ещё вопросы по доработке. Не совсем всё хорошо:


Обратите внимание на самое первое фото в теме, от сторэланда. Там текст перенесен на новую строчку, расположен по середине и полностью влез. Очень хорошо он там.
Вот что я наделал с кодом:

/* Доработанное отображение всплывающих фотографий у каждого товара */
div#nyroModalFull div#nyroModalWrapper a#closeBut{
top: 90% !important;
right: 5% !important;
background: url({ASSETS_IMAGES_PATH}close_but.png) no-repeat center !important;
border-radius: 10px;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
border: 1px solid grey;
z-index: 999;
text-align: center;
}
div#nyroModalFull div#nyroModalWrapper{
border-radius: 5px;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:4px;
}

И если можно - тоже сделать кнопку, меняющуюся при наведении. Пожалуйста

И текст все-таки не стоит по-середине.

Вот сейчас пока какой результат:

[Сake]

Добавьте в ваш файл стилей main.css

div#nyroModalFull div#nyroModalWrapper {
	border: none !important;
}

Добавьте в ваш файл стилей main.css

div#nyroModalWrapper {
	 border-radius: 20px !important;
}

Заменить цвет и изменить отступ заголовка - вы можете путем добавления класса в файл стилей main.css

h1#nyroModalTitle {
	 color: #000 !important;
}

Все стандартные классы получаются из файла стилей http://design.domain...oModal.full.css

[Andrew S.]

Сake (02 Июль 2013 - 01:48) писал:

Добавьте в ваш файл стилей main.css

div#nyroModalFull div#nyroModalWrapper {
border: none !important;
}

Добавьте в ваш файл стилей main.css

div#nyroModalWrapper {
border-radius: 20px !important;
}

Заменить цвет и изменить отступ заголовка - вы можете путем добавления класса в файл стилей main.css

h1#nyroModalTitle {
color: #000 !important;
}

Все стандартные классы получаются из файла стилей http://design.domain...oModal.full.css

Ничего не меняется, ерунда какая-то.

/* Доработанное отображение всплывающих фотографий у каждого товара */
div#nyroModalFull div#nyroModalWrapper a#closeBut{
top: 90% !important;
right: 5% !important;
background: url({ASSETS_IMAGES_PATH}close_but.png) no-repeat center !important;
border-radius: 10px;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
border: 1px solid grey;
z-index: 999;
text-align: center;
}
div#nyroModalFull div#nyroModalWrapper{
border-radius: 5px;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:4px;
}
div#nyroModalFull div#nyroModalWrapper {
border: none !important;
}
div#nyroModalWrapper {
border-radius: 20px !important;
}
h1#nyroModalTitle {
color: #000 !important;
}

[Koderhan]

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Найти код:

div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:4px;
}

Заменить:

div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:20px;
}

[Andrew S.]

Koderhan (02 Июль 2013 - 09:27) писал:

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Найти код:

div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:4px;
}

Заменить:

div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:20px;
}

Это все хорошо. Но залазит текст на фото. Как залазил, так и залазит.

[Koderhan]

Andrew S. (02 Июль 2013 - 10:30) писал:

Это все хорошо. Но залазит текст на фото. Как залазил, так и залазит.
Zalazit.png

Попробуйте добавить в конец файла main.css код:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
	background-color: white;
	padding: 5px !important;
	top: 90% !important;
}

[Andrew S.]

Koderhan (02 Июль 2013 - 12:34) писал:

Попробуйте добавить в конец файла main.css код:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
background-color: white;
padding: 5px !important;
top: 90% !important;
}

Не совсем.. Вот скриншот:

[miyako]

Andrew S. (03 Июль 2013 - 08:12) писал:

Не совсем.. Вот скриншот:
Ne sovsem.png

Найдите код в main.css:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
background-color: white;
padding: 5px !important;
top: 90% !important;
}

и замените на:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
background-color: white;
padding: 5px !important;
top: 100% !important;
}

[Andrew S.]

miyako (03 Июль 2013 - 09:21) писал:

Найдите код в main.css:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
background-color: white;
padding: 5px !important;
top: 90% !important;
}

и замените на:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
background-color: white;
padding: 5px !important;
top: 100% !important;
}

Супер! Помогите ещё увеличить кнопку в размере, а то в нее слишком сложно даже попасть.. Или скажите, я могу другую кнопку для этого использовать? И Могу ли пару кнопок - найду изображения. ЧТобы при наведении она менялась на вторую. Желательно расклад на две кнопки. И чтобы была возможность прописать размеры кнопок. А то вдруг разные будут. Или слишком большие.
Подскажите, пожалуйста, как это лучше сделать..
И ещё, никто в теме созданной не ответил.. Посмотрите, пожалуйста. За это вам бы много клиентов спасибо сказали. Вы ведь любите улучшать ваш сервис. А эта, казалась бы, мелочь - очень полезная штука.
http://forum.storela...аблоне-товар34/

miyako (03 Июль 2013 - 09:21) писал:

Найдите код в main.css:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
background-color: white;
padding: 5px !important;
top: 90% !important;
}

и замените на:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
background-color: white;
padding: 5px !important;
top: 100% !important;
}

Блин, проверил - опять косяк..

На другом товаре посмотрел...

[miyako]

Andrew S. (03 Июль 2013 - 11:43) писал:

Супер! Помогите ещё увеличить кнопку в размере, а то в нее слишком сложно даже попасть.. Или скажите, я могу другую кнопку для этого использовать? И Могу ли пару кнопок - найду изображения. ЧТобы при наведении она менялась на вторую. Желательно расклад на две кнопки. И чтобы была возможность прописать размеры кнопок. А то вдруг разные будут. Или слишком большие.
Подскажите, пожалуйста, как это лучше сделать..
И ещё, никто в теме созданной не ответил.. Посмотрите, пожалуйста. За это вам бы много клиентов спасибо сказали. Вы ведь любите улучшать ваш сервис. А эта, казалась бы, мелочь - очень полезная штука.
http://forum.storela...аблоне-товар34/


Блин, проверил - опять косяк..

На другом товаре посмотрел...

Как должно быть в результате отображаться описание?
Вы можете сами подобрать расположение:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
background-color: white;
padding: 5px !important;
top: 100% !important;
}

измените top: 100% !important;

О какой кнопке Вы говорите?

[Andrew S.]

1

miyako (03 Июль 2013 - 12:26) писал:

Как должно быть в результате отображаться описание?
Вы можете сами подобрать расположение:

div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
background-color: white;
padding: 5px !important;
top: 100% !important;
}

измените top: 100% !important;

О какой кнопке Вы говорите?

Описание должно не накладываться на изображение и не висеть непонять где. Этот подбор - если сделать 90% - то он будет на фото накладываться

[miyako]

Andrew S. (03 Июль 2013 - 12:51) писал:

1


Описание должно не накладываться на изображение и не висеть непонять где. Этот подбор - если сделать 90% - то он будет на фото накладываться

Попробуйте 95%

[sengun]

Чтобы фон посветлее сделать, добавьте код

#nyroModalBg{
opacity: 0.3 !important;
}

Это настраивает его прозрачность.
Чтобы кнопка при наведении менялась, надо описать такой класс

div#nyroModalFull div#nyroModalWrapper a#closeBut:hover

Т.е., например

div#nyroModalFull div#nyroModalWrapper a#closeBut:hover{
background: url({ASSETS_IMAGES_PATH}close_but_2.png) no-repeat center !important;
}

заменит рисунок кнопки на другой.
Решение проблемы налезания текста на картинку я пока вижу только в уменьшении самой картинки. Тогда и текст останется внутри формы и на картинку не залезет.

div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
height:85% !important;
width:85% !important;
}

Чтобы нормализовать немного ваш код и внести предложенные мной изменения, замените

/* Доработанное отображение всплывающих фотографий у каждого товара */
div#nyroModalFull div#nyroModalWrapper a#closeBut{
top: 90% !important;
right: 5% !important;
background: url({ASSETS_IMAGES_PATH}close_but.png) no-repeat center !important;
border-radius: 10px;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
border: 1px solid grey;
z-index: 999;
text-align: center;
}
div#nyroModalFull div#nyroModalWrapper{
border-radius: 5px;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:20px;
}
div#nyroModalFull div#nyroModalWrapper {
	 border: none !important;
}
div#nyroModalWrapper {
		 border-radius: 20px !important;
}
h1#nyroModalTitle {
		 color: #000 !important;
}
div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
	 background-color: white;
	 padding: 5px !important;
	 top: 100% !important;
}

на

/* Доработанное отображение всплывающих фотографий у каждого товара */
div#nyroModalFull div#nyroModalWrapper a#closeBut{
top: 90% !important;
right: 5% !important;
background: url({ASSETS_IMAGES_PATH}close_but.png) no-repeat center !important;
border-radius: 10px;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
border: 1px solid grey;
z-index: 999;
}
div#nyroModalFull div#nyroModalWrapper a#closeBut:hover{
/* Здесь описание вашей кнопки при наведении */
}
div#nyroModalFull div#nyroModalWrapper{
border: none !important;
border-radius: 20px !important;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:20px;
height:85% !important;
width:85% !important;
}
div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
	 background-color: white;
	 padding: 5px !important;
	 top: 90% !important;
left: 8% !important;
width: 80% !important;
color: #000 !important;
text-align: center;
}
#nyroModalBg{
opacity: 0.3 !important;
}

А чтобы сделать кнопку побольше, просто загрузите изображение close_but.png не 14х14 как сейчас, а, например, 18х18 pix

[Andrew S.]

sengun (03 Июль 2013 - 14:54) писал:

Чтобы фон посветлее сделать, добавьте код

#nyroModalBg{
opacity: 0.3 !important;
}

Это настраивает его прозрачность.
Чтобы кнопка при наведении менялась, надо описать такой класс

div#nyroModalFull div#nyroModalWrapper a#closeBut:hover

Т.е., например

div#nyroModalFull div#nyroModalWrapper a#closeBut:hover{
background: url({ASSETS_IMAGES_PATH}close_but_2.png) no-repeat center !important;
}

заменит рисунок кнопки на другой.
Решение проблемы налезания текста на картинку я пока вижу только в уменьшении самой картинки. Тогда и текст останется внутри формы и на картинку не залезет.

div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
height:85% !important;
width:85% !important;
}

Чтобы нормализовать немного ваш код и внести предложенные мной изменения, замените

/* Доработанное отображение всплывающих фотографий у каждого товара */
div#nyroModalFull div#nyroModalWrapper a#closeBut{
top: 90% !important;
right: 5% !important;
background: url({ASSETS_IMAGES_PATH}close_but.png) no-repeat center !important;
border-radius: 10px;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
border: 1px solid grey;
z-index: 999;
text-align: center;
}
div#nyroModalFull div#nyroModalWrapper{
border-radius: 5px;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:20px;
}
div#nyroModalFull div#nyroModalWrapper {
	 border: none !important;
}
div#nyroModalWrapper {
		 border-radius: 20px !important;
}
h1#nyroModalTitle {
		 color: #000 !important;
}
div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
	 background-color: white;
	 padding: 5px !important;
	 top: 100% !important;
}

на

/* Доработанное отображение всплывающих фотографий у каждого товара */
div#nyroModalFull div#nyroModalWrapper a#closeBut{
top: 90% !important;
right: 5% !important;
background: url({ASSETS_IMAGES_PATH}close_but.png) no-repeat center !important;
border-radius: 10px;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
border: 1px solid grey;
z-index: 999;
}
div#nyroModalFull div#nyroModalWrapper a#closeBut:hover{
/* Здесь описание вашей кнопки при наведении */
}
div#nyroModalFull div#nyroModalWrapper{
border: none !important;
border-radius: 20px !important;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img {
border-radius:20px;
height:85% !important;
width:85% !important;
}
div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
	 background-color: white;
	 padding: 5px !important;
	 top: 90% !important;
color: #000 !important;
text-align: center;
}
#nyroModalBg{
opacity: 0.3 !important;
}

А чтобы сделать кнопку побольше, просто загрузите изображение close_but.png не 14х14 как сейчас, а, например, 18х18 pix

Завтра попробую. А по поводу уменьшения самой картинки.. Почему какими-то странными путями.. Вот скриншот, тут как это сторэланд сделал: текст по-середине, никуда не налазит и не вылазит:

Я этого не понимаю совсем. Но сделано как надо.