/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS2: Positionering af element under alle ~
Fra : Jesper Stocholm


Dato : 19-08-03 10:47

Jeg har en side, hvor jeg pt. har placeret 4 divs, der alle positioneres
absolut (der kan komme flere). Disse divs kan (og har) divergerende højde
alt efter input fra brugerne.

Jeg kunne godt tænke mig at få placeret endnu en div nederst på siden -
altså ikke nødvendigvis nederst i browservinduet - men "blot" under de
andre elementer. Teksten skal være noget i retning af "denne side blev
sidst opdateret d. ..."

Hvordan gør jeg det med CSS? Jeg antager at jeg med fx javascript kan finde
størrelsen på de andre divs og derefter regne ud hvor det skal placeres,
men er det ikke muligt at placere en div relativt under "alle andre divs"?



--
Jesper Stocholm - http://stocholm.dk
The Web submission form is the preferred procedure. However, if you don't
have access to the Internet you may send your submission by e-mail.
(Nyhedsbrev fra 9th Conference on Reliable Software Technologies)

 
 
Jens Gyldenkærne Cla~ (19-08-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 19-08-03 11:11

Jesper Stocholm skrev:

> Jeg har en side, hvor jeg pt. har placeret 4 divs, der alle
> positioneres absolut (der kan komme flere). Disse divs kan (og
> har) divergerende højde alt efter input fra brugerne.
>
> Jeg kunne godt tænke mig at få placeret endnu en div nederst
> på siden - altså ikke nødvendigvis nederst i browservinduet -
> men "blot" under de andre elementer. Teksten skal være noget i
> retning af "denne side blev sidst opdateret d. ..."

Et skud fra hoften. Placer dine absolut positionerede div'er i en
"moder-div" og sæt den sidste div udenfor. Jeg er ikke helt sikker
på om moder-div'en vil udvide sig korrekt, men du kan jo selv
forsøge:

#moder { position: relative; }
#abs1 { position: absolute; }

<div id="moder">
<div id="abs1"></div>
....
</div>
<div id="sluttekst"></div>
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Anders Thorsen Holm (19-08-2003)
Kommentar
Fra : Anders Thorsen Holm


Dato : 19-08-03 14:04

Jens Gyldenkærne Clausen wrote:

> Et skud fra hoften. Placer dine absolut positionerede div'er i en
> "moder-div" og sæt den sidste div udenfor. Jeg er ikke helt sikker
> på om moder-div'en vil udvide sig korrekt,

Det burde den ikke jævnfør
http://www.w3.org/TR/CSS2/visuren.html#propdef-position

| Absolutely positioned boxes are taken out of the normal flow. This
| means they have no impact on the layout of later siblings.

Umiddelbart kunne den ønskede effekt vel opnås ved at benytte floats
til de forskellige div'er og placere disse i en "moder-div". Desværre
har floats en tendens til at udløse 3-pixel-buggen i IE, og floats er
generelt skræmmende at holde styr på :-/

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/?page=fona

Jens Gyldenkærne Cla~ (19-08-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 19-08-03 14:27

Anders Thorsen Holm skrev:

>> Jeg er ikke helt sikker på om moder-div'en vil udvide sig
>> korrekt,

> Det burde den ikke jævnfør
> http://www.w3.org/TR/CSS2/visuren.html#propdef-position

O.k.



> Desværre har floats en tendens til at udløse 3-pixel-buggen i IE,

Hvad er det?

> og floats er generelt skræmmende at holde styr på :-/

Ja.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Anders Thorsen Holm (19-08-2003)
Kommentar
Fra : Anders Thorsen Holm


Dato : 19-08-03 15:03

Jens Gyldenkærne Clausen wrote:

>> Desværre har floats en tendens til at udløse 3-pixel-buggen i IE,
>
> Hvad er det?

Jeg har bikset et lille eksempel sammen:
http://www.daimi.au.dk/~zoolook/misc/floatbug.html

Fejlen optræder mig bekendt kun i Internet Explorer, og kun når man
benytter floats; der kommer et 3 pixel bredt tomrum mellem det floatede
element og dets 'søskende'.

I ovennævnte eksempel er der således et tomrum mellem den grønne,
floatede menu og det rødfarvede hovedindhold.

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/?page=fona

Jens Gyldenkærne Cla~ (19-08-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 19-08-03 20:50

Anders Thorsen Holm skrev:

> Jeg har bikset et lille eksempel sammen:
> http://www.daimi.au.dk/~zoolook/misc/floatbug.html

Tak for demonstrationen.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Benny Nissen (19-08-2003)
Kommentar
Fra : Benny Nissen


Dato : 19-08-03 11:16


"Jesper Stocholm" <jespers@stocholm.invalid> skrev i en meddelelse
news:Xns93DC7865D3B0Bstocholmdk@130.226.1.34...
> Jeg har en side, hvor jeg pt. har placeret 4 divs, der alle positioneres
> absolut (der kan komme flere). Disse divs kan (og har) divergerende højde
> alt efter input fra brugerne.
>
> Jeg kunne godt tænke mig at få placeret endnu en div nederst på siden -
> altså ikke nødvendigvis nederst i browservinduet - men "blot" under de
> andre elementer. Teksten skal være noget i retning af "denne side blev
> sidst opdateret d. ..."

Prøv at 'pakke' de 4 div's ind i en ekstra div, og så sætte bunden ind i
koden under:

<div hovedside>
<div 1>
// Indhold i div 1
</div>
<div 2>
// Indhold i div 2
</div>
<div 3>
// Indhold i div 3
</div>
<div 4>
// Indhold i div 4
</div>
</div>
<div bund>
// Indhold i bunden
</div>


--
Benny Nissen



Søg
Reklame
Statistik
Spørgsmål : 177560
Tips : 31968
Nyheder : 719565
Indlæg : 6408941
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste