Autor Zpráva
Blow
Profil
Ahoj mám problém s pseudoelementem :before
mám nadpis a chci pred něj dát obrázek, font mám 16px; a obrázek je čtvrec o hraně 30px;

No a problém je ten, že obrázek i font se zarovnají dolu na spodek - spodek obrázku a fontu je na stejný urovní.
Takže nad nadpisem mám zbytečnej 14px místa

Chtěl bych to udělat aby se srovnali podle středu --- 7px volno 16px nadpis a 7px volno pod nadpisem.

A už si nevím rady jak na to.

h2:before{content :url(../images/neco.gif);}
h2{
background:#4b4b4b url(../images/pozadi.gif) no-repeat scroll right center;
        display:block;
        text-align:left;
        color:#ffffff;
        font-size:16px;
        height:30px;  
}


chtel bych to vyresit bez zmeny html kodu.
Chamurappi
Profil
Reaguji na Blowa:
Pseudoelement :before má slabou podporu (s url v contentu ještě slabší), proč nepoužiješ něco normálnějšího?

font-size:16px;
Neurčuj velikost písma v pixelech. Stejně ten text nejspíš nebude vysoký 16 pixelů.

Chtěl bych to udělat aby se srovnali podle středu
Zkus line-height.
Blow
Profil
jasně nejde mi tak uplně o to konkretní číslo. to je fuk - slo o to ze obrazek je vetsi nez font.

line-height sem zkoušel a nefuguje - když jsem dal třeba 60px na zkoušku tak se posunulo i s obrázkem dolu ale docílit toho že by jen txt posulun nahore se mi nepovedlo.

normálnějšího? co například - bez uprav v html kodu?
Chamurappi
Profil
Reaguji na Blowa:
normálnějšího? co například - bez uprav v html kodu?
Normální je upravit HTML kód. To snad ve tvém případě není triviální?

docílit toho že by jen txt posulun nahore se mi nepovedlo
Obvyklé postupy pro rovnání textu vedle <img> jsi zkoušel?
Blow
Profil
vertical-align sem zkousel ale žádná změna.
Jak by takové řešení mělo vypadat? zkoušel sem jak middle tak top ale ani jedno nefungovalo
Chamurappi
Profil
Reaguji na Blowa:
Ale odkaz na živou ukázku nedáš a prohlížeče, ve kterých to zkoušíš, také nezmiňuješ. Tak přeji hodně štěstí.
Mně line-height funguje.
Blow
Profil
Zkoušim v FF 3.5 a IE8.0 kdyby to nešlo ve starších verzích nedivil bych se.
a odkaz nedám protože to mám jen na lokále
A řekneš mi jakou hodnotu tam dáváš že tit o funguje
Chamurappi
Profil
Reaguji na Blowa:
odkaz nedám protože to mám jen na lokále
Tak to někam nahraj.
Ty máš na lokále problém, ale nemůžeš upravit HTML kód?

řekneš mi jakou hodnotu tam dáváš že tit o funguje
Dávám tam 109px, což je výška obrázku, který jsem použil ve svém pokusu.
Blow
Profil
ja mám vysku obrazku 29 a kdyz dam line-height 29 tak je to beze zmeny
<html>
    <head>   
        <link rel="stylesheet" href="system.css" type="text/css" />
    </head>
    <body>
        <h2>Ahoj</h2>
    </body>
</html>

h2:before{content :url(h3-l-black.gif);}
h2{
background:#4b4b4b url(h3-r-black.gif) no-repeat scroll right center;
        display:block;
        text-align:left;
        color:#ffffff;
        font-size:18px;
    height:29px;
   vertical-align:middle;
   line-height:29px; 
}

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: