[HTML/CSS] Weergave koptekst

[tweeny]

Simpel, ik zou graag willen weten hoe je onderstaande afbeelding kan krijgen met HTML/CSS, het gaat hier om de openingszin

Dit is een simpel voorbeeld gemaakt met InDesign:

[HuHu]

Dat kun je hier vinden: http://w3schools.com/

[Deef_K]

Wat heb je zelf zoal geprobeerd? Wij gaan natuurlijk niet jouw huiswerk maken.

[tweeny]

Zelf heb ik nog niets geprobeerd, maar ik heb bijvoorbeeld wel nagedacht om het eerste woord in een div te zetten, maar dat lijkt mij nogal omslachtig, aangezien je dan 3 div's moet maken, die ook nog eens per pagina verschillen, en ik heb niet op google gezocht, omdat ik niet weet hoe je dit soort tekst noemt...

[TJHeuvel]

Dit is een header, daar wil je dus een H1 element voor gebruiken.
Standaard is dit een block-element, wat inhoud dat content op de volgende regel komt. Jij wilt dit ernaast hebben, in CSS kan je dit bereiken met float.

[macciez]

Je wilt dus het 1e woord groter maken? Zoek maar eens hoe je bepaalde woorden (of iets anders) in een tekst anders vormgeeft. Dan heb jij jouw antwoord. Je hebt geen speciale zoekterm nodig.

edit: of zoals hierboven wordt aangegeven kan ook, had ik niet aan gedacht

[ Voor 17% gewijzigd door macciez op 19-10-2010 09:47 ]

[Tsunami]

H1 is voor de header van de website, niet voor de header van een artikel. Als het een header was zou ik h2-6 gebruiken.

Echter is het geen header, het is simpel het eerste woord van de body. Oftewel, Google op "CSS first word" en je komt de juiste antwoorden tegen.

@hieronder: zoals Google zegt is strong dus ook niet goed, omdat het eerste woord niet semantisch belangrijk is, het is gewoon een style. span dus

[ Voor 22% gewijzigd door Tsunami op 19-10-2010 09:54 ]

[OkkE]

CyCloneNL schreef op dinsdag 19 oktober 2010 @ 09:45:
Dit is een header, daar wil je dus een H1 element voor gebruiken.

Wie zegt dat?

---

Omdat ik in een goede bui ben, hier een opzetje. Geen zin in alle browsers te testen, dat mag je zelf doen. Voor Chrome en Firefox werkt het.

HTML:

<p><strong>Lorem</strong> ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, felis vitae ultrices eleifend, lacus risus interdum erat, tempus facilisis nisl urna vitae dui.  ...</p>

Cascading Stylesheet:

p { 
    font-size: 13px;
}
p strong {
    float: left;
    font-size: 54px;
    line-height: 0.6;
}

[marrk]

OkkE schreef op dinsdag 19 oktober 2010 @ 09:52:
[...]

Wie zegt dat?

---

Omdat ik in een goede bui ben, hier een opzetje. Geen zin in alle browsers te testen, dat mag je zelf doen. Voor Chrome en Firefox werkt het.

HTML:

<p><strong>Lorem</strong> ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, felis vitae ultrices eleifend, lacus risus interdum erat, tempus facilisis nisl urna vitae dui.  ...</p>

Cascading Stylesheet:

p { 
    font-size: 13px;
}
p strong {
    float: left;
    font-size: 54px;
    line-height: 0.6;
}

<strong /> gebruiken is ook niet echt de netste, waarom niet gewoon een <span class="first-word"></span> bij gebrek aan pseudo-classes

in je css gewoon alleen p en span.first-word definieren, dan heb je ook niet die dubbele 'p strong' definitie die toch niet de netste is.

[Bosmonster]

Om even advocaat van de duivel te spelen: Je bent bezig met internet, niet met print. Misschien kun je ook eens nadenken over of print-opmaak-technieken wel zinvol zijn op Internet.

[tweeny]

Bedankt allemaal, het werkt, mag een slotje op.

[OkkE]

marrk schreef op dinsdag 19 oktober 2010 @ 09:56:
[...]

<strong /> gebruiken is ook niet echt de netste, waarom niet gewoon een <span class="first-word"></span> bij gebrek aan pseudo-classes

in je css gewoon alleen p en span.first-word definieren, dan heb je ook niet die dubbele 'p strong' definitie die toch niet de netste is.

Dit soort dingen zijn denk ik ook een beetje een kwestie van smaak. Een <span> is ook een prima oplossing inderdaad, hangt er vanaf of je het eerste woord ook belangrijker wil maken, of het puur visueel is.

Denk dat we het er wel over eens zijn dan een <h1> hier iedergeval niet op zijn plaats is.

[HuHu]

Ah... de volledige code is al gepost blijkbaar. Maar om er nog wat van te leren: deze opmaak heet "drop cap", alleen dan toegepast op een heel woord.

[MueR]

tweeny schreef op dinsdag 19 oktober 2010 @ 09:58:
Bedankt allemaal, het werkt, mag een slotje op.

Oke, maar niet omdat jij toevallig je oplossing hebt. Zie Het algemeen beleid #topiceinde

Er gaat een slotje op omdat je hier om kant en klare code vraagt, ook wel scriptrequest genoemd. Die willen we hier niet hebben. Bij problemen met code mag je hier uiteraard een topic openen, maar dan verwachten we wel dat je uitlegd wat je geprobeerd hebt, wat je wil bereiken, en meer van dat spul uit Het algemeen beleid #quickstart.