Avatar billede sw_red_6 Nybegynder
20. oktober 2006 - 13:22 Der er 11 kommentarer og
1 løsning

problem med position: relative og visibility

Jeg har følgende kode som jeg ikke kan få til at virke.
CSS-FIL
#lag_1 {
  position: relative;
  top: 10px;
  left: 10px;
  width:150px;
  height:100px;
  visibility: visible;
  background-color: red;
  color: blue;
}

#lag_2 {
  position: relative;
  top: 10px;
  left: 10px;
  width:150px;
  height:100px;
  visibility: hidden;
  background-color: blue;
  color: blue;
}

HTML-FIL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="style/layers.css" type="text/css">
</head>
</script>
<body>
<table>
  <tr>
    <td>
      <div id="lag_1">
<form method="POST" action="?status=gem" onsubmit="document.getElementById('lag_2').style.visibility='visible';document.getElementById('lag_1').style.visibility='hidden'">
  <table>
    <tr>
      <td>
        <input type="text" name="tekst">
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" value=" GEM " name="submit">
      </td>
    </tr>
  </table>
</form>
      </div>
      <div id="lag_2">
        OPDATERER...
      </div>
    </td>
  </tr>
</table>
</body>
</html>

hvis jeg ændre til position: absolute eller erstatter visibility med display kan jeg godt få det til at virke. Er det ikke muligt at lave det som koden er nu?
Avatar billede jokkejensen Novice
20. oktober 2006 - 13:39 #1
<form method="POST" action="?status=gem">
  <table>
    <tr>
      <td>
        <input type="text" name="tekst">
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" onclick="document.getElementById('lag_2').style.visibility='visible'" value="GEM" name="submit">
      </td>
    </tr>
  </table>
</form>

Du poster til din form, når du submitter, dvs at siden reloader..

/JJ
Avatar billede jokkejensen Novice
20. oktober 2006 - 13:39 #2
det var et svar
Avatar billede jokkejensen Novice
20. oktober 2006 - 13:44 #3
hvis det er noget ajax lignende du har gang i griber du det lidt forkert af, der bruger man sjældent en action på formen, og submitter den !

/JJ
Avatar billede sw_red_6 Nybegynder
20. oktober 2006 - 13:45 #4
ikke helt godt nok. problemet er at i stedet for at blive placeret ovenpå formen bliver den placeret under formen. Dvs. jeg kan stadig se formen når lag_2 bliver vidst og det skal den helst ikke med den kode, eller er der noget jeg har misforstået mht positioneringen?
Der mangler så lige noget med z-index vidst nok...
Avatar billede jokkejensen Novice
20. oktober 2006 - 13:47 #5
du bliver nød til at forklare hvad der skal ske ? Hvis du bruger visible forsvinder det andet lag jo ikke, og kan ikke umiddebart ligge sig oven på uden at være nested i div'et ..

/JJ
Avatar billede sw_red_6 Nybegynder
20. oktober 2006 - 13:54 #6
hmm bedre forklaring, ja...
Jeg vil godt have at der kommer en throbber frem når der bliver trykket på knappen, som samtidig gør at man ikke kan komme til at trykke på knapperne i formen igen.
Det med at forhindre flere tryk kan jo så gøres ved at der bliver lavet et layer ovenpå knapperne og det kan jo ligeså godt være det samme layer som indeholder throbben.
mht. AJAX så skal det, på et tidspunkt, muligvis også bruges, men det vil kræve en gennemgående omkodning af hele systemmet så det er ikke helt aktuelt i øjeblikket
Avatar billede jokkejensen Novice
20. oktober 2006 - 13:55 #7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<style type="text/css">
#lag_1 {
  position: relative;
  top: 10px;
  left: 10px;
  width:150px;
  height:100px;
  visibility: visible;
  background-color: red;
  color: blue;
  overflow:hidden;
}

#lag_2 {
  position: relative;
  top: -77px;
  left: px;
  width:150px;
  height:100px;
  visibility: hidden;
  background-color: blue;
  color: blue;
}
</style>
</head>
<body>
<table>
  <tr>
    <td>
      <div id="lag_1">
<form method="POST" action="?status=gem">
  <table>
    <tr>
      <td>
        <input type="text" name="tekst">
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" onclick="document.getElementById('lag_2').style.visibility='visible'" value="GEM" name="submit">
      </td>
    </tr>
  </table>
</form>
<div id="lag_2">
        OPDATERER...
      </div>
      </div>
     
    </td>
  </tr>
</table>
</body>
</html>

Kun lige testet i IE

Men er det det du vil ?
Avatar billede jokkejensen Novice
20. oktober 2006 - 13:55 #8
men en position:absolute på det nestede lag2 inde i lag 1 virker meget mere fornuftigt, så absolut positionerer du det ud fra det's parent lag..
Avatar billede sw_red_6 Nybegynder
20. oktober 2006 - 14:02 #9
hmm ok jeg havde misforstået mht. positionering. Jeg havde læst det som at position:absolute var i forhold til hele siden, ikke parent.
Det var det jeg ville, så hvis du lægger et svar...
Avatar billede sw_red_6 Nybegynder
20. oktober 2006 - 14:03 #10
hov, det har du jo allerede, uups
Avatar billede jokkejensen Novice
20. oktober 2006 - 14:11 #11
takker for points..

Ja, et absolut positioneret lag positioneres ud fra det næste parent der har position: sat. Ellers ud fra body
Avatar billede sw_red_6 Nybegynder
20. oktober 2006 - 15:05 #12
et lille ekstra-spørgsmål...
hvad hvis jeg ikke har position på nogen af de andre tags? altså hvis hverken position: eller z-index: er sat nogen stedet hvordan kan jeg så lave det samme?
Skal jeg så til at regne mig frem til den absolute position i px?
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