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 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

rss komentářů

1. endlife

28. 02. 05, 15.31

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í :)

2. pmasarik

28. 02. 05, 16.44

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.

3. Filosof

28. 02. 05, 17.39

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.. :-/

4. Jódlující bernardýn

28. 02. 05, 22.58

pmasarik: nejsi jediný :)