[HTML] problemen positionering DIV's in DIV's

[smaij]

Beste medetweakers

Ik ben bezig met een DHTML selectie box waarin met ctr en shift selecties gemaakt kunnen worden. Nu ben ik al meer dan een dag bezig met het positioneren van div's span's etc zodat het in elke browser er hetzelfde uitziet. 1 van de div's heeft een overflow: auto om dus aan de rechterkant een scrollbar te krijgen.

code:

<div>
  <div>spans met titels</div>
  <div>plaatje</div>
  <div met overflow>
    <div>spans met inhoud</div>  
    <div>spans met inhoud</div>  
  </div>
  <div>plaatje</div>
</div>

In IE 6 werkt nu alles maar in netscape 7 en mozilla 1.7b komt de overflow div niet onder de div daarboven maar ernaast?
als ik er een <br /> tussen doe dan komt ie eronder maar TOCH staat dat niet netjes omdat de tekst een klein beetje over elkaar heen schuift.

Hieronder stukje code

code:

<div type='dirlist' id='dirlist' style="padding:7px; padding-left: 50px; padding-top: 80px; min-width: 500; width: 80%; height: 100%;">
    
<div style="min-width: 500; width: 100%; height: 10px;">[img]"../images/dir_big.gif"[/img]</div>    
        
 <div style="padding-left:2px; min-width: 500; width: 100%;">
    <span class="row12"><b>Naam</b></span>
    <span class="row22"><b>Datum</b></span>
    <span class="row32"><b>Beheerder</b></span>
    <span class="row42"><b>Versie</b></span>
 </div>
    
 <div style="min-width: 500; width: 100%; height: 9px;">[img]"../images/dir_big.gif"[/img]</div>
  <div class="scrolldiv">
    <div type='map' style="padding-left:2px; min-width: 500; width: 100%;" id="map1" onmousedown="clickedrow(event,1, 0);">
        <span class="row1">test1</span>
        <span class="row2">test2</span>
        <span class="row3">test3</span>
        <span class="row4">test4</span>
    </div>
 </div>

 <div style="min-width: 500; width: 100%; height: 8px;">[img]"../images/dir_big.gif"[/img]</div>
</div>

en de css

code:

.row1 { min-width:150px; width:50%; }
.row2 { min-width:100px; width:15%; }
.row3 { min-width:140px; width:20%; }
.row4 { min-width:50px; width:10%; }
.row12 {min-width:150px; width:49%; }
.row22 {min-width:100px; width:14%; }
.row32 {min-width:140px; width:19%; }
.row42 {min-width:50px; width:9%; }

span { margin-top: 2px; margin-bottom: 2px; overflow: hidden; display: block; float:left; background: none; }
div.scrolldiv {
    height: 300px;
    overflow: auto;
}

Ik heb van alles geprobeerd van relative tot positive maar ik krijg het niet werkend in mozilla en dat wil ik wel graag

Graag zou ik willen weten wat ik fout heb gedaan?

[Verwijderd]

Mmmm duistere problemen heb ik ook ,
Buitenste div werkt prima , maar de binneste divs worden niet gezien door opera
Tekst is dus niet gecentreerd meer links, en de kaders zijn nergens meerte vinden.

Dus volg dit topic dmv bookmark, misschien zit mijn oplossing er ook wel tussen

[smaij]

Het is niet alleen dit probleem toevallig met de overflow:auto. Als ik die div weghaal komen de divs ook over elkaar heen te staan. (Wellicht de div niet maar de tekst in de span misschien?)

Het is een grote frustratie geworden want ik hoopte op meer succes nu ik eindelijk een keer met divs en spans leer werken ipv met tabellen

[crisp]

vergis ik me, of probeer je nu met div's en span's gewoon een tabel na te bouwen? Als je tabulaire data hebt, gebruik dan ook gewoon een table - daar is niets mis mee

[smaij]

Okey okey zit wat in.. Maar om na al dit gezwoeg weer over te gaan op tabellen is nog frustrerender

Als ik uit de css bij .span het volgende haal komt de div wel goed te staan maar de tekst niet meer.. En daarvoor had ik nou juist dat stukje toegevoegd aan de span

code:

overflow: hidden; display: block; float:left;

Ik zal eens een testje ombouwen naar tabellen maar daarmee is een heel ander probleem in mijn javascript die nog niet werkt in mozilla nog niet opgelost denk ik
Ik bouw dan de tabel in de div met de scrollbar want die scrollbar wil ik graag houden


==

Ok. met een tabel werkt het wel "netjes". Toch nog enkele kleine vragen die mij altijd irriteren en die ik niet begrijp

met overflow:auto zou ik alleen aan de rechterkant een scrollbar moeten hebben. dit is in mozilla niet zo, hoe krijg ik de onderste weg?

d.m.v ondragstart="return false" onselectstart="return false" zou ik geen selectie moeten kunnen maken als ik met ctr ingedrukt 2 keer ergens anders klik. Dat doet ie echter toch nog wel in mozilla en dat wil ik niet
Dit geld niet alleen voor tekst maar ook voor vierkantjes om table cells heen en dat is dan toch wel irritant als je de ctr en shift voor je eigen doeleinden wil gebruiken

En toch zou ik wel willen weten waarom spans en divjes toch over elkaar heen gaan lopen als ik dit zo heb ingesteld dat ik zou mogen verwachten dat dit niet gebeurd? Wat deed ik fout?

[ Voor 45% gewijzigd door smaij op 10-09-2004 19:38 . Reden: tabelhtml gemaakt en dat werkt wel ok ]

[smaij]

kickje als dat mag..

[twiekert]

overflow-x & overflow-y ?

[Verwijderd]

twiekert schreef op 12 september 2004 @ 00:53:
overflow-x & overflow-y ?

IE only.

[Verwijderd]

IE only.

Weet je dat zeker?

[Verwijderd]

Verwijderd schreef op 12 september 2004 @ 10:45:
[...]
Weet je dat zeker?

tot voor kort wel ja live & learn.

[smaij]

Verwijderd schreef op 12 september 2004 @ 10:45:
[...]
Weet je dat zeker?

even artikeltje gelezen

Dat is pas vanaf mozilla 1.8 en ik test nu op 1.7b en helaas daar werkt het nog niet. Wel heb ik dus een oplossing bedacht die ik zo ga testen (even 1.8 installeren)

code:

overflow: auto;
overflow-x:hidden;

Dan krijgt ie dus standaard scrollbars en horizontaal overschrijf je hem weer als ie hem toch pakt.

Zou dat gaan werken

[edit: werkt] nu nog de tekst niet selecteerbaar maken
[edit: werkt niet in netscape 7.2]

[ Voor 12% gewijzigd door smaij op 12-09-2004 11:28 ]

[Verwijderd]

Netscape 7.2 is gebaseerd op Mozilla 1.7.

[twiekert]

smaij schreef op 12 september 2004 @ 11:18:
[...]
[edit: werkt] nu nog de tekst niet selecteerbaar maken
[edit: werkt niet in netscape 7.2]

code:

document.bladiebla.unselectable = 'on';

?

[smaij]

twiekert schreef op 12 september 2004 @ 14:15:
[...]

code:

document.bladiebla.unselectable = 'on';

?

Dat werkt helaas niet

[smaij]

kick ^^

[Verwijderd]

smaij schreef op 12 september 2004 @ 11:18:
[...]


[edit: werkt] nu nog de tekst niet selecteerbaar maken
[edit: werkt niet in netscape 7.2]

code:

<div onselectstart="return false;">

[smaij]

Helaas, werkt dit ook niet
In de body staat overigens al

code:

<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">

En dat werkt goed in IE6