login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Iets klopt hier niet

Offline wiecher - 23/09/2012 22:07
Avatar van wiecherNieuw lid Ik heb deze code maar zoals men kan zien kloppen de verhoudingen niet helemaal.
Wie helpt me uit de brand ?

[code=html4strict]<html>
<head>
<style type="text/css">
<!--
body { margin: 0; padding: 0; }
#weerwrapper { margin: 0 auto 0 auto; width: 361px; position: relative; }
#buienradar { position: absolute; top: -135px; left: -170px; clip:rect(135px, 531px, 535px, 170px); height: 627px; width: 700px; }
#weerforum { position:absolute; top:14px; left:10px; width: 343px; height: 358px; }
//-->
</style>
</head>

<body>
<div id="weerwrapper">

<img id="buienradar" title="Afbeelding Buienradar" src="http://weerforum.eu/wibisaradar/images/weerforum.meteox.gif" />

<img id="weerforum" title="Afbeelding Weerforum" src="http://world.meteox.com/radareu/loop_ir.gif?" />
<img id="weerforum" title="Afbeelding Weerforum" src="http://weerforum.eu/wibisaradar/images/weerforum.namen.gif" />

</div>
</body>
</html>

15 antwoorden

Gesponsorde links
Offline UpLink - 23/09/2012 23:06 (laatste wijziging 23/09/2012 23:17)
Avatar van UpLink ... Ten eerste: Je titel had wel iets duidelijker gekunnen, niet? Met "Hier klopt iets niet" zijn we op zich al weinig...

Verder...


<!-- voor een stuk code en --> erna zorgt ervoor dat het stukje code ertussen als comment dient... dat stukje code word dus niet uitgevoerd...

Opletten met wat je comment...

Daarnaast kloppen je afmetingen ook niet van de afbeeldingen...

De code hieronder zou correct moeten zijn:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. body { margin: 0; padding: 0; }
  2. #weerwrapper { margin: 0 auto 0 auto; width: 361px; position: relative; }
  3. #buienradar { position: absolute; top: -135px; left: -170px; clip:rect(135px, 531px, 535px, 170px); height: 627px; width: 700px; }
  4. #weerforum { position:absolute; top:0px; left:0px; width: 360px; height: 400px; }


Hoe die rode dingen op die kaart exact mee moeten bewegen is mij onbekend... Ik ben geen weerkundige... Maar als je van het 1 de formaten wijzigt, dien je van de andere onderdelen ook de formaten mee te wijzigen... dit zijn namelijk 3 afbeeldingen die over elkaar geplaatst worden. Als je de onderste aanpast, moet je de andere 2 bovenliggende afbeeldingen mee aanpassen want anders krijg je wat jij nu hebt...
Bedankt door: wiecher
Offline WouterJ - 23/09/2012 23:25
Avatar van WouterJ HTML gevorderde
"UpLink" schreef:
<!-- voor een stuk code en --> erna zorgt ervoor dat het stukje code ertussen als comment dient... dat stukje code word dus niet uitgevoerd...

Opletten met wat je comment...

In dit voorbeeld zie je dat dit gebruikt is in CSS. Dit stamt uit de 20ste eeuw, waar nog niet alles CSS ondersteunde. Mocht je browser geen CSS ondersteunen dan liet hij de style als tekst zien, met deze comments in de elementen zorgde je ervoor dat deze dan niet zichtbaar werden. Browsers die wel CSS ondersteunden maakte zich geen zorgen om die comments, zo is CSS geprogrammeerd (zie ook How CSS handles errors). Dit gebeurde trouwens ook in JavaScript.

Ondanks dat dit een ouderwetse manier is die niet meer nodig is is het niet fout.

Een belangrijk ding die niet klopt is geen doctype. Een doctype is 1 van de 2 verplichte HTML elementen in de wereld en moet er minimaal zo uitzien:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!doctype html>


Tevens mis je ook het 2e verplichte element: de title element in de HEAD. Het is daarnaast aan te raden om een meta charset element als eerste element in de HEAD te plaatsen:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <meta charset="utf-8">
Bedankt door: wiecher
Offline wiecher - 23/09/2012 23:28 (laatste wijziging 24/09/2012 00:12)
Avatar van wiecher Nieuw lid Sorry typefout.
Nu zit ik met het volgende probleem.
In Firefox wordt het netjes weergegeven maar in IE erg groot.

[code=html4strict]<html>
<head>
<style type="text/css">
body { margin: 0; padding: 0; }
#weerwrapper { margin: 0 auto 0 auto; width: 361px; position: relative; }
#buienradar { position: absolute; top: -135px; left: -170px; clip:rect(135px, 531px, 535px, 170px); height: 627px; width: 700px; }
#weerforum { position:absolute; top:0px; left:0px; width: 360px; height: 400px; }
</style>
</head>

<body>
<div id="weerwrapper">

<img id="buienradar" title="Afbeelding Buienradar" src="http://weerforum.eu/wibisaradar/images/weerforum.meteox.gif" />

<img id="weerforum" title="Afbeelding Weerforum" src="http://world.meteox.com/radareu/loop_ir.gif?" />
<img id="weerforum" title="Afbeelding Weerforum" src="http://weerforum.eu/wibisaradar/images/weerforum.namen.gif" />

</div>
</body>
</html>
Offline Pieter - 24/09/2012 08:17
Avatar van Pieter Gouden medaille

SEO guru		 @Wiecher, de posters bedanken zit er niet in voor je?

Wat wordt er erg groot weergegeven? Geef je afbeeldingen ook eens breedtes en hoogtes mee.
Bedankt door: WouterJ, wiecher
Offline wiecher - 24/09/2012 13:29
Avatar van wiecher Nieuw lid Oh sorry nog nieuw hier.
Bij deze gedaan hoor (Bedankt)
In alle browsers behalve IE wordt het te groot weergegeven.
Offline Martijn2008 - 24/09/2012 13:49 (laatste wijziging 24/09/2012 14:09)
Avatar van Martijn2008 PHP beginner Hoi Wiecher,

In je vorige topic heb ik je geholpen door 2 afbeeldingen over elkaar heen te zetten. Dit keer wil je er 3 over elkaar zetten, echter zie ik dat je bij twee van de drie afbeeldingen dezelfde identifier gebruikt, namelijk weerforum.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <img id="weerforum" title="Afbeelding Weerforum" src="http://world.meteox.com/radareu/loop_ir.gif?" />
  2. <img id="weerforum" title="Afbeelding Weerforum" src="http://weerforum.eu/wibisaradar/images


Een identifier moet uniek zijn en mag maar 1 keer worden gebruikt. Wil je meerdere keren gebruik maken van een opmaak, dan spreken we van een klasse. Dat verhaal kun je hier nalezen.

Kortom je zult 1 van de identifiers moeten aanpassen om die weer uniek te maken. Een goede code is bijvoorbeeld dit:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <img id="meteox" title="Afbeelding Meteox" src="http://world.meteox.com/radareu/loop_ir.gif?" />
  2. <img id="weerforum" title="Afbeelding Weerforum" src="http://weerforum.eu/wibisaradar/images


Je wilt de afbeeldingen over elkaar zetten, dus zul je daarvoor ook een zogenoemde CSS-code moeten schrijven voor je nieuwe identifier meteox. Zie voorbeeld hieronder.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. body { margin: 0; padding: 0; }
  3. #weerwrapper { margin: 0 auto 0 auto; width: 361px; position: relative; }
  4. #buienradar { position: absolute; top: -135px; left: -170px; clip:rect(135px, 531px, 535px, 170px); height: 627px; width: 700px; }
  5. #weerforum { position:absolute; top:0px; left:0px; width: 360px; height: 400px; }
  6. #meteox { /* Hier je opmaak code */ }
  7. </style>


Je moet zelf de code voor identifier #meteox { } nog schrijven, die ziet er ongeveer hetzelfde uit als de code voor #buienradar en #weerforum.

Hopelijk kom je hier verder mee, succes!

Martijn
Bedankt door: wiecher
Offline wiecher - 24/09/2012 15:21 (laatste wijziging 24/09/2012 18:45)
Avatar van wiecher Nieuw lid Dank je Martijn ik ga d`r even mee spelen.
Helaas blijft het in Internet Explorer enorm groot.
In andere browsers ziet het er prima uit.

[URL=http://www.imagebam.com/image/d1cc8e212053602][IMG]http://thumbnails103.imagebam.com/21206/d1cc8e212053602.jpg[/IMG][/URL]

[/code]<html>
<head>
<style type="text/css">
body { margin: 0; padding: 0; }
#weerwrapper { margin: 0 auto 0 auto; width: 361px; position: relative; }
#buienradar { position: absolute; top: -135px; left: -170px; clip:rect(135px, 531px, 535px, 170px); height: 627px; width: 700px; }
#weerforum { position:absolute; top:0px; left:0px; width: 360px; height: 400px; }
#meteox { position:absolute; top:0px; left:0px; width: 360px; height: 400px; }
</style>
</head>

<body>
<div id="weerwrapper">

<img id="buienradar" title="Afbeelding Buienradar" src="http://weerforum.eu/wibisaradar/images/weerforum.meteox.gif" />

<img id="meteox" title="Afbeelding Meteox" src="http://world.meteox.com/radareu/loop_ir.gif?" />
<img id="weerforum" title="Afbeelding Weerforum" src="http://weerforum.eu/wibisaradar/images/weerforum.namen.gif" />

</div>
</body>
</html>
Offline Martijn2008 - 24/09/2012 19:45
Avatar van Martijn2008 PHP beginner Ik ondervind geen problemen in Internet Exploror. Welke installatie test je mee (versie)?
Bedankt door: wiecher
Offline wiecher - 24/09/2012 20:16
Avatar van wiecher Nieuw lid IE 9 test ik mee.
Het kan natuurlijk ook aan het software liggen wat ik voor mijn forum gebruik.
Ik gebruik SMF.
Offline Pieter - 24/09/2012 20:28
Avatar van Pieter Gouden medaille

SEO guru		 Wiecher, heb je ergens een online URL waar we kunnen meekijken? Dat werkt iets gemakkelijker hé.
Bedankt door: wiecher
Offline wiecher - 24/09/2012 20:44 (laatste wijziging 24/09/2012 20:49)
Avatar van wiecher Nieuw lid Jazeker kijk hier maar eens met Firefox en met IE
Ik moet er ook even bijvertellen dat die andere radar het ook zo laat zien.

http://weerforum.eu/index.php/page,page1531.html

http://weerforum.eu/index.php/page,page2690.html
Offline UpLink - 25/09/2012 18:21
Avatar van UpLink ... Dit ligt volgens mij aan SMF zelf...
Op andere pagina's zijn die kaarten wel correct, enkel op die 2 pagina's niet...

Kan zijn dat het met die <div> te maken heeft waar die instaat, misschien eens proberen te vervangen door een <table> en zien wat die dan doet?
Bedankt door: wiecher
Offline wiecher - 25/09/2012 19:32
Avatar van wiecher Nieuw lid Geprobeerd maar ook dat helpt helaas niets.
Kan het zijn dat IE niet goed samenwerkt met CSS ?
Offline Pieter - 26/09/2012 09:02
Avatar van Pieter Gouden medaille

SEO guru		 Internet explorer is inderdaad niet de beste browser, maar nog steeds een derde van de mensen maakt er gebruik van, dus moet het ook daar goed zitten.

Kan je beter omschrijven wàt er exact niet aan klopt? Ik zit op mac dus testen met IE is wat moeilijker. 
Bedankt door: wiecher
Offline wiecher - 26/09/2012 11:46
Avatar van wiecher Nieuw lid Hier de voorbeelden.

[img]http://www....jpg[/img]

[img]http://www....jpg[/img]
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.212s