Tekst Omkring Billede i HTML og CSS
I HTML kan man placere tekst omkring et billede ved at anvende CSS float på billedet.
Edited: 2017-09-10 13:52
Ved hjælp af CSS kan man nemt få tekst omkring et billede. Det giver en god udnyttelse af pladsen på en side, og så ser det også super flot ud. For at få teksten til at omslutte billedet, kan vi angive i vores CSS, at billedet skal "flyde" imod højre side af parent elementet. Det gør vi ved hjælp af float egenskaben.
Den nemmeste måde at ændre et bestemt billede på, er ved at tilføje en klasse (class) attribut til billedet i HTMLen. Class attributten bliver brugt til at gruppere elementer, så man nemt kan styre flere elementer via et enkelt udtryk i CSSen. Men det er også ok at bruge den, hvis man kun har et enkelt billede.
Når vi koder CSS, henviser vi til en klasse med punktum. Vi skriver først punktumet, derefter navnet på klassen (.[Klasse navn]). Hvis vi havde brugt et unikt ID, så skulle vi have brugt firkant (#) symbolet i stedet for punktum (#[ID navn]).
Flyd billede imod højre med float
Img elementet vist nedenfor har vi givet klassen article_img, hvilket gør det muligt nemt at henvise til det fra vores CSS.
<img src="kat-med-stoevler-og-hat.jpg" alt="Billede af en kat med støvler og hat. Det ser mega sjovt ud!!!" class="article_img"> <p>Teksten her skulle gerne "flyde" rundt omkring teksten, en opførsel som er opnået ved, at give billedet en float erklæring via CSS. Resultatet er at siden ser smartere ud, og at man bedre udnytter pladsen på siden.</p>
Teksten omkring billedet vil normalt blive placeret i et tekstafsnit, kodet ved brug af p elementet. Andre elementer vil dog også fungere – selvom det frarådes. Skriver man tekst, så er det normalt bedst at bruge p.
For at få billedet til at flyde imod højre, og dermed få teksten til at omslutte det, skal vi blot angive float:right; på billedet i vores CSS. Det kan vi gøre med vores nyligt oprettet klasse, som det er vist nedenfor:
.article_img {
float: right;
}
Se eksempel her: Test af float på billede i HTML
Fortæl os hvad du tænker: