DIV gecentreerd, 1 layer blijft verspringen [?]

[anoniem]

Ik kom er zelf niet meer uit! Ben ik eindelijk zover dat ik met Layers en CSS een opzet kan maken voor een site die altijd cecentreerd in het venster verschijnt, blijkt er één eigenwijs layertje steeds zijn eigen gang te gaan. :evil: Hier is wat er gebeurd; Aan een layer zit een Javascript gekoppeld dat afbeeldingen horizontaal laat scrollen. Alles ging goed totdat op een zeker moment -zomaar ineens- de layer met scrolleffect niet meer op zijn plek blijft als de scrollfunctie geactiveerd wordt. Ik zal ongetwijfelt ergens iets fout gedaan hebben, ik kan het alleen niet meer vinden en begin zolangzamerhand wat moedeloos te worden! Kijk zelf maar eens; [url]http://www.stijlenoverzicht.com/opmaak.htm[/url] (klik een keer op vernieuwen om het verschil te zien) En hier de CSS: [url]http://www.stijlenoverzicht.com/CSS/opmaak.css[/url] En hier het scriptje: (bron weergeven om het te zien) [url]http://www.stijlenoverzicht.com/scrollbalk%20Js.htm[/url] De kleuren zijn alleen even voor de duidelijkheid, de code zal nog wat rammelen en het geheel is nog erg leeg, bedenk dat dit een test is... (of beter; een wanhopige schreeuw om hulp)

[anoniem]

deze gaat één forumpje naar beneden.. t.

[anoniem]

Ik was ernstig aan het twijfelen of het desing of script moest worden. Uiteindelijk had je weer gelijk door het te verplaatsen; het blijkt een scriptfoutje te zijn :-? Maar ik heb het inmiddels zelf al opgelost, soms zie je even door de bomen het bos niet meer, een flinke sloot koffie en het probleem eens van een ander kant benaderen heeft de uitkomst gebracht :)

[anoniem]

Helaas!! terug in het bos; Alle div's hebben dezelfde positie en toch wil div"content" samen met "newbut" maar niet op de juiste plek terecht komen. -?- Dus: CSS; [code:1:65272f0f75]#content { position:absolute; top: 90; left:10; width:900; height:100; clip:rect(0 320 0 0); text-align: left; background-color: #000000; visibility: visible; z-index: auto; } #newbut { position:absolute; top:195; left:10; padding:2; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bolder; color: #6666FF; text-align: center; width: 320px; height: 26px; background-color: #333333; visibility: visible; } A { text-decoration: none; text-weight: bolder; color: #6699FF; } A:hover { color: orange; } .linkbalktekst { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FF6600; text-decoration: none; text-align: center; margin: 5px; padding: 5px; position: relative; left: auto; top: auto; right: auto; bottom: auto; visibility: visible; } #hoofdlayer { color: #000000; position: relative; height: 550px; width: 700px; left: auto; top: 5px; right: auto; bottom: auto; background-color: #663399; visibility: visible; border: thin solid #FF6600; } #afbeelding { color: #000000; position: absolute; height: 310px; width: 345px; left: 335; top: 90; right: auto; bottom: auto; background-color: #0066FF; } #tekstafbeelding { color: #000000; position: absolute; height: 115px; width: 345px; left: 335; top: 415; right: auto; bottom: auto; background-color: #6600FF; } #tekstalgemeen { color: #000000; position: absolute; height: 305px; width: 320px; left: 10; top: 225; right: auto; bottom: auto; background-color: #0033CC; } #navigatie { color: #000000; position: absolute; height: 70px; width: 670px; left: 10px; top: 5px; right: auto; bottom: auto; background-color: #CCFF00; } [/code:1:65272f0f75] Script: [code:1:65272f0f75]<script language="JavaScript"> var dy=0; var pos=20; var dx=0; var posx=10; var klokje=null;left1=0; right1=320; top1=0; bottom1=100; function getStyle(layer) {if (document.getElementById) {return document.getElementById(layer).style} else if(document.all) {return document.all[layer].style} else {return document[layer]}} function clip(layer,top,right,bottom,left) {if(document.getElementById || document.all) {getStyle(layer).clip='rect('+top1+' '+right1+' '+bottom1+' '+left1+')';} else {document[layer].clip.top = top1; document[layer].clip.left = left1; document[layer].clip.bottom = bottom1; document[layer].clip.right = right1;}} function scroll() {if (dx != 0) {if (posx+dx <=10) {posx += dx; getStyle('content').left=posx; left1=10-posx; right1 =320-posx;}} clip('content',top1,right1,bottom1,left1); klokje = setTimeout('scroll()',40);} function stop() {clearTimeout(klokje);} </script> [/code:1:65272f0f75] Resultaat: [url]http://www.stijlenoverzicht.com/opmaak.htm[/url] En om voor mij onbegrijpelijke reden komen de afbeeldingen nu pas tevoorschijn als je op een pijl gaat staan met de muis, voorheen nog geen last van gehad-?!-

[anoniem]

Ik zie dat je cursussen van 'bitstorm' hebt gevolgd :-) Een dingetje daarover: document.all en document.layers kun je schrappen ;-) document.getElement etc. is de juiste manier en wordt door alle browsers met een groot marktaandeel ondersteund.

[anoniem]

[quote:891de78661="termin8or"]Ik zie dat je cursussen van 'bitstorm' hebt gevolgd :-) Een dingetje daarover: document.all en document.layers kun je schrappen ;-) document.getElement etc. is de juiste manier en wordt door alle browsers met een groot marktaandeel ondersteund.[/quote:891de78661] Juist, en nog wat andere "best practices" :) , voorlopig werpt het alleen nog geen vruchten af :-? Los ik met dat schrappen mijn positioneringsprobleem ook op?

[anoniem]

O.K> Dus die document.all is voor IE4 en Netscape4, document.layer voor Netscape4(?) overbodige luxe inderdaad. Maar dat positioneren lijkt me ook een IEbug. In de layoutvieuw van DW staat alles gewoon op de juiste plek, in IE verschuiven bovengenoemde layers. Ik kan nog niet testen in andere browsers. Fix gaan zoeken??

[anoniem]

Doe eerste is een paar basis dingen (staan ook in BP :-)), zoals het nemen van een goede doctype. Ik raad HTML4.01 Strict of XHTML1.0 Strict aan (Transitional kan ook, maar met een strictere leer je het beter is mijn ervaring). Valideer. Valideer je CSS. Sloop DW JavaScript eruit. Gebruik eenheden voor lengtes in je CSS (In CSS3 zou het valid zijn, maar ik denk niet dat je de width bijvoorbeeld 900 keer de standaard waarde wilt hebben...). Probeer iets minder met 'position:absolute;' en 'position' in het algemeen. 'float' werkt beter en is wat flexibeler. Houdt daarbij ook rekening mee dat elementen verschijnenen in de volgorde dat je ze plaatst. Ik heb nu weinig tijd, maar als je morgen alle bovenstaande af hebt :P kan ik nog wel wat verder kijken en er zijn uiteraard meer mensen met verstand van CSS positionering.

[anoniem]

Bedankt zover! Ik ben inmiddels tot hier gekomen; [url]http://www.stijlenoverzicht.com/barok.htm[/url] Het is nog niet optimaal: de scrollbalk verschijnt pas na mouseover en ik weet niet hoe ik dat eruit krijg. De positiie van "content" en "newbut" zijn nog niet in overeenstemming met de ingegeven waaarden. En de scriptjes zijn nog niet aangepast, code evenmin :oops: Ik wil eerst alles werkend krijgen en dan eens heel rustig gaan zitten om de code's te optimaliseren. Op die mannier kan ik aantekeningen bijhouden zodat ik leer van wat ik doe. (nu is het wat rond klikken in hoop op resultaat) Tips en hulp zijn natuurlijk nogsteeds zeer welkom!

[anoniem]

Code optimaliseren is noodzakelijk om dingen werkend te krijgen, waarom denk je anders dat ik daarover advies geef?

[anoniem]

Nou ik heb anders ook weleens dingen werkend gekregen met hele slordige code. :oops: Maargoed; het schonen van de code, dus alle overbodige rommel er uit halen, een script van 10 regels optimaliseren tot 3 regels met hetzelfde resultaat, van die dingen. Daar is in mijn geval erg veel tijd en geduld voor nodig en ik kan daar juist erg veel van leren. Ik werk met Dreamweaver in gedeelde code/layoutvieuw Ik gebruik daarbij meer en meer alleen het bovenste scherm (code) voor het maken en het onderste (layout) scherm om de resultaten meteen te kunnen zien. Dit is mijn eerste poging om alles met layers en CSS te maken, voorheen deed ik alles met tabellen. (Maar dat "mag" niet meer :wink: ) Vandaar.