Napis na obrazku HTML CZY CSS


(Kloc221) #1

Witam

Chciał bym zrobić coś takiego jak na obrazku i nie wiem czy szukać kodu css i to jakoś zrobić. Czy po prostu zrobić to prostym kodem html bo nie wiem czy otrzymam efekt aby tekst na obrazku był na końcu odsunięty ? Co lepiej wykorzystać ?

gfdz.jpg


(mario@) #2

Grafikę dajesz jako tło dla danego boksu.


(Kloc221) #3

Mam coś takiego ale lekko nawala tekst nie jest po lewej i tło nie ma odpowiedniej wielkości...

Może ktoś mi to poprawi ??

.strg {

    float: right;

    width: 240px;

    height: 25px;

    background: #000 url('str_g/pak.png') top left no-repeat;

    text-align: center;

}


.strg span { float: right; margin-right: 4px; }

(mario@) #4
.strg {

        float: right;

        width: 240px;

        height: 25px;

        background: #000 url('str_g/pak.png') top left no-repeat;

    }


    .strg span {margin-left: 4px;color:#fff; }

Chcesz mieć po lewej a ustawiasz wszystko po prawej :stuck_out_tongue:

Masz tam width/height.


(Kloc221) #5

Użyłem takiego kodu

.strnox {

    float: right;

    width: 240px;

    height: 35px;

    background: #000 url('str_g/pak.png') top left no-repeat;

    text-align: left;

    display: block;

}

i otrzymałem taki efekt :

ettk.png

Tylko jak przenieść tekst do takiej pozycji : ??

gfdz.jpg


(mario@) #6

np.

.strnox span {color:#fff;margin:7px 0 0 19px;display:inline-block;}

(Mayerproject) #7

Hehe, mam identyczny problem jak odsunąć ten tekst :wink:


(Sitemaster) #8

padding http://www.kurshtml.boo.pl/css/atrybuty ... inesy.html


(Kloc221) #9

Próbowałem na rożne sposoby ale ten kod nie działa...


(mario@) #10

Pewnie nie działa Ci dlatego, że założyłem iż w boksie o class=strnox znajduje się tag .

np.

srer
[/code]


(Kloc221) #11

Wielkie dzięki mario@

Teraz się zastanawiam jak nadać tekstowi jakiś kolor i jak wyśrodkować to (bo jest kawałeczek na prawo) :

gfdgw.png


(mario@) #12

Kolor nadajesz w.strnox span{} parametr color.

Wywal z strnox float: right; i zobacz co będzie (dodatkowo dodaj parametr margin).


(Kloc221) #13

Kiedy to wywalam to się wszystko sypie i wchodzi pod obrazek który jest nad tym to samo kiedy dam tam center.


(mario@) #14

Dodaj do strnox margin-right: i ustaw sobie jakąś tam wartość.


(Kloc221) #15

Ok to już działa, nie wiem co z kolorem niby go zmieniam w css ale nic dalej czarny... Może zmienię po prostu w html ?


(mario@) #16

Użyj !important http://www.signs.pl/html/s/!important.php


(Kloc221) #17

Nie kapuję zrobiłem tak po prostu w html i działa, chyba nie ma różnicy oto kod :

Tekst

Tekst

Tekst

Tekst

[/code]