Avatar billede mik789 Nybegynder
24. juli 2002 - 16:47 Der er 17 kommentarer og
1 løsning

lag over iframe - igen

Jeg arbejder med to problemer. 1) Sidecentrering uden tabeller, og 2) at vise lag over en iframe - også i NS6.

Problem 1 er nu løst - i første omgang på den enkleste måde, dvs. med ren css (tester også pelkjaers script, (se: http://www.eksperten.dk/spm/238968 ) i anden omgang). Men problem 2 er uløst. I går havde pelkjaer et forslag til løsning, se http://www.eksperten.dk/spm/238563 , men det virkede ikke i NS6. Men nu er situationen jo en anden med den centrerede side. Her er koden, dokumentet kan ses på www.dahr.dk/Z-index/centrering_u_tabel.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

/* Sidecentrering frit efter BlueRobot http://bluerobot.com/web/css/center1.html */

body {
  margin:30px 0px; padding:0px;
  text-align:center;
  }
div#sidecentrering {
  position:relative; width:800px; height:550px; margin:0px auto;
  text-align:left; padding:0px; border:1px dashed #333; background-color:white;
  }
div#venstrespalte {
  position:absolute; top:0px; left:0px; width:200px; height:100%;
  background-color:#fcfcac;
  }
div#midterspalte {
  position:absolute; top:0px; left:200px; width:400px; height:100%;
  background-color:#fcacfc;
  }
div#hoejrespalte {
  position:absolute; top:0px; left:600px; width:200px; height:100%;
  background-color:#acfcfc;
  }
div#lag1 {
  position:absolute; z-index:1; top:100px; left:150px; width:300px; height:100px;
  background-color:#ff0000; border:1px; visibility:hidden;
  }
div#lag2 {
  position:absolute; z-index:2; top:250px; left:100px; width:300px; height:100px;
  background-color:#00ff00; border:1px; visibility:hidden;
  }
div#lag3 {
  position:absolute; z-index:3; top:380px; left:430px; width:300px; height:100px;
  background-color:#0000ff; border:1px; visibility:hidden;
  }
iframe {
  top:100px; left:0px; width:100%; height:400px; z-index:0;
    }
</style>
<script type="text/javascript">
// Frit efter "pelkjaer" på www.eksperten.dk. - Tak -

function findContent(theObj, theDoc) {
  var p, i, foundObj;
 
  if(!theDoc) theDoc = document;
  if(!foundObj && document.getElementById && self!=parent) foundObj = parent.document.getElementById(theObj);
  if(!foundObj && document.getElementById && self==parent) foundObj = document.getElementById(theObj);

  return foundObj;
}

function showHideContent() {
  var i, visStr, obj, args = showHideContent.arguments;
  for (i=0; i<(args.length-1); i+=2) {
    if ((obj = findContent(args[i])) != null) {
      visStr = args[i+1];
      if (obj.style) {
        obj = obj.style;
        if(visStr == 'show') visStr = 'visible';
        else if(visStr == 'hide') visStr = 'hidden';
      }
      obj.visibility = visStr;
    }
  }
}

</script>
</head>
<body>

<div id="sidecentrering">

  <div id="lag1"></div>
  <div id="lag2"></div>
  <div id="lag3"></div>

  <div id="venstrespalte">
    <p><a href="java script:showHideContent('lag1','show');">Vis lag 1</a></p>
    <p><a href="java script:showHideContent('lag1','hide');">Skjul lag 1</a></p>
  </div>

  <div id="midterspalte">
    <p><a href="java script:showHideContent('lag2','show');">Vis lag 2</a></p>
    <p><a href="java script:showHideContent('lag2','hide');">Skjul lag 2</a></p>
    <iframe src="tom.html" scrolling="yes"></iframe>
  </div>

  <div id="hoejrespalte">
    <p><a href="java script:showHideContent('lag3','show');">Vis lag 3</a></p>
    <p><a href="java script:showHideContent('lag3','hide');">Skjul lag 3</a></p>
  </div>

</div>

</body>
</html>

Det virker fint i IE, men i NS kommer lagene om bag iframen. Kan det overhovedet løses?
Avatar billede solle Nybegynder
24. juli 2002 - 16:51 #1
NS har et problem med stylesheets .....
Avatar billede pelkjaer Nybegynder
24. juli 2002 - 19:40 #2
solle>>Vrøvl.

mik>>Ser ud til at jeg bliver din redning nok engang :o)

Jeg fjernede z-index fra iframen. Dernæst gav jeg lag 1 2 og 3 position:fixed; - så virker det i NS6.

Men ikke i IE - men så hiver du bare to stylesheets så er den klaret.

http://www.peterelkjaer.dk/exp/test.html
Avatar billede mik789 Nybegynder
25. juli 2002 - 08:30 #3
css-pelkjaer> det var fandens... jeg synes jeg har prøvet alle muligheder, men den har jeg overset ;-)

Der er dog stadig ét problem i din NS-løsning. Når du sætter de tre lag til fixed, beregnes left og top ud fra skærmkanten i stedet for ud fra den den centrerede div ("sidecentrering"), der gerne skulle styre det hele - prøv selv at se igen sammenlignet med hvordan det ser ud i IE. Det går ikke, for så vil lagene komme til at ligge forkert hvis folk bruger en anden opløsning end min. Men man burde vel kunne sætte top og left på en eller anden sindrig måde der tager højde for folks skærmmål - gad vist om det automatisk ville være løst med din script løsning for centrering. Det vil jeg prøve i dag. Hvis du inden da har nogle tips om andre løsninger, så læg en kommentar. Tak så langt.
Avatar billede mik789 Nybegynder
25. juli 2002 - 08:34 #4
skærmkanten = vindueskanten. Det er vinduet, der styrer position fixed, ikke skærm-målene i sig selv. Jeg har nemlig også et andet sted været nødt til at lægge laget i selve iframen (i NS-løsningen), og så kan alt lade sig gøre, hvis bare det er inden for iframens (dvs. iframe-vinduets) kanter.
Avatar billede pelkjaer Nybegynder
25. juli 2002 - 10:35 #5
Ja jeg må indrømme at jeg ikke har været opmærksom på layers'nes placering, blot om de lagde sig over iframe'en.

Men det er et stykke ad vejen:)
Avatar billede pelkjaer Nybegynder
25. juli 2002 - 10:37 #6
Går det helt galt kan du smide en lille transparent gif i dine 3 layout divs, så placerer vi sq' bare show/hide div'sne efter dem istedet.
Sig til hvis du vil ha' hjælp til det.
Avatar billede mik789 Nybegynder
25. juli 2002 - 10:49 #7
det sidste forstår jeg ikke. hvis jeg vil have at show/hide div'erne skal placeres efter en transparent.gif i hver af spalte-div'erne, så er de (show/hide div'erne) vel nødt til at positioneres relativt og ikke fixed, og så dur det vel igen ikke i NS ? eller er der nu igen noget jeg ikke har forstået ;-\
Avatar billede pelkjaer Nybegynder
25. juli 2002 - 10:52 #8
Jeg tænkte på at gøre det med javascript på onload'en - så er det muligt det går, men det er ikke sikkert.
Avatar billede mik789 Nybegynder
25. juli 2002 - 10:57 #9
OK, jeg prøver at starte forfra med din script løsning (på det med centreringen) og ser hvordan det så går. Så er det muligt at show/hide lagene også kommer til at ligge hvor de skal. Jeg vender tilbage hvis/når jeg ikke kan få det til ;-) tak så langt...
Avatar billede pelkjaer Nybegynder
25. juli 2002 - 10:59 #10
Du råber bare højt :-)
Avatar billede mik789 Nybegynder
25. juli 2002 - 10:59 #11
det ka du tro!
Avatar billede mik789 Nybegynder
25. juli 2002 - 14:06 #12
kl. er ca. 13.56 og jeg råber!:

Jeg har nu prøvet at indsætte mine egne dimensioner i dit script (det der centrerer tre lodrette div'er). Dine oprindelige div'er havde flg bredder fra venstre mod højre: 100 - 400 - 100. Mine er 200 - 400 - 200 (og alle samme højde i modsætning til dine - men det ser ikke ud til at betyde noget). Men det bliver vist forkert. Min midter-div bliver kun 100, dvs. den samlede bredde bliver under alle omstændigheder 600 (og ikke 800 som jeg har brug for). Det er jo nok noget med de værdier der angives i funktionskaldet i <body> tag'et. Det ser jo sådan ud, som jeg fik det fra dig:

<body onLoad="alignWD2('CenterDiv',5,0,0);alignLL2('LeftDiv','CenterDiv','D',0,0,'RightDiv','CenterDiv','E',0,0)">

og det er vel disse værdier jeg (også) skal rette på. Men da jeg har lidt svært ved lige at forstå scriptet i alle detaljer, må jeg lige have lidt guidance. Jeg kan kende nogle af variablerne ('D', og 'E') som nogle af dem der blev fastsat i de forskellige cases i funktionen alignLL2(), men kan ellers ikke se hvad der skal til. Så hvis du lige kan forklare mig hvordan værdierne i onload funktionskaldet skal bruges når man indfører andre dimensioner, er du flink. :)))
Avatar billede mik789 Nybegynder
25. juli 2002 - 14:11 #13
nej, jeg vrøvler, min midter-div bliver kun 100px, så mine diver bliver jo kun 500 px i alt, så det er ikke noget med at den prøver at fastholde dine oprindelige 600 px ???
Avatar billede mik789 Nybegynder
25. juli 2002 - 14:26 #14
hej stop lige, der er noget galt. jeg kan godt få din oprindelige side ud mine egne dimensioner, så jeg må have lavet en anden fejl. kigger lige på det.
Avatar billede mik789 Nybegynder
25. juli 2002 - 15:54 #15
Midtvejsrapport:

Nu har jeg fået mine tre divs ind i dit script så det fungerer. Men det kan ikke lade sig gøre at få lagene oveni. Og det er jo klart: dit script kræver at hver af de tre divs (left, center og right) er positioneret absolut. Og når lagene også skal positioneres absolut inde i hver div, ja så vil den pågældende div (left, center, right) udvide sig efter lagets størrelse. Jeg er nødt til at arbejde med én centerdiv (som i dit første script) som jeg så underopdeler i tre. Så kan lagene lægges inde i den ydre centerdiv men uden for de tre inde i, og så burde det kunne fungere. Arbejder videre med et.
Avatar billede pelkjaer Nybegynder
25. juli 2002 - 18:00 #16
Hej igen. Det script var bare en demo for at vise hvad man kan gøre, mine divs har en helt tilfældig størrelse :)

Men som du selv siger, ja så virker den løsning nok ikke fordi du bruger en iframe.
Avatar billede mik789 Nybegynder
26. juli 2002 - 10:39 #17
OK, den endelige løsning blev en god gammel framseset løsning + dit showHideLayers script og de to forskellige IE/NS css. Her er resultatet, og det er fint i begge browsere (IE6 og NS6): www.dahr.dk/Lag_over_iframe
- så det går jeg videre med.

Tak til pelkjaer for megen hjælp undervejs
Avatar billede pelkjaer Nybegynder
26. juli 2002 - 10:45 #18
Anytime.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester