nicht angemeldet
Onmouseovereffekt bei Hintergrundbild funktioniert nicht
MudGuard
Der MartinHallo zusammen,
ich habe ein Problem das mich als HTML Anfänger überfordert:
ich will auf meiner entstehenden Homepage eine Linkleiste über den Hauptframe haben. Diese habe ich so programmiert:~~~html
<style type="text/css">
#a1 {
position: absolute; top: 0px; left: 612px; }
#a2 {
position: absolute; top: 0px; left: 459px; }
#a3 {
position: absolute; top: 0px; left: 306px; }
#a4 {
position: absolute; top: 0px; left: 153px;}
#a5 {
position: absolute; top: 0px; left: 0px}
#back { position:absolute;top:0px;left:0px}
a:link
{
text-decoration: none;
text-underline: none; }
</style>
</head>
<body text="#000000"style="background-image:url(../linkleise bilder/2.hintergrund.jpg);background-repeat:no-repeat;" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="back"><img src="../linkleise bilder/2.hintergrund.jpg" alt="" border="0" width="960" height="45"></div>
<div id="a5"><table style="margin-left:3px;"background="../linkleise bilder/schwarzweiß.jpg" width="150" height="45" onmouseover="this.style.backgroundImage='url(../linkleise bilder/bessergrün.jpg)'" onmouseout="this.style.backgroundImage='url(../linkleise bilder/schwarzweiß.jpg)'">
<td><p align="center"><a href="slideshows/frame.html" target="frame" ><font color="#2323dc"><font face="Trajan pro">Home</font></font></font></p></td></table></div>
<div id="a4"><table style="margin-left:3px;"background="../linkleise bilder/schwarzweiß.jpg" width="150" height="45" onmouseover="this.style.backgroundImage='url(../linkleise bilder/bessergrün.jpg)'" onmouseout="this.style.backgroundImage='url(../linkleise bilder/schwarzweiß.jpg)'">
<td><p align="center"><a href="Training.html" target="frame" ><font color="#2323dc"><font face="Trajan pro">Training</font></font></font></p></td></table></div>
<div id="a3"><table style="margin-left:3px;"background="../linkleise bilder/schwarzweiß.jpg" width="150" height="45" onmouseover="this.style.backgroundImage='url(../linkleise bilder/bessergrün.jpg)'" onmouseout="this.style.backgroundImage='url(../linkleise bilder/schwarzweiß.jpg)'">
<td><p align="center"><a href="Ergebnisse.html" target="frame" ><font color="#2323dc"><font face="Trajan pro">Ergebnisse</font></font></font></p></td></table></div>
<div id="a2"><table style="margin-left:3px;"background="../linkleise bilder/schwarzweiß.jpg" width="150" height="45" onmouseover="this.style.backgroundImage='url(../linkleise bilder/bessergrün.jpg)'" onmouseout="this.style.backgroundImage='url(../linkleise bilder/schwarzweiß.jpg)'">
<td><p align="center"><a href="Gästebuch.html" target="frame" ><font color="#2323dc"><font face="Trajan pro">Gästebuch</font></font></font></p></td></table></div>
<div id="a1"><table style="margin-left:3px;position:absolut;top:0px;left:765px"background="../linkleise bilder/schwarzweiß.jpg" width="150" height="45" onmouseover="this.style.backgroundImage='url(../linkleise bilder/bessergrün.jpg)'" onmouseout="this.style.backgroundImage='url(../linkleise bilder/schwarzweiß.jpg)'">
<td><p align="center"><a href="Gästebuch.html" target="frame" ><font color="#2323dc"><font face="Trajan pro">Galerie</font></font></font></p></td></table></div>
Dieser funktioniert auch im Phase5 Editor sehr gut und sieht dort so aus:
[http://img4web.com/view/N95X2P](http://img4web.com/view/N95X2P)
(die Maus wäre jetzt auf dem grünen Feld)
Wenn man die Datei aber in Google Chrome,IE,Mozilla Firefox stellt, sieht sie so aus:
[http://img4web.com/view/R7ENGR](http://img4web.com/view/R7ENGR)
Hier funktioniert auch der Onmouseovereffekt nicht.
Ich würde mich über eure Hilfe freuen,
mit freundlichen Grüßen aus dem Allgäu.
-
Om nah hoo pez nyeetz, Billy23!
die gute Nachricht: Es lässt sich ändern.
Dein HTML ist auf dem Stand von vor 30 Jahren.
Frames sollte man nicht verwenden, wenn du die immer gleiche Navigation nicht 30 mal schreiben möchtest, ist dies löblich, steht jedoch nicht am Anfang deiner Arbeit.
Absolute Positionierung bringt ggf. mehr Probleme als Nutzen und scheint mir in deinem Fall nicht notwendig zu sein.
Eine Linkleiste ist eine Liste, unter Verwendung von HTML 4.01 könnte dein Dokument so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>aussagekräftiger Titel der Seite</title> </head> <body> <div id="nav"> <h3>Hier gehts lang</h3> <ul> <li><a href="...">Seite 1</a></li> <li>Seite 2</li> <li><a href="...">Seite 3</a></li> <li><a href="...">Seite 4</a></li> </ul> </div> </body> </html>In einer separaten CSS-Datei nimmst du die entsprechenden Angaben vor
Selektoren, CSS einbinden, CSS-Eigenschaften ebenfalls im Wiki
Beginne ganz von vorn, sei nicht enttäuscht über das harte Urteil, frage hier wieder nach.
Es wird schnell geschehen, dass du am HIntergrund-Problem wieder angekommen bist. Dann lauten deine Stichworte im Wiki hover, focus und active
Besser ist es, nicht das Hintergrundbild auszutauschen, sondern es zu verschieben.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Billy23!
die gute Nachricht: Es lässt sich ändern.
Dein HTML ist auf dem Stand von vor 30 Jahren.
Frames sollte man nicht verwenden, wenn du die immer gleiche Navigation nicht 30 mal schreiben möchtest, ist dies löblich, steht jedoch nicht am Anfang deiner Arbeit.
Absolute Positionierung bringt ggf. mehr Probleme als Nutzen und scheint mir in deinem Fall nicht notwendig zu sein.
Eine Linkleiste ist eine _Liste_, unter Verwendung von HTML 4.01 könnte dein Dokument so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>aussagekräftiger Titel der Seite</title>
</head>
<body>
<div id="nav">
<h3>Hier gehts lang</h3>
<ul>
<li><a href="...">Seite 1</a></li>
<li>Seite 2</li>
<li><a href="...">Seite 3</a></li>
<li><a href="...">Seite 4</a></li>
</ul>
</div>
</body>
</html>> > In einer separaten CSS-Datei nimmst du die entsprechenden Angaben vor > > Selektoren, CSS einbinden, CSS-Eigenschaften ebenfalls im Wiki > > Beginne ganz von vorn, sei nicht enttäuscht über das harte Urteil, frage hier wieder nach. > > Es wird schnell geschehen, dass du am HIntergrund-Problem wieder angekommen bist. Dann lauten deine Stichworte im Wiki [hover, focus und active](http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklassen_:hover.2C_:active_und_:focus) > > Besser ist es, nicht das Hintergrundbild auszutauschen, sondern es zu [verschieben](http://selfhtml.apsel-mv.de/verweise/verweise.html). > > > Matthias Vielen Dank für die schnelle Antwort. Ich werde es jetzt auch nach deinen vorschlägen umprogrammieren. Ich sage dann später, ob es geklappt hat.-
Hallo, ich habe jetzt alles nochmal neu programmiert. Jedoch werden die Hintergrundbilder weder im normalen noch im hover "effekt" angezeigt. Was ist der Fehler im Code?
<style type="text/css"> #navi { font-family:Trajan pro; font-size:17px; font-color:#2323dc; } #navi ul { margin: 0; padding: 0; list-style-type: none; } #navi li { float: left; margin-left: 5px; } #navi a { display: block; padding: 5px; width: 150px; height: 45px; background-image: url(Bilder/schwarzweiß.jpg); color: #2323dc; text-decoration: none; text-align: center; } #navi a:hover { color: #EBCF58; background-image: url(Bilder/bessergrün.jpg); } </style> <body style="background-image:url(Bilder/2.hintergrund.jpg);background-repeat:no-repeat;"> <div id="navi"> <ul> <li> <a href="#">Seite 1</a> </li> <li> <a href="#">Seite 2</a> </li> <li> <a href="#">Seite 3</a> </li> <li> <a href="#">Seite 4</a> </li> <li> <a href="#">Seite 5</a> </li> </ul> <br style="clear: both;"> </div>MfG Billy
-
Hi,
font-family:Trajan pro;
Alternative Schriften incl. generischer Schriftart fehlen.
background-image: url(Bilder/schwarzweiß.jpg);
Nicht-ASCII-Zeichen in der URL, nicht url-codiert.
background-image: url(Bilder/bessergrün.jpg);
s.o.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Vielen Dank für die Antwort. Jetzt funktioniert es mit dem Code
background-image: url(file:///schwarzwei%DF.jpg);auch sehr gut. Jetzt meine hoffentlich letzte Frage. Wie bekomme ich die Links oben links in die Ecke, damit sie genau im Hintergrund liegen. Wenn ich die Position absolut so:
position:absolute;top:0pxbestimme, verzieht es die Links 1-4 zu jeweils nur etwa 1px Breite und nur der 5. Link stimmt.
MfG, Billy-
Hi,
Jetzt funktioniert es mit dem Code
background-image: url(file:///schwarzwei%DF.jpg);
> auch sehr gut. Aber nur bei Dir. Denn auf meiner Festplatte gibt's das Bild nicht ... > `position:absolute;top:0px`{:.language-html} > bestimme, verzieht es die Links 1-4 zu jeweils nur etwa 1px Breite und nur der 5. Link stimmt. Wie wär's, wenn Du das ganze mal online stellst? Dann könnte man sich das mal richtig angucken. Mit den Code-Fetzchen kann man nur sagen: irgendwas machst Du falsch. cu, Andreas -- [Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/) [O o ostern ...](http://ostereier.andreas-waechter.de/) Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.-
ok hier ist der link, indem alles soweit stimmt, nur dass das Bild zuweit unten ist:
HIER
Billy-
-
Om nah hoo pez nyeetz, Billy23!
Der Abstand nach oben wird durch Innen- bzw. Außenabstände erzeugt (--> Wiki)
html, body {margin: 0; padding: 0;} sollte dies kompensieren.
Für den Firefox gibt es ein AddOn, das heißt "Firebug". Da kannst du genau sehen, welches Element welche Eigenschaften hat und diese auch Live ändern.
<br> als zusätzliches Markup, um das Float wieder aufzuheben, ist nicht notwendig.
Du möchtest für die <a>-Elemente höchstens ein Hintergrundbild verwenden, besser wären in deinem Fall Farbverläufe (Suchbegriff: gradient css generator), wobei die Browserunterstützung unterschiedlich ist. Es böte sich an
a : {background-image: url(...); background-image: -webkit-gradient ... background-image: -moz-linear-gradient...}
es werden die Zuweisungen nacheinander überschrieben, mit der Folge, dass Browser die -gradient- nicht verstehen, die Grafik anzeigen.
Je weniger Einzelteile du anforderst, umso schneller wird die Seite geladen.
Matthias
--
1/z ist kein Blatt Papier.
-
Vielen Dank an alle Helfer, ich habe es jetzt geschafft, so wie ich es wollte.
Mit freundliche Grüßen aus dem Allgäu, Billy
-
-
-
-
-
Om nah hoo pez nyeetz, Billy23!
Vielen Dank für die Antwort. Jetzt funktioniert es mit dem Code
> background-image: url(file:///schwarzwei%DF.jpg); >Das "file:///" wird schiefgehen, wenn die Seite online ist. Besser wäre es, wenn du die Datei umbenennst: schwarzweiss.jpg. ZUm Referenzieren siehe Wiki
auch sehr gut. Jetzt meine hoffentlich letzte Frage. Wie bekomme ich die Links oben links in die Ecke, damit sie genau im Hintergrund liegen. Wenn ich die Position absolut so:
position:absolute;top:0pxbestimme, verzieht es die Links 1-4 zu jeweils nur etwa 1px Breite und nur der 5. Link stimmt.
D.h., sie sind um 1px verschoben? Da wirst du nichts machen können.
Vermeide inline-style-Angaben. Schreibe alle CSS-Vereinbarungen in eine separate Datei.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
Vielen Dank für die schnelle Antwort. Ich werde es jetzt auch nach deinen vorschlägen umprogrammieren. Ich sage dann später, ob es geklappt hat.
Jetzt eine Frage nach dem ersten Testen: Wie schaffe ich es, die Links nebeneinander zu bekommen, ohne ihre absolute Position zu bestimmen?
-
Hallo,
Jetzt eine Frage nach dem ersten Testen: Wie schaffe ich es, die Links nebeneinander zu bekommen, ohne ihre absolute Position zu bestimmen?
indem du sie nicht unnötigerweise in div-Container plus Tabellen verpackst.
Eine Navigation ist eigentlich eine Liste von Links (ul oder ol). List-Items (li) sind normalerweise Blockelemente; wenn man sie aber mit CSS zu inline-Elementen umdeklariert oder sie floatet, reihen sie sich brav nebeneinander an.
Ciao,
MartinPS: Warum du deine Frage im Themengebiet "Programmiertechnik" eingestellt hat, wissen die Götter ...
--
Eifersucht ist so alt wie die Menschheit: Als Adam einmal spät heimkam, zählte Eva sofort seine Rippen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-