Hover over foto in cel van scrollable table

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Hallo,
Onderstaande code geeft een tabel met in elke cel van kolom 1, een kleine foto.
Zodra de muis op de foto komt (hover) wordt die foto vergroot getoond, niet IN de cel maar 'erbuiten'. Tot zover prima.
Echter: een vergrote foto komt steeds lager te staan op het scherm als een 'lagere foto' wordt gehoverd.
Op en gegeven moment raakt de vergrote foto dus buiten beeld.

Hoe krijg ik het voor elkaar dat een op deze manier vergrote foto in beeld blijft en liefst op dezelfde plaats op het scherm?
Bvd en Mvg
@ndré
=============



<!doctype html>
<html lang="nl">
<style>
.details {
position: relative;
}

.details span {
position: absolute;
top: 0;
transform: translateY(70%);
display: none;
background: white;
z-index: 20;
min-width: 100%;
padding: 1rem;
border: 1px solid black;
}

.details:hover span {
display: inline;
}

td {
padding: 1rem;
background: whitesmoke;
border: 1px solid black;
}
</style>

<table>
<tr>
<td class='details'>
<img src='foto1.jpg' width="40px" height="40px">
<span><img src='foto1.jpg'></span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td class='details'>
<img src='foto2.jpg' width="40px" height="40px">
<span><img src='foto2.jpg'></span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td class='details'>
<img src='foto3.jpg' width="40px" height="40px">
<span><img src='foto3.jpg'></span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td class='details'>
<img src='foto4.jpg' width="40px" height="40px">
<span><img src='foto4.jpg'></span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td class='details'>
<img src='foto5.jpg' width="40px" height="40px">
<span><img src='foto5.jpg'></span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>

</table>
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

Hoi,
Toevallig heb ik alweer snel tijd, dus vandaar 'n snel antwoord. Maar de rest van de dag ben ik bezig, dus dan kan 't even duren.
Een <img> is een inline-element, net zoals tekst. (Het heeft wat bijzondere eigenschappen, maar in wezen is het gewoon hetzelfde als 'n woord.)
De <span> is absoluut gepositioneerd. Een <span> is een inline-element, maar door het absoluut te positioneren verandert het in 'n soort blok-element. Als je geen top of left e.d. opgeeft, wordt het op de 'gewone' plaats neergezet.
Als je dus hovert over die <img> en de <span> met de <img> wordt zichtbaar, komen ze netjes op dezelfde regel te staan, want dat is de 'gewone' plaats voor de absoluut gepositioneerde <span>.
Behalve dat je met transform: translateY(70%) aangeeft, dat de <span> (en dus de <img> daarin) 70% van z'n eigen hoogte naar beneden wordt verplaats. Als je dat weghaalt, staat de grote afbeelding op dezelfde hoogte als de kleine.

Dat wil zeggen: hij staat íéts lager. Omdat een <img> hetzelfde wordt behandeld als tekst, zit er onder de afbeelding wat ruimte voor letters als de g en de j. De <span> is veranderd in een blok-element, en komt standaard op die iets lagere hoogte te staan. Als je in plaats van display: inline bij hoveren display: block gebruikt, komt het op precies dezelfde hoogte te staan (position: absolute bij de <span> verandert het niet in een écht blok-element, het blijft wat anders werken. Hoe precies anders weet ik ook niet uit m'n hoofd, dat soort dingen zijn simpeler uit te proberen dan het helemaal te 'leren'.)

Wat je ook kunt doen:

Code: Selecteer alles

.details span {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	background: white; z-index: 20;
	min-width: 100%;
	padding: 1rem;
	border: 1px solid black;
}
details:hover span {display: block;}
Bij .details span staat nu top: 50%;. Het wordt gepositioneerd ten opzichte van .details (want die heeft position: relative;). Oftewel: halverwege de hoogte van .details.
transform: translateY(-50%); plaatst de <span> de helft van z'n eigen hoogte terug naar boven. Nu staat de grote foto altijd precies halverwege de kleine foto.
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Hoi,
De grote foto 'zakt' nog steeds iets lager als ik met de muis naar beneden ga over de foto's.
Op een gegeven moment staat niet meer de hele foto op het scherm zonder te scrollen.
Is het mogelijk dat de grote foto altijd op dezelfde plek - liefst in het midden - op het scherm komt.
Boven welke foto ik de muis ook hover, de grote foto komt steeds op dezelfde plaats. Kan dat?
mvg
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

Ja, dat is zelfs vrij simpel.
position: absolute; zorgt dat de <span> (met de <img> erin) ergens wordt neergezet.
De eerste voorouder met een andere position dan static (de standaardwaarde) is het punt, ten opzicht waarvan wordt gepositioneerd.
Als je nou bij .details position: relative; weghaalt, en dat bij table neerzet, dan wordt gepositioneerd ten opzichte van de tabel. En omdat alle afbeeldingen binnen die tabel zitten, komen ze dan allemaal op dezelfde plaats te staan.
Dus bij toevoegen tabel {position: relative;} en dat weghalen bij .details.

transform e.d. staan bij jou bij .details:hover span. Persoonlijk vind ik het duidelijker om de hele opmaak, voor zover dat kan, bij .details span neer te zetten, overzichtelijk bij elkaar. Maar dat hoeft niet, dat is 'n kwestie van voorkeur. Hoe dan ook, bij een van die twee regels voeg je dan toe:
top: 50%, left: 50%;.
Nu wordt de linkerbovenhoek van de <span> (en dus de <img>) in het midden van de tabel neergezet. Elke afbeelding komt nu daar te staan, ongeacht in welke <td> ze zitten.
Vervolgens nog toevoegen transform: translate(-50%, -50%);. Nu wordt de <span> de helft van z'n breedte naar links en de helft van z'n hoogte naar boven verplaatst en staat dus altijd exact in het midden van de tabel, ongeacht waar in de tabel de <span> staat.
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Wooooow....daar moet ik even over nadenken....veel informatie voor een css-amateurtje zoals ik....
Ik laat zsm weten of het is gelukt.
In elk geval alweer bedankt.
mvg
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Hoi,
het werkt wel en niet...
Dwz: van de eerste pagina komt een gehoverde foto netjes op dezelfde pagina, maar als ik scroll naar de volgende pagina van de tabel dan staan die gehoverde foto's óók op de vorige pagina, dus buiten beeld. Is daar nog iets aan t doen?

mvg
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

Hoi,

Ah, die tabel is langer dan die vijf rijen. (Je hebt het over 'pagina's', ik neem aan dat je daar schermen mee bedoelt.) Dan loop je weer tegen de eigenaardigheden van de tabel aan. Eén van die dingen: table trekt zich niets aan van hoogte.
Je hebt, denk ik, twee mogelijkheden.
1) Iets heel anders kiezen dan 'n tabel voor de weergave. Als je tabulaire gegevens in een tabel weergeeft, zal dat meestal goed gaan, want speciaal daarvoor is een tabel gemaakt. Maar zodra je met andere dingen gaat stoeien, kan dat (heel) lastig worden.
Je zou zoiets kunnen doen (even snel in elkaar getimmerd, dus let niet op details als hoogte en breedte):

Code: Selecteer alles

<!doctype html>
<html lang="nl">
<head>
	<title>test</title>
	<style>
		#buitenste {width: 300px; outline: red solid 3px; display: flex; flex-wrap: wrap; max-height: 80%			; overflow: auto;}
		#buitenste div {outline: green solid 1px; height: 75px; width: 25%; position: relative;}
		span {display: none;}
		#buitenste div:hover span {display: inline; position: absolute; top: 50%; left: 50%; transform: translateY(-50%);}
	</style>
</head>
<body>
	<div id="buitenste">
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" hHoi,

Ah, die tabel is langer dan die vijf rijen. (Je hebt het over 'pagina's', ik neem aan dat je daar schermen mee bedoelt.) Dan loop je weer tegen de eigenaardigheden van de tabel aan. Eén van die dingen: table trekt zich niets aan van hoogte. Ik ken trouwens lang niet alle eigenaardigheden van een tabel en alle onderdelen daarvan uit m'n hoofd, ik weet alleen dat je voortdurend tegen dit soort ongein aanloopt. Hoewel het voor het weergevan van echt tabulaire gegevens als kolommen met getallen dus meestal juist prima werkt.
Je hebt, denk ik, twee mogelijkheden.
1) Iets heel anders kiezen dan 'n tabel voor de weergave. Als je tabulaire gegevens in een tabel weergeeft, zal dat meestal goed gaan, want speciaal daarvoor is een tabel gemaakt. Maar zodra je met andere dingen gaat stoeien, kan dat (heel) lastig worden.
Je zou zoiets kunnen doen (even snel in elkaar getimmerd, dus let niet op de details):
[code]<!doctype html>
<html lang="nl">
<head>
	<title>test</title>
	<style>
		#buitenste {width: 300px; outline: red solid 3px; display: flex; flex-wrap: wrap; max-height: 80%			; overflow: auto;}
		#buitenste div {outline: green solid 1px; height: 75px; width: 25%; position: relative;}
		span {display: none;}
		#buitenste div:hover span {display: inline; position: absolute; top: 50%; left: 50%; transform: translateY(-50%);}
	</style>
</head>
<body>
	<div id="buitenste">
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
		<div>
			<img src="site/images/001-t.jpg" width="40px" height="40px">
			<span><img src="site/images/001.jpg" width="200" height="300"></span>
		</div>
		<div></div><div></div><div></div>
	</div>
</body>
</html>
De buitenste <div> heeft voor de duidelijkheid even 'n rode outline gekregen, de binnenste <div>'s 'n groene. De buitenste <div> is als het ware jouw tabel, de binnenste <div>'s zijn jouw <td>'s.
De buitenste <div> heeft display: flex; gekregen. Dat is iets tamelijk nieuws, maar uitermate handig voor lay-out. De directe kinderen van div#buitenste (de binnenste <div>'s) zijn nu 'flex items', waardoor ze zich op 'n bepaalde manier gaan gedragen. Dat is hier verder niet zo heel interessant. Bij div#buitenste staat ook nog flex-wrap: wrap;. Als je dat niet doet, worden alle flex items (alle binnenste <div>'s) naast elkaar gezet.

De binnenste <div>'s zijn met width: 25%; allemaal even breed gemaakt. Een breedte in procenten is normaal genomen altijd ten opzichte van de ouder, hier de buitenste <div>. Er passen er dus vier op één regel, de volgende gaan gewoon naar de volgende regel. De binnenste <div>'s hebben ook position: relative; gekregen. Eventuele absoluut gepositioneerde kinderen van 'n binnenste <div> worden nu absoluut gepositioneerd ten opzichte van die <div>'s.
Bij hoveren over een binnenste <div> wordt de <span> zichtbaar en gepositioneerd ten opzichte van de <div>, waar de <span> in zit. Al is dat de honderdste regel met <div>'s, de <span> met de afbeelding staat nog steeds op de hoogte van die <div>.
Als je het zo doet, omzeil je alle eigenaardigheden van een tabel. Als het niet echt om tabulaire gegevens gaat, zou ik hiervoor kiezen.


2)
* Verander bij #details span position: absolute; in position: fixed;. Nu worden de <span> gepositioneerd ten opzichte van het venster van de browser.
* Haal bij table position: relative; weg (is nu niet meer nodig)
* Haal bij #details span min-width: 100%; weg. Door position: fixed; werkt dit nu ten opzichte van het venster van de browser, dus de <span> wordt even breed als het venster.
* Om de foto's ongeveer op de jusite plaats te zetten, kun je dan bij #details span iets neerzetten als top: 50%; left: 10%; transform: translate(-50%, -50%);. Dat is even uitproberen, vooral in horizontale richting.
Maar dit heeft dus, vergeleken bij de oplossing met flexbox (het geheel van eigenschappen die met display: flex; te maken hebben) allerlei nadelen. Het is ingewikkelder, als de grootte van het venster verandert, veranderd de positie van de afbeelding, enz.

Tabellen stammen helemaal vanuit het allereerste begin van html. Vandaar dat ze waarschijnlijk zo geschikt zijn voor rijen en kolommen met cijfers en zo, maar 'n ramp voor de rest.

Op mijn pagina met links kun je trouwens allerlei handleidingen e.d. vinden over dingen als flexbox. Vroeger had je ook veel van dat soort dingen in het Nederlands, maar dat is - net als de meeste forums over het maken van sites e.d. - dankzij WordPress, Facebook, e.d. vrijwel verdwenen. Maar als je Engels goed genoeg is, en je wilt het niet allemaal zelf uitvinden, zou je daar 'ns kunnen kijken naar 'n goede tutorial over flexbox, of naar 'n goede cursus over de beginselen van css. (Die beginselen zijn eigenlijk helemaal niet zo ingewikkeld, het toepassen, dat maakt het ingewikkeld.)
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Hallo,

Tjonge wat is dat css lastig. Zoals je het uitlegt begrijp ik het, maar kom er zelf niet op!

ik heb jouw methode twee (standalone) geprobeerd en die werkt uitstekend!
Maar, je raadt het al: als ik dat toevoeg aan de bestaande css (combinatie zie hieronder) dan werkt het niet meer door wellicht een of ander css-conflict. Nu probeer ik het natuurlijk weer aan de gang te krijgen......

mvg
ps: ja, die tabel is minstens 1000 rijen...)
======




<style>
table.scroll {
width: 100%;
border-spacing: 0;
border: 2px solid black;
table-layout: fixed;
}

td {overflow-x: auto;}

th {position: sticky; top: 0; background-color: blue;}

tr:nth-of-type(odd) {background: white; border:lightblue;}
tr:nth-of-type(even) {background: lightblue; border:white;}

th:first-of-type, th:nth-of-type(2) , th:nth-of-type(3) {width: 3%;}

th:nth-of-type(4) {width: 3%;}

th:nth-of-type(5), th:nth-of-type(6), th:nth-of-type(7), th:nth-of-type(8) {width: 9%;}

th:nth-of-type(9) {width: 6%;}

th:nth-of-type(10) {width: 8%;}

th:nth-of-type(11) {width: 6%;}

th:nth-of-type(12), th:nth-of-type(13) {width: 10%;}

table.scroll tbody td, table.scroll thead th {
border-right: 1px solid white;
}

thead tr th {
line-height: 35px;
text-align: left;
}

table tbody td:last-child, table thead th:last-child {border-right: none;}

.ts { COLOR: white; FONT-FAMILY: verdana; FONT-WEIGHT: normal; FONT-SIZE: 12pt;}

.thumbnail:hover { position:relative; top:-25px; left:-35px; width:500px; height:auto; display:block; z-index:999;}


// toegevoegd methode 2:



//tabel {position: relative;}

.details span {
position: fixed;
//top: 0;
//transform: translateY(-10%);
display: none;
background: white;
z-index: 20;
//min-width: 100%;
padding: 1rem;
border: 1px solid black;
top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.details:hover span {
display: inline;
}

td {
padding: 1rem;
background: whitesmoke;
border: 1px solid black;
}
</style>
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

Hoi,
Even snel: om het te bekijken, heb ik echt de volledige code nodig. Dat wil zeggen de html (alle negen de kolommen, alle 1000 rijen hoeft niet..., maar 'n aantal. Of die kopieer ik er zelf wel even in). En de css. Ik zie nu bijvoorbeeld .thumbnails staan, maar die heb ik nog niet eerder gezien.
Als je daar lol in hebt (leer je ook heel veel van), zou je 'jouw' code stukje voor stukje aan 'mijn' code kunnen toevoegen. Eerst de css, en dan per eigenschap toevoegen. Dan zie je gelijk als iets begint te bijten. Daarna kun je dan de html stukje voor stukje gaan toevoegen.
Je kiest dus voor een tabel, begrijp ik, en niet voor <div>'s?

De grote lijnen van css zijn niet zo heel ingewikkeld, de details maken het zo ingewikkeld. Vaak denken mensen dat ze css na 'n paar uur wel kennen. Dat is ook min of meer zo, althans: dan weet je in ieder geval, waar je de info kunt vinden. Maar dan begint het dus pas, grinnik. Je had 'n aantal uitstekende Nederlandstalige cursussen, waar je de basis leerde kennen en kun zien dat er we degelijk orde in zit. Maar die zijn er niet meer, want vrijwel niemand doet het nog zelf.

Overigens is een tabel dus echt een van de meest ingewikkelde dingen, omdat dat helemaal in het begin in elkaar is getimmerd met heel veel uitzonderingen, en dat kan dus niet meer gewijzigd worden. Want dan zouden al die mooie tablellen van vroeger in elkaar donderen. <div>'s en <span>'s (bijvoorbeeld) zijn veel later ontstaan en werken al veel logischer en consistenter.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

Even 'n toevoeging hoe je die code makkelijk kunt krijgen. Als je in Firefox of Google Chrome op Control+U drukt, krijg je de code van de volledige pagina te zien. Omdat de php al op de server is omgezet naar html, is die code precies wat de browser gebruikt. Inclusief alle css in de <head> enz. (Dan ga ik er wel even vanuit dat de css nog in een <style> in de <head> staat.)
Als je dat kopieert, heb je precies wat ik nodig heb met 'n paar klikken. En precies zoals de browser het ook binnen krijgt.
(Als daar duizend rijen in zitten. kun je daar natuurlijk 'n fors aantal van verwijderen. Deze opmerking is waarschijnlijk overbodig, maar je wilt niet weten wat mensen op forums soms opstuurden, toen ik daar nog actief was...)
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Hoi,
Het heeft even geduurd maar hieronder het resultaat van de (niet correct werkende) CTRL/U uit Chrome.
Ik krijg het niet meer voor elkaar om de headerlijn stil te laten staan bij scrollen.
EN de cellen passen niet meer onder de headerlijn.
Wat wél werkt is dat de gehoverde foto's op dezelfde plek op het scherm komen.
De CSS zal nu teveel/te weinig/in conflict zijn, maar wat er nu weg of bij moet: geen idee.
JA, Ctrl/U is inderdaad handig. Kon vroeger ook met IE geloof ik (broncode bekijken oid).
Ik heb ooit een boek bij SitePoint gekocht mbt CSS (Designing without tables using CSS), maar misschien weet jij 'het perfecte boek om het te leren'?
Mag best Engels zijn, geen probleem.
Kun je hieronder iets mee?
mvg
===============================

<!doctype html>
<html lang="nl">
<style>

tabel {position: relative;}

.details span {
position: fixed;
//top: 0;
//transform: translateY(-10%);
display: none;
background: white;
z-index: 20;
//min-width: 100%;
padding: 1rem;
border: 1px solid black;
top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.details:hover span {
display: inline;
}

td {
padding: 1rem;
background: whitesmoke;
border: 1px solid black;
}






table.scroll {
width: 100%;
border-spacing: 0;
border: 2px solid black;
table-layout: fixed;
}
th {position: sticky; top: 0; background-color: lightblue;}

th:first-of-type, th:nth-of-type(2) , th:nth-of-type(3), th:nth-of-type(4) {width: 4%;}

th:nth-of-type(5), th:nth-of-type(6), th:nth-of-type(7), th:nth-of-type(8) {width: 9%;}

th:nth-of-type(9) {width: 6%;}

th:nth-of-type(10) {width: 8%;}

th:nth-of-type(11) {width: 6%;}

th:nth-of-type(12), th:nth-of-type(13) {width: 10%;}

//table.scroll thead tr {background-color: lightblue; }

table.scroll tbody td, table.scroll thead th {
border-right: 1px solid black;
border-bottom: 1px solid black;
}

thead tr th {
line-height: 35px;
text-align: left;
}

table tbody td:last-child, table thead th:last-child {border-right: none;}
</style>






<table class="scroll";>
<thead>
<tr>
<th>Nr</th>
<th>Wijzig</th>
<th>Bekijk</th>
<th>Verw</th>
<th>Wie</th>
<th>Wat</th>
<th>Waar</th>
<th>Waarom</th>
<th>OpnDatum</th>
<th>Opm OpnDat</th>
<th>ImpDatum</th>
<th>Pad</th>
<th>Beschr</th>
</tr>
</thead>
<table>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto1.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto2.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto3.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto4.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto5.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto6.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto7.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto8.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto9.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto10.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto11.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
<td class='details'>
<img src='foto12.jpg' width="40px" height="40px">
<span><img src='foto1.jpg' width="200" height="200"><span>
</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
<td>tekst</td>
</tr>
</table>
</html>
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

Ja, dit is wat ik bedoelde.
Boeken weet ik eigenlijk niet meer, want omdat het zo snel verandert, is een boek vaak alweer verouderd voor het is gedrukt.
Ik heb gisteren weer 'ns gekeken naar Nederlandstalige cursussen. De weinige gratis zijn of echt ongelooflijk oppervlakkig en slecht, of goed maar heel sterk verouderd (en dus ook waardeloos). Dan zijn er twee die allebei zo'n 1200 euro (!) kosten. Terwijl je op 'n cursus dus niet meer dan de basis kunt leren, hoe alles in elkaar grijpt, dat is nou net het lastige. Er was er ook nog eentje die geen prijs noemde, maar die had ook nog 'n betaalde cursus Kompozer. 'n Editor die al tien jaar niet meer wordt bijgewerkt. Als je het in je hoofd haalt om mensen te flessen met zo'n volstrekt nutteloze cursus, dan hoef ik de rest ook niet meer te zien.
(Overigens zijn er nog steeds wel zat goede artikelen over één of meer onderwerpen. Maar geen systematisch opgebouwde cursus. Althans: niet betaalbaar.)

Sitepoint is één van de betere uitgeverijen. Hetzelfde geldt voor O'Reilly. Je hebt nog wel wat grote uitgeverijen, maar deze twee zijn niet alleen maar 100% commercieel.
Maar wat je ook kunt doen: op m'n pagina met links staan bij
https://www.css-voorbeelden.nl/links.ht ... -overzicht (html)
en
https://www.css-voorbeelden.nl/links.ht ... -overzicht (css)
links naar kwalitatief (heel) goede cursussen, die gratis zijn. (Beide groepen overlappen elkaar natuurlijk enigszins.)
Dan ga ik nu 'ns stoeien met je code.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

De lay-out van de code is iets veranderd, maar dat is wat mijn editor ervan maakt. Maakt verder niets uit: spaties en tabs en zo worden genegeerd door de browser (behalve in tekst natuurlijk).

Op zich ziet de tabel er netjes uit, als ik hem op het scherm zet. Maar ik zie je probleem.

Als eerste heb ik de code gevalideerd. Dat leverde 15 fouten op en 51 waarschuwingen (een waarschuwing is een mogelijke fout, dat kan de validator niet beoordelen.) Een fout kan tot de vreemdste verschijnselen leiden, die ook niet in elke browser hetzelfde hoeven te zijn.
De fouten e.d.:
<table class="scroll";> moet zijn <table class="scroll">

<style> in <head> gezet. (En titel toegevoegd, want dat wil de validator)

Rest van de pagina in <body> gezet.

<head> en <body> zijn vreemd genoeg niet verplicht, maar het is vragen om problemen als je dat niet gebruikt.

In de css staat een aantal keer //. Ik neem aan dat dat is bedoeld om het in commentaar te veranderen, maar // is voor 'n regel JavaScript. css verander je in commentaar door het tussen /* en */ te zetten. Dat heb ik dus overal gedaan, waar // stond.

Overal ' veranderd in ". Dat hoeft niet, is gewoon 'n kwestie van voorkeur. Maar mijn programma geeft daar een waarschuwing, dus dat is wat verwarrend. Kun je gewoon zo laten, als je liever ' gebruikt. (Wel 'n goede gewoonte om altijd ' of " te gebruiken.)

Je afsluitende <span> heb je in het begin 'n aantal keer als <span> geschreven. Dat moet </span> zijn. Het niet afsluiten van 'n element kan volstrekt onvoorspelbare resultaten opleveren.

Inmiddels nog maar 13 waarschuwingen over, dat geeft hoop.

Er staat .details span {osition: fixed; ... Veranderd in position:fixed; Hierdoor bleven je kopjes niet stilstaan.

Onder je <thead> staat nog een <table>. Als je die weghaalt, heb je weer één tabel. Nu denkt de browser dat het er twee zijn en is de breedte van je kolommen anders dan de breedte van je kopjes.

Eigenlijk heb ik dus niet meer gedaan dan je code gevalideerd. Dat zit ingebouwd in elke goede editor, maar kun je ook online doen. Mensen hebben de neiging om fouten te missen, maar een validator mist nooit iets. Het is één van de eerste dingen die ik doe als er iets vreemds gebeurt. Zo'n <table> te veel, die zie je heel makkelijk over het hoofd. Dus dat kan ik je echt aanbevelen. Daarmee is het eigenlijk gelijk al opgelost, denk ik. Hieronder volgt de code:

Code: Selecteer alles

<!doctype html>
<html lang="nl">
<head>
	<title>test</title>
	<style>
		tabel {
			position: relative;
		}

		.details span {
			position: fixed;
			/*top: 0; transform: translateY(-10%); */
			display: none;
			background: white;
			z-index: 20;
			/*min-width: 100%;*/
			padding: 1rem;
			border: 1px solid black;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.details:hover span {
			display: inline;
		}

		td {
			padding: 1rem;
			background: whitesmoke;
			border: 1px solid black;
		}

		table.scroll {
			width: 100%;
			border-spacing: 0;
			border: 2px solid black;
			table-layout: fixed;
		}

		th {
			position: sticky;
			top: 0;
			background-color: lightblue;
		}

		th:first-of-type,
		th:nth-of-type(2),
		th:nth-of-type(3),
		th:nth-of-type(4) {
			width: 4%;
		}

		th:nth-of-type(5),
		th:nth-of-type(6),
		th:nth-of-type(7),
		th:nth-of-type(8) {
			width: 9%;
		}

		th:nth-of-type(9) {
			width: 6%;
		}

		th:nth-of-type(10) {
			width: 8%;
		}

		th:nth-of-type(11) {
			width: 6%;
		}

		th:nth-of-type(12),
		th:nth-of-type(13) {
			width: 10%;
		}

		/* table.scroll thead tr {background-color: lightblue; } */
		table.scroll tbody td,
		table.scroll thead th {
			border-right: 1px solid black;
			border-bottom: 1px solid black;
		}

		thead tr th {
			line-height: 35px;
			text-align: left;
		}

		table tbody td:last-child,
		table thead th:last-child {
			border-right: none;
		}
	</style>
</head>
<body>
	<table class="scroll">
		<thead>
			<tr>
				<th>Nr</th>
				<th>Wijzig</th>
				<th>Bekijk</th>
				<th>Verw</th>
				<th>Wie</th>
				<th>Wat</th>
				<th>Waar</th>
				<th>Waarom</th>
				<th>OpnDatum</th>
				<th>Opm OpnDat</th>
				<th>ImpDatum</th>
				<th>Pad</th>
				<th>Beschr</th>
			</tr>
		</thead>
		<!-- <table> -->
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto1.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto2.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto3.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto4.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto5.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto6.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto7.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto8.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto9.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto10.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto11.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span>
			</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
		<tr>
			<td>tekst</td>
			<td>tekst</td>
			<td class="details"><img src="foto12.jpg" width="40px" height="40px"><span><img src="foto1.jpg" width="200" height="200"></span></td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
			<td>tekst</td>
		</tr>
	</table>
</body>
</html>
P.S. nog even over boeken e.d. Bij die cursussen zit een aantal, waarbij je online de css kunt veranderen. Dat geeft een heel goed beeld van het effect van iets. Maar wat je ligt, moet je natuurlijk zelf beoordelen. De een leest graag 'n boek van voor naar achter, de ander doet het liever per onderdeel.
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Hallo,
ik heb je css als 'external css' ingevoerd en het werkt uitstekend!

De volgende twee rules wil ik voor de duidelijkheid nog aan de css toevoegen zodat regels om-en-om een andere achtergrondkleur krijgen:

tr:nth-of-type(odd) {background: white; border:lightblue;}
tr:nth-of-type(even) {background: lightblue; border:white;}

en de vraag is natuurlijk: waar kan ik dit het beste invoegen?

In elk geval zeer, zeer bedankt voor je hulp. Fijn te weten dat er zo'n deskundige klaar staat om te helpen: goed en snel.
Fantastisch!

mvg
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

Bloos, bloos, dank je.
Die regels kun je gewoon overal in de css neerzetten. Omdat er verder nergens 'n achtergrondkleur wordt opgegeven voor deze elementen, maakt de plaats niets uit (latere regels overrulen het niet, want die zijn er niet).
Persoonlijk houd ik altijd zoveel mogelijk dezelfde volgorde als de html aan in de css, maar dat is een persoonlijk voorkeur.
Leuk dat het gelukt is!
(Hoop ik alleen maar dat het tabel is met enge dingen :D
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Hallo,
nee hoor, blozen is niet nodig.
Ik had die twee regels van het vorige bericht al in de css gezet, gewoon onderaan toegevoegd.
Maar helaas geen enkel effect. Addertje in de css....?

(Ctrl/U werkt niet als er frames (ja, die zijn er nu eenmaal) worden gebruikt.
Wat je dan te zien krijgt is de indeling van de frames ipv css).

mvg
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

Dat is het probleem met frames, en daarom mogen ze ook niet meer worden gebruikt in html5 (wat niet wil zeggen dat ze niet werken). De pagina bestaat uit totaal loshangende delen, waarin geen enkel verband zit. Elk frame staat volledig op zichzelf. Voor zoekmachines is dat bijzonder nadelig voor je positie, want die kunnen er geen chocola van maken. En ook schermlezers e.d. kunnen er niet mee uit de voeten.
Die tabel die je via php invoegt is geen enkel probleem, want dat wordt op de server gedaan en is dus één pagina voor de browser.

Goed, de kleurtjes. De browser doet precies wat jij wilt: een witte achtergrond. Je hebt namelijk eerder aangegeven bij td {background: whitesmoke;}. In de html staat de td na de tr. Bovendien staat een <td> per definitie over een <tr> heen, anders zou je de inhoud van de <td> niet kunnen zien. Die witte achtergrond bij de td 'wint' dus van de achtergrond bij de <tr>. Als je background: whitesmoke; weghaalt bij td, werkt het.
De background: white; bij de eerste tr:nth-of-type(odd) kan trouwens weg, want dat is die uit zichzelf al.

De borders is een ander verhaal. Je kunt bij een <tr> alleen een border geven, als je bij table {border-collapse: collapse;} opgeeft. (Moest ik ook opzoeken, 'n tabel stikt echt van de uitzonderingen).
Maar dan werkt het nog niet goed.
Bij table.scroll tbody td, table.scroll thead th en bij td geef je ook borders op voor de <td>'s. Die botsen met de borders bij de <tr>, ze 'winnen' weer. Verder moet je in de css altijd (anders dan bij de html voor een tabel, maar css is (gelukkig) veel consequenter dan die prehistorische tabel) áltijd stijl en kleur opgeven bij een border. Breedte hoeft niet, maar dan wordt dat standaard 2 px. Dus bij de <tr>'s moet je opgeven:

Code: Selecteer alles

tr:nth-of-type(odd) {border: solid lightblue 1px;}
tr:nth-of-type(even) {background: lightblue; border:solid white 1px;}
En nu werkt het nog niet (ja, jij wilde 'n tabel, grinnik). De border bij de <tr>'s is er nu wel, maar je ziet 'm niet, omdat de borders bij de <td>'s nog steeds winnen.
Als je dit even verandert in

Code: Selecteer alles

tr:nth-of-type(odd) {border: solid red 3px;}
tr:nth-of-type(even) {background: lightblue; border:solid green 3px;}
dan zie je gelijk, wat er gebeurt. Nu zijn de borders wel zichtbaar, omdat ze nu 2 px breder zijn dan die bij de <td>'s. En door de kleur vallen ze nu goed op. Je ziet dan gelijk een ander mogelijk probleem: de horizontale borders vallen over elkaar heen: één kleur wint steeds. Bovendien is de border nu 2 px breed.
Persoonlijk denk ik trouwens dat 'n gewone zwarte border ruim voldoende is. De achtergrondkleur zorgt er al voor dat mensen makkelijk de regel kunen volgen. Als je 'n afwisselende horizontale border wilt, moet je eindeloos gaan experimenteren (vanwege de eigenaardigheden van een tabel). Je moet dan bij de <td>'s de horizontale borders weghalen, en dan zou je bij de even <tr>'s iets als border-bottom: red solid 1px; en bij de oneven border-bottom: green solid 1px; kunnen proberen. Maar ook dan weet ik niet uit m'n hoofd, of dat gaat lukken. Vanwege alle vreemde dingen bij een tabel.
Als je toch 'n afwisselende horizontale border tussen de rijen wilt, wil ik daar best nog 'ns naar kijken. Moet je even laten weten, en dan exact hoe dat moet. Dus onder de eerste rij rood, onder de tweede groen, onder de derde weer rood, enz. Maar ik zou het zelf gewoon zo laten, met een zwarte border.
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Ja hoor, als een tierelier............ prachtig......

Nu nog even de horizontale scrollbalk weg want die is niet nodig. De tabel is een millimetertje te breed anders zou die balk er niet zijn.....
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Hover over foto in cel van scrollable table

Bericht door Goeroeboeroe »

Ik zie geen horizontale scrollbalk. Maar ook al is iets maar 1 px te breed, dan krijg je die al. En door afronden en zo geven verschillende (versies van) verschillende browsers op verschillende systemen met verschillende groottes van schermen en verschillende resoluties nog wel 'ns 'n verschil van 1 px. (Met zo'n vage omschrijving zou ik toch zo in de politiek kunnen gaan, grinnik.)

Wat je kunt proberen (dit soort verschillen zijn nooit eenduidig op te lossen, dus gewoon proberen):
bij table.scroll width: 100% veranderen in width: 99%; Of 99.5%. Of 99.2%. Even uitproberen. Dat kan net die ene pixel te veel voorkomen. (En als die balk dan weg is, nog 0,2% extra versmallen, voor als iemand anders weer 'n ander scherm heeft.)

Of:
Bij table.scroll toevoegen: box-sizing: border-box;
Standaard wordt een border bij de breedte opgeteld. Bij jou is dat bij de tabel dus 2 px + 100% + 2 px. Door bovenstaande regel worden border (en padding) niet meer bij de breedte opgeteld, dus 100% blijft 100%. (Bij mij gaat het goed, maar omdat een tabel zo uitzonderlijk is, zou het kunnen dat bij jou die border er bij wordt opgeteld, en bij mij niet. Als de specificatie dat soort details niet exact vastlegt, kunnen er verschillen tussen browsers ontstaan.)

Toevoegen:
body {overflow-x: hidden;}
Deze is echt 'n soort noodrem, want nu ga je dus content verliezen. Zeker als mensen de lettergrootte verhogen.

De eerste oplossing is waarschijnlijk het best: gewoon de hele tabel iets smaller maken.
amjjanssen
Berichten: 20
Lid geworden op: do 21 jan 2021, 10:24

Re: Hover over foto in cel van scrollable table

Bericht door amjjanssen »

Hallo,
hoe ik de |table.scroll width: 100%| ook wijzig, er verandert niets. Al maak ik van de 100% zelfs 10%, er verandert niets: de horizontale scrollbalk blijft, maar het scheelt slechts een millimetertje. Nou ja, zo erg is het nou ook weer niet. Jammer, want hij is niet nodig.

Dank voor je uitzonderlijk goede hulp!
mvg
Plaats reactie