js overvloeier 3 niet gecentreerd :-(

Status
Niet open voor verdere reacties.
S

solange

Gebruiker
Lid geworden
23 feb 2008
Berichten
68
Hallo,
Ik ben als amateur bezig met het maken van een website voor een camping. Ik had tot nu toe enkel gewerkt met Frontpage maar heb nu een probleempje met het gebruik van javascript overvloeier 3. De afbeelding op zich werkt perfekt (4 foto's die mooi in mekaar faden), maar de afbeelding staat links op het scherm en mijn tabel die lager moet staan (met de tekst) komt nu achterin te liggen. Enig idee wat er fout is ?
voorbeeldpagina zonder javascript maar met de juiste lay-out :
www.oldpostcards.lu/camping/nl_home.htm

foutieve pagina met javascript maar foute lay-out : (hier zou het moeten komen zoals in voorbeeldpagina 1.
www.oldpostcards.lu/camping/nl_hometest.htm

Alvast heeeeeeel veel bedankt als er iemand mij wil helpen !
Groetjes uit Luxemburg,
Solange
 
Laatst bewerkt:
Hier kom je al wat verder mee:
HTML: 
<div id="beeldcontainer" style="width: 1008px; height: 275px;">
zo wordt er voldoende ruimte gereserveerd voor de beeldcontainer-div en gaat die niet meer over de rest van de pagina heen. :)
 
Alvast heel hartelijk bedankt ! Ik zit nu op mijn werk en kan dus niets uitproberen. Zal vanavond laten weten of het gelukt is !

Groetjes,
Solange
 
Hallo Egel,

Heb de code die je hebt doorgegeven toegevoegd aan het script en dit is het resultaat :
http://www.oldpostcards.lu/camping/nl_hometest_b.htm

Het ziet er natuurlijk al stukken beter uit. De lagere tekst zit er niet meer achter, maar....ik krijg die afbeelding niet in het midden. Niet met align center, noch met div class = centerdiv. Op een klein scherm is dit praktisch niet zichtbaar maar op grotere schermen wel.

Zou je aub nog eens een kijkje willen nemen ? Als amateur apprecieer ik je hulp enorm !!

Groetjes uit Luxemburg,
Solange
 
Laatst bewerkt:
Misschien lukt het zo, :) ik heb niet een breed genoeg scherm om het mee te controleren: ;)
HTML: 
<div id="beeldcontainer" style="width: 1008px; height: 275px; position: relative;" align="center">
 <img style="position: absolute; left: 0px; top: 0px; ........>
 <img style="position: absolute; left: 0px; top: 0px; ........>
 <img style="position: absolute; left: 0px; top: 0px; ........>
 <img style="position: absolute; left: 0px; top: 0px; ........>
</div>
De position: relative; in de div zorgt er voor dat de position van de images zich daaraan oriënteren (het eerste parent-element dat geen position: static; heeft (static is de standaard voor alle elementen waarbij niets anders is opgegeven)).

left: 0px; top: 0px; plaatst ze linksboven in die div die met align="center" in het midden is uitgelijnd. :)
 
Hallo Egel,

Zal ik direkt eens uitproberen en ik laat het dan zeker weten.

Ik had ook nog van iemand anders hulp gekregen (met een CSS scriptje). Dit werkte perfekt in Mozilla, Safari, google chrome....en ik was al bijna gelukkig....maar werkt niet in IE....en helaas zijn de meeste surfers nog altijd IE.

Ik probeer dus onmiddellijk jouw tip en kom straks terug !

Bedankt en vriendelijke groetjes uit Luxemburg,
Solange
 
Hallo Egel,

Hier ben ik weer met slecht nieuws :-(
Hier is de code (tot aan mijn tabel)
<html>

<head>
<meta http-equiv="Content-Language" content="nl-be">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>nl_tarieven</title>
<base target="_self">
<script type="text/javascript">
<!-- hier vul je de namen van de afbeeldingen in -->
var images = new Array(
'images/logo def001.jpg',
'images/logo def002.jpg',
'images/logo def003.jpg',
'images/logo def004.jpg' <!-- geen komma na de laatste afbeelding -->
);
var teller = 1;
var pauze = 4000;

function opacWaarde(el, opacity) {
opacity /= 100;
el.style.opacity = opacity;
el.style.MozOpacity = opacity;
el.style.filter = "alpha(opacity=" + (opacity*100) + ")";}

function fadeBeeld(el, currentOpacity) {
currentOpacity += 5;
if (currentOpacity > 100) {
opacWaarde(el, 100);
var prevEl = el.previousSibling ? el.previousSibling : el.parentNode.lastChild;
prevEl.style.visibility = 'hidden';
el.style.zIndex = 1;
window.setTimeout(startFaden, pauze);}
else {
opacWaarde(el, currentOpacity);
window.setTimeout(function() { fadeBeeld(el, currentOpacity); }, 50);}}

function startFaden() {
var el = document.getElementById('beeldcontainer').childNodes[teller];
el.style.visibility = 'visible';
el.style.zIndex = 2;
opacWaarde(el, 0);
fadeBeeld(el,0);
teller = (teller < images.length-1) ? teller + 1 : 0;}

function startScript() {
var el = document.getElementById('beeldcontainer');
while (el.firstChild) { el.removeChild(el.firstChild); }
for(var i=0; i<images.length; i++) {
var t = document.createElement('IMG');
t.setAttribute('src',images);
t.style.position = 'absolute';
t.style.visibility = 'hidden';
el.appendChild(t);}
el.firstChild.style.visibility = 'visible';
window.setTimeout(startFaden, pauze);}

window.onload=startScript; <!-- het script wordt hier gestart met onload, dit kun je wijzigen -->
</script>

</head>

<body bgcolor="#666633">

<div id="beeldcontainer" style="width: 1008px; height: 275px; position: relative;" align="center">
<img style="position: absolute; left: 0px; top: 0px; ........>
<img style="position: absolute; left: 0px; top: 0px; ........>
<img style="position: absolute; left: 0px; top: 0px; ........>
<img style="position: absolute; left: 0px; top: 0px; ........>
</div> <img src="images/logo def001.jpg"> <!-- naam van de eerste foto -->
<p align="center">
&nbsp;</div></div>

<div align="center">
<table border="0" width="1024" cellspacing="10" cellpadding="10" height="556">
<!-- MSTableType="nolayout" -->
<tr>
<td bgcolor="#999966" valign="top" width="0">

Hier de link naar het resultaat : (www.oldpostcards.lu/camping/nl_hometest_b2.htm)

En dit is een printscreen van het resultaat :
nl_hometest_b2.htm


Ik voel me echt een sukkel hoor, want ik ben echt een leek op gebied van webdesign. Ik zou dan ook stilaan Frontpage willen laten voor wat het is en gaan studeren. Kan jij me een goed boek aanbevelen waar ik moet beginnen ? Beginnen met html ? En dan Javascript ?

Alvast bedankt en groetje,
Solange
 
Laatst bewerkt:
Hallo Egel,

Ik heb iets gevonden wat werkt (scriptocean). Ik gebruik dus voorlopig deze en ga nu proberen me iets te verdiepen in de theorie. Frontpage is leuk, maar ik wil ook HTML, JAVA etc...gaan leren....
Als je een goed boek weet (echt voor beginners met duidelijke taal), dan hoor ik het graag !

Nog's bedankt voor al je hulp !
groetjes,
Solange
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan