Tagy ins a blockquote
Malý upgrade vzhledu Filova blogu spočívá v ostylování některých méně často používaných tagů (ins, blockquote) a nesetříděného seznamu ul (doposud se zobrazoval totálně neostylován). Tag blockquote jsem viděl hezky ostylován už mnohokrát, k používání a ostylování ins (tag aktualizace) mě přivedla Freya nedávným redesignem svého blogu. Blockquote blockquote { font-size: 1.2em; color: #353D46; font-style: italic; background: transparent url(images/uvozovky.gif) no-repeat […]
Malý upgrade vzhledu Filova blogu spočívá v ostylování některých méně často používaných tagů (ins, blockquote) a nesetříděného seznamu ul (doposud se zobrazoval totálně neostylován). Tag blockquote jsem viděl hezky ostylován už mnohokrát, k používání a ostylování ins (tag aktualizace) mě přivedla Freya nedávným redesignem svého blogu.
Blockquote
blockquote {
font-size: 1.2em;
color: #353D46;
font-style: italic;
background: transparent url(images/uvozovky.gif) no-repeat top left;
padding: 0.25em 10px;
margin: 0 30px;
min-height: 70px;
_height: 70px}
Účelem Filova blogu je příblížit čtenářům střípky webdesignu, XHTML a CSS, použitelnosti, přístupnosti, SEO, skautingu a poslední dobou i Firefoxu.
INS
ins {
color: #353D46;
background: transparent url(images/aktualizace.gif) no-repeat 5px 5px;
padding: 5px 5px 5px 10px;
margin: 0.25em 0;
text-align: left;
display: block;
text-decoration: none;
border: 3px solid #EEE;
min-height: 70px;
_height: 85px;}
Aktualizace. Účelem Filova blogu je plkat o blbinkách, které zajímají jen úzký okruh manio-depresivních šílenců a prodavače zmrzliny.
Pro zachování minimální výšky textového bloku (aby se neuřízla příslušná ikonka) používám vlastnost min-height (moderní browsery) a _height (podtržítkový hack pro IE).
Seznam ul
div#text ul li {
padding: 0 0 0 15px;
background: transparent url(images/sipka.gif) 0% 50% no-repeat;}
- blogování
- skauting
- webdesign
Komentáře
Nemám osobne nič proti podtržítkovému hacku, ale prečo nepoužiť validnú metódu
keď existuje?
_height: 85px; /*preč z ins{} a pod to dať toto */
* html ins {height: 85px;} /* Hack pre IE */
Inak super, stále som rozmýšľal čo som to chcel dorobiť na môj blog a teraz si mi to pripomenul. Už aj idem na to.
list-style-type: none; v deklaraci není, protože jsem neuvedl její kompletní verzi (jen tu část kdy přidávám obrázek).. asi bylo důležité to zmínit zmínit.. :-/
pmasarik: nejsi jediný :)
možná u toho seznamu by bylo lepší použít list-style-image nebo případně skrýt list-style-type: none..
– nevím, jestli se to pak nemůže někde projevovat nějakou nesrovnalostí..
ale pěkné nastylování :)