Hover problem mit CSS

Kashan · 2 März 2011

Hallo ich möchte das logo meiner seite austauschen lassen wenn man mit der maus drauf geht. Wenn ich das ganze in google chrome betrachte von der festplatte aus geöffnet wird es nur fehlerhaft dargestellt, hochgeladen klappt es garnicht.

TDU2 Tipps

CSS:

Code:

body{
background-color:black;
}
#logo{
display:block;
background-image:url(logo.png);
}
#logo:hover{
display:block;
background-image:url(logo_on.png);
}
#menu{
color:white;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>TDU2 Tipps</title>
<link rel="stylesheet" type="text/css" href="formate.css"> 
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>

<table border="1" id="menu">
	<tr>
		<td><a href="index.html"><img id="logo" src="logo.png" /></a></td>
	</tr>
	<tr>
		<td>1</td>
	</tr>
</table>

</body>
</html>

Ich hab schon verschiedene methoden & schreibweisen probiert aber immer klappt irgendwas nicht.

Hilfe :(

threadi · 2 März 2011

Dein HTML-Code ist fehlerhaft:
[Invalid] Markup Validation of http://126877.webhosting40.1blu.de/tud2tips/index.html - W3C Markup Validator

Und deine Idee einem <img>-Element ein Hintergrundbild zuzuordnen und dieses zu "hovern" ist ebenso schlecht. Denn das per <img> eingebundene Bild überlagert das Hintergrundbild. Du müsstest es so machen:

Code:

<h1 id="logo">&nbsp;</h1>

<h1> hab ich nur als Beispiel genommen da es semantisch passen würde, wenn Du auch noch Text rein schreiben willst. Kannst aber auch ein <div> oder <p> nehmen.

Kashan · 3 März 2011

Ok danke schonmal für diesen Hinweis, allerdings funktioniert es immer noch nicht. Css will anscheinend nicht die grafiken in den div reinladen oder so. Jetzt ist dort nähmlich keine grafik.

vast · 3 März 2011

versuchs mal so:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>TDU2 Tipps</title>
<link rel="stylesheet" type="text/css" href="formate.css"> 
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>

<table border="1" id="menu">
	<tr>
		<td><a id="logo" href="index.html"></a></td>
	</tr>
	<tr>
		<td>1</td>
	</tr>
</table>

</body>
</html>

und das CSS:

HTML:

body{
background-color:black;
}
#logo{
display:block;
width: 200px; /*Breite deines Bildes*/
height: 100px; /*Höhe deines Bildes*/
background-image:url(logo.png);
}
#logo:hover{
display:block;
background-image:url(logo_on.png);
}
#menu{
color:white;
}

Du hast so dem Link, der ein inline-Element ist (wird wie Schrift in Zeile dargestellt) ein display:block gegeben und es so zum block-Element gemacht. Da dieses aber keinen Inhalt hat (nur Hintergrundbild), muss man dem noch seine Abmessungen mitteilen. Die sollten der Grösse deines Bildes entsprechen.

Wirklich gut ist das so zwar auch nicht, sollte aber funktionieren.

Hover problem mit CSS

Kashan

Neues Mitglied

threadi

Moderator

Kashan

Neues Mitglied

vast

Neues Mitglied

Neueste Beiträge