[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Как правильно выставлять текст на картинке ?
Oggy
Здравствуйте. Только начал верстать. Проблема вот в чём:
У меня есть хедер...он выравнивается по середине страницы. Мне надо поместить текст "МАГАЗИН НВ" на картинку в хедере так, чтобы етот текст совпадал с нарисованим текстом "МАГАЗИН НВ" по мере того как изменяю размер окна.
Вот сайт.
Подскажыте пожалуйста что я делаю нетак....
sergeiss
Цитата (Oggy @ 23.02.2013 - 00:12)
Подскажите пожалуйста что я делаю нетак....

Мне кажется, надо просто оставить один экземпляр текста. И тогда не будет ненужной головной боли по этому поводу.

В чем вообще глубокий смысл двойного текста?

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Oggy
Цитата (sergeiss @ 22.02.2013 - 20:15)
Цитата (Oggy @ 23.02.2013 - 00:12)
Подскажите пожалуйста что я делаю нетак....

Мне кажется, надо просто оставить один экземпляр текста. И тогда не будет ненужной головной боли по этому поводу.

В чем вообще глубокий смысл двойного текста?

Смысл в том чтобы было наглядно видно где текст должен быть....я потом нарисованый текст уберу.
Oggy
Цитата (sergeiss @ 22.02.2013 - 20:15)
Цитата (Oggy @ 23.02.2013 - 00:12)
Подскажите пожалуйста что я делаю нетак....

Мне кажется, надо просто оставить один экземпляр текста. И тогда не будет ненужной головной боли по этому поводу.

В чем вообще глубокий смысл двойного текста?

Вы предлагаите убрать текст и оставить текст нарисованный ?
sergeiss
Цитата (Oggy @ 23.02.2013 - 00:20)
Вы предлагаите убрать текст и оставить текст нарисованный ?

Я предлагаю тебе лично определиться, какой из двух текстов нужен и оставить его smile.gif А уж какой оставить, а какой убрать... Это надо смотреть, каков же дизайнерский замысел.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Oggy
Цитата (sergeiss @ 22.02.2013 - 20:22)
Цитата (Oggy @ 23.02.2013 - 00:20)
Вы предлагаите убрать текст и оставить текст нарисованный ?

Я предлагаю тебе лично определиться, какой из двух текстов нужен и оставить его smile.gif А уж какой оставить, а какой убрать... Это надо смотреть, каков же дизайнерский замысел.

Хорошо). Тогда в целях развития...как сделать чтобы тексты совпадали при изменении размеров окна ? После чего нарисованый текст уберётся.
sergeiss
Цитата (Oggy @ 23.02.2013 - 00:34)
Тогда в целях развития...

А для этого выдели только ту часть HTML и CSS, которая за это отвечает в твоем коде и покажи тут. Вместе подумаем.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Oggy

<div id="header">
<div
id="up_text_one">МАГАЗИН НВ</div>
</div>




#header {
height: 310px;
width:100%;
background-image: url(../pic/head-2.png);
background-position:top center;
background-repeat:no-repeat;
}

#up_text_one {
position: absolute;
float: left;
left: 10%;
top: 21px;
color: white;
font: 19px Verdana, Arial, Tahoma, sans-serif;
}
sergeiss
Мне кажется, что ты никогда и не выставишь их на одно и то же место, при таком подходе.

Вот смотри. Для первого ДИВа бэкграунд позиционируется относительно центра. А вложенный ДИВ - в процентах. И их положения вовсе не обязаны совпадать! По сути, это получаются как бы разные единицы измерения, типа как "килограммы" и "километры".

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
OleKh
можно попробовать сделать <div id="up_text_one"> относительно родительского <div>

#up_text_one {
position: relative;
left: 10%; //фиксированный отступ в px, выставить чтобы совпал с текстом
т.к. на картинке background-image: url(../pic/head-2.png);
top: 21px;
}
Oggy
Цитата (OleKh @ 22.02.2013 - 21:45)
можно попробовать сделать <div id="up_text_one"> относительно родительского <div>

#up_text_one {
position: relative;
left: 10%; //фиксированный отступ в px, выставить чтобы совпал с текстом
т.к. на картинке background-image: url(../pic/head-2.png);
top: 21px;
}

Для высоты я залез в минуса....и всёравно несовпадает при изменении размера окна
OleKh
Цитата (Oggy @ 22.02.2013 - 21:57)
.и всёравно несовпадает при изменении размера окна

Скажите пожалуйста) Наивно полагаете "должно было совпасть". Может ещё надо было пиксели подсчитать ?!
Rock_N
Цитата (Oggy @ 23.02.2013 - 00:12)
Здравствуйте. Только начал верстать. Проблема вот в чём:
У меня есть хедер...он выравнивается по середине страницы. Мне надо поместить текст "МАГАЗИН НВ" на картинку в хедере так, чтобы етот текст совпадал с нарисованим текстом "МАГАЗИН НВ" по мере того как изменяю размер окна.
Вот сайт.
Подскажыте пожалуйста что я делаю нетак....

Да не будет этого,картинка статичная,а текст,даже если ты в % или em задашь,не будет совпадать с шрифтом картинки(ах да,еще зависит какой шрифт применялся для написания текста картинка).Так что не морочь голову подгонкой,а просто сотри текст с картинки,и оставь свой написанный.

_____________
Сумашедшим жить легко=)
Oggy
Цитата (Rock_N @ 23.02.2013 - 10:27)
Цитата (Oggy @ 23.02.2013 - 00:12)
Здравствуйте. Только начал верстать. Проблема вот в чём:
У меня есть хедер...он выравнивается по середине страницы. Мне надо поместить текст "МАГАЗИН НВ" на картинку в хедере так, чтобы етот текст совпадал с нарисованим текстом "МАГАЗИН НВ" по мере того как изменяю размер окна.
Вот сайт.
Подскажыте пожалуйста что я делаю нетак....

Да не будет этого,картинка статичная,а текст,даже если ты в % или em задашь,не будет совпадать с шрифтом картинки(ах да,еще зависит какой шрифт применялся для написания текста картинка).Так что не морочь голову подгонкой,а просто сотри текст с картинки,и оставь свой написанный.

Вроде получилось. Текст "МАГАЗИН НВ" и "ФОРУМ НВ" там где надо при изменени размеров окна. Теперь можна удалять снизу нарисованый текст. Всем спасибо за терпение )
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.