полный фона и отзывчивый

Question

см ссылка ниже

как вы можете видеть, что есть текст на заголовке (заголовок изображение) текста: mail@yahoo.com (этот текст является частью изображения)

преобразовать ту часть заголовка изображения, чтобы связать с ниже код

<div id="hw"><div id="header"><img src="test.jpg" /><a href="#" id="ResponsiveLink"></a></div></div> 

и это #link

#ResponsiveLink { 
    width: 267px; 
height:29px; 
display:block; 
position:absolute; 
top:100px; 
margin-left:413px; 
} 

Как мы можем заставить эту ссылку реагировать на другие устройства? например, когда браузер является узким положением тега с идентификаторами #ResponsiveLink, но я хочу, чтобы это было исправлено по моему тексту.

Answer 1

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

Однако, если вам нужно временное решение, следующие изменения CSS будет работать на текущей странице:

#header { 
    margin: 0 auto; 
    max-width: 980px; 
    position: relative; 
} 

#ResponsiveLink { 
    background: none repeat scroll 0 0 #FF0000; 
    display: block; 
    height: 30%; 
    left: 60%; 
    position: absolute; 
    right: 12%; 
    top: 37%; 
} 

Answer 2

Лучший способ, который я знаю, заключается не в том, чтобы разместить большую часть экрана в качестве изображения. С другой стороны, вы, вероятно, не хотите вырезать изображение на несколько отдельных изображений. Поэтому я предлагаю использовать CSS Sprit.

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

Если вы все еще хотите использовать изображение в виде всего заголовка, в одном теге HTML, который не рекомендуется вообще, использование процентной точки для вашего #ResponsiveLink будет работать. Вы должны просто добавить width: 100% всем родителям: header, hw и wrapper.

---

После комментарии:

#ResponsiveLink { 
    background: none repeat scroll 0 0 #FF0000; 
    display: block; 
    height: 0; 
    left: 58%; 
    margin-left: 0; 
    margin-top: 7%; 
    padding-bottom: 3%; 
    position: absolute; 
    top: 0; 
    width: 25%; 
} 

Это позволит устранить проблему, из-за разницы между процентом позиции и края, верхний процент рассчитывается по высоте, но поля и отступы проценты первого абсолютного родителя вычисляются используя ширину родителя. По-прежнему существует проблема, связанная с максимальной шириной, которую вы можете исправить добавлением обертки внутри вашего #head с шириной 100% и максимальной шириной.

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