Надпис над снимка

[BahFullFen]

Здравейте.
Днеска си изработих лента за един сайт,но не ми се занимаваше да слагам текст на лентата,но искам да си сложа заглавия на секциите.
Някой знае ли дали може по някакъв начин да може да се пише над снимка?

 

[unknown]

<div>


Ето така

<div style="position:absolute;left:50px;top:100px; "> Текста </div>

Като си нагласиш left:50px;top:100px според това каде искаш да е текста

 

[Lam40]

Според мен по-добрият вариянт е с margin, защото това absolute при различните резолюции ще направи проблем.

<div style="width: 200px; margin-top: 40px; margin-right: auto; margin-bottom: auto; margin-left: 400px;">Текст</div>

Ето това позиционира текста на 40рх отгоре и 400рх отляво.

 

[BahFullFen]

Аз значи съм сложил тази лента най отгоре на един див и мога ли с него като му задам някакви параметри да излезе теста на лентата?

По втория начин е най-добре за сега,но като му задам -25 на margin-top и самия див се свива до такава степен,че лентата не излиза цялата(Недостига дължина).

 

[Lam40]

Как си я задал таци картинка? С <img src... или чрез CSS - background-image.

Ако е по първият начин може направо да пишеш след <img...
Напр.

<div><img src="bg.jpg" />Текст</div>

и така този текст ще ти се появи горе в левия ъгъл на картинката. А отделно този текст можеш да го сложиш в един <span> и да му зададеш някакъв стил относно позиционирането, което ще стане по същият начин, както съм написал по-горе.

 

[BahFullFen]

<div class="b" style="text-align:center"><img src="lenta1.jpg" WIDTH="100%" HEIGHT="25" alt="">Текст</div>

Така излиза в центъра под лентата.Нещо си се объркал.

 

[Lam40]

Пробвай да го зададеш като фон на таблица.

<table width="100%" height="25px" background="lenta1.jpg">
<tr>
<td>Текст</td>
</tr>
</table>

или като фон на div

<div style="width: 100% height: 25px; background: url(lenta1.jpg);">Текст</div>

ЕДИТ: правописна грешка. една кавичка в повече, ако не стане пробвай
url('lenta1.jpg') no-repeat;

 

[BahFullFen]

<div class="b" style="text-align:center" style="width: 100% height: 25px; background: url('lenta1.jpg') no repeat;">Tekst</div>

Е не знам какво стана ама лентата не излиза :lol:

 

[StormBreaker]

.lenta
{
      text-align: center;
      width: 100%;
      height: 25px;
      background: url('lenta1.jpg') no-repeat;
}

<div class="lenta">Tekst</div>

ЕДИТ:: Още ми се спи

 

[Lam40]

<div class="b" style="text-align:center" style="width: 100% height: 25px; background: url('lenta1.jpg') no repeat;">Tekst</div>

Е не знам какво стана ама лентата не излиза :lol:

E горе съм написал малко по различно

<div class="b" style="text-align: center; width: 100%; height: 25px; background: url('lenta1.jpg') no-repeat;">

Storm е написал същото като мен, само че като external, но е изпуснал едно - , no-repeat.

 

[BahFullFen]

Ми само ако ми кажеш,как да си направя ширината на картинката да е 100% всичко ще е тип-топ.

 

[Lam40]

Там където пише width: 100%; го правиш на width: *px; ,където * е ширината на картинката.

 

[BahFullFen]

Това не е ширината на картинката,а на div-а.

 

[Lam40]

Ами нали точно това трябва да направиш, нали картинката ти е фон на див-а, неможе див-а да ти е широк 200рх, а картинката 300рх. Затова на дива се задават широчина и височина, каквито са на картинката.
П.П. А ако става въпрос лентичката да се повтаря, на дължина, там където пише no-repeat, пишеш repeat-x ако искаш да се повтаря по хоризонтала и repeat-y ако искаш да се повтаря по вертикалата.

 

[BahFullFen]

Стана най-после Благодаря много на всички и най вече на lam40.Заслужи си супорта :wink: