website ziet er héél anders uit in andere browers

Status
Niet open voor verdere reacties.
R

renzolini

Gebruiker
Lid geworden
5 jun 2006
Berichten
257
Ik heb al een tijdje een site opgebouwd met css waarbij ik de kolommen met div ids bepaal. Maar mijn pagina is in firefox en bijna alle andere browers buiten IE niet goed zichtbaar de kolommen ordert hij niet mooi.

Hoe kan ik dat voorkomen zonder dat ik uren werk heb of is dat onmogelijk?

per datum gebruik ik een apart htm bestand dat ik zo in php plaats.

<?php
include "26junif.htm" ;
?>



Bekijk bijlage allesminder.txt
 
Ik had de bijlage allesminder.txt al in een pagina geplakt, en dan krijg je dit:
Die ziet er ook in Internet Explorer 7 op resolutie 1024*768px niet goed uit:

sportagenda-screen-IE7.png

En geen wonder, zegt de html/validator ... :eek:

Ook is de <div> structuur en/of de css van de <div>'s niet in orde:

sportagenda-divs.png

Ik ben bang dat dit niet met een paar eenvoudige aanpassingen goed te breien is, en dat er een drastische herbouw zal moeten plaatsvinden om het in orde te krijgen.
  • Opnieuw maken zal denkelijk sneller gaan dan aanpassen.
Succes!
Met vriendelijke groet,
CSShunter
 
=== Voordat ik begin ===
De "Webstats"-teller van Motigo kan je er beter af halen! Motigo haalt allerlei ongeoorloofde dingen uit! Zie bv. deze reactie: www.helpmij.nl/forum/showthread.php/600101-Motigo-webstats en deze uit het vrije veld: www.creactiva.nl/Reacties.aspx?Id=61
===

Nu een andere terzake: ohh, nu zie ik wat de bedoeling is! ;)
Maar dat hoeft helemaal niet met een tabel en/of allerlei <div>'s gemaakt te worden, dat kan ook met slim gebruik van de <h1>, <h2> enz. tags die met css opgemaakt worden.
Bijvoorbeeld in de html:
HTML: 
<h3>23 april 2011</h3>
<h4>TT</h4>
<h5><a href="http://www.sportsites.be/karate">Karate</a></h5>
<h6 class="be"><a href="http://www.ckteam.be/">Antwerp International Grappling</a></h6>

<h4>A</h4>
<h5><a href="#">Badminton</a></h5>
<h6 class="nl"><a href="#">Gouden Pluim Gouda</a></h6>
Heel wat minder code, en overzichtelijk toch? :)
(de class bij de <h6> zorgt voor het bijpassende vlaggetje)

Hier is ie in werking:
Met vriendelijke groet,
CSShunter

[edit]O ja, zelf getest in Internet Explorer 6, IE7, IE8, Firefox, Chrome, Opera en Safari. Iedereen tevreden.[/edit]

[edit]En hier zijn de browsershots ervan: http://browsershots.org/http://www.developerscorner.nl/csshunter/tests/test-sportagenda2.htm[/edit]
 
Laatst bewerkt:
Bedankt css hunter, dit ziet er me een héél goeie en overzichtelijke code uit. Maar kan je dan ook makkelijk een linkerkolom ernaast plaatsen en er boven de navigatie zonder dat je tabellen gebruikt? zoals bv http://www.infoslovenia.be/sportagenda/ .

Mss moet ik er eens goed over nadenken om al mijn teller van motigo webstats te wijzigen.

Maar wat zijn goeie tellers die geen pop -ups en dergelijke nemen buiten google ? Iemand goeie ervaringen? is onestats.com een goeie teller?
 
Wat je in ieder geval moet controleren is dat een id maar 1 keer gebruikt wordt.
Je pagina heeft meer dan 270 fouten waarvan 80% komt omdat je id's meerdere keren gebruikt
waardoor de css helemaal stuk loopt.
Dit moeten classes worden maar je moet echt per div de positie enzo gaan bepalen.
Hoe je het ook op lost dit wordt uren werk.
 
grumbkow zei:
Wat je in ieder geval moet controleren is dat een id maar 1 keer gebruikt wordt.
Je pagina heeft meer dan 270 fouten waarvan 80% komt omdat je id's meerdere keren gebruikt
waardoor de css helemaal stuk loopt.
Dit moeten classes worden maar je moet echt per div de positie enzo gaan bepalen.
Hoe je het ook op lost dit wordt uren werk.
Klik om te vergroten...

dat het me uren werkt kost besef ik nu ook al, maar in bovenstaand voorbeeld is er zelfs één zonder div id's.
 
renzolini zei:
dat het me uren werkt kost besef ik nu ook al, maar in bovenstaand voorbeeld is er zelfs één zonder div id's.
Klik om te vergroten...

het is uiteraard je eigen websites, maar vandaag de dag proberen webdevelopers alle tables te vermijden.
Dit krijg je gewoon amper goed terwijl met een beetje css deze website in 2 uurtjes is na te bouwen.
 
grumbkow zei:
het is uiteraard je eigen websites, maar vandaag de dag proberen webdevelopers alle tables te vermijden.
Dit krijg je gewoon amper goed terwijl met een beetje css deze website in 2 uurtjes is na te bouwen.
Klik om te vergroten...

ja wellicht heb je wel gelijk, ik zal er de komende dagen en weken werk van maken, want hoe mooier de code is hoe hoger de pagina's in zoekmachines komen.
 
renzolini zei:
ja wellicht heb je wel gelijk, ik zal er de komende dagen en weken werk van maken, want hoe mooier de code is hoe hoger de pagina's in zoekmachines komen.
Klik om te vergroten...

Mwah niet helemaal waar. De code van Wordpress sites is vreselijk, maar deze staan altijd boven aan in google.

SEO is raar en vrijwel onmogelijk om correct uit te voeren.
 
hoe komt het als ik deze code op die website www.developerscorner.nl/csshunter/tests/test-sportagenda2.htm
als ik die op mijn site plaats www.sportsites.be/atest en dan naar http://validator.w3.org/ om te valideren ik plots

Sorry! This document can not be checked.
met als bericht
Sorry, I am unable to validate this document because on line 159 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

The error was: utf8 "\xEB" does not map to Unicode

en bij www.developerscorner.nl/csshunter/tests/test-sportagenda2.htm

komt het bericht This document was successfully checked as HTML 4.01 Strict!

kdacht dat ik op deze code kon verder bouwen maar nu sta ik eigenlijk nog nergens.
 
Weet niet waar het door komt, maar hier de validatie (firefox plugin naar W3C standaarden)
Knipsel.png
 
ik het de fout gevonden het is omdat op België twee puntjes staat dat hij dit niet kon lezen.
 
Hoi Renzo,
Bij mijn testvoorbeeld staan er ook 2 puntjes op de "België" en toch valideert hij! :)
Nu staat de gebruikte "charset"-meta op "utf-8": dat is de aanbevolen universele code voor de herkenning van de lettertekens (bij een aantal talen met speciale schrifttekens moet dat anders zijn).
  • Een voorwaarde voor correcte weergave is dan, dat het html-document zelf óók opgeslagen moet worden als utf-8.
Waarschijnlijk heb je mijn code ingeplakt in een Kladblok-bestandje, en dat opgeslagen. De standaard-codering van Kladblok (Notepad) is: ANSI, en niet utf-8. Maar dat kan ingesteld worden: bij het opslaan zit in het dialoog-venstertje onderin een uitrolvakje waarin je UTF-8 kunt kiezen.
  • In een html-editor moet als het goed is bij de opties/instellingen ook die mogelijkheid zitten: opslaan als UTF-8.
  • Bij handhaven van de ANSI-instelling werken de ingetikte ë, à, é en andere accenttekens alleen, als je daarvoor de speciale html-schrijfwijze in de pagina-code verwerkt. Dan wordt het bv. Belgi&euml; want &euml; is de code voor de ë.
  • Maar dat is erg lastig!
  • Met opslaan als utf-8 kan je gewoon je toetsenbord voor de speciale tekens blijven gebruiken zoals je gewend bent.
  • Er zijn een paar uitzonderingen, bijvoorbeeld een & in de tekst moet in de html als &amp; gecodeerd worden. Maar daar wijst de html-validator je vanzelf wel op.
  • Met Notepad++ (een verbeterd en geavanceerd Kladblok) kan je precies zien hoe een pagina is opgeslagen, en dat ook wijzigen (Menu: Codering > "Converteren naar UTF-8 (zonder BOM)". Daarna in de pagina-code ergens een extra spatie of witregel neerzetten, zodat het net niet hetzelfde document is, en vervolgens opslaan met dezelfde naam.
Met vriendelijke groet,
CSShunter
 
het lukt me gewoon niet om een kolom van 200px breedte links te plaatsen
Klik om te vergroten...
Je kunt die linkerkolom beter niet in een tabel zetten, maar in een <div id="linkerkolom"> met:
Code: 
#linkerkolom {
	float: left;
	width: 200px;
	}
Daarna komt in de html de hele <div id="sportkalender"> met:
Code: 
#sportkalender {
	margin-left: 220px; /* wat ruimte naast de linkerkolom */
	}
en daarna een "clearing div" om onder de linkerkolom door te gaan (zie broncode):
Met vriendelijke groet,
CSShunter

PS: de html-validator vindt 'm nu niet goed meer, vanwege de target="_blank" eigenschappen in de links (=openen in nieuwe pagina). Als je die er af laat is het weer 100% valid html Strict.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan