Afbeeldingen vergroten dmv mouseover

Status
Niet open voor verdere reacties.
Alle détails hierboven heb ik niet gelezen, :o , maar mag ik me misschien toch even een terzijde veroorloven?
  • Er schoot me namelijk deze pagina te binnen, die eventueel wat (scriptloze :) ) ideeën kan opleveren.
  • De truc daar is dat de kleine plaatjes geen echte stuk-voor-stuk plaatjes zijn, maar één achtergrondafbeelding.
  • De hover-images zijn er op de voorgrond in gezet (als links), en worden met css al of niet getoond. Een aantal ervan draaien als echte klikbare links.
  • Op deze manier kunnen <span></span>'s met achtergrond-images in de html gemist worden.
  • Voor belangstellenden: nog wat toelichting staat in dit draadje op het forum.
Deze oplossing is aardig voor vrij statische sites, waar weinig verandering in zit. Maar als je steeds wisselende plaatjes mocht hebben, is dit niet zo erg handig. Dan moet er steeds een nieuwe achtergrondfiguur aangemaakt worden.

Dat was 'm - nu ga ik weer in m'n hok. ;)

Met vriendelijke groet,
CSShunter

Bedankt, maar helaas geen oplossing voor mij omdat de afbeeldingen vaak verwisselen.
 
Was dat ding van mij nog bruikbaar? Ondanks de problemen in IE 6/7? Gewoon nieuwsgierig.
 
Was dat ding van mij nog bruikbaar? Ondanks de problemen in IE 6/7? Gewoon nieuwsgierig.

Sorry, was vanmiddag bezig met een reactie te typen, maar ben het helaas vergeten af te maken..

Bedankt voor alle hulp, ik had dat zelf nooit verzonnen. Van je 2e post begrijp ik niet alles (zo technisch ben ik niet), maar ik heb je code van post 1 uitgeprobeerd, en het werkt!! Bedankt!

Alleen nu zit ik met het volgende probleem. Als ik die code gewoon op een nieuwe, lege pagina plak, doet die het goed, geen problemen (geen idee hoe het zit met IE 6 en 7..). Maar de pagina waar het uiteindelijk komt (omdat ik dus af wil van die iframe, de code van de pagina die ik hier had geplaatst was van de inhoud van de iframe) heeft nog allerlei andere opmaak en is gemaakt op basis van een template. Als ik die code plak op deze pagina in een cel (mijn hele pagina indeling is gebaseerd op een tabel), dan verschuiven alle afbeeldingen naar boven. Als ik van deze pagina een voorbeeld toon in IE, laat ie het wel goed zien, ondanks dat het in Dreamweaver een zooitje is. Maar nu wilde ik om het wat overzichtelijker te krijgen (ik kan bepaalde dingen anders niet meer aanpassen omdat de plaatjes er overheen zitten) alle afbeeldingen alsnog in een tabel plaatsen, alleen dan doet de code het niet meer. Ik heb geprobeerd om de cellen een div met die id te geven, of alleen die id, maar dat lukt niet (ik weet sowieso uberhaupt niet of je een cel wel een id kan geven?). Heb je enig idee of dit makkelijk op te lossen is? Anders zal ik denk ik toch gewoon een iframe gebruiken, want dan lukt het wel om die code te gebruiken.
 
Ahoy!
Ik was ook nog even bezig, en daarom kruis ik je laatste post.
- Voor de testdoeleinden heb ik even wat plaatjes (niet allemaal) achter het werk van Goeroeboeroe gezet.
Bevindingen:
Met het Conditional Comment voor IE6 en IE7: hoveren werkt, maar de grote afbeeldingen komen steeds met rechterbenedenhoek in de rechterbenedenhoek van het kleine plaatje.
Zonder het Conditional Comment voor IE6 en IE7: in IE6 geen hover te bespeuren; in IE7 wel, maar daar komt het hover-plaatje achter de er op volgende gewone plaatjes te staan: screenshot. - Dat valt misschien te verhelpen met andere position-eigenschappen (zie hieronder).

Maar ik ben eens een andere weg gaan bewandelen: uitgaan van het hover-img op de voorgrond i.p.v. op de achtergrond. Als de thumbnail erachter verscholen zit als achtergrond-img, kan dan de <span></span> gemist worden: door het verschijnen met {display:none;} en {display:block} te regelen.

Dat kan ... en toen bedacht ik dat behalve de 18 thumbnails ook alle 18 grote afbeeldingen al gedownload zijn bij het aanroepen van de pagina (in tegenstelling tot wanneer het een javascript pop-up is). Nu zijn de thumbs vrij klein, en hoeven ook niet super-gedétailleerd te zijn: daar zijn de grote juist voor.
Daarom eens gaan kijken wat een browser van een verkleinde grote maakt, en vergeleken met een in een tekenprogramma verkleinde grote afbeelding.
Dat levert dit op:

vergelijking.png

Dat valt dus reuze mee: met mijn ogen zie ik geen kwaliteitsverlies.
Heel prettig! Dat scheelt 3 keer tijd/werk: dan (1) hoeft er bij elke afbeelding geen thumnail-afbeelding gemaakt te worden, dan (2) hoeft er niet èn in de css èn in de html iets aangepast te worden als er een plaatje moet veranderen (veranderen alleen in de html nodig), en dan (3) hoeft de browser geen 18 thumbs te downloaden: we kunnen de grote afbeeldingen gewoon recyclen! :D
  • Dat levert deze testpagina: test-nw.htm
    In IE6 nog steeds geen hover te bespeuren. Maar er kan (ook nog steeds) wel gewoon geklikt worden voor het vervolg.
    In IE7 draait ie lekker, en in IE8 ook. In FF3.0 ook, en in FF3.6.3, Opera, Safari en Chrome.
Met als opmerkingen:
  • De afbeeldingen hebben in de html geen opgegeven breedte en hoogte, die staat in de css voor allemaal tegelijk (scheelt ook weer code).
  • De afbeeldingen worden "normaal" getoond met een verkleining (teruggebracht tot 110x110px). Met de css-hover worden ze "vergroot", d.w.z. ze krijgen dan hun echte formaat van 230x230px); en worden telkens vanuit het midden verschoven.
  • Met de positions heb ik als volgt gescharreld: oorspronkelijk hadden de <a>'s in de #wrapper een {position:relative;} om de {left:-60px;} en {bottom:-60px;} in het absoluut gepositioneerde hover-plaatje mogelijk te maken. Die heb ik weggelaten. Om nu toch de hovers op hun plek t.o.v. het kleine plaatje te krijgen, heb ik ze wel absoluut laten zijn, maar nu een {margin-left:-60px;} en een {margin-top=-60px;} gebruikt. Even een z-indexje erbij, en IE7 kan zich niet meer verstoppen achter de andere plaatjes. :)
  • (IE7 kon de z-indexen niet zien als de <a>'s relatief waren)(meestal moet je op de wildste plaatsen {position:relative;} erbij zetten om IE aan het werk te krijgen, maar hier dus net het omgekeerde!).
  • O ja, alle <div>'s konden ook nog gemist worden, dacht ik. En Doctype kon wel Strict worden.
  • Kaal hoor, die code. ;)
  • Wat vind jij ervan, Goeroeboeroe? - Ik heb her en der nog wat transparante gif'jes en zo geprobeerd voor IE6, maar dat is me niet gelukt.
Met vriendelijke groet,
CSShunter

PS:
Op 'm in een tabel te proppen, kan je de cel waar ie in moet de id="wrapper" geven (inderdaad, dat kan gewoon), en de margins van de #wrapper weglaten:
Code:
#wrapper {
	width: 725px; /* wat speling voor IE6 */
}
Dat zou 't moeten doen, hoop ik.
 
Ik had eerder kunnen reageren, ware het niet dat ik even tijd nodig had om de helft van m'n haren uit te trekken. Heb haast 'n uur met IE 6 gestoeid, die echt op geen enkele verandering reageerde. Bleek ik dus niet het bestand in m'n computer geopend te hebben, maar op developerscorner. Ik stel voor dat we hier nooit meer over praten.
(Ik begreep werkelijk niet waarom dat kreng echt op geen enkele verandering reageerde. Gelukkig kan ik ook om m'n eigen stommiteiten lachen, anders was ik nu hevig ongelukkig, grinnik.)

Volgens mij is dit perfect. En ik heb 't dan weer werkend gekregen in IE 6.
HTML:
<!--[if IE 6]>
	<style type="text/css">
		div#wrapper a:hover {overflow: visible;}
	</style>
<![endif]-->
Die doorzichtige background-image is soms nodig. Hoewel ik me dat inmiddels afvraag. Ik denk: laat ik 't 'ns proberen zonder, met alleen bovenstaande. En dat doet 't 'm. 't Slaat echt helemaal nergens op, want dit is de standaard-instelling, en er staat nergens iets anders over overlfow, maar 't kreng heeft dit dus kennelijk nodig. Vraag me niet waarom.
Dan werkt 't prima in álle browsers.

Maar hoe je dit moet inbouwen in Dreamweaver, daar heb ik werkelijk geen idee van.
Chocomuffin (meest prachtige nicks kom je toch tegen): op zich is dit niet moeilijk. Het is css die alleen werkt voor IE 6. In het bestand van csshunter staat css tussen <style type="text/css"> en </style>
Onder de </style> zet je wat hierboven staat neer. Dat is 'n stukje, dat dan alleen voor IE 6 werkt. Alleen: hoe dat in Dreamweaver moet, geen idee dus.

Er is één ding dat me nog niet lekker zit, hoewel 't hier niet uitmaakt. De afbeeldingen worden nu allemaal geladen, in één keer. Dat is hier niet zo erg, omdat het om kleine afbeeldingen gaat. En de thumbs zijn niet veel kleiner dan de grote afbeeldigen. Maar als je 'n afbeelding als achtergrond-afbeelding opneemt in de css, wordt hij dus pas geladen als het nodig is. Dus pas bij hoveren over de bijbehorende thumb. Ik heb daar tamelijk veel gebruik van gemaakt bij slideshows, omdat 't veel bandbreedte scheelt.

Edit: ik wil dit opnemen als handleiding. csshunter, jij hebt weer doorgeborduurd op wat ik heb gedaan, en ik heb 't weer in IE 6 werkend gekregen. 't Zal nog wel even duren voor 't zover is, maar is 't goed als ik 't opneem met vermelding dat jij de oplossing hebt gevonden toen ik vastliep, of zoiets?
En zo ja, hoe moet ik je dan vermelden?
Dan kan ik ook nog 'ns kijken of 't niet toch als achtergrond-afbeelding kan. Maar anders is dit ook goed.
 
Laatst bewerkt:
Ha, zo wordt het een mooi bouwwerkje. :D
Even vlug, want het wordt de hóóógste tijd:
  • Ik wist dat er iets was voor IE6, maar even te lui dat op te snorren.
  • De {overflow: visible;} kende ik niet, die is heel aardig. :)
  • Intussen luiheid overwonnen, en uit het css-hover voorbeeldje gehaald: een {background-position: 0 0;} werkt ook voor IE6 (terwijl er helemaal geen background-img is). Die heeft geen Conditional Comment nodig, want niet schadelijk voor de rest.
  • Indertijd eerlijk gevonden, met uitleg, bij Ingo Chao: www.satzansatz.de/cssd/pseudocss.html#hover
Hiermee een nieuwe testpagina gemaakt:
Er is één ding dat me nog niet lekker zit, hoewel 't hier niet uitmaakt. ... als je 'n afbeelding als achtergrond-afbeelding opneemt in de css, wordt hij pas geladen als het nodig is.
Ja, zat ik ook aan te denken voor als het grote hover-plaatjes mochten zijn (die dan wel naast de kleintjes moeten komen, anders kan je niet bij de kleintjes komen ;) ).
Een pre-publicabele versie heb ik al aangemaakt (hier begon ik mee, maar achtergelaten toen ik op het recycle-idee kwam), moet nog even gefatsoeneerd worden.

Wordt vervolgd!
Met vriendelijke groet,
CSShunter.
 
Laatst bewerkt:
Het lukt mij echt met geen mogelijkheid om dit werkend te krijgen in een tabel. :( Misschien ben ik er gewoon te dom voor.

@csshunter: ik zou wel graag willen dat de grote en de kleine afbeelding aparte bestanden zijn, bij mijn foto's zie ik namelijk wel een kwaliteitsverschil (en ik zit er ook aan te denken om bij de grote foto's extra info onder het plaatje (op het plaatje zelf) te plaatsen.
 
Dan is hier mijn dubbelplaatjes-versie, die het ook in IE6 doet:
Maar nu ik dit instuur, bedenk ik dat het wel gebruikt maakt van achtergrond-afbeeldingen, alleen niet voor de hovers. De achtergrond-afbeeldingen zijn de thumbnails, en die komen er dus allemaal tegelijk in als de pagina op het scherm komt. De grotere zijn er nog steeds als (eerst onzichtbare) voorgrond-afbeeldingen.
Daardoor is het hover-voordeel waar Goeroeboeroe van spreekt, niet bereikt!

Ergo: ik ga weer terug naar het origineel van Goeroeboeroe's oplossing, om te kijken of ik nog wat kunst- & vliegwerk kan verzinnen voor IE6 en IE7. Want als die twee ook werken is dat de beste (snelste) oplossing voor als de thumbnails verschillen van de vergrotingen. :)

Als ik wat heb, geef ik wel een brulletje.
Met vriendelijke groet,
CSShunter

*)
Om IE6 het te laten doen, is het {display:none/block} vervangen door een buiten beeld plaatsen met een margin-left van -9999px. Het img is toch al absoluut, dus dat kan mooi in één moeite door. :)
 
Laatst bewerkt:
Ik kom er helaas op het moment niet aan toe. Dus ik wens je veel plezier :D
Persoonlijk lijkt het me geen enkel punt als IE 6 alles in één keer laadt. 't Is al mooi als het zou werken. Ik bedoel: particulieren moeten onderhand de mobiele eenheid inschakelen om IE 8 buiten de deur te houden, en incompetente systeembeheerders bij bedrijven, tja, die hebben pech.
 
Yep, veel plezier gehad. :D
Wat ik allemaal tegenkwam bij onze IE's ... :shocked:
Maar ik geloof dat ik ze nu te grazen heb:
Halverwege kreeg ik even een kleine rolberoerte: een "peekabo" *) ... in Opera10. Oef! Maar dat bleek gelukkig ook op te lossen (zie broncode).
In IE6 bleek het {display:none} steeds resten van het hover-oppervlak na te laten (de {display:block} na de hover deed het met geen mogelijkheid), dus die maar de negatieve margin-left buitenboord-valler toegediend voor de niet-hover, zodat daar een {display:inline} voor toegepast kan worden en je er geen last van hebt.

Met vriendelijke groet,
CSShunter

*) Voor wie dit jargon (peekaboo = kiekeboe) niet kent: het ongevraagd verschuiven van de hele pagina-layout bij een hover over een link, een erg gangbare bug in Internet Explorer 6 en eerder.
 
Complimenten! 't Werkt in alle browsers, inclusief zoomen en andere lettergrootte.
Ach, en dat IE 6 dat alles al laadt... 't Gaat om bruidsmode, als ik 't goed zie. De meeste mensen die gaan trouwen zijn iets jonger. Dus die hebben toch geen IE 6 meer.
(Ja, ik heb soms 'n lekker simpel wereldbeeld.)
Ik weet hoeveel experimenteren en zo erin is gaan zitten, maar als 't dan af is ziet 't er heel simpel uit.
@chocomuffin: dat heeft niets met dom te maken. csshunter en ik hebben allebei jáááren ervaring. En dan zit ik dus ook nog 'n uur lang aan 'n site op internet te werken, in plaats van in m'n eigen computer, en begrijp niet waarom 't ding nergens op reageert. Over dom gesproken :D
In principe is dit goed in te bouwen in 'n gewone pagina, dus dat zou moeten lukken, als je het wilt gebruiken. In principe moet het ook niet al te moeilijk zijn hier onderschriften aan toe te voegen. Denk ik. 't Moeilijke deel is nu door csshunter gedaan.
 
Laatst bewerkt:
Als ik een pagina maak met een simpele layout en dan de afbeeldingen in een tabel zet, lukt het me wel. Maar in mijn layout doet ie hele rare dingen, zie afbeelding (dit is de linkerbovenhoek van de site):

printscreens.jpg


Dan laat ie de afbeelding helemaal in de hoek zien, en bovendien ook dubbel (en niet eens het gehele plaatje?). Enig idee of dit makkelijk op te lossen is? Als het niet zo simpel is laat ik het hierbij zitten.
 
Hoi Chocomuffin (waarom krijg ik toch zo'n trek in iets lekkers? ;) ),

Als blinde diagnose (zonder online-pagina, zonder html en zonder css is het maar gokken):
  • Er is waarschijnlijk iets mis met de css.
  • Het lijkt alsof het grote plaatje iets te groot is, in combinatie met een andere instelling dan {background-position: 0 0;}. Misschien iets als {background-position: 100 100;} dan gaat het plaatje links-rechts en omhoog-omlaag verschuiven. Omdat het plaatje precies in zijn kadertje hoort te vallen, maar dat nu niet doet, wordt de achtergrond voortgezet: er komt nog zo'n plaatje naast en/of boven; net zo lang totdat de hele box is opgevuld.
  • Het naar de linkerbovenhoek drijven heeft vrijwel zeker iets met de css te maken: ik denk dat ofwel in de class- of id-namen een foutje is geslopen, ofwel dat er een ander "hoger" element met tegenstrijdige voorschriften in de weg zit.
of dit makkelijk op te lossen is?
In principe wel, maar ook dat hangt helemaal van de rest de code af.
En die kunnen we hier niet zien. :eek:
Dus mocht je meer willen weten, dan graag een link of alle html en css-code: "dan kunnen we van de feiten uitgaan". ;)

Met vriendelijke groet,
CSShunter

PS: weten jullie wat óók dom is? Hevig in een stylesheet aan het rommelen zijn, en totaal geen effect zien omdat je in de head van de pagina naar de vorige versie linkt. En dan de html ingrijpend gaan veranderen, en alle vorige versies weggooien omdat 't toch niet werkt. :D
 
Ja, zoiets doms heb ik nog nooit gedaan :D
De laatste: zo'n duizend keer tabindex gebruiken en geen nummers vrijlaten. En dan in 't begin er eentje tussen moeten zetten. Doe je maar één keer...
 
Laatst bewerkt:
Dit is de code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/JavaScript" src="../java.js"></script>
<link href="../stijlblad.css" rel="stylesheet" type="text/css" />

    <style type="text/css"> 
html {
	height: 101%;
	}
#wrapper {
	width: 725px;         /* wat speling voor IE6 */
	margin: 0px auto 0;
	padding-bottom: 2px;  /* wat speling voor IE7 */
	overflow: hidden;     /* tegen peekaboo bij Opera! */
	}
#wrapper a {
	float: left; 
	width: 110px;
	height: 110px;
	margin: 0 8px 8px 0;
	}
#wrapper img {
	width: 110px;
	height: 110px;
	border: 1px solid white;
	}
#wrapper span {
	position: absolute; 
	width: 230px; 
	height: 230px; 
	margin-top: -180px; 
	margin-left: -60px; 
	border: 1px solid white;
	display: none;
	}
#wrapper a:hover {
	background-position: 0 0; /* voor IE, zie: www.satzansatz.de/cssd/pseudocss.html#hover */
	}
#im001:hover span, #im002:hover span, #im003:hover span, 
#im004:hover span, #im005:hover span, #im006:hover span, 
#im007:hover span, #im008:hover span, #im009:hover span, 
#im010:hover span, #im011:hover span, #im012:hover span, 
#im013:hover span, #im014:hover span, #im015:hover span { 
	display: block;
	}
#im001:hover span { background: url(dresses/dress1.jpg); }
#im002:hover span { background: url(dresses/dress2.jpg); }
#im003:hover span { background: url(dresses/dress1.jpg); }
#im004:hover span { background: url(dresses/dress2.jpg); }
#im005:hover span { background: url(dresses/dress1.jpg); }
#im006:hover span { background: url(dresses/dress2.jpg); }
#im007:hover span { background: url(dresses/dress1.jpg); }
#im008:hover span { background: url(dresses/dress2.jpg); }
#im009:hover span { background: url(dresses/dress1.jpg); }
#im010:hover span { background: url(dresses/dress2.jpg); }
#im011:hover span { background: url(dresses/dress1.jpg); }
#im012:hover span { background: url(dresses/dress2.jpg); }
#im013:hover span { background: url(dresses/dress1.jpg); }
#im014:hover span { background: url(dresses/dress2.jpg); }
#im015:hover span { background: url(dresses/dress1.jpg); }
 
#link {
	clear: both; 
	text-align: center;
	}
.link-kleur {
	color: blue;
	margin-left: .3em;
	padding: 2px;
	}
</style>
 
<!--[if lte IE 7]>
	<style type="text/css">
	#wrapper span {
		margin-top: -60px;
		}
	#wrapper a:hover span {
		margin-left: -180px;
		}
	</style>
<![endif]-->
 
<!--[if IE 6]>
	<style type="text/css">
	#wrapper span {
		margin-left: -9999px; 
		display: inline;
		}
	</style>
<![endif]-->

</head>

<body style="margin:0">
<table width="726" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="ede9ef">
    <td width="63">&nbsp;</td>
    <td width="120">&nbsp;</td>
    <td colspan="3"><table width="360" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="91">&nbsp;</td>
        <td width="30" align="center" class="grijs"><a href="pagina 1">1</a></td>
        <td width="30" align="center" class="grijs"><a href="pagina 2">2</a></td>
        <td width="30" align="center" class="grijs"><a href="pagina 3">3</a></td>
        <td width="88" align="center" class="grijs"><a href="volgende pagina">volgende &gt;</a></td>
        <td width="91">&nbsp;</td>
      </tr>
    </table></td>
    <td width="120">&nbsp;</td>
    <td width="63">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td width="120">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="120">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="120">&nbsp;</td>
    <td align="center" valign="middle"><a id="im001" href="http://www.google.com" target="_blank"><img src="../dresses/dress1k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im002" href="http://www.google.com" target="_blank"><img src="../dresses/dress2k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im003" href="http://www.google.com" target="_blank"><img src="../dresses/dress1k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im004" href="http://www.google.com" target="_blank"><img src="../dresses/dress2k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im005" href="http://www.google.com" target="_blank"><img src="../dresses/dress1k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="120">&nbsp;</td>
    <td align="center" valign="middle"><a id="im006" href="http://www.google.com" target="_blank"><img src="../dresses/dress2k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im007" href="http://www.google.com" target="_blank"><img src="../dresses/dress1k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im008" href="http://www.google.com" target="_blank"><img src="../dresses/dress2k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im009" href="http://www.google.com" target="_blank"><img src="../dresses/dress1k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im010" href="http://www.google.com" target="_blank"><img src="../dresses/dress2k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="120">&nbsp;</td>
    <td align="center" valign="middle"><a id="im011" href="http://www.google.com" target="_blank"><img src="../dresses/dress1k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im012" href="http://www.google.com" target="_blank"><img src="../dresses/dress2k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im013" href="http://www.google.com" target="_blank"><img src="../dresses/dress1k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im014" href="http://www.google.com" target="_blank"><img src="../dresses/dress2k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td align="center" valign="middle"><a id="im015" href="http://www.google.com" target="_blank"><img src="../dresses/dress1k.jpg" alt="description" width="110" height="110" border="0" class="border" /><span></span></a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="ede9ef">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan="3"><table width="360" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="91">&nbsp;</td>
        <td width="30" align="center" class="grijs"><a href="pagina 1">1</a></td>
        <td width="30" align="center" class="grijs"><a href="pagina 2">2</a></td>
        <td width="30" align="center" class="grijs"><a href="pagina 3">3</a></td>
        <td width="88" align="center" class="grijs"><a href="volgende pagina">volgende &gt;</a></td>
        <td width="91">&nbsp;</td>
      </tr>
    </table></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Misschien dat ik te veel van de code gebruik? (omdat ik de afbeeldingen nu zelf in een tabel heb gezet) Zou het daardoor kunnen komen?

Ik heb overigens ook geprobeerd om de background position te veranderen naar 100 100, maar dat helpt niet.
 
Ik denk dat ik al weet waar de fout zit, ben namelijk die <div id="wrapper"> vergeten. Maar waar moet ik dat precies zetten? Als ik die id aan de tabel of een cel geef, krijgt het hele rare verhoudingen.
 
In principe zou de #wrapper als ID aan de <table> meegegeven moeten worden.
Maar dan wordt het resultaat (met rode lijntjes voor de cellen in de <table>, en paarse lijntjes voor de cellen in de <tables>'s binnen de <table> (!) :rolleyes:):
Let ook op de verschillen in weergave bij Internet Explorer (7) en Firefox, Opera, enz.!
Dat komt omdat in mijn modelletje met 6-op-en-rij alles keurig was verpakt in table-loze html met de styles in css, en:
  • er nu tabellen/cellen ten tonele zijn verschenen,
  • die tabellen/cellen in de html eigen breedtes hebben gekregen,
  • die zich niet alles aantrekken van de css (d.w.z. dezelfde css),
  • en er nu ook 5 afbeeldingen op een rijtje staan i.p.v. de 6 uit het voorbeeld dat je opgaf.
Maar voordat we ons over bijschuieren van de tabellen gaan buigen even een vraag:
  • Waarom voldoet mijn werkende versie-zonder-tabellen niet? Wat is je dringende reden om persé tabellen te gaan gebruiken?
Met vriendelijke groet,
CSShunter

PS-1:
O, in je code staat ook nog een link naar een apart stylesheet:
HTML:
<link href="../stijlblad.css" rel="stylesheet" type="text/css" />
Die heb ik in mijn testvoorbeeld buiten werking gesteld, omdat ik er van uitging dat de styles in de <head> dezelfde / de enige waren.

Maar misschien is dat wel helemaal niet zo, en bestaat er óók nog dat stijlblad.css. - Dat kan dan de hele zaak veranderen!
Want dan gaan de styles in de <head> opereren binnen de style-instructies van het stijlblad (en ze soms overrulen), wat fantastische effecten kan geven. :)

Dus: is er nog een apart stijlblad.css met iets anders? En zo ja, dan graag ook even hier posten: dan kan het plaatje compleet gemaakt worden en hebben we het over hetzelfde.

PS-2:
O, en voor het aangehaakte javascript geldt hetzelfde:
HTML:
<script type="text/JavaScript" src="../java.js"></script>
Doet dat ook nog iets bijzonders, dat op de opmaak van de pagina invloed heeft?
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan