Autor Zpráva
neregistrovaný
Profil *
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
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 *
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
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;
nebo:
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.
Marschmallow
Profil
neregistrovaný:
Jen nechápu tu otázku, co kdy si uživatel zvětší písmo?
Živá ukázka.
Str4wberry
Profil
Tomu se dá asi těžko předejít.

Řešení je obrázkové tlačítko s volitelnou výškou.
neregistrovaný
Profil *
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í.
CZechBoY
Profil
Nepoužívej font family: xxx_bold, ale font-family: xxx; font-weight: bold
Str4wberry
Profil
Proč?
CZechBoY
Profil
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
Str4wberry:
Nerozumím...
Pokud chci tučné písmo tak bych měl uvést ve stylopisu font-weight: bold //(nebo číslem)
Str4wberry
Profil
Některá písma mají přímo light/bold varianty v samostatných souborech.
juriad
Profil
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;
}
místo
@font-face {
   font-family: 'Roboto';
   font-weight: bold;
   font-style: normal;
}
Taurus
Profil
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
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
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
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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