Текст на картинке

[Dizred]

Собственно такой вопрос, вот сайт: http://aquakop.ru/ , в header изображение и на нём номера телефонов, надо сделать так, чтобы номера телефонов были текстом,а не картинкой. (с изображения могу стереть номера, есть исходники)

 

Вот style:

   body { margin: 0; }   header {    display: block;    background: #f4f3e6 url(wp-content/uploads/2015/02/header-grad4.jpg) repeat-x;                 /* Градиент */   }   .header-bg {    background: url(images/header-animal.png) repeat-x center bottom;  min-width: 940px;    height: 438px; /* Высота шапки */    text-align: center; /* Выравнивание по центру */   }   .header-bg img {    position: relative; /* Относительное позиционирование */    top: 0px; /* Сдвигаем картинку вниз */   }

Вот код:

   <div class="header-bg">    <img src="wp-content/uploads/2015/02/header-top41.jpg" width="1250" height="597">   </div>

Знаю фигня, но помогите пожалуйста...

[kattiperk]

<div class="header-bg">  <img src="wp-content/uploads/2015/02/header-top41.jpg" width="1250" height="597">  <div class="telephone-container">    <p class="telephone-item">      (916)070-71-72    </p>    <p class="telephone-item">      (916)070-71-72    </p>  </div></div>

.telephone-container {  position: absolute;  top: 0;  right: 0;}.telephone-container:before {  content: '';  position: absoulte;  top: 0;  left: -*на сколько пикселей влево от текста*  display: block;  width: *ширина скобки*;  height: *высота скобки*;}

Для текста эффекты сами напишите: тень, шрифт

 

Тут ещё list-style: none; задайте

Edited May 11, 2015 by kattiperk

[Dizred]

Спасибо за помощь, но всё-равно не получается...

Если просто сделать как Вы выше написали, то получается следующее:

 

http://aquakop.ru/wp-content/uploads/2015/05/Снимок1.png

 

А если начинать играть с позицией Top в 

.telephone-container {  position: absolute;  top: 0;  right: 0;}

Например 20 или 300, то всё встает в одну позицию и всё, короче криво...

 

Вот так: http://aquakop.ru/wp-content/uploads/2015/05/Снимок2.png ,а если ещё и right изменить, то просто в левую сторону всё перекидывается...

[kattiperk]

Для header-bg задаёте position: relative, которое не даст контейнеру с абсолютным позиционированием выйти за границы контейнера, так как header-bg - родитель для telephone-container

[Dizred]

   .header-bg {    repeat-x center bottom;  min-width: 940px; position: relative;

Задал и ничего не изменилось 

Edited May 12, 2015 by Dizred

[kattiperk]

Картинку

<img src="wp-content/uploads/2015/02/header-top41.jpg" width="1250" height="597">

нужно обернуть в контейнер с шириной в 1250px и position: relative;

Потом для telephone-container прописать то, что написала выше

Edited May 12, 2015 by kattiperk

[Dizred]

Картинку

<img src="wp-content/uploads/2015/02/header-top41.jpg" width="1250" height="597">

нужно обернуть в контейнер с шириной в 1250px и position: relative;

Потом для telephone-container прописать то, что написала выше

Если бы я это мог сделать, то не просил помощи..((Обернуть в контейнер...и т.д.

[Vlad]

Вы не можете изменять html-код или не знаете что такое "обернуть в контейнер"? Если доступ к редактированию имеется, то просто измените свой код на тот, что предложила kattiperk.

[Dizred]

Вы не можете изменять html-код или не знаете что такое "обернуть в контейнер"? Если доступ к редактированию имеется, то просто измените свой код на тот, что предложила kattiperk.

Обернуть в контейнер.

[Vlad]

"Обернуть" - это всего лишь поместить код внутрь <div>. Вместо картинки получится три строки.

<div class="img-container"> <img src="wp-content/uploads/2015/02/header-top41.jpg" width="1250" height="597"></div>

В стилях укажите:

.img-container { position: relative;}

[Dizred]

 

"Обернуть" - это всего лишь поместить код внутрь <div>. Вместо картинки получится три строки.

<div class="img-container"> <img src="wp-content/uploads/2015/02/header-top41.jpg" width="1250" height="597"></div>

В стилях укажите:

.img-container { position: relative;}

 

Всё сделал как говорили выше, получилось в итоге:

   body { margin: 0; }   header {    display: block;    background: #f4f3e6 url(wp-content/uploads/2015/02/header-grad4.jpg) repeat-x;                 /* Градиент */   }   .header-bg {    repeat-x center bottom;  min-width: 940px; position: relative;    height: 438px; /* Высота шапки */    text-align: center; /* Выравнивание по центру */   }   .header-bg img {    position: relative; /* Относительное позиционирование */    top: 0px; /* Сдвигаем картинку вниз */   }.telephone-container {  position: absolute;  top: 10;  right:0;}.telephone-container:before {  content: '';  position: absoulte;  top: 20;  left: -*на сколько пикселей влево от текста*  display: block;  width: *ширина скобки*;  height: *высота скобки*;}.img-container { position: relative;}

и

<div class="header-bg">	<div class="img-container">	<img src="wp-content/uploads/2015/02/header-top41.jpg" width="1250" height="597">	</div>  <div class="telephone-container">    <p class="telephone-item">      (916)070-71-72    </p>    <p class="telephone-item">      (916)07-222-66    </p>  </div></div>

Результат всё-ровно такой же, что описывал выше:

 

 

Спасибо за помощь, но всё-равно не получается...

Если просто сделать как Вы выше написали, то получается следующее:

 

http://aquakop.ru/wp-content/uploads/2015/05/Снимок1.png

 

А если начинать играть с позицией Top в 

.telephone-container {  position: absolute;  top: 0;  right: 0;}

Например 20 или 300, то всё встает в одну позицию и всё, короче криво...

 

Вот так: http://aquakop.ru/wp-content/uploads/2015/05/Снимок2.png ,а если ещё и right изменить, то просто в левую сторону всё перекидывается...

[kattiperk]

<div class="header-bg">  <div class="img-container">    <img src="wp-content/uploads/2015/02/header-top41.jpg" width="1250" height="597">    <div class="telephone-container">      <p class="telephone-item">        (916)070-71-72      </p>      <p class="telephone-item">        (916)07-222-66      </p>    </div>  </div></div>

.img-container {  min-width: 1250px;  margin: 0 auto;}.telephone-container {  position: absolute;  top: 15px;  right: 65px;}

Внимательно точно так же скопируй)

Edited May 13, 2015 by kattiperk

[kidrock]

.img-container {

min-width: 1250px;

max-width: 940px;
margin: 0 auto;

position: relative;
}

 

.telephone-container {
position: absolute;
top: подобрать значение
right: подобрать значение
}

 

стили шрифта: размер, цвет, семейство, тени и т.д. нужно дописывать, естественно

 

в  HTML докуменете:

 

<img src="wp-content/uploads/2015/02/header-top41.jpg" width="940" height="594">

 

и вообще, по хорошему, картинку нужно резать/сжимать до указанного размера в фотошопе, иначе у вас происходит никому ненужное масштабирование картинки при уменьшении окна браузера, да и нет никакого смысла делать картинку шире основной ширины сайта

Edited May 13, 2015 by kidrock

[Dizred]

<div class="header-bg">  <div class="img-container">    <img src="wp-content/uploads/2015/02/header-top41.jpg" width="1250" height="597">    <div class="telephone-container">      <p class="telephone-item">        (916)070-71-72      </p>      <p class="telephone-item">        (916)07-222-66      </p>    </div>  </div></div>

.img-container {  min-width: 1250px;  margin: 0 auto;}.telephone-container {  position: absolute;  top: 15px;  right: 65px;}

Внимательно точно так же скопируй)

Спасибо! А можно как-то не резать картинку в фотошопе, а чтобы было определенное место этих телефонов в шапке? А то правда при разных разрешениях они бегают по всей шапке...

[kidrock]

было бы можно указать картинке: <img src="wp-content/uploads/2015/02/header-top41.jpg" width="100%" height="597"> но сама картинка при этом должна быть всё равно подогнана под макет.

 

Короче говоря, доведите изображение до правильной кондиции и всё будет нормально. Это делается за 2 минуты.

[Dizred]

я то подганю, только напишите по подробней что именно

[kidrock]

У вас основная ширина контента 940рх, а блок с картинкой 1250рх. Нужно сделать картинку 940рх и прописать ширину 940рх, при этом фоновый градиент возможно придётся также подгонять. 

[Dizred]

Хорошо,а что надо будет добавить в код?или просто width="100%" и текст станет статичным по отношению к фону и не будет скакать?

[kidrock]

Здесь я один раз уже написал: http://htmlforum.ru/index.php?showtopic=52840&p=353840

 

Вот обрезанная картинка: http://piccy.info/view3/8193568/0e07e513a7ead252af8078e87f478148/orig/

[Dizred]

Все исправил, вот что получилось и всё-ровно прыгает, где косяк?  http://aquakop.ru/

body { margin: 0; }header {display: block;background: #f4f3e6 url(wp-content/uploads/2015/05/Header2.png) repeat-x;                 /* Градиент */}.header-bg {repeat-x center bottom;  min-width: 940px; position: relative;height: 438px; /* Высота шапки */    text-align: center; /* Выравнивание по центру */}.header-bg img {position: relative; /* Относительное позиционирование */top: 0px; /* Сдвигаем картинку вниз */}.telephone-container:before {  content: '';  position: absoulte;  top: 20;  left: -*на сколько пикселей влево от текста*  display: block;  width: *ширина скобки*;  height: *высота скобки*;}.img-container {  min-width: 940px;  margin: 0 auto;  position: relative;}.telephone-container {  position: absolute;  top: 25px;  right: 185px;}

<div class="header-bg">  <div class="img-container">    <img src="wp-content/uploads/2015/05/Header.png" width="940" height="522">    <div class="telephone-container">      <p class="telephone-item">        <h2>(916)070-71-72</h2>      </p>      <p class="telephone-item">        <h2>(916)07-222-66</h2>      </p>    </div>  </div></div>

[kidrock]

У вас:

 

.img-container {
min-width: 940px;
margin: 0 auto;
position: relative;
}

 

 

А должно быть:

 

.img-container {

max-width: 940px;
margin: 0 auto;
position: relative;
}

 

Смотрите внимательно в чём разница.

Edited May 13, 2015 by kidrock

[kattiperk]

у тега h1 по умолчанию margin стоит. уберите

[Dizred]

Ребят! Спасибо большое за помощь и терпение, вроде стало более менее!

[kidrock]

Ребят! Спасибо большое за помощь и терпение, вроде стало более менее!

 

С вас пиво А картинку советую мою попробовать. И шрифты сделать крупнее, читать мелкий текст неприятно. В общем, дело, конечно, хозяйское. Но есть ещё что допиливать.

Edited May 13, 2015 by kidrock

[kattiperk]

А теперь скобку способом :before и пост продолжится)