Vlad Merzjevitsj

We noemen zwevende elementen die elementen die rond andere webpagina-objecten vliegen, bijvoorbeeld tekst. Het zou juister zijn om ‘gestroomlijnde elementen’ te zeggen, maar aan de andere kant is de term ‘zwevend element’ al lang aangenomen, dus ik zal deze in de toekomst gebruiken.

Zwevende elementen worden vrij actief gebruikt bij de lay-out van webpagina's en dienen om deze en andere taken uit te voeren:

• tekst rond afbeeldingen wikkelen;
• zijbalken maken;
• horizontale menu's;
• kolommen.

Omloop vindt plaats met behulp van de float-stijleigenschap met de waarde left of right . Standaard is elementomloop niet ingesteld, maar als dit om de een of andere reden expliciet moet worden opgegeven, moet de waarde op none worden ingesteld. In afb. Figuur 3.32 toont het resultaat van het toepassen van verschillende waarden op een afbeelding naast tekst.

Rijst. 3.32. Tekst rond een afbeelding wikkelen

De HTML-code zelf blijft vrijwel ongewijzigd en wordt weergegeven in voorbeeld 3.21.

Voorbeeld 3.21. Het gebruik van vlotters

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Als u een minimum aan inspanning heeft, is uw inspanning niet meer dan een normaal gevolg.

Dit voorbeeld laat zien hoe u een float-eigenschap toevoegt met de resterende waarde aan een tag . Deze waarde lijnt het element uit met de linkerrand van het bovenliggende element of een ander zwevend element, en alle andere elementen, zoals tekst, zweven naar de rechterkant. De waarde right daarentegen lijnt het element uit met de rechterrand van het bovenliggende element of een ander zwevend element, en alle andere elementen, zoals tekst, flankeren het naar links.

We hebben dus de terminologie op een rijtje gezet. Laten we voorbeeld 3.21 toevoegen om de tekening beter te laten aansluiten bij de tekst. Het belangrijkste is om de inspringing rechts van de afbeelding in te stellen en, voor het geval dat, eronder. Ga hiervoor naar de tag er wordt een klasse met de naam fig toegevoegd, waarvan de eigenschap margin is ingesteld en die tegelijkertijd de marge aan elke zijde van de afbeelding bepaalt (voorbeeld 3.22).

Voorbeeld 3.22. Wikkel rond de afbeelding

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Winnie de Poeh was altijd niet vies van een beetje verfrissing, vooral niet om elf uur 's ochtends, omdat het ontbijt toen al lang afgelopen was en de lunch nog niet was begonnen.

En natuurlijk was hij ontzettend blij om te zien dat het Konijn kopjes en borden tevoorschijn haalde.

Het resultaat van het voorbeeld wordt getoond in Fig. 3.33.

Rijst. 3.33. Links uitgelijnde, rechtsomvattende afbeelding

Kaders maken

Een zijbalk is een blok met afbeeldingen en tekst dat is ingebed in de hoofdtekst. De zijbalk bevindt zich meestal aan de linker- of rechterrand van het tekstblok en de hoofdtekst loopt er aan de andere zijden omheen (Fig. 3.34).

Rijst. 3.34. Inzettype

Om de zijbalk in de tekst te laten opvallen, wordt deze meestal ingesteld op een achtergrondkleur en wordt er een rand toegevoegd. Frames lijken qua uiterlijk op de bovenstaande methode om tekst rond een afbeelding te wikkelen, dus de code voor het maken van frames is vrijwel identiek aan de vorige (voorbeeld 3.23).

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

De actie is vergelijkbaar met die van het gereedschap Toverstaf, maar anders selecteert het geen gebied, maar wist het het.

Met het gereedschap Magisch wissen wist u pixels die qua kleur vergelijkbaar zijn. Als we werken aan een achtergrondlaag of een laag waarvan de transparantie is vergrendeld, worden de pixels vervangen door de achtergrondkleur. In alle andere gevallen krijgen we een transparant gebied.

Het principe van het werken met het gereedschap Magisch wissen is vergelijkbaar met het werken met het gereedschap Toverstaf. We stellen namelijk eerst de juiste tolerantiewaarde in, schakelen het selectievakje Anti-aliased in om vloeiende randen te creëren, schakelen de optie Aangrenzend uit om tegelijkertijd de hele achtergrond te verwijderen en klikken vervolgens op de foto in het luchtgebied. Als de Achtergrondlaag eerder een andere naam heeft gekregen, krijgen we transparante gebieden op de juiste plaatsen.

Wanneer u frames maakt, zorg er dan voor dat u de breedte ervan opgeeft met behulp van de breedte-eigenschap. Anders zal de laaggrootte veel breder zijn dan vereist.

Laagindeling horizontaal

Standaard worden blokelementen verticaal onder elkaar uitgelijnd, maar met behulp van de eigenschap float kunt u ze dwingen horizontaal naast elkaar uit te lijnen. In dit geval moet u de breedte van de lagen instellen en de zweefstand ervoor instellen. Als de breedte niet is opgegeven, is deze gelijk aan de inhoud van de laag, rekening houdend met marges en randen. Voorbeeld 3.24 neemt de productcatalogus die in de vorige sectie is gemaakt met behulp van inline-blokelementen en herwerkt deze om float te gebruiken. Om de blokken zichtbaar te maken, is de achtergrond van de webpagina grijs ingesteld.

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Het resultaat van het voorbeeld wordt getoond in Fig. 3.35.

Rijst. 3.35. Plaatsing van lagen bij gebruik van de eigenschap float

Door verschillende teksten in de handtekening blijkt ook de hoogte van de blokken anders te zijn, waardoor sommige blokken zich aan andere ‘vastklampen’ en niet naar een andere regel verplaatsen. Het instellen van de hoogte van alle blokken via de height-eigenschap, zoals 100px, of terugkeren naar het gebruik van display: inline-block kan hier helpen.

Effect van stroming

De eigenschap float heeft, naast de mogelijkheid om zwevende elementen te maken, een aantal functies waarover u moet weten. Het belangrijkste kenmerk is dat float alle nabijgelegen elementen beïnvloedt, waardoor ze worden gedwongen deel te nemen aan de stroom. Laten we dit eens bekijken in voorbeeld 3.25, waarin wordt getoond hoe u pijlen op een enkele lijn kunt maken met behulp van de linker- en rechterwaarden van de eigenschap float.

Voorbeeld 3.25. Effect van stroming

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Hoewel de tekst en de pijlen verschillende blokelementen gebruiken en op verschillende regels moeten worden geplaatst, zorgt het zwevende effect ervoor dat de tekst hoger komt te staan ​​naarmate deze binnen de doorstroomzone valt (Afbeelding 3.36). Ook wordt de achtergrondkleur van de pijllaag niet weergegeven vanwege het feit dat de zwevende elementen niet deelnemen aan de stroom van het document. Dit is in essentie hetzelfde als het leeg laten van de pijllaag.

Rijst. 3.36. Effect van terugloop op onderliggende tekst

Zwevende elementen hebben geen invloed op de hoogte van het blok waarin ze zich bevinden. Om dit te detecteren, hoeft u alleen maar het blok te omringen met een kader en een zwevend element met tekst erin te plaatsen (voorbeeld 3.26).

Voorbeeld 3.26. Blok hoogte

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

De tekening heeft geen invloed op de hoogte van de laag en overschrijdt de grenzen ervan (Fig. 3.37).

Rijst. 3.37. Zwevende laaghoogte

Al deze kenmerken van zwevende elementen kunnen een nogal onaangenaam effect hebben op de lay-out van een webpagina, vooral in gevallen zoals hierboven vermeld. De belangrijkste manier om het gewenste resultaat te bereiken is door de wrap op het juiste moment af te zeggen. Er zijn verschillende manieren om dit te doen.

Omslag annuleren

Wrapping is een krachtig lay-outhulpmiddel dat wordt gebruikt om elementen uit te lijnen en te ordenen. Om dit instrument onder controle te houden is er echter een tegenwicht nodig, zonder dat wordt het enorme potentieel van float gereduceerd tot een paar beperkte taken. We hebben het over het annuleren van de stroom met behulp van verschillende methoden. Laten we de vier meest populaire opsommen.

Elementbreedte

Als een zwevend element de gehele beschikbare breedte in beslag neemt, beginnen de resterende elementen die daarop volgen op een nieuwe lijn. Om dit te doen, moet u de breedte-eigenschap inschakelen met een waarde van 100%. Zo kan de stijl in voorbeeld 3.25 als volgt worden aangevuld:

Links ( zwevend: links; breedte: 50%; ) .right ( zwevend: rechts; breedte: 50%; tekst uitlijnen: rechts; )

Elke pijllaag neemt nu 50% breedte in beslag en de optelsom is 100% breed, dus de alinea na de pijllaag begint op een nieuwe regel.

Deze methode wordt zelden gebruikt omdat breedte niet op afbeeldingen kan worden toegepast en het probleem van laaghoogte en achtergrond niet wordt opgelost.

Overloop gebruiken

De overflow-eigenschap regelt de weergave van de inhoud van een blokelement als de gehele inhoud niet past en buiten het gebied van de opgegeven afmetingen reikt. Met name de automatische waarde voegt schuifbalken toe wanneer dat nodig is, terwijl verborgen alleen het gebied binnen het element wordt weergegeven en de rest wordt verborgen. Bovendien zal het gebruik van overflow met de waarde auto , scroll of verborgen het effect van float overschrijven. De stijl van bijvoorbeeld 3.25 wordt aangevuld met slechts één regel:

Pijl (overloop: verborgen; )

Het resultaat verandert onmiddellijk na toepassing van de overflow-eigenschap (Fig. 3.38).

Rijst. 3.38. Effect van de overloopeigenschap op de achtergrond

Voorbeeld 3.26 wordt op soortgelijke wijze aangevuld:

DIV (overloop: verborgen; )

Het resultaat wordt getoond in Fig. 3.39.

Rijst. 3.39. Effect van de overloopeigenschap op de grens

overflow is een van de meest populaire eigenschappen die samenwerkt met float. Maar soms ontstaan ​​er situaties waarin het gebruik van deze methode onaanvaardbaar is. Dit gebeurt in gevallen waarin het element buiten de grenzen van het element reikt, in welk geval het wordt "afgesneden". In voorbeeld 3.27 wordt het beeld naar links van de oorspronkelijke positie verschoven.

Voorbeeld 3.27. Snijd het gebied van een element bij

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Winnie de Poeh op bezoek bij het Konijn

Het resultaat van het voorbeeld wordt getoond in Fig. 3.40.

Rijst. 3.40. Een foto bijsnijden

In IE6 werkt de methode alleen als de eigenschap hasLayout is ingesteld. Om dit in te schakelen, kunt u zoom: 1 toevoegen samen met de overflow-eigenschap.

duidelijke eigendom

Om het effect van float te annuleren, gebruikt u de clear-eigenschap met de volgende waarden.

• left - annuleert de terugloop vanaf de linkerrand van het element (float : left ). In dit geval worden alle andere elementen aan deze kant neergelaten en onder het huidige element geplaatst.
• right - annuleert de stroom aan de rechterkant van het element (float: right).
• beide - annuleert tegelijkertijd de stroom van het element vanaf de rechter- en linkerrand. Het is aan te raden deze waarde in te stellen als u de omloop van een element wilt annuleren, maar u niet precies weet vanaf welke kant.

Om het omhullende effect te annuleren, moet de eigenschap clear worden toegevoegd aan het element dat na het zwevende element komt. Meestal introduceert u een universele klasse, bijvoorbeeld clear, en voegt u een lege tag in

met deze klasse (voorbeeld 3.28).

Voorbeeld 3.28. Duidelijk gebruiken

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

←

→

In dit voorbeeld is de eigenschap clear van de klasse clear ingesteld op beide. Als u verschillende waarden moet gebruiken, kunt u meerdere klassen invoeren en deze indien nodig toepassen.

Deze methode is ook een van de meest populaire qua lay-out vanwege de eenvoud en veelzijdigheid. Maar nogmaals, soms zijn er combinaties waarbij het gebruik van clear mislukt. Dit gebeurt wanneer uw code tegelijkertijd verschillende floats tegenkomt. In voorbeeld 3.29 wordt float dus gebruikt om twee kolommen te maken, en in de rechterkolom rangschikt float de foto's.

Voorbeeld 3.29. Het gebruik van vlotters

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Menu

Beste foto's

Door opmerkingen

St. Sophia-kathedraal

Poolse kerk

Nieuwe lijn

Kelder

Het resultaat van het voorbeeld wordt getoond in Fig. 3.41. De eigenschap clear heeft niet alleen invloed op de fotoklasse, maar ook op de col1-klasse, d.w.z. op alle bovenstaande elementen waarvoor de vlotter is ingesteld. Daarom begint de “Nieuwe Lijn” niet onmiddellijk na de foto’s, maar na het einde van de linkerkolom.

Rijst. 3.41. Fout bij het weergeven van tekenreeks

In dergelijke situaties helpt een combinatie van verschillende methoden. Er kunnen dus foto's worden toegevoegd aan een container waarbij de overloop is verwijderd en de clearleft is verwijderd. De kolom zal de volgende vorm aannemen.

St. Sophia-kathedraal

Poolse kerk

Nieuwe lijn

Pseudo-element:na

Regelmatige opname van een lege tag

met de eigenschap clear maakt de code rommelig, vooral wanneer de eigenschap float actief wordt gebruikt. Het is logisch om alles in stijlen te verplaatsen en onnodige tags te verwijderen. Om dit te doen, gebruiken we het :after pseudo-element, dat, in combinatie met de content-eigenschap, tekst na het element toevoegt. U kunt stijleigenschappen op dergelijke tekst toepassen, met name clear . Het enige dat overblijft is het verbergen van de weergegeven tekst voor de browser.

Clearleft:after ( inhoud: "."; /* Toon de tekst na het element (punt) */ clear: left; /* Annuleer de terugloop */ zichtbaarheid: verborgen; /* Verberg de tekst */ display: block; / * Blokelement * / hoogte: 0 /* Hoogte */ )

Het maakt niet uit welk teken wordt weergegeven; het is in ieder geval voor de gebruiker verborgen door zichtbaarheid, maar zelfs als het verborgen is, neemt de tekst enige hoogte in en heeft invloed op nabijgelegen elementen. Daarom moet de uitvoertekst nog steeds in een blokelement worden omgezet en op nulhoogte worden ingesteld.

Omdat de tekst die door het :after pseudo-element wordt gegenereerd, na het element komt, vervangt deze gemakkelijk de constructie

. Waar dit nodig is, hoeft u alleen maar de klasse clearleft toe te voegen, zoals weergegeven in voorbeeld 3.30.

Voorbeeld 3.30. Pseudo-element:na

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Winnie de Poeh op bezoek bij het Konijn

De IE-browser ondersteunt :na t/m versie 7.0 niet, dus het bovenstaande voorbeeld werkt niet in deze versies. Het toevoegen van zoom: 1 aan een zwevend element annuleert de omloop in IE.

Het gemak van de bovenstaande methode ligt in het gebruik van de clearleft-klasse, die indien nodig aan elke tag kan worden toegevoegd. Je kunt ook extra klassen introduceren, waarvan de stijl zal verschillen met andere duidelijke waarden.

Heel vaak krijgt de lay-outontwerper bepaalde niet-standaard taken. Ons doel is om de meest rationele en correcte oplossing te bieden. Vandaag zullen we het hebben over de kenmerken van tekstomloop rond een afbeelding.

Verklaring van het probleem

Het schrijven van een artikel voor uw informatiebron of blog gaat vaak gepaard met het toevoegen van foto's onderweg. Omdat de zoekrobot altijd de aanwezigheid van afbeeldingen op de site heeft gerespecteerd, zal de gebruiker meer tevreden zijn met tekst met heldere afbeeldingen. Vandaar de noodzaak om een ​​speciale opmaakmethode te installeren die zorgt voor een mooie interactie tussen tekst en afbeeldingen.

Laten we eens kijken naar het geval waarin tekstterugloop niet vereist is. Bovendien bied ik een universele optie aan: bij gebrek aan een afbeelding wordt de tekst over de gehele breedte van het blok uitgerekt (niet al uw artikelen gaan vergezeld van illustraties). De breedte van het tekstblok ligt niet strikt vast. Hieronder ziet u hoe ons blok eruit zou moeten zien.

De juiste beslissing

Om de taak uit te voeren, maken we twee blokken: één voor de afbeelding, de tweede voor de tekst. Rekening houdend met het feit dat er mogelijk nog andere elementen onder de afbeelding zitten, maken wij een aparte container voor de afbeelding, anders is dit niet nodig, u kunt eenvoudig de benodigde klasse aan de tag met de afbeelding toewijzen.

HTML

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Tekstblok

Display: inline;

)

Het zou heel logisch zijn om voor te stellen om de eigenschappen van een zwevend object aan de tekst toe te wijzen. Als de objectbreedtes niet zijn ingesteld, krijgen we het volgende beeld:

Om dit effect te voorkomen, hoeft u alleen maar de breedte van het tekstblok op te geven, maar dit voldoet niet aan de voorwaarden van onze taak.

De volgende goede optie zou zijn om de eigenschap margin-left te gebruiken. Omdat voor een blog hoogstwaarschijnlijk alle afbeeldingen in dit blok dezelfde grootte hebben, is de oplossing in principe niet slecht en effectief. Dit is echter slechts een speciaal geval, want als er geen afbeelding in het artikel staat, is er links gewoon een lege strook. Dit past niet bij ons. Wij zoeken een universele oplossing!

En de meest correcte oplossing is, zoals vaak gebeurt, de eenvoudigste. Om de gewenste opmaak van een tekstblok te bereiken, moet u de overflow-eigenschap met de waarde openen verborgen. Vergeet de unieke Internet Explorer niet. Zoals gewoonlijk pronkt hij en heeft hij extra aandacht nodig! Om onze oude man normaal te laten werken, voegen we de eigenschap float toe aan het tekstblok (na toegang tot de eigenschap overflow is het definiëren van een vaste breedte niet vereist).

We zijn dus tot de juiste oplossing gekomen, die zal leiden tot het effect dat wordt aangegeven in de afbeelding in de subsectie waarin de voorwaarden van onze taak worden beschreven.

Afbeelding ( zwevend: links; /*wrap */ marge: 10px; /*externe vulling voor schoonheid */ weergave: inline; /* voor IE6, zodat de linkermarge niet verdubbelt */). text( overloop: verborgen; zwevend: links; )

Nadelen van de methode en alternatief

Ondanks de eenvoud en veelzijdigheid van de methode, die bestaat uit het gebruik ervan overloop: verborgen, er is één nadeel. De eigenschap zal niet langer zijn functies uitvoeren als er vervolgkeuzemenu-elementen worden gebruikt in het tekstgedeelte.

In dit geval heeft u een alternatief nodig om de gewenste opmaak te configureren. Deze techniek zal gebaseerd zijn op de functionaliteit van de combinatie weergave: tabelcel;. Deze oplossing is net zo effectief, maar qua eenvoud iets minder dan de eerste methode. Wanneer u deze methode aanroept, moet u ook de lay-out zo instellen dat deze in de Internet Explorer-omgeving werkt

Img (zwevend: links; /* stel de verpakking in */ marge: 10px; /* inspringing voor schoonheid */ weergave: inline; /* voor IE6, zodat de linkermarge niet verdubbelt */). tekst(weergave: tabelcel; zoom: 1 ; /* Voorzichtig! De tekenreeks is ongeldig */ }

En deze oplossing heeft zijn eigen kenmerken waarmee bij de lay-out rekening moet worden gehouden. Als het tekstgedeelte kort genoeg is, wordt het volgende blok rechts van het blok met de tekstklasse weergegeven. Om dit te voorkomen, moet u het tekstblok en de afbeelding in een aparte container plaatsen.

In welke browsers werkt het?

6.0+	5.0+	9.5+	4.0+	3.0+	-	-

In dit artikel bekijken we de opties voor het omwikkelen van tekst rond een afbeelding. Er zijn verschillende manieren. Laten we ze allemaal bekijken. Om te beginnen raad ik u aan de html-tag van het artikel te lezen basiskennis hebben van afbeeldingen op html-pagina's.

1. Wikkelen met tagstijlen

De afbeelding kan alleen worden uitgelijnd door te werken met de CSS-tagstijlen . Zoals u weet, kunt u met de tag-syntaxis de uitlijning van afbeeldingen in attributen instellen:

waar VALUE waarden kan aannemen

• links - links uitgelijnd
• rechts - juiste uitlijning
• onderaan - uitlijning op de eerste tekstregel (dit is de standaard)
• top - uitlijning met de bovenste tekstregel
• midden - uitlijning ten opzichte van de basisregel van de tekst

Bijvoorbeeld

Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Het lijkt erop dat de afbeelding aan de tekst is blijven plakken, dus we maken enkele streepjes. Bovendien zijn er twee opties hoe dit kan worden gedaan.

Optie 1.1. Via CSS-eigenschap - hspace en vspace
Om dit te doen, in de tagattributen voeg twee waarden toe:

Zo ziet het eruit op de pagina:

Het hspace-attribuut specificeert respectievelijk de horizontale opvulling in pixels, vspace – de verticale opvulling.

Optie 1.2. Via de CSS-eigenschap - opvulling en marge
Om dit te doen, in de tagattributen voeg twee waarden toe:

Zo ziet het eruit op de pagina:

Het ziet er beter uit omdat we niet links hebben ingesprongen. In plaats van marge kunt u opvulling gebruiken, het effect zal vergelijkbaar zijn.

Gebruik de eigenschap float in plaats van uitlijnen

Naast de eigenschap uitlijnen in de tagattributen stijlen hebben een CSS float-eigenschap, die ook verantwoordelijk is voor de uitlijning. De syntaxis is als volgt:

zweven:rechts; // Rechtse uitlijning zweven:links;

//

Links uitlijnen

Als u de afbeeldingsuitvoer in het vorige voorbeeld bijvoorbeeld als volgt schrijft:

Dit wordt dan omgezet in het volgende:

Dankzij float kun je één klasse voor afbeeldingen opgeven, wat erg handig is.

2. Het beeld door laten stromen

Alle afbeeldingen kunnen in blokken worden geplaatst

. En naar de tag zelf stel een stijl in met pagina-uitlijning en inspringing.

Wanneer u in MS Word werkt, komt u vaak de behoefte tegen om een ​​document met afbeeldingen te illustreren. We hebben al geschreven hoe gemakkelijk het is om een ​​afbeelding toe te voegen, en hoe je er tekst bovenop kunt plaatsen. Soms moet u echter tekst rond de toegevoegde afbeelding laten lopen, wat iets ingewikkelder is, maar er veel mooier uitziet. We zullen hierover in dit artikel praten.

Ten eerste moet u begrijpen dat er verschillende opties zijn om tekst rond een afbeelding te laten lopen. Tekst kan bijvoorbeeld achter de afbeelding, ervoor of langs de omtrek ervan worden geplaatst. Dit laatste is in de meeste gevallen waarschijnlijk het meest acceptabel. niettemin is de methode algemeen voor alle doeleinden, en we zullen ermee verder gaan.

1. Als uw tekstdocument nog geen afbeelding heeft, voegt u deze in volgens onze instructies.

2. Wijzig indien nodig het formaat van de afbeelding door de markering of markeringen langs de omtrek te slepen. U kunt de afbeelding ook bijsnijden en de grootte en omtrek wijzigen van het gebied waarin deze zich bevindt. Onze les helpt je hierbij.

3. Klik op de toegevoegde afbeelding om het tabblad op het bedieningspaneel weer te geven "Formaat", gelegen in het hoofdgedeelte “Werken met tekeningen”.

4. Klik op het tabblad “Formaat” op de knop “Tekstterugloop” zich in de groep bevindt "Regelen".

5. Selecteer de juiste optie voor tekstterugloop in het vervolgkeuzemenu:

• “In de tekst”— de afbeelding wordt over het gehele gebied “bedekt” met tekst;

• “Rond het kader”("Vierkant") - de tekst bevindt zich rond het vierkante frame waarin de afbeelding zich bevindt;

• “Boven of onder”— de tekst wordt bovenaan en/of onderaan de afbeelding geplaatst, terwijl het gebied aan de zijkanten leeg blijft;

• “Langs de contour”— de tekst wordt rond de afbeelding geplaatst. Deze optie is vooral goed als de afbeelding rond of onregelmatig van vorm is;

• "Door"— de tekst zal langs de gehele omtrek rond de toegevoegde afbeelding vloeien, ook van binnenuit;

• “Achter de tekst”— de afbeelding bevindt zich achter de tekst. Op deze manier kunt u aan een tekstdocument een watermerk toevoegen dat afwijkt van de standaardwatermerken die beschikbaar zijn in MS Word;

Opmerking: Als u de optie selecteert om tekst terug te laten lopen “Achter de tekst” Wanneer u de afbeelding naar de gewenste locatie verplaatst, kunt u deze niet meer bewerken als het gebied waarin de afbeelding zich bevindt niet verder reikt dan de tekst.

• “Voor de tekst”— de afbeelding wordt bovenop de tekst geplaatst. In dit geval kan het nodig zijn om de kleur en transparantie van het ontwerp te wijzigen om ervoor te zorgen dat de tekst zichtbaar en leesbaar blijft.

Opmerking: De namen voor verschillende tekstomloopstijlen kunnen verschillen in verschillende versies van Microsoft Word, maar de typen omloop zijn altijd hetzelfde. Direct in ons voorbeeld wordt Word 2016 gebruikt.

6. Als er nog geen tekst aan het document is toegevoegd, voert u deze in. Als uw document al tekst bevat die u wilt laten teruglopen, verplaatst u de afbeelding over de tekst en past u de positie ervan aan.

Advies: Experimenteer met verschillende soorten tekstterugloop, want wat in het ene geval ideaal is, kan in het andere geval niet ideaal zijn.

Zoals u kunt zien, is het in Word helemaal niet moeilijk om tekst rond een afbeelding te wikkelen. Bovendien beperkt het Microsoft-programma uw acties niet en biedt het verschillende opties waaruit u kunt kiezen, die elk in verschillende situaties kunnen worden gebruikt.