Foto’s verschuiven van plaats- — Forum

Nicolay Startte dit onderwerp 12 dec 2009, 11:56 Antwerpen 24 berichten

Op mijn website : http://www.keukentheorie.net staan (bijna) alle foto aan de linkerkant van de bladzijde. Deze foto’s staan opgeladen bij Tinypic, kwestie van plaats vrij te houden bij Belgacom…

Als je de site bekijkt met Firefox, is alles normaal… maar als je ze bekijkt met Internet Explorer staan de foto’s verschoven. Ttz de bovenste foto staat juist en de volgende schuiven geleidelijk naar onder toe..
Om dit duidelijk te maken heb ik een kleine pagina aangemaakt met twee foto’s ;

http://www.keukentheorie.net/Testpagina.html

De bovenkanten van de foto’s moeten juist naar de stippellijn komen in het tekstgedeelte…
Via IE is reeds duidelijk te zien dat de tweede foto lager staat.( enkele millimeters, maar bij veel foto’s gaat dit reeds over centimeters verschuiving…)

Ook heb ik geprobeerd om de foto’s te plaatsen van mijn eigen disc.. ipv Tinypic maar het resultaat blijft hetzelfde. Ook in een tabel zetten helpt niet.
Ik heb zo een indruk dat IE een grote afstand ( spatie tussen elke lijn, van één pixel of zoiets..) tussen de verschillende items gebruikt.

Bestaat hier een oplossing voor?

coderunner 13 dec 2009, 16:22 Aubauke - Aentwaerepe 1.828 berichten

Beste Nicolay,

Je zou dit kunnen oplossen in IE door de waarde van de "margin-top" van de tweede foto kleiner te maken zodat dit wel naast de lijn komt te staan maar dit lost je probleem niet echt op daar dan in FF de tweede foto weer te hoog zal staan.

Een mogelijke oplossing kan zijn door twee verschillende style bestanden aan te maken (één voor IE bv. style_IE.css en één voor FF (of andere browser) bv. style.css).
Op de pagina tussen de tags <head> en </head> komt dan de code die verwijst naar deze 2 style bestanden

Code: Selecteer alles

<link rel="stylesheet" href="style.css" />

<!--[if IE]>
<link rel="stylesheet" href="style_IE.css" />
<![endif]-->

De eerste is de style (hier style.css) die wordt gebruikt indien de browser niet IE is.
De tweede zegt wanneer het wel IE is moet style_IE.css gebruikt worden

Lees ook volgend artikel over CSS Conditional Comments.

Bekijk je test pagina in IE en FF dat ik hier even online gezet heb met de 2 verschillende style bestanden (style.css en style_IE.css).

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Nicolay Startte dit onderwerp 13 dec 2009, 23:19 Antwerpen 24 berichten

Bedankt...
Ik zal dat eens bestuderen. Ik vind het bericht nu pas en morgen met een frisse kop zal eens kijken.
En ook eens bestuderen of die extra codes kunnen ingevoerd worden in het WYSIWYG systeem.

Nicolay Startte dit onderwerp 14 dec 2009, 12:46 Antwerpen 24 berichten

Het werkt niet. Of ben ik wat vergeten... ?
Kijk eens in de code, aub... ( is opgeladen naar Belgacom..)

Dit heb ik in de header geplakt... zoals gezegd.

<link rel="stylesheet" href="style.css" />

coderunner 14 dec 2009, 15:06 Aubauke - Aentwaerepe 1.828 berichten

Beste Nicolay,

Hiervoor is wel kennis van html en css noodzakelijk.
De code die je tussen <head> en </head> gezet hebt is OK ...
MAAR dat is niet voldoende want je moet ook nog deze 2 stylesheet bestanden (style.css en style_IE.css) aanmaken. Alles wat op je pagina "Testpagina.html" tussen

Code: Selecteer alles

<style type="text/css">

en

Code: Selecteer alles

</style>

staat, moet je uit de html code van de pagina halen.

Vervolgens open je in bv. kladblok ( of Notepad++ ) een nieuwe pagina en plakt de style daarin en bewaart dit als style.css

Dezelfde code plak je nogmaals in kladblok ( of Notepad++ ) op een tweede geopende pagina maar je verkleint daarin de top marge zodat de tweede foto naast de lijn staat en bewaar dat als style_IE.css.

De drie bestanden zijnde "Testpagina.html" - "style.css" en "style_IE.css" laad je op naar je webruimte op de Belgacomserver.

Deze 3 bestanden (zie hoger) heb ik naar je email adres verstuurd.

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.