Tekst Omkring Billede i HTML og CSS

I HTML kan man placere tekst omkring et billede ved at anvende CSS float på billedet.

1305 visninger

Edited: 2017-09-10 13:52

Eksempel på brugen af CSS float på billeder.

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:

  1. Der er flere måder at indsætte billeder på i HTML, her kan du læse om nogle af dem.
  2. Sådan styrker du dit design med hover-effekter i CSS.
  3. Når man laver links i HTML er der en række overvejelser man bør gøre sig, læs hvilke her i artiklen.
  4. Hvordan man skriver nyttige kommentarer, når man koder HTML.
  5. GDPR.. Fra notifikationer til indholds-blokerende popups og cookie-walls.

Flere i: Webdesign