| Autor | Zpráva | ||
|---|---|---|---|
| Blow Profil |
#1 · Zasláno: 4. 11. 2009, 17:59:41
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 |
#2 · Zasláno: 4. 11. 2009, 18:07:28
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 |
#3 · Zasláno: 4. 11. 2009, 18:19:21 · Upravil/a: Blow
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 |
#4 · Zasláno: 4. 11. 2009, 18:31:05
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 |
#5 · Zasláno: 4. 11. 2009, 18:37:36 · Upravil/a: Blow
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 |
#6 · Zasláno: 4. 11. 2009, 18:45:45
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 |
#7 · Zasláno: 4. 11. 2009, 18:52:28
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 |
#8 · Zasláno: 4. 11. 2009, 19:01:40
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 |
#9 · Zasláno: 4. 11. 2009, 19:04:52
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;
} |
||
|
Časová prodleva: 16 let
|
|||
0