Float Over Help in HTML

Wanneer u webpagina's voor uw bedrijf maakt met behulp van eenvoudige HTML- en CSS-code, kunt u CSS gebruiken om specifieke 'divisies' in uw inhoud op te maken en te formatteren (gedefinieerd in uw HTML-code), waarmee u tekst en afbeeldingen op zo'n manier kunt opmaken dat ze zich "omwikkelen" of zich aan elkaar aanpassen. Met andere woorden, delen van uw inhoud kunnen worden aangepast aan andere secties, zodanig gerangschikt dat afbeeldingen en tekst bij elkaar passen als kolommen, rasters of elke andere opgegeven uitlijning.

HTML en CSS

Hoewel HTML een gelabelde metataal presenteert die definieert hoe een webpagina in een webbrowser wordt weergegeven, komt de echte kracht van webontwerp wanneer u HTML combineert met Cascading Style Sheets. CSS definieert gedrag voor elementen die zijn ingesloten in HTML-bestanden, waardoor een universele lay-out voor de pagina wordt gemaakt. Meerdere HTML-documenten kunnen verwijzen naar dezelfde CSS-pagina, wat betekent dat u een reguliere weergave op al uw pagina's kunt afdwingen.

HTML-divisies en zwevend

CSS werkt met HTML door het gedrag van HTML-tags te definiëren. CSS maakt in het bijzonder gebruik van de tags "". Deze divisietags omringen een deel van het document en identificeren het als een afzonderlijke eenheid van informatie die overal dezelfde stijl zou moeten hebben. Deze divisies fungeren ook als "boxen" van soorten, in die zin dat je via CSS inhoudsegmenten kunt veranderen van kleur, van grootte veranderen of "zweven" naar een specifieke paginarand, zodat het formaat van de pagina de lay-out niet verpest.

Drijvend in CSS en HTML

Als u het kenmerk "zweven" wilt gebruiken, maakt u een indeling in uw inhoud of verwijst u naar een afbeelding. In uw CSS-document verwijst u vervolgens naar die div of afbeelding op naam en geeft u deze een float-attribuut. Het volgende codevoorbeeld laat zien hoe dit kan worden bereikt met een interne stylesheet. Merk op dat de indeling in de HTML, genaamd "section1", een breedte heeft van 100 pixels. Voor alle divisies met float is een gespecificeerde breedte vereist. Afbeeldingen hebben al een impliciete breedte:

Hier is wat inhoud binnen een divisie

Helder, marges en opvulling

Naast de basisprincipes van het gebruik van het zwevende attribuut, kunt u ook andere items gebruiken, zoals de kenmerken clear, margin en padding. Het duidelijke kenmerk zorgt ervoor dat geen andere inhoud op dezelfde regel verschijnt als het zwevende element. Marges bepalen de ruimte rond de linker- en onderruimten van de divisie. Padding bepaalt de interne ruimte in de scheiding tussen de inhoud en de grenzen van de divisie. Deze drie items samen kunnen schone, 'doosvormige' divisies maken die toestaan of niet toelaten dat tekst en andere afbeeldingen eromheen lopen.