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

[Allan]

Здравствуйте!

Прошу помощи у Вас.

Есть шапка сайта,на ней расположен текст,при просмотре сайта в полном окне все нормально,но стоит уменьшить окно браузера,то надпись на шапке съезжает,не знаю вот как решить эту проблему,пример на скриншоте:

1 - полное окно браузера,надпись "название автошколы" там где надо.

2 - уменьшенное окно,надпись уезжает вверх.

HTML:

<div id='header'> 
<img src='/img/logo.jpg' width='100%'> 
<div id='textlogo'> 
<h1 class='name'>Название автошколы</h1> 

<h1 class='addres'>(495)321-21-12</h1> 
</div>

CSS:

#textlogo  h1.name { 
 margin: 0;  
 padding: 0; 
font-size: 240%; 
 position: relative; 
top: -127px; 
left: 118px; 
float: left; 
text-align: right; 
height: 0px; 
font-weight: bold; 
color: white; 
 }

Менял Relative на absolute,но тоже не помогло,текст съезжает и все тут.

Подскажите пожалуйста

[pashkje]

Во-первых некоем случае не используй более одного тега h1 на одной странице (сильно может сказаться на индексации сайта), во-вторых. Код слишком большой, много ненужного. И желательно не вставляй изображение, через <img>, вот я попробовал, через бекграунд : http://jsfiddle.net/S6NPP/13/ Текст можешь двигать пикселями, через маргин.

[Allan]

Во-первых некоем случае не используй более одного тега h1 на одной странице (сильно может сказаться на индексации сайта), во-вторых. Код слишком большой, много ненужного. И желательно не вставляй изображение, через <img>, вот я попробовал, через бекграунд : http://jsfiddle.net/S6NPP/13/ Текст можешь двигать пикселями, через маргин.

Через Бекгроунд не выходит,т.к шапка не умещается вся,а задавать точные размеры наверно не вариант,разрешения то у всех разные,но спасибо за совет,приму к сведению

[Tsybin]

Соглашусь, что шапку лучше делать через бэкграунд, задав размеры и позиционирование. В данном примере я не понимаю вот это:

#textlogo  h1.name { 
 margin: 0;  
 padding: 0; 
[b]font-size: 240%; [/b] - Зачем???? Обязательно в процентах? Под мобильники делаете?
position: relative; 
[b]top: -127px;[/b]  - Зачем???? Зачем?
left: 118px; 
float: left;
text-align: right; 
[b]height: 0px; [/b] - Зачем??? Как высота 0? Шрифт 240 процентов а высота 0?
font-weight: bold; 
color: white; 
 }

[rikimaru2013]

На скринах автора видно, что при уменьшения размеров браузера увеличился шрифт (на скрине видно же). А картинка поднялась так как h1 отступы в относительных единицах - больше шрифт - больше отступ.

1) не используйте h1 в такой "сране" так, как h1 это семантически важный элемент для поисковиков

2) привыкайте подключать reset.css (примеры погуглите)

Если хотите картинкой - то сделайте .psd файл - вставляйте шапку картинкой или бэкграундом. А текст через отрицательный text-indent

[newtvis]

Если хотите картинкой - то сделайте .psd файл - вставляйте шапку картинкой или бэкграундом. А текст через отрицательный text-indent

От себя посоветую использовать метод от boilerplate, где text-indent задается только для IE ниже 9 версии.

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* Для старых версий IE */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

[Allan]

Благодарю всех за советы,за уделенное время,сегодня буду разбираться окончательно