Autor Zpráva
ppooler
Profil
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
CSS
např.
p:first-letter {font-size:2em;}
ppooler
Profil
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
p#jedenKonkretniOdstavec:first-letter {font-size:2em;}

<p id="jedenKonkretniOdstavec">...</p>
Miloš
Profil
Je-li iniciálka dostatečně velká, je vhodné jí nastavit float:left;.
loyza
Profil
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
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
Plaváček, no ono to asi není až tak jednoduché... možná proto se tento prvek na webech neobjevuje...
Knopi
Profil
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>
mhr2006
Profil *
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
<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 *
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
ž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
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 *
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 ;)
Toto téma je uzamčeno. Odpověď nelze zaslat.