content en footer sluiten niet aan

[jjjvandaalen]

Mijn content en footer sluiten alleen aan in Firefox, maar niet in de oudere:evil:browsers. Wat doe ik daar aan? Met name niet in IE.

JohanJoost

 

[gast0167]

Werk je met CSS? even opnieuw langslopen. vaak kan er iets dubbel in staan.

 

[jjjvandaalen]

css

Ik werk inderdaad in css, maar in de nieuwste browsers staat alles wel goed. Dat zijn Firefox, Opera, Safari, Chrome, vanaf IE7. Daar moet het niet fout gaan... Is er niet een instelling die in de oudere browsers toegevoegd moet worden??

Werk je met CSS? even opnieuw langslopen. vaak kan er iets dubbel in staan.

 

[csshunter]

Hoi JohanJoost,

Is er niet een instelling die in de oudere browsers toegevoegd moet worden?

Dat zou best kunnen, maar van afstand valt 't wat moeilijk te gokken welke css moet worden aangepast.
Heb je even een linkje? Kunnen we eens kijken!

Met vriendelijke groet,
CSShunter

 

[jjjvandaalen]

Link

Hallo CSSHUNTER,

Hierbij de link...

Grtz,
[
JohanJoost

http://designontwerp.com

Hoi JohanJoost,

Dat zou best kunnen, maar van afstand valt 't wat moeilijk te gokken welke css moet worden aangepast.
Heb je even een linkje? Kunnen we eens kijken!

Met vriendelijke groet,
CSShunter

 

[csshunter]

Hoi JohanJoost,
Tja, dat vermoedde ik al. Het gaat falikant mis (ook in FF) door alle gefixeerde height's. Vooral ook de height van de #afbeelding1 (waarschijnlijk om de #content niet onder de linkerkolom te laten doorlopen) is een zware boosdoener.
Het beste kan je alle vaste heights schrappen, en dan de linker- en rechterkolom laten floaten, en de #content niet. Die komt er dan altijd mooi tussen te staan, als je deze een linker- en een rechter-marge geeft ter waarde van iets meer dan de breedte van de kolommen.
Als je dan de #footer een {clear:both;} meegeeft, komt deze er altijd onder te staan, welke van de kolommen ook de hoogste is.

Verder zag ik dat de uitrollers van het menu onder de flash-mededeling komen; dat moet wel, want een flash zit per definitie altijd in de bovenste laag, en daar kan je niets aan doen. Ik zou daarom de flash boven het menu zetten (met een background in de onderste kleur van de header, en aangepaste letterkleur), dan kan deze geen kwaad.

• En dan is hier een test-modelletje: www.developerscorner.nl/csshunter/tests/medin-model.htm
• Menu en flash zijn hier voor het gemak plaatjes.
• De grijs-verloop background heb ik in de breedte laten doorlopen; persoonlijk vind ik dat een rustiger beeld geven bij hoge resoluties.
• Het logo heb ik klikbaar gemaakt: naar de homepage.

Testen maar in de verschillende browsers en bij verschillende resoluties!
Met vriendelijke groet,
CSShunter

 

[csshunter]

Vervolg!
Ik zag nog dat de container.jpg en de content.jpg pittig groot zijn (92kB en 67kB).
Deze hoeven echter niet zo breed te zijn (ze herhalen zich toch in de breedte, en dat doen de browsers sneller dan het downloaden van bredere).
Ook een png ervan maken helpt (zie dit artikeltje).
Dan krijgen we:

• www.developerscorner.nl/csshunter/tests/images/medin-container.png van ... 3kB
• www.developerscorner.nl/csshunter/tests/images/medin-content.png van ... 3kB

Dat scheelt zo'n 150kB die niet gedownload hoeven te worden > een prettig snellere bladzij.

Met vriendelijke groet,
CSShunter

 

[jjjvandaalen]

Wederom bedankt

Nogmaals bedankt voor je adviezen...

Alle wijzigingen zal ik aanbrengen.

In mijn FF loopt het menu wel over de Flash heen, overigens. Ik heb versie 3.6.8 Welke versie van FF heb jij dan? Ook in mijn IE7 en 8, de nieuwste Opera en Safari sluiten de content en de footer wel mooi aan... Dat komt zeker doordat de nieuwste versies 'beter' zijn geprogrammeerd.

Grtz,

JohanJoost

Hoi JohanJoost,
Tja, dat vermoedde ik al. Het gaat falikant mis (ook in FF) door alle gefixeerde height's. Vooral ook de height van de #afbeelding1 (waarschijnlijk om de #content niet onder de linkerkolom te laten doorlopen) is een zware boosdoener.
Het beste kan je alle vaste heights schrappen, en dan de linker- en rechterkolom laten floaten, en de #content niet. Die komt er dan altijd mooi tussen te staan, als je deze een linker- en een rechter-marge geeft ter waarde van iets meer dan de breedte van de kolommen.
Als je dan de #footer een {clear:both;} meegeeft, komt deze er altijd onder te staan, welke van de kolommen ook de hoogste is.

Verder zag ik dat de uitrollers van het menu onder de flash-mededeling komen; dat moet wel, want een flash zit per definitie altijd in de bovenste laag, en daar kan je niets aan doen. Ik zou daarom de flash boven het menu zetten (met een background in de onderste kleur van de header, en aangepaste letterkleur), dan kan deze geen kwaad.

• En dan is hier een test-modelletje: www.developerscorner.nl/csshunter/tests/medin-model.htm
• Menu en flash zijn hier voor het gemak plaatjes.
• De grijs-verloop background heb ik in de breedte laten doorlopen; persoonlijk vind ik dat een rustiger beeld geven bij hoge resoluties.
• Het logo heb ik klikbaar gemaakt: naar de homepage.

Testen maar in de verschillende browsers en bij verschillende resoluties!
Met vriendelijke groet,
CSShunter

 

[csshunter]

In mijn FF loopt het menu wel over de Flash heen, overigens.

Hé, bij mij niet, ik heb FF3.5.10:

En bij IE7 doet ie dit:

- In allebei de gevallen vind ik het niet mooi.

- Over de oorzaak van wel/niet aansluiting van #content en #footer heb ik me niet druk gemaakt: ernstiger vond ik de hoogte-perikelen van het model. En als het goed is, sluiten #content en #footer nu in alle browsers keurig op elkaar aan.
Nog even testen ... ja hoor, ook IE6 doet wat opgedragen is.

O ja, en nog een suggestie: ik zou het tempo van de flash drastisch verlagen. Net als je weer iets van de pagina aan het lezen bent springt ie weer flitsend tevoorschijn. Dat is niet erg meditatief, en maakt naar mijn idee het beeld veel te onrustig.

Succes!
CSShunter

 

[jjjvandaalen]

Wijzigingen

De wijzigingen zijn (nog) niet aangebracht in de website. Dus er zal nog niks anders lopen dan vanmorgen lijkt me. Je kunt zelf geen wijzigingen in de website aanbrengen... Dus wat bedoel je dan met : En als het goed is, sluiten #content en #footer nu in alle browsers keurig op elkaar aan. Nog even testen ... ja hoor, ook IE6 doet wat opgedragen is. ?

Hé, bij mij niet, ik heb FF3.5.10:

En bij IE7 doet ie dit:

- In allebei de gevallen vind ik het niet mooi.

- Over de oorzaak van wel/niet aansluiting van #content en #footer heb ik me niet druk gemaakt: ernstiger vond ik de hoogte-perikelen van het model. En als het goed is, sluiten #content en #footer nu in alle browsers keurig op elkaar aan.
Nog even testen ... ja hoor, ook IE6 doet wat opgedragen is.

O ja, en nog een suggestie: ik zou het tempo van de flash drastisch verlagen. Net als je weer iets van de pagina aan het lezen bent springt ie weer flitsend tevoorschijn. Dat is niet erg meditatief, en maakt naar mijn idee het beeld veel te onrustig.

Succes!
CSShunter

 

[csshunter]

... wat bedoel je dan met: "En als het goed is, sluiten #content en #footer nu in alle browsers keurig op elkaar aan. Nog even testen ... ja hoor, ook IE6 doet wat opgedragen is." ?

Aha: niet bij jou op de site, maar mijn testpagina http://developerscorner.nl/csshunter/tests/medin-model.htm

M'n in orde bevonden testrijtje bij het model is nu: IE6, IE7, FF3.5.10, FF3.6.8, Opera9.21, Opera10.10, Safari5.01. - IE8 heb ik nog niet bekeken, daar kan ik even niet bij.

Met vr.groet,
CSShunter

 

[jjjvandaalen]

Reactie

Nee, dat had ik begrepen hoor: niet op mijn site. Dat kan ook niet, maar inmiddels ben ik vanavond verder gegaan met het proberen van je tips en het is al beter geworden. Overdag kon dat niet ivm mijn werk. De float is inderdaad nu beter in IE6. De rest die je noemt was dat al. Meestal zijn het immers ook de oudere browsers die de nieuwe technologie niet probleemloos aan kunnen. Vooral de oudere IE's geven problemen.

In de afbeelding1, -2 en -3 div's heb ik nu de heights op auto ingesteld. Zelfde geldt voor de banner, de catergorieen, beide containers. De content staat op een height van 2100 en geen float. De footer is height auto, een float left en op clear:both. De header op 150. De right- en leftcolumns staan qua height op auto en een float right, resp. float left. De menu heeft nu een height van 25 en de header een height van 150.

De containers heb ik breder proberen te zetten door de achtergrondafbeeldingen breder te maken en bovendien de containerdivs zelf (1 en 2) op 1000 danwel 1200 ipv 900 te zetten. Echter, de hele website staat dan niet meer in het midden, maar schuift naar rechts op. Dat is ook weer niet mooi. Dus die staan weer op 900.

Aha: niet bij jou op de site, maar mijn testpagina http://developerscorner.nl/csshunter/tests/medin-model.htm

M'n in orde bevonden testrijtje bij het model is nu: IE6, IE7, FF3.5.10, FF3.6.8, Opera9.21, Opera10.10, Safari5.01. - IE8 heb ik nog niet bekeken, daar kan ik even niet bij.

Met vr.groet,
CSShunter

 

[csshunter]

In de afbeelding1, -2 en -3 div's heb ik nu de heights op auto ingesteld. Zelfde geldt voor de banner, de catergorieen, beide containers. De content staat op een height van 2100 en geen float. De footer is height auto, een float left en op clear:both. De header op 150. De right- en leftcolumns staan qua height op auto en een float right, resp. float left. De menu heeft nu een height van 25 en de header een height van 150.

Mooi!
Nu kan je ook nog alle {height: auto;}'s schrappen, want browsers zijn er op gemaakt dat ze auto de hoogte op auto zetten.
En de footer hoeft geen float:left te krijgen, want die komt toch over de volle breedte; met een clear:both is de footer tevreden (en hij/zij komt vanzelf al onder de content te staan, omdat hij/zij als <div> een block-element is).
O ja, als je de body de "onderste background" meegeeft, kan je de tweede container missen.

Nog een vraagje: ben je van plan die #content-hoogte vast op 2100px te zetten, of is dit even tijdelijk? *)

Met vriendelijke groet,
CSShunter
_________
*) Zal al bekend zijn:

• Bij een hoogte van 2100px moet iemand die de site bezoekt op 1024x768px zelfs bij een lange pagina (zoals http://designontwerp.com/workshop.html; ca 1000px content-hoogte) toch nog bijna 2 volledige schermhoogtes met "niets te zien" naar beneden scrollen voordat de #footer in beeld komt.
• Bij niet opgeven van de hoogte van de content regelt dit gewoon zichzelf, al naar gelang de hoeveelheid content die er op een pagina ingezet wordt.

 

[jjjvandaalen]

Content

Liever had ik de content op height auto of heiight niets, maar stel ik daar die height niet op 2100 in dan valt de background van de content helemaal weg. Die heeft een geel verloopje... Als je daar ook nog een tip voor hebt, houd ik me wederom aanbevolen. Ook valt het mij op dat bij de langere teksten de tekst van de content om de linker afbeelding heenloopt en niet recht naar beneden... Niet zo fraai eigenlijk. Tevens heb ik in de header de afbeelding met het logo in de background opgenomen. Zodoende kan ik daar niet het logo clickable maken. Ik heb op het internet gezocht naar een methode omdat te krijgen en die heb ik gevonden. Gewoon een hrefje aan het logo verbinden.Zelfde geldt eigenlijk voor de banner. Als ik die op de afbeelding probeer te plaatsen is de hele header weg, ook niet de bedoeling. Ook wanneer ik de banner boven de header in de code plaats lukt dat niet...

Mooi!
Nu kan je ook nog alle {height: auto;}'s schrappen, want browsers zijn er op gemaakt dat ze auto de hoogte op auto zetten.
En de footer hoeft geen float:left te krijgen, want die komt toch over de volle breedte; met een clear:both is de footer tevreden (en hij/zij komt vanzelf al onder de content te staan, omdat hij/zij als <div> een block-element is).
O ja, als je de body de "onderste background" meegeeft, kan je de tweede container missen.

Nog een vraagje: ben je van plan die #content-hoogte vast op 2100px te zetten, of is dit even tijdelijk? *)

Met vriendelijke groet,
CSShunter
_________
*) Zal al bekend zijn:

• Bij een hoogte van 2100px moet iemand die de site bezoekt op 1024x768px zelfs bij een lange pagina (zoals http://designontwerp.com/workshop.html; ca 1000px content-hoogte) toch nog bijna 2 volledige schermhoogtes met "niets te zien" naar beneden scrollen voordat de #footer in beeld komt.
• Bij niet opgeven van de hoogte van de content regelt dit gewoon zichzelf, al naar gelang de hoeveelheid content die er op een pagina ingezet wordt.

 

[jjjvandaalen]

Liever had ik de content op height auto of heiight niets, maar stel ik daar die height niet op 2100 in dan valt de background van de content helemaal weg. Die heeft een geel verloopje... Als je daar ook nog een tip voor hebt, houd ik me wederom aanbevolen. Kijk trouwens ook eens naar de tekst op de kurenpagina, die is nog langer dan die van de workshop. Ik denk er trouwens aan om daarvoor nog 2 of 3 extra pagina's toe te voegen. Ook valt het mij op dat bij de langere teksten de tekst van de content om de linker afbeelding heenloopt en niet recht naar beneden... Niet zo fraai eigenlijk. Tevens heb ik in de header de afbeelding met het logo in de background opgenomen. Zodoende kan ik daar niet het logo clickable maken. Ik heb op het internet gezocht naar een methode omdat te krijgen en die heb ik gevonden. Gewoon een hrefje aan het logo verbinden.Zelfde geldt eigenlijk voor de banner. Als ik die op de afbeelding probeer te plaatsen is de hele header weg, ook niet de bedoeling. Ook wanneer ik de banner boven de header in de code plaats lukt dat niet...

 

[csshunter]

Ook valt het mij op dat bij de langere teksten de tekst van de content om de linker afbeelding heenloopt en niet recht naar beneden... Niet zo fraai eigenlijk.

Zie hierboven onder nummertje #6:

• "Het beste kan je ... de linker- en rechterkolom laten floaten, en de #content niet. Die komt er dan altijd mooi tussen te staan, als je deze een linker- en een rechter-marge geeft ter waarde van iets meer dan de breedte van de kolommen."

Daarvoor is dus nodig dat je even een <div id="content">...</div> om de inhoud heen zet, zodat je met #content {margin-left: ..px; margin-right: ..px;} die afstand van de kolombreedtes kunt opgeven. - Kijk maar in de broncode van mijn model: daar gaat het altijd goed. *)

Liever had ik de content op height auto of height niets, maar stel ik daar die height niet op 2100 in dan valt de background van de content helemaal weg. Die heeft een geel verloopje...

• Je kunt beslissen of je altijd de bovenkant van het verloopje wilt laten zien (en dan omlaag donkerder worden), of altijd de donkerder onderkant (en dan omhoog lichter worden).
• Bij de laatste komt er verschil aan de bovenkant, als de ene pagina langer is dan de andere - zou ik niet doen.
• Andere mogelijkheid: het verloopje sneller laten plaatsvinden, bv. over 900px hoog, en de ruimte onder het verloopje altijd opvullen met de vaste donkergele kleur van de onderkant; ik zou het verloop ook iets subtieler / minder zwaar maken (eindigen met bv. #F1E496).
• Dan komt ie er zo uit te zien.

Tevens heb ik in de header de afbeelding met het logo in de background opgenomen. Zodoende kan ik daar niet het logo clickable maken. Ik heb op het internet gezocht naar een methode omdat te krijgen en die heb ik gevonden. Gewoon een hrefje aan het logo verbinden.

Zoeken had je je kunnen besparen: in mijn model stond de oplossing al in de gele stippeltjes.

Zelfde geldt eigenlijk voor de banner. Als ik die op de afbeelding probeer te plaatsen is de hele header weg, ook niet de bedoeling. Ook wanneer ik de banner boven de header in de code plaats lukt dat niet...

't Is toch merkwaardig: als ik de banner in mijn model plak doettie het wel ... (en zo ook)

Met vriendelijke groet,
CSShunter

PS:
Vanwege de <embed> voor de banner is het nu geen valid html meer; daar valt weinig aan te doen (of je zou de validator voor de gek moeten houden door er een "onzichtbaar javascript" van te maken).
___________
*) Tip voor snel resultaat: begin met mijn blanco model te downloaden, even de broncode bekijken, en daar dan de inhoud in te ploppen die je wilt hebben. Dat is makkelijker dan het bijschaven van je nog onvolmaakt model waar de inhoud al in zit. - Zie je meteen of het werkt zoals ik beweer.

 

[jjjvandaalen]

Verslag tot nu toe

Hallo CSSHunter,

Je hebt me heel goed geholpen. Alleen heb ik om er zelf lering van te kunnen krijgen er wel voor gekozen om met jou aanbevelingen de hele bestaande website te vernieuwen. Dat was wel veel werk, maar het is me nu een stuk duidelijker allemaal. Ook het clickable logo is een aanvulling. De banner in principe ook, maar die heb ik nu nog niet toegepast, omdat ik met degene voor wie de website is heb afgesproken alles strict te maken. Hij heeft nu een html 4.0 site die nog gemaakt is in frontpage. Strict is een nieuwere scripttaal. [ Ik ben nog niet helemaal klaar met de verwerking van alles, maar hij werkt nu in elk geval ook in de oudere browsers.

Tot zover eerst.

Grtz,

Joost
QUOTE=csshunter;3577310]Zie hierboven onder nummertje #6:

• "Het beste kan je ... de linker- en rechterkolom laten floaten, en de #content niet. Die komt er dan altijd mooi tussen te staan, als je deze een linker- en een rechter-marge geeft ter waarde van iets meer dan de breedte van de kolommen."

Daarvoor is dus nodig dat je even een <div id="content">...</div> om de inhoud heen zet, zodat je met #content {margin-left: ..px; margin-right: ..px;} die afstand van de kolombreedtes kunt opgeven. - Kijk maar in de broncode van mijn model: daar gaat het altijd goed. *)

• Je kunt beslissen of je altijd de bovenkant van het verloopje wilt laten zien (en dan omlaag donkerder worden), of altijd de donkerder onderkant (en dan omhoog lichter worden).
• Bij de laatste komt er verschil aan de bovenkant, als de ene pagina langer is dan de andere - zou ik niet doen.
• Andere mogelijkheid: het verloopje sneller laten plaatsvinden, bv. over 900px hoog, en de ruimte onder het verloopje altijd opvullen met de vaste donkergele kleur van de onderkant; ik zou het verloop ook iets subtieler / minder zwaar maken (eindigen met bv. #F1E496).
• Dan komt ie er zo uit te zien.

Zoeken had je je kunnen besparen: in mijn model stond de oplossing al in de gele stippeltjes.


't Is toch merkwaardig: als ik de banner in mijn model plak doettie het wel ... (en zo ook)

Met vriendelijke groet,
CSShunter

PS:
Vanwege de <embed> voor de banner is het nu geen valid html meer; daar valt weinig aan te doen (of je zou de validator voor de gek moeten houden door er een "onzichtbaar javascript" van te maken).
___________
*) Tip voor snel resultaat: begin met mijn blanco model te downloaden, even de broncode bekijken, en daar dan de inhoud in te ploppen die je wilt hebben. Dat is makkelijker dan het bijschaven van je nog onvolmaakt model waar de inhoud al in zit. - Zie je meteen of het werkt zoals ik beweer. [/QUOTE]

 

[jjjvandaalen]

onvindbare afbeeldingen

CSSHUNTER,

Je hebt me dus fantastixch geholpen en daarna kon ik er ook weer verder mee. Nu ben ik bezig met het verder finetunen van de website. Ik ben er ook achtergekomen dat een aantal afbeeldingen op de computer wel worden weergegeven door de browser, maar op de testserver op het internet niet. Daar staan kruisjes op de plaats van de foto's en de bestandsnamen worden daar wel weergegeven. O.a. op het blad kuren (fontana.html).

Wat kan dat zijn? Die bestanden zijn wel in dezelfde map opgeladen, dus die staan wel op de site.

Grtz,

Joost

Hallo CSSHunter,

Je hebt me heel goed geholpen. Alleen heb ik om er zelf lering van te kunnen krijgen er wel voor gekozen om met jou aanbevelingen de hele bestaande website te vernieuwen. Dat was wel veel werk, maar het is me nu een stuk duidelijker allemaal. Ook het clickable logo is een aanvulling. De banner in principe ook, maar die heb ik nu nog niet toegepast, omdat ik met degene voor wie de website is heb afgesproken alles strict te maken. Hij heeft nu een html 4.0 site die nog gemaakt is in frontpage. Strict is een nieuwere scripttaal. [ Ik ben nog niet helemaal klaar met de verwerking van alles, maar hij werkt nu in elk geval ook in de oudere browsers.

Tot zover eerst.

Grtz,

Joost
QUOTE=csshunter;3577310]Zie hierboven onder nummertje #6:

• "Het beste kan je ... de linker- en rechterkolom laten floaten, en de #content niet. Die komt er dan altijd mooi tussen te staan, als je deze een linker- en een rechter-marge geeft ter waarde van iets meer dan de breedte van de kolommen."

Daarvoor is dus nodig dat je even een <div id="content">...</div> om de inhoud heen zet, zodat je met #content {margin-left: ..px; margin-right: ..px;} die afstand van de kolombreedtes kunt opgeven. - Kijk maar in de broncode van mijn model: daar gaat het altijd goed. *)

• Je kunt beslissen of je altijd de bovenkant van het verloopje wilt laten zien (en dan omlaag donkerder worden), of altijd de donkerder onderkant (en dan omhoog lichter worden).
• Bij de laatste komt er verschil aan de bovenkant, als de ene pagina langer is dan de andere - zou ik niet doen.
• Andere mogelijkheid: het verloopje sneller laten plaatsvinden, bv. over 900px hoog, en de ruimte onder het verloopje altijd opvullen met de vaste donkergele kleur van de onderkant; ik zou het verloop ook iets subtieler / minder zwaar maken (eindigen met bv. #F1E496).
• Dan komt ie er zo uit te zien.

Zoeken had je je kunnen besparen: in mijn model stond de oplossing al in de gele stippeltjes.


't Is toch merkwaardig: als ik de banner in mijn model plak doettie het wel ... (en zo ook)

Met vriendelijke groet,
CSShunter

PS:
Vanwege de <embed> voor de banner is het nu geen valid html meer; daar valt weinig aan te doen (of je zou de validator voor de gek moeten houden door er een "onzichtbaar javascript" van te maken).
___________
*) Tip voor snel resultaat: begin met mijn blanco model te downloaden, even de broncode bekijken, en daar dan de inhoud in te ploppen die je wilt hebben. Dat is makkelijker dan het bijschaven van je nog onvolmaakt model waar de inhoud al in zit. - Zie je meteen of het werkt zoals ik beweer.

[/QUOTE]

 

[csshunter]

... een aantal afbeeldingen op de computer wel worden weergegeven door de browser, maar op de testserver op het internet niet. ... Die bestanden zijn wel in dezelfde map opgeladen, dus die staan wel op de site.

Ja, dat klopt.
Dat zit 'm in de bestandsnamen. Windows kent geen verschil tussen hoofdletters en kleine letters, de webserver wel.

• Als je bv. een bestandje test.txt opslaat in Windows, en dan daarna een bestand met de naam TEST.txt wilt opslaan, zegt Windows "Dit bestand bestaat al, moet ik het door uw bestand vervangen?"
• Andere Operating Systems hebben dat niet, die kunnen beter lezen en schrijven. :d

Wat er nu bij jou gebeurd is, is dat in de html van de pagina http://designontwerp.com/fontana.html staat:

<img src="afbeeldingen/jpg/aquafitness.jpg" ... enz.>

• Als je in de Verkenner in je map afbeeldingen gaat kijken, zal je zien dat deze afbeelding daar Aquafitness.jpg heet, met een hoofdletter.
• Omdat je op Windows werkt, maakt dat bij locaal testen geen enkel verschil.
• Toen heb je het bestand met de hoofdletter geupload. Die is dus inderdaad aanwezig op de server, kijk maar: http://designontwerp.com/afbeeldingen/jpg/Aquafitness.jpg
• Maar als de server volgens opdracht van de html de afbeeldingsnaam met de kleine letter gaat zoeken, wordt die niet gevonden: een lege plek op de webpagina en http://designontwerp.com/afbeeldingen/jpg/aquafitness.jpg levert een mooie "404 Page Not Found" pagina.

Als je bestandsnamen altijd met een kleine letter schrijft (dat is dus de tip), dan voorkom je dat je de ene keer een hoofdletter en de andere keer een kleine letter voor eenzelfde bestand gaat gebruiken, en de server het niet kan vinden.
In een rijtje bestanden zie je 't dan ook heel gauw, als er een boosdoener tussen zit die toch per ongeluk een hoofdletter heeft gekregen. Als je er wisselend gebruik van maakt, kom je daar nooit achter.

Met vriendelijke groet,
CSShunter