| Autor | Zpráva | ||
|---|---|---|---|
| neregistrovaný Profil * |
#1 · Zasláno: 9. 9. 2014, 18:37:49
Zdravím,
mám takový záhadný problém. Mám odkaz "a", který chci nastylovat tak, aby vypadal jako tlačítko. Mám tento css styl: {
display: block;
height: 49px;
width: 163px;
float: right; /* Protože vlevo je text, takže tlačítko chci dát doprava vedle něj*/
margin: 60px 63px 0 0; /* odsazení od rodičovského divu */
color: #fbfbf3;
font-family: 'Roboto_bold';
font: 15px;
text-decoration: none;
background: url(images/big-title-button.png) 0px 0px no-repeat;
}
Problém je, že jakmile přidám padding-top, tak se mi celý odkaz rozhodí a zobrazí se mi větší část obrázku včetně hoveru, který mám pod ním vyřízly. Nechápu to, jelikož po přidání paddingu by se měl přeci jen text odstrčit od okraje toho obrázku a ten by se měl zobrazit i pod paddingem. Ale funguje to divně a nechápu proč? |
||
| Trejpa Profil |
#2 · Zasláno: 9. 9. 2014, 18:47:09
neregistrovaný:
Bez obrázku na pozadí budu jen hádat, ale asi se strefím. Vypadá to, že netušíš, že padding se k velikosti bloku připočítává, takže s paddingem třeba 10px bude odkaz vysoký 69 px a široký 183 px, na což ti zřejmě nesedí velikost pozadí. Jak řešíš situaci, kdy si uživatel zvětší písmo? Jinak bez obrázku je bílé písmo na bílém pozadí. |
||
| Marschmallow Profil |
neregistrovaný:
Zkus použít (není to dobré řešení, ale je to taky jedna z možností): <a href="http://djpw.cz"><input name="DJPW.cz" type="submit"></a> |
||
| neregistrovaný Profil * |
#4 · Zasláno: 9. 9. 2014, 19:12:15
Trejpa:
„Vypadá to, že netušíš, že padding se k velikosti bloku připočítává, takže s paddingem třeba 10px bude odkaz vysoký 69 px a široký 183 px, na což ti zřejmě nesedí velikost pozadí.“ Jo, to jsem si neuvědomil a je to tím. Když uberu šířku widtho velikost paddingu, tak je vše ok. Jen nechápu tu otázku, co kdy si uživatel zvětší písmo? Tomu se dá asi těžko předejít. |
||
| Bubák Profil |
#5 · Zasláno: 9. 9. 2014, 19:16:41
Tak je to správně, přesně podle představ W3C.
http://www.webylon.info/K.10 Okraje objektů - margin a padding Musíš s paddingem počítat, nebo v CSS deklarovat jiný box model: box-sizing: border-box; Pokud požaduješ vertikální vycentrování jednořádkového textu, můžeš deklarovat stejnou hodnotu pro height a line-height: line-height: 69px; Pokud požaduješ vertikální vycentrování textu, můžeš deklarovat: display: table-cell; /* funguje od IE8 */ vertical-align: middle; Mimo téma: na řádku 9 máš chybu, jsou dvě možnosti, jak ji opravit: font-size: 15px; font: 15px 'Roboto_bold', sans-serif; |
||
| Marschmallow Profil |
#6 · Zasláno: 9. 9. 2014, 19:17:37
|
||
| Str4wberry Profil |
#7 · Zasláno: 9. 9. 2014, 19:18:21
„Tomu se dá asi těžko předejít.“
Řešení je obrázkové tlačítko s volitelnou výškou. |
||
| neregistrovaný Profil * |
#8 · Zasláno: 9. 9. 2014, 19:25:46
Bubák:
> Mimo téma: > na řádku 9 máš chybu, jsou dvě možnosti, jak ji opravit: > font-size: 15px;font-size: 15px;nebo: > font: 15px 'Roboto_bold', sans-serif;font: 15px 'Roboto_bold', sans-serif;Sdružená CSS vlastnost font má totiž dvě povinné "položky", velikost písma a rodinu písma. Doporučuje se deklarovat obecnou rodinu písma, sans-serif. Aha, díky. To jsem si neuvědomil. Bral jsem to tak, že stačí třeba i jen jedna vlastnost (podobně jako u border nebo background). Díky za upozornění. |
||
|
Časová prodleva: 3 dny
|
|||
| CZechBoY Profil |
#9 · Zasláno: 12. 9. 2014, 23:08:49
Nepoužívej
font family: xxx_bold, ale font-family: xxx; font-weight: bold
|
||
| Str4wberry Profil |
#10 · Zasláno: 12. 9. 2014, 23:17:16
Proč?
|
||
| CZechBoY Profil |
#11 · Zasláno: 13. 9. 2014, 13:33:08
Str4wberry:
Protože u font-family uvádíš (doufám!) více fontů, kdyby náhodou uživatelskej prohlížeč neměl k dispozici ten tvůj font. Proč uvádět font-weight? Asi abych změnil tučnost/vyzáblost písma... |
||
| Str4wberry Profil |
Jistě, potíž je ale v tom, že z normálního písma často neuděláte změnou
font-weightu písmo ekvivalentní light/bold variantám při font-weight: normal.
|
||
| CZechBoY Profil |
#13 · Zasláno: 13. 9. 2014, 14:19:45
Str4wberry:
Nerozumím... Pokud chci tučné písmo tak bych měl uvést ve stylopisu font-weight: bold //(nebo číslem)
|
||
| Str4wberry Profil |
#14 · Zasláno: 13. 9. 2014, 14:43:37
Některá písma mají přímo light/bold varianty v samostatných souborech.
|
||
| juriad Profil |
#15 · Zasláno: 13. 9. 2014, 14:56:50
CZechBoY:
Některé fonty mají tučnou/tenkou variantu, která je čitelnější než algoritmické ztučnění/ztenčení základního fontu. Protože nemůžu najít nikde žádnou ukázku, ukážu to na příbuzném problému: kapitálky. 
Jistě znáš vlastnost text-transform: capitalize. Pokud font neobsahuje kapitálky, algoritmické zmenšení verzálek na velikost minusek dopadne často nepěkně (font se zdá řidší a v tomto případě i ostřejší) než pravé kapitálky. To může být důvod proč přilinkovat zvláštní font, který je tvořen kapitálkami a který budeš používat výhradně pro nadpisy, nápisy na tlačítkách atp. |
||
| Taurus Profil |
Podobně jako juriadova poznámka – někdy funguje pravá a nepravá italika.
|
||
| CZechBoY Profil |
Str4wberry:
A proč bych nemohl font definovat s font-weight: bold, font-weight: light, ... tak to teď dělám. Pořád nechápu v čem je problém. juriad: Jo, ale já se bavím o tučnosti. Mě jen zajímá proč definovat font takto: @font-face {
font-family: 'Roboto_bold';
font-weight: normal;
font-style: normal;
}@font-face {
font-family: 'Roboto';
font-weight: bold;
font-style: normal;
} |
||
| Taurus Profil |
#18 · Zasláno: 13. 9. 2014, 22:38:45
Protože Roboto normal a Roboto bold může vypadat odlišně od RobotoBold normal a RobotoBold bold. Ale o tom už psal Str4wberry. Roboto Bold zkrátka nemusí být stejné jako RobotoBold normal...
|
||
| Chamurappi Profil |
#19 · Zasláno: 13. 9. 2014, 23:12:14
Reaguji na Taura a ostatní:
Řekl bych, že CZechBoY neříká, že rozdíl mezi tučností normální verze písma a normálností tučné verze písma neexistuje, ale že není dobrý nápad deklarovat tučné písmo jako netučné, protože když se pak ten font nenačte, používá se další písmo v pořadí netučné. Nemám s webfonty moc zkušeností, ale jestli to dobře chápu, tak deklarace ve @font-face fungují jako pojítko mezi soubory s webfontem a tím, co se pak používá. Takže když řeknu „font ze souboru patlámo-bold.woff se jmenuje Patlámo a je tučný“, použije se písmo z uvedeného WOFFu tehdy, pokud deklaruji font-family: "Patlámo" a zároveň font-weight: bold. Kdybych o něm ve @font-face neprohlásil, že je tučný, a pak ho používal bez font-weight: bold, bylo by to jednak matoucí a jednak… viz předchozí odstavec a [#11].
|
||
| Taurus Profil |
#20 · Zasláno: 13. 9. 2014, 23:39:41
Chápu, semantika a situace nenačtení*.
Už jsem se však dostal do situace, kdy se mi líbila tučná verze netučného písma i netučná verze tučného zaráz, přičemž vzhledově stejné nebyly. Získal jsem tak v podstatě varianty normal, semibold a bold. (a nehezký extrabold). *Což by nemuselo vadit v případě využití font-face např. jen pro nadpisy, které jsou prostorově větší jak text, tedy význam zvýraznění zůstává zachovaný. |
||
| Str4wberry Profil |
#21 · Zasláno: 14. 9. 2014, 15:12:13
Rozumím, co chce CZechBoY naznačit.
Idea je taková, že napíšu: h1 {
font-family: Patlámo;
font-weight: bold;
}A díky nastavení ve @font-face nadpis Patlámem už extra ztučněný nebude. Jen když jsem to testoval, tak to nefungovalo napříč prohlížeči, tuším v Chrome se nadpis stejně ztučnil.
|
||
|
Časová prodleva: 10 let
|
|||
0