Website verschillend uiterlijk in andere browser

Status
Niet open voor verdere reacties.
R

remmie63

Gebruiker
Lid geworden
4 jan 2011
Berichten
393
Hallo. Ik heb mijn website zo gemaakt dat er afbeeldingen netjes gecentreerd in het midden van het scherm komen te staan. In chrome werkt dit prima in explorer niet. In explorer wordt alles naar rechts verplaatst. De centrering is weg.
Heeft iemand een oplossing?
 
Het is ook niet vreemd dat dat mis gaat. Je zegt de blokken nu op een vast aantal pixels van de linkerrand te staan. Dat gaat dus alleen goed als het browserscherm precies de goede breedte heeft. Hier staan een aantal entreermethoden uitgelegd.
 
Oke, ik ga er mee aan de slag! Ik post de uitkomst.
Alvast heel erg bedankt.
 
... en in de praktijk van deze pagina:
  • Al die layers met hun absolute posities enz. afschaffen.
  • In de html alle elementen op volgorde van boven naar beneden zetten, met een nieuwe-regel-tag <br /> ertussen.
  • Centreren met body {text-align: center}.
  • De hoogte van de images weglaten, en een maximale breedte van 100% toevoegen: automatisch niet groter dan de beeldscherm-breedte (= ook op mobieltjes, kleine tablets e.d. toonbaar). De hoogte past zich dan automatisch aan.
  • En nog een paar kleine css-dingetjes.
Blijft alleen over:
HTML: 
<body>
<div>
	<img src="Kasperski Profile Pic 100.jpg" width="664" alt="" /><br />
	<img src="Kasperski-158_DEF.jpg" width="706" alt="" /><br />
	<a href="#" onclick="MM_openBrWindow('contact.html','Contact','width=350,height=350')">Contact</a><br />
	<iframe width="706" height="166" scrolling="no" frameborder="no" 
		src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F86101128&amp;color=070707&amp;auto_play=false&amp;show_artwork=true" target="_blank"></iframe>
</div>
</body>
</html>
Met als enige css:
Code: 
html {
    height: 100%;
    padding-bottom: 1px;
    background: black;
    }
body {
    margin: 0;
    text-align: center;
    }
img,
iframe {
    padding-top: 15px;
    max-width: 95%; /* mobieljes en smalle schermen */
    }
a {
    color: white;
    }

  • Test: kasp.htm :)
    Zie broncode.
    (versmal het browser-window, en kijk wat er gebeurt met de images)
__________
PS: Het is beter om in mapnamen en bestandsnamen geen spaties te gebruiken, maar streepjes - of onderstreepjes _ om woorden van elkaar te onderscheiden.
 
Laatst bewerkt:
Altijd gecentreerd! Prachtig. Met deze basis kan ik door. Dank voor de moeite!

Groet Remco

Ik zet het onderwerp nog niet als opgelost! Er zal beslist in de komende week nog wel een vraag opduiken.
 
Laatst bewerkt:
Ik was in de veronderstelling dat het altijd beter is om zo veel mogelijk met layers te werken. Of is dat alleen bij heel complexe websites?
 
Nee, de "layers" die je bedoelt zijn niet zaligmakend, en ook bij complexe websites hoef je niet met "layers" te werken: d.w.z. niet met layers die een absolute positie hebben (een "apDiv", zegt Dreamweaver).
En dan zijn het eigenlijk geen "layers" (= lagen), maar gewoon <div>-blokken die naast en onder elkaar gerangschikt worden.

  • Met absolute posities is het altijd heel erg uitkijken, want een element met een absolute positie moet altijd ergens aan vast gekoppeld worden: hetzij de linkerbovenhoek van het scherm, hetzij de linkerbovenhoek van een ander element.
    Zodra de schermbreedte of het ophangpunt verandert, gaat dan het "absoluut" geplaatste element mee, maar blijft wel zijn proporties houden > en dat is doorgaans funest voor een flexibele layout.
  • En in 9,9 van de 10 gevallen heb je geen absolute posities nodig, maar kan alles met floats en clears geregeld worden (om dingen naast elkaar te krijgen); zie bv. hier.
 
Als ik hier mee begin heb ik in het browser voorbeeld een zwart scherm. Terwijl in DW het img gewoon zichtbaar is.
Code: 
<style type="text/css">
html {
    height: 100%;
    padding-bottom: 1px;
    background: black;
    }
body {
	margin: 0;
	text-align: center;
	background-color: #000000;
    }
img,
iframe {
	padding-top: 15px;
	max-width: 100%; /* mobieljes en smalle schermen */
	margin-left: auto;
	margin-right: auto;
    }
a {
    color: white;
    }
<!--
<Body>
<div>
<img src="../../Afbeeldingen DW/Kasperski Profile Pic 100.jpg" alt="name img" width="664" height="96" />
<br/>
Wat doe ik verkeerd?
 
  1. Er staat <!-- in. Dat is het begin van een kommentaar-blok. Alles na deze <!-- wordt niet weergegeven!
  2. De <style type="text/css"> wordt niet afgesloten met een </style>. Die </style> hoort op de plaats te staan van de <!--.
  3. Er staat geen einde van de <head> tag met </head>. Die </head> moet na de </style> komen.
  4. De <Body> hoort eigenlijk een <body> (met kleine letter) te zijn.
Kijk nog maar eens in de broncode van het voorbeeld kasp.htm. ;)
En zie ook m'n handtekening: "Als een webpagina plots niet doet wat je wilt, ..." > de html-validator weet deze fouten er feilloos uit te halen. :)
 
Oke, ik ga er weer mee aan de slag! Je begrijpt natuurlijk al dat ik een leek ben op dit gebied. Dus ik ben je erg erkentelijk voor de feedback.
 
Oke, een aantal weken verder en het probleem met centreren inderdaad opgelost. In ieder geval horizontaal centreren.
Maar hoe zit dat nu met het verticale stuk.
In mijn website had ik eerst een doorlopende pagina, daar was het geen probleem. I.h.k.v. de APK heb ik mijn pagina maar meteen helemaal verandert en nu is het geen doorlopende pagina meer. De foto op de index pagina moet gelijk liggen met de onderkant van het scherm (in ieder scherm formaat). En dat doet het niet, er blijft een balkje pagina achtergrond zichtbaar (heel vervelend en zeker niet passend bij het ontwerp) er is ook een verticale schuifbalk in de browser.
Kan iemand mij uitleggen hoe dit op te lossen?

Overigens heb ik een verwoede poging gedaan om van de layers af te komen. Maar dat is nu even teveel gevraagd. Daar kom ik niet uit. Dat betekent nl. dat ik voornamelijk in de code zit te werken. Dat vind ik heel moeilijk.

Het voorbeeld vindt je hier: http://www.kasperski-music.com/test.html
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan