Avatar billede supermand69 Nybegynder
13. august 2004 - 20:11 Der er 45 kommentarer og
1 løsning

div oven på div

Jeg har 2 div hvor den ene skal være oven på den anden nogenlunde som vist her:
http://clark.avansis.dk/temp/screen.gif

Den øverste div skal ca. have den placering som den har på illustrationen, da man skal kunne komme til at scrolle i den nedereste div :)

Hvordan kan det laves??
Avatar billede roenving Novice
13. august 2004 - 20:34 #1
<div style="position:relative;width:600px;height:400px;overflow:auto;z-index:1;">
  <div style="position:absolute;z-index:2;top:0px;left:350px;height:350px;width:200px;"></div>
</div>
Avatar billede supermand69 Nybegynder
13. august 2004 - 21:32 #2
kan du ikke lige kort beskrive hvad hver syntax gør? :)

tænker her specielt på z-index og position
Avatar billede basementjack Nybegynder
13. august 2004 - 21:39 #3
Det giver dig et problem, da man i FireFox ikke kan scrolle på andet end det øvereste layer.. Har selv lavet det nummer der..
Avatar billede supermand69 Nybegynder
13. august 2004 - 21:55 #4
hvor ligger koordiantet 0,0??

øverst i venstre hjørne eller hvad?
Avatar billede basementjack Nybegynder
13. august 2004 - 21:58 #5
Øverst i venstre højre, ja der regnes der fra når der bruges left:100px; og top:100px;..
Der er også mulighed for fx bottom:100px; og right:100px;... Altså Nederest i højre hjørne..
Avatar billede supermand69 Nybegynder
13. august 2004 - 22:07 #6
hvordan kan man så gøre sådan at den øverste div altid står placeret det samme sted.. altså når man scroller i den nederste div
Avatar billede supermand69 Nybegynder
13. august 2004 - 22:07 #7
og hvad gør position:relative og absolute??
Avatar billede basementjack Nybegynder
13. august 2004 - 23:47 #8
Absolut postionerer udfra hele siden.. relative flytter udfra den position "tingen" har uden css...

Men prøv med(alt i border kan fjernes, det er bare så man kan se boksene) :

<html>
<head>
</head>
<body>
<div style="position:absolute;width:600px;height:400px;overflow:auto;border:solid 1px black;">
<span style="position:relative;top:0px;right:0px;height:400px;width:200px;float:right;border:solid 1px black;">Her er den boks i siden..</span>
Og her er alle de indlæg man kan vælge..
</div>
</body>
</html>
Avatar billede supermand69 Nybegynder
14. august 2004 - 00:15 #9
jamen min boks skal ALTID have den samme placering lige meget hvor meget jeg scroller op og ned på den nederste div
Avatar billede basementjack Nybegynder
14. august 2004 - 00:21 #10
Hvis den alligevel skal være ved siden af... hvorfor så ikke lavede den ved siden af...

<html>
<head>
</head>
<body>
<div style="position:absolute;width:400px;height:400px;top:0px;left:0px;overflow:auto;border:solid 1px black;">Og her er alle de indlæg man kan vælge..</div>
<div style="position:absolute;left:405px;top:0px;height:400px;width:200px;border:solid 1px black;">Her er den boks i siden..</div>
</body>
</html>
Avatar billede thedeathart Nybegynder
14. august 2004 - 00:24 #11
position: absolute; // Gør at dit objekt bliver placeret på x og y aksen.
z-index: <tal> // Gør at du kan sætte objekter som kan overlappe hinanden.

Du kan sagtens scroll i firefox, bare ikke med scrolltasten på musen.
Avatar billede supermand69 Nybegynder
14. august 2004 - 00:50 #12
jamen hvordan kan jeg så gøre så mit det øverste lag ALTID bliver på den samme position i det nederste lag, lige meget hvor meget jeg scroller op og ned?
Avatar billede basementjack Nybegynder
14. august 2004 - 00:54 #13
Du benytter dig af roenvings forslag for oven eller du laver dem ved siden af hinanden, så scroll i venstre boks ikke påvirker højre boks..
Avatar billede supermand69 Nybegynder
14. august 2004 - 01:04 #14
jamen den øverste div skal jo ikke scrolle med op og ned når man scroller på den bagerste... den skal blive svævende i luften
Avatar billede supermand69 Nybegynder
14. august 2004 - 01:06 #15
den øverste div skal altid være til syne lige meget om du scroller på den bagerste...
Avatar billede basementjack Nybegynder
14. august 2004 - 01:09 #16
Jamen hvis de er ved siden af hianden kan man scrolle lige så tosset man vil, og div'et ved siden af bliver på sin plads..

Gem dette som en .htm fil :

<html>
<head>
</head>
<body>
<div style="position:absolute;width:400px;height:400px;top:0px;left:0px;overflow:auto;border:solid 1px black;">Og her er alle de indlæg man kan vælge..<br><br><br>blah<br><br><br>blah<br><br><br>blah<br><br><br>blah<br><br><br>blah<br><br><br>blah<br><br><br>blah<br><br><br>blah<br><br><br>blah<br><br><br>blah</div>
<div style="position:absolute;left:405px;top:0px;height:400px;width:200px;border:solid 1px black;">Her er den boks i siden..</div>
</body>
</html>


Så skulle du kunne se hvad jeg mener..
Avatar billede roenving Novice
14. august 2004 - 01:33 #17
Konstruktionen jeg laver i det første indlæg 'flytter' udgangspunktet, så diven indeni den anden positioneres i forhold til den omkringliggende, så det er direkte forkert, når basementjack skriver, at absolute altid er i forhold til vinduet !-)

position:absolute; regnes altid fra det nærmest omkransende element, som er positioneret, her har jeg gjort det med position:relative; hvilket vil give mulighed for at placere den ydre div i det almindelige dokument-flow, uden at skulle bekymre sig om skærm m.v. hvilken bekymring man så kan placere andre steder ...
Avatar billede basementjack Nybegynder
14. august 2004 - 10:34 #18
http://www.html.dk/tutorials/css/lektion14.asp

De siger da også i forhold til vinduet..
Avatar billede roenving Novice
14. august 2004 - 13:04 #19
Ja, men han behandler slet ikke problematikken med absolutte inde i positionerede elementer ...

-- men du kan sagtens ovebevise dig selv med dette:

<div style="position:relative;width:600px;height:400px;top:200px;left:200px;z-index:1;background:red;">
  <div style="position:absolute;z-index:2;top:-200px;left:350px;height:350px;width:200px;background:blue;"></div>
</div>
Avatar billede thedeathart Nybegynder
14. august 2004 - 15:54 #20
hvis du vil have en box som ALDRIG flytter sig, så skal du bruge noget javascript,
man kan også med CSS, men det virker ikke i InternetExplorere (typisk M$).
Avatar billede basementjack Nybegynder
14. august 2004 - 16:03 #21
roenving - Så kan man lære det.. :) Takker, det skal nok blive nyttigt...
Avatar billede supermand69 Nybegynder
15. august 2004 - 13:39 #22
lagene skal være oveni hinanden, da det øverste lag skal være muligt at kunne skjule

hvordan kunne man så gøre det med noget javascript?

den øverste div skal altid have den samme placering, så den hele tiden vil være synlig når man scroller i den nederste div
Avatar billede roenving Novice
15. august 2004 - 21:12 #23
Sådan ?-)

<script language="javascript" type="text/javascript">
function getPos(elm) {//jumper
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}
function posDiv(){
  var scrDiv = document.getElementById('scrollDiv');
  var flDiv = document.getElementById('flyingDiv');
  var sPos = getPos(scrDiv);
  var fPos = getPos(flDiv);
  flDiv.style.top=sPos.y+fPos.y+'px';
  flDiv.style.left=sPos.x+fPos.x+'px';
}
</script>
<body onload="posDiv();">
  <br><br><br><br><br>
  <br><br><br><br><br>
<div id="flyingDiv" style="position:absolute;z-index:2;top:0px;left:350px;height:350px;width:200px;border:1px solid red;">
  <button onclick="document.getElementById('flyingDiv').style.display='none';">Gem flyvende div</button>
</div>
<div id="scrollDiv" style="position:relative;width:600px;height:400px;overflow:auto;z-index:1;border:1px solid blue;">
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
</div>
<button onclick="document.getElementById('flyingDiv').style.display='block';">Vis flyvende div</button>
</body>
Avatar billede supermand69 Nybegynder
16. august 2004 - 15:31 #24
roenving --> præcis sådan der mand ;)

lav et svar...
Avatar billede roenving Novice
16. august 2004 - 15:32 #25
Velbekomme '-)
Avatar billede roenving Novice
16. august 2004 - 15:46 #26
-- og tak for point ;~}
Avatar billede supermand69 Nybegynder
16. august 2004 - 15:49 #27
forresten...

er det så kompatibelt med andre browsere end lige IE?? :)
Avatar billede supermand69 Nybegynder
16. august 2004 - 15:55 #28
og så lige et tillægs spm :)

hvorfor skriver man kun nogle gange var når man vil sætte en variabel? eller det er måske slet ikke nødvendigt at skive var foran??
Avatar billede roenving Novice
16. august 2004 - 15:57 #29
Når du bruger var inde i en funktion sikrer du dig, at variablen er lokal, og altså ikke kan indfluere på eller påvirkes af andre scripts på siden !-)

-- og det burde virke på alle moderne browsere, v4-browserne er ikke dækket af den type kode !-)
Avatar billede supermand69 Nybegynder
16. august 2004 - 16:47 #30
øv... jeg kan ikke helt få det til at virke når jeg smider det ind i min egen kode?!

http://www.elektrobeat.dk/test/debate.php

<div id="div_debate_contribution" class="frame" style="position:absolute; z-index:2; top:0px; left:380px; height:400px; width:340px; display:none; background:#f9f9f9; border:1px solid #999999;"></div>
<div id="div_debate_threads" class="frame" style="position:relative; z-index:1; width:100%; height:100%;">
Avatar billede roenving Novice
16. august 2004 - 17:00 #31
For mig ser det umiddelbart ud til, at du ikke får afsluttet div_debate_threads på den rigtige måde, det ser nemlig ud til, at den afsluttes inde i en anden tabel, end den er startet i ?-)
Avatar billede supermand69 Nybegynder
16. august 2004 - 17:19 #32
det gør den ikke... hvis jeg sletter alt i min div ser koden således ud:

<table width="100%">
  <tr>
    <td class="frame" height="500">
    <div id="div_debate_contribution" class="frame" style="position:absolute; z-index:2; top:0px; left:380px; height:400px; width:340px; display:none; background:#f9f9f9; border:1px solid #999999;"></div>
    <div id="div_debate_threads" class="frame" style="position:relative; z-index:1; width:100%; height:100%;">

...

    </div>
    </td>
  </tr>
</table>
Avatar billede supermand69 Nybegynder
16. august 2004 - 20:19 #33
jeg kan nu med 100% sikkerhed udelukke at min div slutter i en anden table end den er startet, da jeg har slettet alt i den og lavet et link til min iframe :)
Avatar billede supermand69 Nybegynder
16. august 2004 - 20:39 #34
jeg har fundet fejlen...

man kan åbenbart ikke skrive display:none i style?!

hvad kan man lave som alternativ?? nu bliver den jo vist fra starten :(
Avatar billede roenving Novice
17. august 2004 - 02:43 #35
Jeg har masser af kode-eksempler, som er baseret på, at elementer initieres med display:none; ...

-- så i sig selv er det i hvert fald ikke fejlen, men jeg kan heller ikke gennemskue hvad det ellers skulle være ...

-- hvis du prøver at validere siden hos f.eks. w3c, vil du på en simpel måde få afklaret om der skulle være fejl i tag-opbygningen !-)

Bare husk, at du så skal have en doctype eller eksplicit fortælle validatoren at du bruger html 4.01 transitional ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede supermand69 Nybegynder
17. august 2004 - 15:32 #36
når jeg smider den doctype ind fucker den siden op...
Avatar billede roenving Novice
17. august 2004 - 15:38 #37
Så har du fejl i koden ...

-- jeg har ikke analyseret den, men du kan manuelt validere, så behøver du ikke doctype ...
Avatar billede supermand69 Nybegynder
17. august 2004 - 15:40 #38
jeg kan simpelthen ikke finde fejlen...

har slettet alle tråde, så der er bedre overblik over koden... gider du lige se på det? :)
Avatar billede roenving Novice
17. august 2004 - 15:47 #39
Hvordan fucker den op ?-)

Hos mig ser det umiddelbart ens ud ...
Avatar billede supermand69 Nybegynder
17. august 2004 - 15:55 #40
den grå farve ude til højre kommer også nede i bunden...
Avatar billede roenving Novice
17. august 2004 - 16:02 #41
Ja, for du bruger heigth på en table, og den findes simpelthen ikke i nogen standarder, men du kan i stedet bruge: style="height:100%" ...
Avatar billede supermand69 Nybegynder
17. august 2004 - 16:12 #42
der sker det samme?? den grå farve kommer stadig nede i bunden :-/
Avatar billede roenving Novice
17. august 2004 - 16:26 #43
Så skal du også sætte html og body-elementerne til at have fuld højde:

<style type="text/css">
html,body{height:100%;}
</style>
Avatar billede supermand69 Nybegynder
17. august 2004 - 16:31 #44
jeg bruger slet ikke html tags
Avatar billede supermand69 Nybegynder
17. august 2004 - 16:32 #45
men kunne du ellers finde fejlen til hvorfor man ikke kunne sætte display:none på den div?
Avatar billede supermand69 Nybegynder
18. august 2004 - 12:28 #46
kunne du ikke finde fejlen? :(
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