Placer html-elementer med absolut position

Indlæs andet indhold på denne side:

Kreativ placering af enkeltelementer

Siden er opdateret 12. 12. 2005

K
reativ
t
ekstplacering på siden

Normalt, når man laver tekst på en html-side, vil teksten komme til at stå med bundlinjen ensartet uanset eventuelle skift af font eller størrelse undervejs i tekstlinjen. Ligeledes vil man normalt have valget mellem enten venstrejusteret, centreret eller højrejusteret tekst.

Men som du kan se på tekstlinjen herunder, kan det faktisk lade sig gøre at justere tekstens placering på siden med en nøjagtighed af 1 pixel og man kan vælge at lade tekstens toplinje være fælles - eller have helt forskellig højdejustering på forskellige dele af en tekstlinje.

Du kan også placere et billede på siden med samme nøjagtighed. Og hvis du i koden indsætter billedet før teksten, kan du desuden have teksten stående hen over billedet.

Hammershus

Hammershus Slotsruin
på Bornholm

Hvis du prøver at tage en kopi af billedet her til venstre og indlæser denne kopi i en billededitor, vil du se, at der ikke står nogen tekst i billedet. Den er altså anbragt ovenpå billedet.

Normalt ville en tekst placeret til højre for et billede også kræve anvendelse af en tabel for at styre placeringen. Dette er også sparet væk på denne side - altsamen ved anvendelse af funktionen <div></div>.

Alt dette kræver, at hvert enkelt element, som skal placeres på siden på denne kreative måde, bliver indsat i en <div></div>, som skal indeholde nøjagtig oplysning om elementets placering på siden. Inde i hver <div></div> skal de enkelte tekstelementer desuden indsættes i en <p></p>, som skal tildeles en klasse, der definerer tekstens udseende - font (skrifttype), størrelse, stil (opret eller kursiveret), tykkelse (normal eller fed) og farve:

<div style="position:absolute;top:570px;left:60px;">
<p class="hvid">Hammershus Slotsruin<br />på Bornholm</p>
</div>

Vi ser, at der i <div></div> er defineret position:absolute, det betyder, at tekstens placering defineres i forhold til sidens øverste venstre hjørne. Dernæst står der, at teksten skal anbringes 570 pixels nede på siden og 60 pixels til højre for venstre sidekant. I <p></p> er der tildelt klassen hvid, der i .css eller stylesheet er defineret således:

.hvid
{
font-family:verdana,sans-serif;
font-size:14px;
font-weight:600;
color:#ffffff;
background:transparent;
margin-top:0px
}

Indsættelse af style="margin-top:0px" er en tilpasning, så placeringen bliver nøjagtig ens i alle browsere.

Ovenstående definition gælder for den hvide tekst, som står hen over billedet ovenfor. Men princippet er det samme for sidens overskrifter, der er skrevet med fire forskellige skriftstørrelser og med to gange fæles overlinje - anbragt skævt justeret i forhold til sidens midterlinje.

Når man benytter metoden med <div></div> til at placere et billede og/eller en tekstblok på siden, skal man huske at anbringe et passende antal tvungne linjeskift <br /> mellem teksten over og under, da teksten under ellers i stedet bare vil blive skrevet tværs hen over indholdet i <div></div>'en.

tekst på tekst Se blot eksempelet her til venstre, som jeg har fremstillet grafisk, men som ser præcis lige så kaotisk ud. Det er komplet ulæseligt, hvor de to tekster overlapper hinanden.
 
tekst på billede Det bliver ikke meget bedre, når man får anbragt en sort tekst oven i et billede med mange skygger, vel.
Så husk de tvungne linjeskift!

Problemet opstår ved, at et absolut positioneret element ikke fylder i sidens flow. Derfor nødvendigheden af de tvungne linjeskift.


En mere elegant måde at gøre siden skalerbar på, selv om man vil benytte absolut positionering, er at putte det hele ind i en <div></div>, der tildeles en relativ position.

Det indhold, der inde i denne <div></div> tildeles absolut positionering, vil så blive orienteret i forhold til div'ens placering på siden i stedet for sidens øverste venstre/højre hjørne:

<div style="position:relative; top:0;left:0; width:100%; height:100px">
<p style="position:absolute; top:10px; left:100px"><img src="maleri.jpg" width="100" height="67" alt="" /></p>
</div>

maleri

Jeg har sat en border på div'en, så du kan se, hvad jeg mener. Men den er ikke nødvendig. Derimod er det nødvendigt at sætte en højde på. Ellers fylder div'en ikke i flowet. Til gengæld slipper du så for at indsætte en masse tvungne linjeskift. Og siden er fuldt skalerbar.


Hvis man vil anbringe et billede et stykke nede på en side og centreret om sidens lodrette midterlinje, kan man godt med stor omhu få det til at passe, mens man sidder og arbejder med det. Men hvad hvis brugeren anvender en anden størrelse browservindue? Så passer den omhyggelige sideværts justering ikke længere.

Løsningen er, at man sætter den vandrette justering til nul, udnytter hele sidebredden og centrerer billedet heri. Det får den samlede justering af billedets placering til at se således ud:

<div style="position:absolute;top:243px;left:0px;width:100%;
text-align:center"><img src=..... /></div>

På samme måde kan man naturligvis sætte et billede i højre side af brugerens browservindue, uanset vinduets størrelse. Man ændrer bare text-align:center til text-align:right.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen november 2001
Hjemmesideskolen
Du er her: Forsiden - html - Placer html-elementer med absolut position
Brugere lige nu: 1
Home Mail