/ 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
Relativ positionering
Fra : Jens Gyldenkærne Cla~


Dato : 31-12-02 01:50

Nu fik jeg rammeelementerne på plads - men...
Jeg skal placere endnu et billede, ovenpå et andet. Jeg har brugt
følgende css:

   #cirkellogo{
      position: relative;
      margin-left: 28px;
      margin-top: -102px;
   }

Men det er mildt sagt forskelligt hvordan mine browsere viser siden
(<http://musikinfo.dk/nytsite/hojre.html>).

IE6 viser den som den er tænkt
I Mozilla 1.2.1 er cirkellogoet skubbet lidt for højt op.
I Opera (6 + 7B2) er cirkellogoet helt forsvundet - muligvis
op over browserens øverste kant.

Skal jeg virkelig overgive mig og benytte imagemap?
--
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

 
 
Lasse Reichstein Nie~ (31-12-2002)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 31-12-02 02:19

Jens Gyldenkærne Clausen <jens@gyros.invalid> writes:

>    #cirkellogo{
>       position: relative;
>       margin-left: 28px;
>       margin-top: -102px;
>    }

I den beskrivelse gør position:relative ikke noget som helst.
Position:relative virker lige som position:static (default),
ud over at man kan bruge fx left: og top: til at forskyde den.

> Skal jeg virkelig overgive mig og benytte imagemap?

Lav en kasse omkring al grafikken, sæt den position:noget,
og lad alt det indeni være position:absolute, placeret i forhold
til kassen omkring.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'

Jens Gyldenkærne Cla~ (02-01-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 02-01-03 01:00

Lasse Reichstein Nielsen skrev:

> I den beskrivelse gør position:relative ikke noget som helst.
> Position:relative virker lige som position:static (default),
> ud over at man kan bruge fx left: og top: til at forskyde den.

Åh ja - det havde jeg overset.

>> Skal jeg virkelig overgive mig og benytte imagemap?
>
> Lav en kasse omkring al grafikken, sæt den position:noget,

Jeg kan kun få det til at virke med absolute eller fixed - begge
dele vil jeg gerne undgå. Jeg vil helst bare kunne placere hoved-
div'en midt på siden, uden at skulle definere noget offset fra
browserens kanter.

> og lad alt det indeni være position:absolute, placeret i forhold
> til kassen omkring.

Selv med position absolute er der tilsyneladende problemer. Sætter
jeg den indre div til position:absolute bliver den slet ikke vist i
IE. Opera 7 viser den, men placeringen skifter når jeg flytter den
omgivende boks (det skulle den jo netop ikke).
Med position:relative på den indre div får jeg vist logoet i både
Opera og IE - men på vidt forskellige steder (denne gang er det
Opera der "har ret").

Jeg har sat rammer på de to berørte div-elementer - se forsøget
her: <http://musikinfo.dk/nytsite/hojre.html>. Forklaringer på
hvorfor den røde (indre) ramme går ud over sidekanten er i øvrigt
også velkomne - selv om jeg ikke tror at det har noget med
placeringsproblemet at gøre.
--
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

Lasse Reichstein Nie~ (02-01-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 02-01-03 02:04

Jens Gyldenkærne Clausen <jens@gyros.invalid> writes:

> Lasse Reichstein Nielsen skrev:
>
> > I den beskrivelse gør position:relative ikke noget som helst.
> > Position:relative virker lige som position:static (default),
> > ud over at man kan bruge fx left: og top: til at forskyde den.
>
> Åh ja - det havde jeg overset.
>
> >> Skal jeg virkelig overgive mig og benytte imagemap?
> >
> > Lav en kasse omkring al grafikken, sæt den position:noget,
>
> Jeg kan kun få det til at virke med absolute eller fixed - begge
> dele vil jeg gerne undgå. Jeg vil helst bare kunne placere hoved-
> div'en midt på siden, uden at skulle definere noget offset fra
> browserens kanter.

Position absolute er ikke nødvendigvis i forhold browserens kanter,
men i forhold til det nærmeste omkrandsende element der har
position:<andet end static>.

Hvis man laver en
<div style="position:relative;height:...;width:..."> ... </div>
og putter elementer inden i den der er postition:absolute, så
bliver de placeret i forhold til div'en.

Det er derfor jeg foreslår at lave en stor div med position:relative
omkring det du gerne vil flytte rundt med, og give den den rigtige
størrelse, og så placerer alle billederne med position:absolute inden
i denne. Hvis det hele skal flyttes, så fly den ydre div, og resten
flytter med.

> > og lad alt det indeni være position:absolute, placeret i forhold
> > til kassen omkring.
>
> Selv med position absolute er der tilsyneladende problemer. Sætter
> jeg den indre div til position:absolute bliver den slet ikke vist i
> IE.

Se det er underligt. IE understøttede position:absolute fint, sidst
jeg tjekkede. Det er bare fixed den ikke fatter.

> Opera 7 viser den, men placeringen skifter når jeg flytter den
> omgivende boks (det skulle den jo netop ikke).

Jo, det skal den netop, afhængigt af hvilken box den er placeret
absolut i forhold til.

> Med position:relative på den indre div får jeg vist logoet i både
> Opera og IE - men på vidt forskellige steder (denne gang er det
> Opera der "har ret").

Et element med position:relative fylder stadig på siden, lige som hvis
det var position:static (som er default, altså det samme som
ingenting). Det bliver bare vist forskudt. Positionerne absolute og
fixed piller elementet ud af det almindelige flow i dokumentet, så
dets størrelse ikke påvirker resten.

> Jeg har sat rammer på de to berørte div-elementer - se forsøget
> her: <http://musikinfo.dk/nytsite/hojre.html>.

Jeg kan se at du også bruger float:left og float:right. Det forvirrer
selvfølgelig mig lidt mere :). Jeg har prøvet at lave det om til noget
der virker ens ved kun at bruge position:absolute til placering.
Se <URL:http://www.infimum.dk/privat/positions-nyside.html>.

Du kunne også bruge dit top-billede som baggrundsbillede på en div,
hvor i cirklen så er placeret. Altså, istedet for
<div id="hojrekolonneTop">
   <img src="images/hojre_top.gif" width="143" height="129" alt="" />
...

<div id="højrekolonneTop" style="background-image:url(images/hojre_top.gif)">
...

Ikke den store forskel i udseende, dog :).

> Forklaringer på
> hvorfor den røde (indre) ramme går ud over sidekanten er i øvrigt
> også velkomne - selv om jeg ikke tror at det har noget med
> placeringsproblemet at gøre.

Det er fordi en div er 100% bred som default. I dette tilfælde er den nok
lige så bred som højrekollonnen (149px) og ikke som biledet i den.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'

Leonard (03-01-2003)
Kommentar
Fra : Leonard


Dato : 03-01-03 17:05

On 02 Jan 2003 02:04:09 +0100, Lasse Reichstein Nielsen
<lrn@hotpop.com> wrote:

>Jeg har prøvet at lave det om til noget
>der virker ens ved kun at bruge position:absolute til placering.
>Se <URL:http://www.infimum.dk/privat/positions-nyside.html>.

Men det virker ikke i Opera 5.

Hvad er de 4 første linier til?
- altså de script du har før DOCTYPE.
--
med venlig hilsen
Leonard - http://leonard.dk/

Lasse Reichstein Nie~ (03-01-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 03-01-03 20:57

Leonard <dette.er.ikke.en.mail@der.virker.invalid> writes:

> Men det virker ikke i Opera 5.

Det var synd for Opera 5 så :)
Kan du se hvad det er der fejler? Er det CSS'en eller XHTML'en?

> Hvad er de 4 første linier til?
> - altså de script du har før DOCTYPE.

Doh! Noget der bliver indsat af proximitron, og som jeg troede jeg
havde slettet! Ignorer det!

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'

Leonard (03-01-2003)
Kommentar
Fra : Leonard


Dato : 03-01-03 22:28

On 03 Jan 2003 20:57:21 +0100, Lasse Reichstein Nielsen
<lrn@hotpop.com> wrote:

>Det var synd for Opera 5 så :)

Tjah, det er vel de færreste der bruger den, Opera-brugere er
formodentlig bedre end gennemsnittet til at opdatere ...
Men den har nogle fejl, der også opleves på nogle Mac, derfor tester
jeg også i den.

Opera 6.05 viser den nu også forkert, på samme måde som 5.

>Kan du se hvad det er der fejler? Er det CSS'en eller XHTML'en?

Det ser ud til at det CSS positioneringen det er galt med, det runde
logo er et sted langt til venstre over teksten og hojre_6pix.gif er
til venstre i den del der ellers floater til højre ...

Og jeg har samme problem med at tricket med positionering først i en
div med relative og derefter absolute indeni den heller duer i Opera
5. Det virker til gengæld for mig i 6.05


--
med venlig hilsen
Leonard - http://leonard.dk/

Christian Bohr-Halli~ (04-01-2003)
Kommentar
Fra : Christian Bohr-Halli~


Dato : 04-01-03 07:23

Leonard <dette.er.ikke.en.mail@der.virker.invalid> posting:

>>Det var synd for Opera 5 så :)
>Tjah, det er vel de færreste der bruger den, Opera-brugere er
>formodentlig bedre end gennemsnittet til at opdatere ...

Men det er ikke kun private, der bruger (Opera)browsere. Det
offentlige (fx bibliotekter og undervisningsinst.) er ikke lige
hurtige til at opdatere om det så er Opera, Netscape osv. Fx
bruges Opera 5 stadig på en af de store udd.inst. i Danmark.

--
"Death is the cure of all diseases". Kilde: ukendt

Lobais (31-01-2004)
Kommentar
Fra : Lobais


Dato : 31-01-04 08:15

Sat, 04 Jan 2003 07:22:38 +0100. skrev Christian Bohr-Halling:

> Leonard <dette.er.ikke.en.mail@der.virker.invalid> posting:
>
>>>Det var synd for Opera 5 så :)
>>Tjah, det er vel de færreste der bruger den, Opera-brugere er
>>formodentlig bedre end gennemsnittet til at opdatere ...
>
> Men det er ikke kun private, der bruger (Opera)browsere. Det
> offentlige (fx bibliotekter og undervisningsinst.) er ikke lige
> hurtige til at opdatere om det så er Opera, Netscape osv. Fx
> bruges Opera 5 stadig på en af de store udd.inst. i Danmark.

Det lyder meget pinligt for Opera. Hvis jeg bare kom og så Opera i den
tilstand, ville det nok ikke lige være det første jeg tænkte på at
hente når jeg kom hjem.
Det burde da også være muligt for bibliotekerne at opdatere det hele på
en gang. I hvert fald på Linux.

--
Thomas
- "Visdom er ikke resultatet af en uddannelse,
men et livslangt forsøg på at opnå det" - Albert Einstein, 1954


Christian Bohr-Halli~ (31-01-2004)
Kommentar
Fra : Christian Bohr-Halli~


Dato : 31-01-04 14:34

Lobais <thomas@ahle.dk> posting:

>Sat, 04 Jan 2003 07:22:38 +0100. skrev Christian Bohr-Halling:

(!!!)

>> Leonard <dette.er.ikke.en.mail@der.virker.invalid> posting:
>>
>>>>Det var synd for Opera 5 så :)
>>>Tjah, det er vel de færreste der bruger den, Opera-brugere er
>>>formodentlig bedre end gennemsnittet til at opdatere ...
>>
>> Men det er ikke kun private, der bruger (Opera)browsere. Det
>> offentlige (fx bibliotekter og undervisningsinst.) er ikke lige
>> hurtige til at opdatere om det så er Opera, Netscape osv. Fx
>> bruges Opera 5 stadig på en af de store udd.inst. i Danmark.
>
>Det lyder meget pinligt for Opera. Hvis jeg bare kom og så Opera i den
>tilstand, ville det nok ikke lige være det første jeg tænkte på at
>hente når jeg kom hjem.

Øh. Hvad snakker du om?

--
What is life, except excuse for death,
or death, but an escape from life.
--Unknown

Jens Gyldenkærne Cla~ (02-01-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 02-01-03 14:56

Lasse Reichstein Nielsen skrev:

> Jeg kan se at du også bruger float:left og float:right. Det
> forvirrer selvfølgelig mig lidt mere :).

Det kan jeg godt forstå - det er vist også det der har forvirret
mig.

> Jeg har prøvet at lave det om til noget der virker ens ved kun
> at bruge position:absolute til placering. Se
> <URL:http://www.infimum.dk/privat/positions-nyside.html>.

Perfekt! Tusind tak.

> Du kunne også bruge dit top-billede som baggrundsbillede på en
> div, hvor i cirklen så er placeret.

Ja - og det ville egentlig være mere logisk, idet top- og
kantbillederne alene fungerer som baggrund. Men nu vil jeg lige
have siden på plads først - jeg er allerede 2 dage bagud...

>> Forklaringer på hvorfor den røde (indre) ramme går ud over
>> sidekanten er i øvrigt også velkomne

> Det er fordi en div er 100% bred som default.

Ah - det lyder logisk. Endnu engang tak.
--
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

Søg
Reklame
Statistik
Spørgsmål : 177507
Tips : 31968
Nyheder : 719565
Indlæg : 6408569
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste