Tekst schuin uitlijnen naast plaatje

[imre2333]

Gegroet,

Ik heb een website, waarbij ik tekst naast een plaatje wil uitlijnen, nu is dit uiteraard vrij eenvoudig, echter is het plaatje schuin, en ik wil graag dat de tekst meteen naast het schuine plaatje komt, ik bedacht me dat ik dan het plaatje als achtergrond moet maken van de cel, maar dan weet ik nog niet hoe ik de tekst zou kunnen positioneren. Ik hoop dat mijn vraag een beetje duidelijk is en die iemand er een oplossing voor weet.

Met vriendelijke groeten,
Imre

 

[Goeroeboeroe]

Dat kan wel met css en html, maar het is heel veel werk. Mogelijk is er 'n makkelijker oplossing met JavaScript, maar dat is mijn terrein niet.
't Komt er in 't kort op neer dat je dat per regel moet gaan aangeven. Dat is nog niet zo ingewikkeld, maar niet iedereen heeft dezelfde lettergrootte. Bovendien kan die lettergrootte worden veranderd en kan er ook nog worden gezoomd. En (uiteraard) moet je dan nog aanpassingen maken voor Internet Explorer 6.
Op de volgende link staat 'n voorbeeld met uitleg. Je kunt 't ook downloaden als zip. 't Is te veel en te ingewikkeld om hier helemaal neer te zetten. Dat voorbeeld is voor 'n ronde afbeelding, maar voor 'n schuine moet 't ook werken, als je de maten aanpast.
http://css-voorbeelden.nl/tekst/illustraties-naast-tekst/tekst-043.html
Kleine aanvulling: je krijgt 't nooit net zo netjes als op papier.

 

[Johantrax]

Voor de css/html manier kan je op volgende pagina's vrij duidelijke uitleg vinden van de mogelijkheden, ik denk dat de eerste helemaal beschrijft wat jij bedoelt:

Het principe is relatief eenvoudig:
1. je zet je schuine afbeelding als achtergrond in een div
2. je zet in deze div allemaal andere divs, die allen 1 regel hoog zijn en rechts zweven
3. je zet je tekst in de grote div, waar die niet over de afbeelding komt omdat die als het ware 'weggeduwd' wordt door die rechtsuitgelijnde divs.

Voorbeelden en uitleg:
slants
curves
boxpunch
boxpunch - demo

En eentje voor de fun
border-illusions

 

[csshunter]

Hè, je kan hier ook niet een half berichtje maken, even eten, even iets opzoeken en het dan afmaken, want dan staat er bijna hetzelfde als waar je mee bezig was...
Omdat er ook wat andere links in staan, toch maar gepost:
=====
Even een aanvullinkje op de bronvermelding die in de Opmerkingen bij de Uitleg op css-voorbeelden.nl staat. Als inspiratiebron wordt verwezen naar de intussen niet meer bestaande site temp.couchfort.net.
Of het eerder of later was dan Couchfort, weet ik niet, maar twee CSS aartsvaders hebben zich hier ook mee bezig gehouden: Tantek Çelik (o.a. mede-auteur van CSS2.1, ontwikkelteam CSS3) en Eric Meyer (o.a. oprichter css-discuss en css-wiki, ook betrokken bij CSS3).

• In begin 2001 publiceerde Tantek Çelik "A Study of Regular Polygons": een testpagina met regelmatige veelhoeken, geen images maar geheel opgebouwd met CSS.
• In november 2001 kwam Eric Meyer met het hierdoor geinspireerde "Slantastic" (een voorbeeld van schuin weglopende tekst) en met "Curvelicious" (een voorbeeld met rond uitgelijnde tekst).
• Daarna volgden vele anderen, o.a. Lasse Reichstein Nielsen.

Gegroet!
CSS-hunter

 

[Goeroeboeroe]

Ik moet dan even op m'n geheugen afgaan, maar ik meen me te herinneren dat die niet meer bestaande site de enige was, waar 't geen problemen gaf bij zoomen en/of 'n andere lettergrootte. En waar 't werkte in IE 6, 7 (8 was er nog niet), Opera, Firefox en Safari.
Enfin, Imre2333 heeft nu de nodige keuze.

 

[csshunter]

@Goeroeboeroe:
Gelukkig heeft css-voorbeelden.nl een prima methode voor het nageslacht bewaard/uitgewerkt!
Kon het niet nalaten even te testen: inderdaad, de Slantastic gaat ook nog drastisch fout in IE7 (lijkt verdacht veel op de Acid-test), terwijl css-voorbeelden.nl zelfs in IE5.5 een mooi vloeiende tekst laat zien die zich prachtig om de aardkluit drapeert.

 

[Goeroeboeroe]

Ha, ik ben niet de enige nachtbraker! Of is 't al ochtendbraker bij jou?
Leuk dat je 't even hebt getest. In IE 5.5 heb ik 't trouwens nooit geprobeerd. Kijk 'ns aan.

 

[csshunter]

Intussen ochtendbraker (in verhouding tot).
Ik begin wel nieuwsgierig te worden naar wat imre2333 aan het fabrieken is! Hoop dat we er nog iets van te zien krijgen.

 

[imre2333]

Ik keek net even bij mijn vraag en zag dat er al heel veel was gereageerd, allemaal bedankt daarvoor. Ik ga nu op vakantie dus ik kan het allemaal niet proberen, maar ik hoop dat het zal lukken en anders horen jullie het nog van mij.
Bedankt dus allemaal voor de reacties.