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

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
CSS positioning fejl
Fra : Lars Hoffmann

Dato : 28-02-02 11:02
Jeg har lidt problemer med at forstaa W3's fortolkning af position
egenskaben i CSS

Paa
<http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#choose-positio
n> Staar der foelgende:

<citat>
absolute:
The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These properties specify
offsets with respect to the box's containing block. Absolutely
positioned boxes are taken out of the normal flow. This means they have
no impact on the layout of later siblings. Also, though absolutely
positioned boxes have margins, they do not collapse with any other
margins.
</citat>

Det vigtige her er IMHO: "These properties specify offsets with respect
to the box's containing block", altsaa at left, top, right osv bliver
specificere /i forhold til/ beholder boxen.


Hvis a og b er div-blokkene, burde foelgende kode give det billede der
ses paa:
www.intercambiodvd.com/ex2.bmp

<html>
<body>
<div style="width:50%;height:50%"><!-- A -->
<div
style="position:absolute;top:5px;right:5px;width:50%;height:50%;"><!--
B -->
</div>
</div>
</body>
</html>

Men stik imod al logik giver det istedet det resultat der ses paa
www.intercambiodvd.com/ex1.bmp

Nogen der kan forklare mig hvorfor det haenger saadan sammen, og hvilken
type positioning jeg skal bruge for at opnaa den effekt der vises i
ex2.bmp (position:relative; dur jo ikke rigtig til det)?
(beklager at bruge bmp billeder, men jeg har ingen
billedbehandlingsprogrammer installeret paa denne maskine)

Med venlig hilsen
Lars Hoffmann



 
 
Thomas Lindgaard (28-02-2002)
Kommentar
Fra : Thomas Lindgaard

Dato : 28-02-02 11:30
Davs

> Jeg har lidt problemer med at forstaa W3's fortolkning af position
> egenskaben i CSS

Det har jeg osse rodet med engang - og det virker af måsen til! Til gengæld
kan følgende kode gøre cirka det du vil, tror jeg:

<html>

<head>
<style>
BODY { text-align: center; }
DIV#A { width: 50%; height: 50%; border: 1px solid red; margin-left: auto;
margin-right: auto; }
DIV#B { width: 50%; height: 50%; float: right; border: 1px solid blue; }
</style>
</head>

<body>
<div id="A">
<div id="B">
Dette er div B - den skulle gerne hænge i hjørnet
</div>

Dette er div A
</div>
</body>

</html>

Fjern styling af BODY (sørger for centrering i IE) og margin-(left/right)
(sørger for centrering i Opera) på A'eren, så har du to kasser som sitter
inde i hinanden og er placeret i øverste venstre hjørne.

Hyggehejsa
/Thomas



Lars Hoffmann (28-02-2002)
Kommentar
Fra : Lars Hoffmann

Dato : 28-02-02 11:53

Thomas Lindgaard <thomas@dnspilot.com> escribió en el mensaje de
noticias a5l0q7$1la5$1@news.cybercity.dk...
> Davs
>
> > Jeg har lidt problemer med at forstaa W3's fortolkning af position
> > egenskaben i CSS
>
> Det har jeg osse rodet med engang - og det virker af måsen til! Til
gengæld
> kan følgende kode gøre cirka det du vil, tror jeg:

Ja du har ret, man kan naturligvis floate den, men mit problem er at den
side jeg er ved at brygge sammen har mere end blot en enkelt <div> til
at haenge ude til hoejre. Det jeg soege er noget der haenger lidt mere
fast end float. Det naermeste jeg er kommet er at definere det med
position relative og saa bruge baade positive og negative vaerdier for
at faa det til at haenge sammen.

Er det ikke utroligt at de saa gerne vil have os til at go vaek fra
table designs, men der findes ikke en eneste browser der fortolker
positions ordentligt, man er noed til at kaempe med alle mulige
vorkarrounds.
Med venlig hlisen
Lars Hoffmann




Kasper Kyndsberg (28-02-2002)
Kommentar
Fra : Kasper Kyndsberg

Dato : 28-02-02 12:46
"Lars Hoffmann" <lars@intercambiodvd.com> skrev
[SNIP: W3 dokumentation af position]
> Hvis a og b er div-blokkene, burde foelgende kode give det billede der
> ses paa:
> www.intercambiodvd.com/ex2.bmp
[SNIP Kode]

> Men stik imod al logik giver det istedet det resultat der ses paa
> www.intercambiodvd.com/ex1.bmp

> Nogen der kan forklare mig hvorfor det haenger saadan sammen, og hvilken
> type positioning jeg skal bruge for at opnaa den effekt der vises i
> ex2.bmp (position:relative; dur jo ikke rigtig til det)?

Jeg kan desværre ikke forklare dig hvorfor position relative ikke virker i
dit eksempel. Position absolute bør efter min logik placere dit element som
den gør. Absolute skal positionere efter browserens indre mål, mens relative
skal placere et element ud fra dens oprindeligeg placering.

Jeg synes også det er ret mærkeligt, men har ofte problemer med at få
position til at virke. Mange browsere understøtter desværre ikke position
ordentligt, hvorfor det ofte er bedre at bruge float, som Thomas også er
inde på.

Følgende er testet i IE 5.5 og i Opera 5.11 (Har måtte formatere min maskine
og kunne ikke teste i NS 6, som nok er det bedste parameter for, om det
virker som det skal)

<div style="position: absolute; top: 5px; left: 5px; width: 30%; height:
20%; background: blue;">
<div style="position: absolute; top: 5px; right: 5px; width: 30%; height:
20%; background: white;">
</div>
</div>

Så snart du fjerner position fra den yderste boks vil denne heller ikke
virke.

Som du er inde på, burde den indre boks positioneres med relative, men det
virker heller ikke.

Som sagt har jeg ikke nogen fornuftige forklaringer, men håber du kan bruge
eksemplet til at arbejde videre ud fra

Jeg må indrømme min nysgerrighed også er vagt nu, så hvis du selv finder ud
af noget, må du meget gerne poste et svar...

> Lars Hoffmann

--
/Kasper
http://www.kyndsberg.dk



Lars Hoffmann (28-02-2002)
Kommentar
Fra : Lars Hoffmann

Dato : 28-02-02 13:14
Kasper Kyndsberg <nospam@kyndsberg.dk> escribió en el mensaje de
noticias a5l592$g4e$1@sunsite.dk...

> Jeg kan desværre ikke forklare dig hvorfor position relative ikke
virker i
> dit eksempel. Position absolute bør efter min logik placere dit
element som
> den gør. Absolute skal positionere efter browserens indre mål, mens
relative
> skal placere et element ud fra dens oprindeligeg placering.

Men ifoelge W3 skal position:absolute placere efter "moder"-blokken, men
som du siger placeres der efter hele browserwinduet

> Jeg synes også det er ret mærkeligt, men har ofte problemer med at få
> position til at virke. Mange browsere understøtter desværre ikke
position
> ordentligt, hvorfor det ofte er bedre at bruge float, som Thomas også
er
> inde på.

Position kan vaere ret traels, specielt med Netscape 4 og 6 (6'eren
understoetter der rimeligt, men placerer blokkene anderledes end andre
browsere). 4'eren placerer fint nok, saalaenge din left og top er
defineret inline, er det derimod defineret som en class eller endnu
vaerrere, i et ekstert stylesheat, gaar NS4 helt bananas. Heldigvis er
den browser da snart foejet af markedet


> Så snart du fjerner position fra den yderste boks vil denne heller
ikke
> virke.

Paa W3 siger de

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

Jeg tror at det er netop det som browserne tager fejl af. De lader ikke
absolutte boxe have inflydelse paa "siblings", men _heller_ikke_ paa
boxe der indeholdes i samme. (Det er ret saa svaert at beskrive disse
problemer paa dansk, haaber det er forstaaeligt hvad jeg skriver.)

Med venlig hilsen
Lars Hoffmann


> Som du er inde på, burde den indre boks positioneres med relative, men
det
> virker heller ikke.
>
> Som sagt har jeg ikke nogen fornuftige forklaringer, men håber du kan
bruge
> eksemplet til at arbejde videre ud fra
>
> Jeg må indrømme min nysgerrighed også er vagt nu, så hvis du selv
finder ud
> af noget, må du meget gerne poste et svar...
>
> > Lars Hoffmann
>
> --
> /Kasper
> http://www.kyndsberg.dk
>
>



Lasse Reichstein Nie~ (28-02-2002)
Kommentar
Fra : Lasse Reichstein Nie~

Dato : 28-02-02 18:48
"Lars Hoffmann" <lars@intercambiodvd.com> writes:

> Kasper Kyndsberg <nospam@kyndsberg.dk> escribió en el mensaje de
> noticias a5l592$g4e$1@sunsite.dk...
>
> > Jeg kan desværre ikke forklare dig hvorfor position relative ikke
> virker i
> > dit eksempel. Position absolute bør efter min logik placere dit
> element som
> > den gør. Absolute skal positionere efter browserens indre mål, mens
> relative
> > skal placere et element ud fra dens oprindeligeg placering.
>
> Men ifoelge W3 skal position:absolute placere efter "moder"-blokken, men
> som du siger placeres der efter hele browserwinduet

Havde selv et lignende problem for nyligt. Position:absolute skal placeres
efter den nærmeste omkrandsendee placerede blok, hvor en placeret blok
er en blok der ikke er position:static. D.v.s. for

<body>
blah blah
<div style="position:static">
foo bar bax
<div style="position:absolute;left:5px;top:5px">
pip
</div>
</div>
</body>

placeres den inderste div i forhold til body, men for

<body>
blah blah
<div style="position:relative;left:0px;top:0px">
foo bar bax
<div style="position:absolute;left:5px;top:5px">
pip
</div>
</div>
</body>

placeres den i forhod til den første div.

/L 'hvis jeg forstod det rigtigt'
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgment merely degrades the spirit divine.'

Søg
Reklame
Statistik
Spørgsmål : 177557
Tips : 31968
Nyheder : 719565
Indlæg : 6408875
Brugere : 218888
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.