| Autor | Zpráva | ||
|---|---|---|---|
| ppooler Profil |
#1 · Zasláno: 23. 11. 2006, 23:25:40
Ahoj.
Jak správně vložit do <body>Iniciálku ? (velké začáteční písmeno na začátku slova známe z tiskovin) Mám to na webu uděláno metodou formátování (<small>< big> <font family>apod.)- což zcela jistě není vůbec sémantické ,ale hlavně to způsobí nedělitelnou mezeru mezi prvními dvěmi písmeny)- při pokusu nahradit písmeno obrázkem gif (25 px * 25 px) přes img src se mě "podařilo" docílit ještě nekonzistentnějších výsledků... Jak to jednoduše udělat ?- v CSS nějak deklarovat backgrond url pro prvek <h1><p> ...?*:-) Nebo to zformátovat normálně a vykašlat se na to ? |
||
| nightfish Profil |
#2 · Zasláno: 23. 11. 2006, 23:30:34
CSS
např. p:first-letter {font-size:2em;} |
||
| ppooler Profil |
#3 · Zasláno: 23. 11. 2006, 23:40:12 · Upravil/a: ppooler
Ale to se pak projeví na všech indetických prvcích <p> apod. na celém webu - ,ne ?-
no nic- není to nijak důležité...,zatím se ještě- "ztrácím" v prvcích v CSS jako jsou jako různé třídy ,pseudotřídy apod.-:-)... |
||
| nightfish Profil |
#4 · Zasláno: 23. 11. 2006, 23:43:30
p#jedenKonkretniOdstavec:first-letter {font-size:2em;}
<p id="jedenKonkretniOdstavec">...</p> |
||
| Miloš Profil |
#5 · Zasláno: 24. 11. 2006, 00:29:36
Je-li iniciálka dostatečně velká, je vhodné jí nastavit float:left;.
|
||
| loyza Profil |
#6 · Zasláno: 24. 11. 2006, 06:04:45
Nejsem si jistý, ale podporuje pseudotřídá first-letter Internet Explorer? mám pocit, že nikoliv, pokud se nepletu je tohle řešení tak nějak k ničemu.
|
||
| Plaváček Profil |
#7 · Zasláno: 24. 11. 2006, 07:07:00 · Upravil/a: Plaváček
loyza
First-letter i first-line podporují všechny prohlížeče, tedy i Internet Explorer od verze 5. Problematičtější je ovšem zařídit, aby iniciálka vypadala všude stejně - je třeba si pohrát s CSS vlastnostmi float, line-height, případně margin, protože každý prohlížeč se k zobrazování staví trochu jinak. |
||
| ppooler Profil |
#8 · Zasláno: 24. 11. 2006, 10:01:32
Plaváček, no ono to asi není až tak jednoduché... možná proto se tento prvek na webech neobjevuje...
|
||
| Knopi Profil |
#9 · Zasláno: 24. 11. 2006, 14:19:19
Když byli prázdniny, tak jsem se tím také zabýval a tohle mi přijde jako jediné solidní řešení, ale mrňavé korekce tam samozřejmě v prohlížečích budou. Spíš bych se přimlouval k vytvořeným obrázkům, které by překryli iniciálku a nastavil bych jim float. Tady je to řešení:
.box p:first-letter { font-size: 300%; font-weight: bold; line-height: .9; } <div class="box"> <p>Pantarguel, bububu bbubu</p> <p>Tomik, bubbu bubububu</p> </div> |
||
|
Časová prodleva: 13 dní
|
|||
| mhr2006 Profil * |
#10 · Zasláno: 7. 12. 2006, 13:00:34
A když bych chtěl nahradit iniciálku obrázkem? S tím, že pokud by bylo vypnuté CSS tak aby se ten obrázek zmenil v text.
napadlo mě: [CSS] .pohadky div { width:51px; height:51px; background:url("obr/bigB.jpg") top left no-repeat; float: left; } .pohadky div span { display: none; } [HTML] <p class="pohadky"><div><span>B</span></div>ylo, nebylo. ..........</p> ale nějak to NEFUNGUJE :-( |
||
| Miloš Profil |
#11 · Zasláno: 7. 12. 2006, 20:51:13
<div> v odstavci <p> je blbost; když už, tak obráceně.
Vhodnější konstrukce je <p class="pohadky"><span class="obrazek"></span>Bylo, nebylo. ..........</p> Tomu spanu nastav display:block, float:left, background-image a rozměry, b pak zneviditelni pomocí p.pohadky:first-letter {display:none} Snad jsem se nikde nesek', lovím to z hlavy a nechce se mi to testovat. |
||
| mhr2006 Profil * |
#12 · Zasláno: 7. 12. 2006, 23:58:52
Miloš: Proto to nejspíš nechodilo. Vyřešil si to líp ;) ... jenom se mi mi tam to B vypíše také ... že by display:none nefungoval u first-letter :-( ?
|
||
| Bubák Profil |
#13 · Zasláno: 8. 12. 2006, 00:36:02
že by display:none nefungoval u first-letter
http://www.w3.org/TR/CSS21/selector.html#first-letter - na stránce jsou i příklady, ale nezkoušel jsem, jak je různé prohlížeče zobrazí, a podle toho, co píše Plaváček, tak to slavné nebude. These are the properties that apply to :first-letter pseudo-elements: font properties, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'line-height', 'float', 'vertical-align' (only if 'float' is 'none'), margin properties, padding properties, border properties, color property, background properties. Takže je jasné, jaké vlastnosti můžeš použít. |
||
| Miloš Profil |
#14 · Zasláno: 8. 12. 2006, 00:39:27
S :first-letter opravdu display a visibility nefunguje, už jsem si všimnul. Holt je potřeba ta první písmena obalit do spanu, třeba <span class="firstletter"> a těm nastavit patřičný display nebo visibility. Viz na příkladu.
|
||
| mhr2006 Profil * |
#15 · Zasláno: 8. 12. 2006, 09:10:22
Miloš: nastavil sem tam display: none; abych tu nemusel posouvat. 3koda že to jde tak trošku krkolomě, ale co se dá dělat. Mnohokrát díky ;)
|
||
|
Časová prodleva: 19 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0