| Autor | Zpráva | ||
|---|---|---|---|
| xlifer Profil |
#1 · Zasláno: 17. 6. 2014, 14:57:44
Jak lze ve standardním módu "!doctype html" (v quirku to funguje) aby byl odkaz na definovanou šířku a výšku?
Takhle mi to odkay obalí pouze v rámci textu, ale chtěl bych odkazy jako boxy. Samozřejmě lze asi improvizovat, že obalím DIV o dané výšce a šířce odkazem (<a><div>odkaz</div></a>), ale není nějaké lepší "čísté" řešení? <!doctype html>
<style type="text/css">
.box {
width: 300px;
}
.box UL {
margin: 0;
padding: 0;
}
.box LI {
list-style-type: none;
}
.box A {
width: 300px;
height: 40px;
line-height: 40px;
background: #ff0000;
color: #ffffff;
}
.box A:hover {
background: #007f00;
}
</style>
<div class="box">
<ul>
<li><a href="#">Odkaz 1</a></li>
<li><a href="#">Odkaz 2</a></li>
<li><a href="#">Odkaz 3</a></li>
</ul>
</div> |
||
| Trejpa Profil |
#2 · Zasláno: 17. 6. 2014, 15:10:01
xlifer:
Řádkovým elementům nelze nastavovat rozměry. Můžeš ale odkaz přetypovat pomocí display: inline-block;, případně display: block;.
„Samozřejmě lze asi improvizovat, že obalím DIV o dané výšce a šířce odkazem (<a><div>odkaz</div></a>), ale není nějaké lepší "čísté" řešení?“ Tohle je také „čisté“ řešení. Je i validní. |
||
| juriad Profil |
display: block; |
||
| xlifer Profil |
A co je lepší použít? Obalení DIVem nebo display: block;
Subjektivně mi přijde "jistější" řešení obalení DIVem, ale netvrdím, že je to tak jisté jak píšu.. Nastavení display: bkock; je zase krásně čisté a stačí pouze jeden řádek do stylu oproti obalení DIVem. |
||
| Bubák Profil |
xlifer:
„v quirku to funguje“ Pouze v IE juriad: V CSS je možné řádek 12 smazat za předpokladu, že odkazy majý být stejně široké, jako menu. Já bych se obešel i bez obalového DIVu celého menu. http://kod.djpw.cz/jxdb http://kod.djpw.cz/jxdb- xlifer: Nevidím důvod, proč použít pro každý odkaz element navíc, display: block; funguje spolehlivě i v IE5.
|
||
| xlifer Profil |
#6 · Zasláno: 17. 6. 2014, 15:44:45
Bubák:
„Já bych se obešel i bez obalového DIVu celého menu.“ Tohle je perfektní. A co znamená v CSS zápis ".box li+li" ? To plus. A ješte jak upravit box v tomto řešení, aby text nebyl naražený úlně zleva, ale byl padding-left: 5px; ? Nebude to dělat někde problém, aby se k šířce nenačítal i ten padding-left 5px |
||
| juriad Profil |
Bubák:
Ponechal jsem všechny styly, které tam měl. Také jsem uvažoval o zrušení toho divu, ale pak jsem si uvědomil, že je to jen ukázka a v praxi může mít nějaký důvod (ten div může být levý sloupec na stránce a ten kromě menu může obsahovat třeba kontakt, nebo akční zboží). xlifer: To znamená, každý li, který následuje po li, tedy v praxi druhý a každý další. Zde je to použito jako oddělovač mezi položkami. Zkus si přidat do .box a vlastnost:
padding-left: 0.5em; Mimochem, použil jsem raději 0.5em - tedy velikost vztažená k písmu, než absolutní (px). Když zvětšíš písmo, tak se odsazení také trochu zvětší.
|
||
| xlifer Profil |
juriad:
„Ponechal jsem všechny styly, které tam měl. Také jsem uvažoval o zrušení toho divu, ale pak jsem si uvědomil, že je to jen ukázka a v praxi může mít nějaký důvod (ten div může být levý sloupec na stránce a ten kromě menu může obsahovat třeba kontakt, nebo akční zboží).“ Ano, je to tak. DIV je levý sloupec, který obsahuje to menu. „To znamená, každý li, který následuje po li, tedy v praxi druhý a každý další. Zde je to použito jako oddělovač mezi položkami.“ To jsem nikdy nepoužíl ani jsem to abych se pravdu přiznal v praxi moc používat neviděl... ale proč ne, když to funguje. „Mimochem, použil jsem raději 0.5em - tedy velikost vztažená k písmu, než absolutní (px). Když zvětšíš písmo, tak se odsazení také trochu zvětší.“ Souhlasím, lépe to už snad ani vyladit nejde. A přidat správně do .box A {} pochopil jsem dobře, ano? Bubák: „http://kod.djpw.cz/jxdb-“ A ještě se dívám, že je v tom CSS 2x .box ? .box {
margin: 0;
padding: 0;
width: 300px;
}
.box {
list-style: none;
}
.box a {
height: 40px;
line-height: 40px;
background: #ff0000;
color: #ffffff;
display: block;
}
.box a:hover {
background: #007f00;
}
.box li+li {
border-top: 1px solid #999999;
}
</style> |
||
| Bubák Profil |
#9 · Zasláno: 17. 6. 2014, 16:07:31
juriad:
„Ponechal jsem všechny styly, které tam měl.“ Chápu. xlifer: „o jsem nikdy nepoužíl ani jsem to abych se pravdu přiznal v praxi moc používat neviděl... ale proč ne, když to funguje.“ Funguje od IE 7 včetně, takže je to použitelné. Pokud tě to zajímá, můžeš kouknout na http://jecas.cz/css-selektory a na http://teststranek.kvalitne.cz/menu5/, případně i na další menu http://teststranek.kvalitne.cz/#menu, je to mírně postaršího data (neznamená historicky cenné), funguje od IE6 výše. |
||
| Tomáš123 Profil |
#10 · Zasláno: 17. 6. 2014, 16:14:38
xlifer:
„A ještě se dívám, že je v tom CSS 2x .box ?“ Možno sa Bubák pomýlil, urobil to naschvál, sám pre seba vyznačil, či to napísal tak, aby to bolo prehliadnejšie. Cez to všetko je jedno či tie vlastnosti napíšeš ku jednému alebo viacerým selektorom. |
||
| Bubák Profil |
Tomáš123:
„Možno sa Bubák pomýlil,“ Je to ničemu nevadící přehlédnutí, chyba, které jsem se dopustil při postupném zjednodušování a minimalizaci [#3] juriadova kódu, konkrétně o selektor v jeho CSS na řádku 8. Zpravidla (i v tomto případě) je jedno, zda se list-style deklaruje seznamu nebo položkám seznamu.
|
||
| xlifer Profil |
A když mírně upravím kód pro výpis box odkazů vedle sebe na řadek (horizontálně), tak by kód vypadal takto:
<style>
.box {
margin: 0;
padding: 0;
list-style: none;
}
.box li {
float: left;
border-right: 1px solid #ffffff;
}
.box a {
height: 40px;
line-height: 40px;
background: #ff0000;
color: #ffffff;
display: block;
float: left;
width: 300px;
padding-left: 0.5em;
}
.box a:hover {
background: #007f00;
}
</style>
<ul class=box>
<li><a href="#">Odkaz 1</a></li>
<li><a href="#">Odkaz 2</a></li>
<li><a href="#">Odkaz 3</a></li>
</ul> |
||
| Tomáš123 Profil |
#13 · Zasláno: 17. 6. 2014, 17:11:10
xlifer:
„tak by kód vypadal takto:“ Napríklad, ale: - radšej namiesto šírky a výšky určuj padding (to ale záleží od situácie, takže to nie je pravidlo);
- nepoužívaj vlastnosť height a line-height súčasne...Skús sa zamyslieť, načo je to dobré?;
- keď už určuješ šírku tak v percentách, aby to menu nejako vyzeralo pri zmenšení či zväčšení. Ja by som to urobil asi takto: http://kod.djpw.cz/mxdb - iba s paddingom
http://kod.djpw.cz/nxdb - s line-height a width
|
||
| Bubák Profil |
Tomáš123:
„- nepoužívaj vlastnosť height a line-height súčasne...Skús sa zamyslieť, načo je to dobré?;“ Jednoduché vertikální vycentrování jednořádkového textu v elementu pevné výšky, funkční i v IE6/7, využívá se třeba u obrázkových tlačítek . Je pravdou, že často není pevná výška nutná a lze použít třeba zmíněné odsazení paddingem. |
||
| Tomáš123 Profil |
#15 · Zasláno: 17. 6. 2014, 18:42:39
Bubák:
„Jednoduché horizontální vycentrování jednořádkového“ Možno sa mýlim Bubák, ale z kontextu mi vychádza, že si chcel použiť slovo "vertikální". Ako som k tomu dospel? :-) Veta znie: "...v elementu pevné výšky,..."; Cituješ moju vetu pojednávajúcu o výške a výške riadka; Horizontálne centrovanie sa spája skôr so šírkou... Ak sa mýlim, môžte tento príspevok vymazať ako nekonštruktívny. :-) |
||
| Bubák Profil |
#16 · Zasláno: 17. 6. 2014, 18:56:59
Tomáš123:
„z kontextu mi vychádza, že si chcel použiť slovo "vertikální".“ Máš pravdu, příspěvek jsem opravil, díky za upozornění. Koukám, že dneska dělám chyby, budu se muset polepšit. |
||
| xlifer Profil |
Tomáš123:
„- nepoužívaj vlastnosť height a line-height súčasne...Skús sa zamyslieť, načo je to dobré?;“ Chápu správně, že height je určen pro blokové prvky a line-height pro řádkové, ale line-height funguje i na blokové stějně jako height, takže je to takový "univerzál" ? Původně jsem si myslel, že line-height se používá spíše na vertikální centrování textu uvnitř prvku. |
||
| Trejpa Profil |
#18 · Zasláno: 18. 6. 2014, 11:11:32
xlifer:
Tak si to přelož: line height = výška řádku. Řádkový element může mít nastavenu výšku řádku (vůči které je jen tak mimochodem obsažený text svisle vystředěn). Protože však může být zalomen na několik řádků, nelze jeho skutečnou výšku ( height) dopředu určovat.
Svislé centrování pomocí výšky řádku lze samozřejmě použít i na blokové elementy (jejich neblokový obsah). Zadání stejné hodnoty line-height a height se kombinuje s vhodným overflow, aby se zajistilo, že zarovnané prvky nepřetečou do více řádků.
|
||
| xlifer Profil |
A jak tedy řešt situaci, když není vhodné používat height a line-height současně, když chci mít vycentrovaný text na výšku v boxu, ale nechci aby mě přetekl v případě, že by tam přišel delší text. Když použiju řešení box1, text nepřeteče a vycentruje se, což u box2 bez současného height nefunguje.
Příklad: <style>
.box1 {
width: 200px;
height: 40px;
line-height: 40px;
overflow: hidden;
}
.box2 {
width: 200px;
line-height: 40px;
overflow: hidden;
}
</style>
<div class="box1">Tento dlouhý text nepřeteče, protože je nastaven overflow hidden</div>
<div class="box2">V tomto řešení se blok natahuje na výšku, což nechci, ale zárověň požaduji centrování text na výšku</div> |
||
| juriad Profil |
#20 · Zasláno: 18. 6. 2014, 12:00:51
xlifer:
Přečti si http://jecas.cz/centrovani/#neznama-vyska, víc možností asi nemáš. |
||
| xlifer Profil |
juriad:
„Přečti si http://jecas.cz/centrovani/#neznama-vyska, víc možností asi nemáš.“ Ale proč s neznámou výškou? Výšku udám přes height ; v box1 to funguje zcela bez problému. Zeptám se jinak, čemu konrétně v kódu vadí (co to způsobí za problém) současně použit height a line-height,, když to funguje? Nějak tomu pořád nerozumím. |
||
| Bubák Profil |
#22 · Zasláno: 18. 6. 2014, 12:54:26
xlifer:
„čemu konrétně v kódu vadí (co to způsobí za problém) současně použit height a line-height,, když to funguje?“ Nefunguje pro víceřádkový text a ne vždy výšku znáš, protože uživatel si třeba zvětší velikost písma. |
||
| xlifer Profil |
Tomáš123:
„nepoužívaj vlastnosť height a line-height súčasne...Skús sa zamyslieť, načo je to dobré?;“ Janě, už chápu height na blokové prvky a line-height na řádkové. A když je v bloku textu, tak také by se neměl použít line-height? Např. <style>
.vyska {height: 300px;}
</style>
<div class="vyska">
Nejaky text.
</div> |
||
| juriad Profil |
#24 · Zasláno: 19. 6. 2014, 16:17:40
xlifer:
Line-height se týká jen rozestupu řádků textu, ničeho jiného. Height se týká jen výšky bloku, ničeho jiného. Každou vlastnost používáš k něčemu jinému, nijak víc spolu nesouvisí. Jejich kombinaci můžeš použít když potřebuješ bloku nastavit výšku a nastavit větší/menší rozestup řádků. Někdo si, ale všimnul, že pokud má text jen jeden řádek a nastaví se height na stejnou hodnotu jako line-height, vypadá to pěkně centrované. Ve své podstatě to není centrování, jen to dohromady vypadá centrovaně. Je to asi jako vlastnosti background-color a color. Obě mají v názvu color, často nastavíš jen jednu nebo druhou. Někdo si, ale všimnul, že pokud textu nastaví color na bílou a background-color na černou, tak text má vysoký kontrast. Ve své podstatě to nezmění všechny barvy na opačné, jen to tak dohromady vypadá. |
||
| xlifer Profil |
#25 · Zasláno: 19. 6. 2014, 17:23:43
juriad:
„Někdo si, ale všimnul, že pokud má text jen jeden řádek a nastaví se height na stejnou hodnotu jako line-height, vypadá to pěkně centrované. Ve své podstatě to není centrování, jen to dohromady vypadá centrovaně.“ Tak pak není použití height a line-height dohromady nic proti ničemu, když to vypadá centrovaně při nastavení stejné hodnoty. Stejně jako píšeš color a background-color, to taky není špatně použít dohromady, protože to společně dobře vypadá. Tak jestli je to jak píšeš, tak jsem to konečně teď pochopil. Já měl pořád za to, že je to chyba, ale vlastně není. |
||
| Tomáš123 Profil |
#26 · Zasláno: 19. 6. 2014, 19:52:53
xlifer:
„Já měl pořád za to, že je to chyba, ale vlastně není.“ Chyba to možno nie je a nikto ti nezakáže používať to takto, ale jednotlivé vlastnosti by sa mali používať na to k čomu sú určené, pokiaľ to nie je nejaký trik, aby sa dosiahlo požadovaného vzhľadu v starších prehliadačoch alebo to nevyžaduje situácia. Myslím, že v tvojom prípade nedošlo ani k jednej z okolností. Ja by som to takto neurobil. :-) |
||
|
Časová prodleva: 10 let
|
|||
0