CSS, kader + hover?

Status
Niet open voor verdere reacties.

PiesDescalzos

Gebruiker
Lid geworden
1 mrt 2007
Berichten
75
Hallo,

Ik kom net kijken in het wereldje van websites maken, maar ik moet een website maken voor m'n opleiding en het is erg leuk werk, alleen ik ben een beetje vastgelopen.
Ik heb namelijk een afbeelding met daaromheen een kader, en tussen het kader en de afbeelding zit ruimte. In CSS ziet het er zo uit:

#afbeelding1 {
position:absolute;
top:150px;
height:190px;
width:240px;
border:1px solid black;
padding:12px;
padding-bottom:44px}

Nu wil ik graag dat het kader rood wordt, wanneer men er met de muis over gaat. Ik dacht dat het er ongeveer zo uit moest zien, maar het werkt niet :

#afbeelding1:hover img{border:1px solid red;}

Ziet iemand de fout? Als jullie meer info nodig hebben, dan geef ik die graag.

Groetjes,
P D
 
img weghalen dan zou het moeten werken, #afbeelding1:hover{border:solid 1px red;} dus.
Dit werkt geloof ik niet in alle versies van IE.
 
Nee dat werkt niet. Want als het niet in IE zou werken, zou je het nog wel gewoon in HTMLkit moeten kunnen zien, toch?
 
In IE 6 werkt hoveren alleen op 'n link, in 7 en 8 overal.

Als die img als id #afbeelding heeft, moet de oplossing van Naarling (blijf in de lach schieten om die nick) werken. Als het niet werkt, is er iets anders mis. Dan moet je hier even alle html en css neerzetten die ermee te maken heeft.
Of het in htmlkit te zien is, weet ik niet, maar dit moet werken in álle browsers behalve Internet Explorer 6.
 
Eh tsja, ik begrijp het ook niet. Hier is de html info:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><head><LINK REL=StyleSheet HREF="stylesheetvoorbeeld.css" TYPE="text/css" MEDIA=screen>
<title>Untitled</title>
</head>
<body>
<div id="afbeelding1"><a href="ketting-4.jpg"><img src="ketting-4.jpg" alt="ketting" class="kader" height="190px" width="240px"></a></div>
</body>
</html>

En de CSS:
#afbeelding1 {
position:absolute;
top:150px;
height:190px;
width:240px;
border:1px solid black;
padding:12px;
padding-bottom:44px}

afbeelding1#:hover{border:1px solid red;}

Er staat niet zoveel in, want ik wilde eerst gewoon dit onderdeel goed krijgen.

Ziet iemand een fout, of iets wat ik moet veranderen?
 
afbeelding1#:hover{border:1px solid red;}

Er staat niet zoveel in, want ik wilde eerst gewoon dit onderdeel goed krijgen.

Ziet iemand een fout, of iets wat ik moet veranderen?
Het moet #afbeelding1:hover{border:1px solid red;} zijn, niet afbeelding1#:hover{border:1px solid red;}
(denk om die dubbele punt)
 
Nee, werkt ook niet. Komt het misschien omdat het niet een echte border is, maar meer een kader?
 
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
       	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="stylesheetvoorbeeld.css" type="text/css" media="screen">
	<style type="text/css">
		#afbeelding1 {
			position:absolute;
			top:150px;
			height:190px;
			width:240px;
			border:1px solid black;
			padding:12px;
			padding-bottom:44px;
			}
		
			#afbeelding1:hover {
				border:1px solid red;
				}
	</style>
	<title>Untitled</title>
</head>
<body>
	<div id="afbeelding1"><a href="ketting-4.jpg"><img src="ketting-4.jpg" alt="ketting" class="kader" height="190" width="240"></a></div>
</body>
</html>
Dit werkt. Je moet je pagina na elke wijziging door de validator halen. Die had je op 'n aantal fouten gewezen. Voor de html op
http://validator.w3.org/
en voor de css op
http://jigsaw.w3.org/css-validator/
O.a.:
* 'n onvolledig doctype (waardoor je verschil in weergave tussen browsers kunt krijgen)
* Geen characterset opgegeven (kans op vraagtekens of 'Chinees' in plaats van letters met accenten)
* Fouten in de css, waardoor het niet werkte.
afbeelding1#:hover
De # geeft aan dat het 'n id is en moet vóór de naam staan. Nu wordt de id gewoon niet herkend, dus wat de browser betreft is 'afbeelding1#' 'n eigenschap, net zoals border of margin. En die eigenschap kent de browser niet, dus wordt die vrolijk genegeerd.

Edit: wat ik nog vergeet: het is beter om alleen met kleine letters te werken in bestandsnamen. Op windows is StyleSheet hetzelfde als stylesheet, op de meeste servers zijn het twee verschillende namen.
 
Laatst bewerkt:
Heel erg bedankt!

Ik heb de fouten eruit gehaald, en nu verkleurt het kader inderdaad in GoogleChrome !
Maar wanneer ik het bestand open in IE, blijft het kader gewoon nog zwart.. is hier een verklaring voor? Moet ik misschien een aanvullende code toevoegen?
 
Over welke versie van IE heb je het? Microsoft is erin geslaagd om met IE 6, 7 en 8 drie totaal verschillende browsers te maken.
 
IE versie 8.0 heb ik. Die zou in principe moeten werken toch? Ik weet dat IE versie 6 het niet ondersteunt.
 
Dan heb ik 'n trieste/vrolijke mededeling, afhankelijk van hoe je 't bekijkt.
Bij mij werkt het in Google Chrome, IE 8, Safari, Opera en Firefox. Dus dan is er toch iets mis in jouw code. Heb je hem wel PRECIES zo overgenomen?
In IE 6 werkt 't niet, maar dat wist je al. Persoonlijk ondersteun ik dat ding ook steeds minder, als het niet om heel essentiéle dingen gaat.
In IE 7 werkt 't niet helemaal goed door 'n bug/afwijking van de standaard. Als je over 'n padding hovert, pikt IE 7 dat niet op. Als je over de border van de div hovert, wordt die rood (moet je dus heel precies op die border staan). Als je op de afbeeling hovert, wordt de rand ook rood.
Maar als je op de padding tussen border en afbeelding hovert, reageert IE 7 niet. Dat is heel simpel op te lossen. Als je 'n doorzichtige gif van 1x1px als achtergrond opgeeft in de div, dan werkt hoveren ook op de padding in IE 7.
 
Oké, bedankt! Het werkt nog steeds niet helemaal, maar ik moet er denk ik wel uit kunnen komen.

Heel even off-topic: ik heb nog wat kleine vraagjes over css, en kan het antwoord helaas niet op internet vinden.. zal ik daar een nieuw topic over starten, of is er iemand die ik even een PM kan sturen?
 
Ik zou het via het forum doen. Het grote voordeel van 'n forum is dat je de verzamelde kennis van 'n (groot) aantal mensen gebruikt. Als ik 'n fout maak op 't forum, is er altijd wel iemand die me corrigeert.
En 't is gewoon leuker. Ik wil best privé-advies geven, maar dan moet je wel even gaan zitten voor ik je m'n uurprijs vertel :D
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan