| Autor | Zpráva | ||
|---|---|---|---|
| Paulie Profil * |
#1 · Zasláno: 15. 3. 2012, 22:11:43 · Upravil/a: Moderátor (editace znemožněna) 15. 3. 2012, 23:57:26
Ahoj lidi.
Snažím se udělat kruh pomocí CSS3 vlastnosti border radius a vycentrovat do něj text a někde se mi rodí okraj, který tam nemá co dělat. <div id="menu">
<a href="index.php">Aktuality</a>
<a href="o_mne.php">O mně</a>
<a href="sluzby.php">Služby</a>
<a href="volna_tvorba.php">Volná tvorba</a>
<a href="kontakt.php">Kontakt</a>
</div>#menu a {
padding: 0px;
padding-top: 30px;
margin: 40px;
display: block;
width: 120px;
max-height: 120px;
height: 120px;
text-align: center;
background-color: #006fa9;
-moz-border-radius: 60px;
border-radius: 60px;
float: left;
}Živá ukázka Položky menu se mi podivně roztahují dolů i když tam je explicitně padding-bottom na nule... Moderátor Chamurappi: Titulek „border-radius“ nevystihuje podstatu dotazu. Příště zkus prosím vymyslet lepší.
|
||
| panther Profil |
#2 · Zasláno: 15. 3. 2012, 22:18:41
Paulie:
máš tam 30px horní padding, takže výška toho odkazu je 120 (výška) + 30 (padding) = 150px. Pokud chceš mít text na středu, vyhoď padding a přidej line-height: 120px.
|
||
| Paulie Profil * |
#3 · Zasláno: 15. 3. 2012, 22:25:39
panther:
Zachránil jsi mi noc, díky. Už zase jsem zapomněl, že padding musím započítat do výšky... A je nějaký dobrý trik jak to udržet uprostřed i když jeden z těch nápisů vleze na druhý řádek? |
||
| LosFilipos Profil |
#4 · Zasláno: 15. 3. 2012, 22:28:55
Paulie:
Výška elementu se počítá až od toho paddingu, takže do výslené výšky se sečte padding + height. Height Pokud má být element vysoký 120px, musí mít zadanou výšku 90px (120 height - 30 padding-top). http://tests.designovej.eu/djpw/border-radius.html Každopádně použití border-radius resp. -moz-border-radius není úplně nejšťastnější řešení, neboť tyto nefungují v IE - odkaz se zobrazí jako čtverec. Doporučuji použít obrázek jako background-image.
|
||
| panther Profil |
#5 · Zasláno: 15. 3. 2012, 22:32:37
Paulie:
„A je nějaký dobrý trik jak to udržet uprostřed i když jeden z těch nápisů vleze na druhý řádek?“ od IE8 je podporována hodnota display: table-cell, která toto umožní ve spojení s vertical-align: middle. Jinak je vertikální centrování složitější, jistě si zvládneš něco dohledat a pročíst.
|
||
| Paulie Profil * |
#6 · Zasláno: 15. 3. 2012, 22:36:50
LosFilipos:
Testuji to zároveň i v IE9 a tam se to zobrazuje správně... O "obrázkové metodě" samozřejmě vím, jen jsem chtěl web udělat v souladu s CSS3, tak od toho právě upouštím... panther Děkuji za reakci, jdu hledat. Přeji pěkný večer. |
||
| Chamurappi Profil |
#7 · Zasláno: 15. 3. 2012, 23:55:37
Reaguji na Paulie:
„jen jsem chtěl web udělat v souladu s CSS3“ Obrázky jsou v souladu s CSS 3. „zase jsem zapomněl, že padding musím započítat do výšky“ Všechny prohlížeče podporující border-radius podporují i box-sizing, kterým si můžeš přepnout box model.
|
||
| dranel91 Profil |
#8 · Zasláno: 16. 3. 2012, 09:44:57
Chamurappi:
„Obrázky jsou v souladu s CSS 3.“ Z jakého důvodu píšeš „CSS 3“ s mezerou? :-) |
||
| Chamurappi Profil |
#9 · Zasláno: 16. 3. 2012, 12:38:35
Reaguji na dranela91:
Protože se verze odjakživa psaly častěji s mezerou a nejsou nijak důležité, pořád je to ten samý mizerný stylovací jazyk, akorát trochu rozšířený. Verze netvoří součást jména. Krom toho se mi vizuálně zápis ABCD2.5 nelíbí, takže musím psát ABCD 2.5, v zájmu konzistence tedy píšu i ABCD 8. |
||
|
Časová prodleva: 12 let
|
|||
0