Tekst nederst i en div

haakoo · 2. desember 2004

Jeg skulle gjerne fått plassert en tekst nederst i høyre hjørnet av en div. Få teksten høyrejustert er ikke et problem, bruker bare "text-align: right;", men jeg har problemer med å få den til å være nederst i div-en. Noen forslag?

FuLu · 3. desember 2004

Sett position: relative; på div'en. Så putter du f.eks teksten du vil ha nederst i en <p class="nederst">tekst</p>.. så i .nederst klassen sier du position: absolute; og bare setter bottom: 0; og right: 0; f.eks.

Lokaltog · 3. desember 2004

FuLu: Jeg er ikke så sikker på at det der vil funke. Har hørt rykter om at elementer kun plasseres absolutt i forhold til parent-elementet dersom det også har absolutt posisjonering. Her så er jo den relativt posisjonert.

Correct me if I'm wrong! :blush:

Haraldson · 3. desember 2004

Jeg tror FuLu faktisk eksperimenterte med dette for ikke så lenge sida, så aldri si aldri.

Shoot me if I'm wrong.

Cobos · 3. desember 2004

Det er en offisiell "metode" det å ha noen store relative positioned container divs rundt innholdet ditt, så kan du bruke absolute position til å ordne innholdet ditt inne i den container div'en. Funker ihvertfall fint for meg

Cobos

prøvekanin · 3. desember 2004

Testet med denne koden, og det funket helt fint (Se resultatet her):

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="nb-NO">

<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
</head>

<body>

<div id="container">
<p>Litt tulletekst her og litt dilldall-ting.</p>
</div>

</body>

</html>

CSS:

#container {
position: relative;
margin: 0px auto;
text-align: center;
height: 400px;
width: 600px;
border: 1px solid #000;
}

#container p {
position: absolute;
bottom: 0;
right: 0;
padding: .5em;
}

Endret 3. desember 2004 av prøvekanin

FuLu · 3. desember 2004

Som prøvekanin har bevist, så funker det ja.

Eneste minus med metoden, er at når annet innhold i div'en kommer seg ned i bunn, vil den posisjonerte p'en legge seg over.. så det kan være en ide å legge til margin/padding i bunnen på det siste elementet som ikke er posisjonert i den diven.

<div>
<h2>tittle</h2>
<p>masse tekst</p>
<p class="pad_meg_i_bunn">enda mere tekst med padding i bunn så jeg ikke kommer under den under meg ;)</p>
<p class="bunn">jeg er alltid nederst til høyre i div'en</p>
</div>

haakoo · 3. desember 2004

Takk takk, da har jeg fått løst problemet.

Logg inn

Tekst nederst i en div

Anbefalte innlegg

haakoo

Videoannonse

FuLu

Lokaltog

Haraldson

Cobos

prøvekanin

FuLu

haakoo

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer