Problem mit Navigation

[Pizzatoni]

Hi,
ich bin gerade dabei meiner Homepage ein neues Design zu verpassen und habe dafür den ganzen Quellcode neu geschrieben...Doch leider habe ich ein sehr großes Problem mit der Navigation. Wenn man nun auf den ersten Navigationspunkt drückt, dann erscheint zwar die zweite Grafik, aber auch ein blöder Kasten mit Rand um diese. Ich habe mittlerweile schon alles mögliche ausprobiert (border:none; text-decoration:none;...), aber irgendwie schaffe ich es nicht das Problem wegzubekommen... Ich hab jetzt keinen Plan mehr und kann nur noch hoffen, dass Ihr mir weiterhelfen könnt, wäre euch da sehr, sehr dankbar!
Hier ist die Website, die das ganze betrifft:http://betafleischi.pytalhost.dehttp://betafleischi.pytalhost.de/

Mit freundlichen Grüßen,
Pizzatoni

[Gunnar Bittersmann]

@@Pizzatoni:

nuqneH

Ich habe mittlerweile schon alles mögliche ausprobiert (border:none; […])

Für welchen Selektor? 'a img' fiel wohl noch nicht unter „alles Mögliche“?

Qapla'

[Pizzatoni]

Für welchen Selektor? 'a img' fiel wohl noch nicht unter „alles Mögliche“?

Qapla'

Hi Qapla,
wie meinst du das mit a img ? Das kann ich doch nicht einfach so einbauen, zwar soll man auf das Bild und die Schrift klicken können, aber das kann man doch jetzt schon (geh einfach mal auf die Seite und schau dir mein Problem an). Das eigentliche Problem ist ja leider, dass da immer so ein blauer Kasten um das Bild erscheint... :( .

Mit freundlichen Grüßen,
Pizzatoni

[Pizzatoni]

Hi Qapla,
wie meinst du das mit a img ? Das kann ich doch nicht einfach so einbauen, zwar soll man auf das Bild und die Schrift klicken können, aber das kann man doch jetzt schon (geh einfach mal auf die Seite und schau dir mein Problem an). Das eigentliche Problem ist ja leider, dass da immer so ein blauer Kasten um das Bild erscheint... :( .

Mit freundlichen Grüßen,
Pizzatoni

Ah jetzt versteh ich es, Du hast gemeint, dass ich im Css Quellcode "a img {}" schreiben soll. Habe das jetzt erst falsch aufgefasst und dann noch ein wenig rumprobiert und jetzt klappts, danke :D.

Mit freundlichen Grüßen,
Pizzatoni

[Gunnar Bittersmann]

@@Pizzatoni:

nuqneH

Hier ist die Website, die das ganze betrifft:http://betafleischi.pytalhost.de

Unmittelbar an der Problemzone: 'div' darf nicht in 'a' vorkommen.

Und es sind noch etliche andere Fehler zu berichtigen.

Darstellungsangaben gehören ins Stylesheet, nicht inline in 'style'-Attribute.

Absolute Positionierung? Warum?

Warum ist das Menü keine Liste?

Qapla'

[Pizzatoni]

Darstellungsangaben gehören ins Stylesheet, nicht inline in 'style'-Attribute.

Hi,
dazu muss ich sagen, dass ich da gerade erst dabei bin. Ich habe ja erst in den letzten Tagen das alles geschrieben und lagere es jetzt extern aus, da es  dann viel leichter ist, Problem, die die ganze Website betreffen, auszubessern ;) . Nun hab ich allerdings noch das Problem, dass wenn ich über den Text auf der Grafik fahre, der Button wieder in der Ausgangslage ist...wie mache ich das am besten? Was für einen Befehl brauche ich da? Muss ich da jetzt wieder "onmouseover" benutzen?

Mit freundlichen Grüßen,
Pizzatoni

[Gunnar Bittersmann]

@@Pizzatoni:

nuqneH

Ich habe ja erst in den letzten Tagen das alles geschrieben und lagere es jetzt extern aus, da es  dann viel leichter ist, Problem, die die ganze Website betreffen, auszubessern ;) .

Hättest du es gleich ausgelagert, hättest du dir viel Arbeit erspart.

Nun hab ich allerdings noch das Problem, dass wenn ich über den Text auf der Grafik fahre, der Button wieder in der Ausgangslage ist […] Muss ich da jetzt wieder "onmouseover" benutzen?

OMG, da tun sich ja Abgründe auf. JavaScript für einen Hovereffekt‽

Schmeiß da mal sämtliches 'onmouseover' und 'onmouseout' raus, die 'img'-Elemente ebenso. Die Grafik kommt in den http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=Hintergrund, den du mit 'http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover' umschaltest.

Deine Navigation sollte in etwa so aussehen:

<div id="nav">  
  <h2>Navigation</h2>  
  <ul>  
    <li>foo</li>  
    <li><a href="bar">bar</a></li>  
    <li><a href="baz">baz</a></li>  
  </ul>  
</div>

Der Menüpunkt der aktuellen Seite (im Beispiel „foo“) sollte nicht verlinkt sein. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Im Stylesheet:

#nav h2  
{  
  text-shadow: grey 3px 3px 2px;  
  font-size: 30px;  
}  
  
#nav ul  
{  
  list-style: none;  
  margin: 0;  
  padding: 0;  
}  
  
#nav li  
{  
  background: url(bilder/menüpunkt2.png); /* Menüpunkt der aktuellen Seite */  
  margin: 0;  
  padding: 0;  
}  
  
#nav li a  
{  
  background: url(bilder/menüpunkt.png);  
  display: block;  
}  
  
#nav li a:hover  
{  
  background: url(bilder/menüpunkt2.png);  
  display: block;  
}

Noch besser: Beide Grafiken in eine Datei packen und die http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=Hintergrundposition umschalten. (CSS-Sprites) [A List Apart, Webkrauts]

Qapla'

[Pizzatoni]

@@Pizzatoni:

nuqneH

Ich habe ja erst in den letzten Tagen das alles geschrieben und lagere es jetzt extern aus, da es  dann viel leichter ist, Problem, die die ganze Website betreffen, auszubessern ;) .

Hättest du es gleich ausgelagert, hättest du dir viel Arbeit erspart.

Nun hab ich allerdings noch das Problem, dass wenn ich über den Text auf der Grafik fahre, der Button wieder in der Ausgangslage ist […] Muss ich da jetzt wieder "onmouseover" benutzen?

OMG, da tun sich ja Abgründe auf. JavaScript für einen Hovereffekt‽

Schmeiß da mal sämtliches 'onmouseover' und 'onmouseout' raus, die 'img'-Elemente ebenso. Die Grafik kommt in den http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=Hintergrund, den du mit 'http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover' umschaltest.

Deine Navigation sollte in etwa so aussehen:

<div id="nav">

<h2>Navigation</h2>
  <ul>
    <li>foo</li>
    <li><a href="bar">bar</a></li>
    <li><a href="baz">baz</a></li>
  </ul>
</div>

>   
> Der Menüpunkt der aktuellen Seite (im Beispiel „foo“) sollte nicht verlinkt sein. (Punkt 10 der [zehn meist-missachteten Homepage-Design-Richtlinien](http://www.usability.ch/Alertbox/20031110.htm) [Nielsen])  
>   
> Im Stylesheet:  
>   
> ~~~css

#nav h2  

> {  
>   text-shadow: grey 3px 3px 2px;  
>   font-size: 30px;  
> }  
>   
> #nav ul  
> {  
>   list-style: none;  
>   margin: 0;  
>   padding: 0;  
> }  
>   
> #nav li  
> {  
>   background: url(bilder/menüpunkt2.png); /* Menüpunkt der aktuellen Seite */  
>   margin: 0;  
>   padding: 0;  
> }  
>   
> #nav li a  
> {  
>   background: url(bilder/menüpunkt.png);  
>   display: block;  
> }  
>   
> #nav li a:hover  
> {  
>   background: url(bilder/menüpunkt2.png);  
>   display: block;  
> }

Noch besser: Beide Grafiken in eine Datei packen und die http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=Hintergrundposition umschalten. (CSS-Sprites) [A List Apart, Webkrauts]

Qapla'

Hi,
ersteinmal danke, dass du dir soviel Mühe gemacht hast, meinen Quellcode zu entrümpeln ;) .
Ich habe jetzt mal alles so eingefügt, allerdings erscheinen die menübuttons (menüpunkt1/2.png) nicht...woran kann das liegen?

Mit freundlichen Grüßen,
Pizzatoni

[Pizzatoni]

Kann mir denn niemand sagen, warum ich die Menügrafiken nicht sehe?
Die Bilder sind im entsprechenden Ordner und der Quellcode verweist auch richtig auf diese, aber aus irgendeinen unerklärlichen Grund, werden die Menügrafiken nicht angezeigt... :(

Mit freundlichen Grüßen,
Pizzatoni

[Pizzatoni]

Folgendes steht nun im Quellcode (als erstes die Stylesheet.css-Datei):

  
*  
{  
  margin: 0px;  
  padding:0px;  
}  
  
#gesamt  
{  
  position:absolute;  
  width: 1024px;  
  margin: 3px;  
  border: solid 5px #b3b2b2;  
  background-color:#CCFFCC;  
}  
  
  
#linkeSpalte  
{  
  width: 180px;  
  border-style:solid;  
  border-color:#009900;  
  border-right: 2px;  
  border-left:0px;  
  border-top:0px;  
  border-bottom:0px;  
  background-color:#CCFFCC;  
}  
  
#mittlereSpalte  
{  
  width: 664px;  
  border-style:solid;  
  border-color:#009900;  
  background-color:#99FF99;  
  border-top:dotted;  
  border-bottom:none;  
}  
  
#rechteSpalte  
{  
  width: 180px;  
  border-style:solid;  
  border-color:#009900;  
  border-left: 2px;  
  border-right:0px;  
  border-top:0px;  
  border-bottom:0px;  
  background-color:#CCFFCC;  
}  
  
#textticker  
{  
  width:1020px;  
  font-weight: bold;  
  color: green;  
  background-color: #CCFFCC;  
  font-family: Arial,Helvetica,MS Sans Serif;  
  font-size: 12pt;  
}  
  
#linksuntengesamt  
{  
  border-style:dotted;  
  border-color:#009900;  
}  
  
#text  
{  
  position:absolute;  
  top:240px;  
  left:190px;  
  right:185px;  
}  
  
.untereLinks  
{  
  position:absolute;  
  top:3px;  
  font-size:18px;  
  background-color:#99FF99;  
  border:solid;  
  border-top:0px;  
  border-color:#009900;  
  padding-left:5px;  
  padding-right:10px;  
}  
  
.untereLinks a:hover  
{  
  color:#000000;  
}  
  
.untereLinks a:link  
{  
  color:#FFFFFF;  
}  
  
a:link  
{  
  color:#009900;  
  font-weight:bold;  
  text-decoration:none;  
}  
  
a:visited  
{  
  color:#006600;  
  font-weight:bold;  
  text-decoration:none;  
}  
  
a:hover  
{  
  color:#FFFFFF;  
}  
  
a:active  
{  
  color:#006600;  
}  
  
                        /*Navigation*/  
#nav  
{  
  position:absolute;top:250px;  
  text-align:left;  
}  
  
#nav h2  
{  
  text-shadow: grey 3px 3px 2px;  
  font-size: 30px;  
  padding-bottom:40px;  
}  
  
#nav ul  
{  
  list-style: none;  
}  
  
#nav li  
{  
  background: url(bilder/menüpunkt2.png); /* Menüpunkt der aktuellen Seite */  
}  
  
#nav li a  
{  
  background: url(bilder/menüpunkt.png);  
  display: block;  
}  
  
#nav li a:hover  
{  
  background: url(bilder/menüpunkt2.png);  
  display: block;  
}  

Und das hier in der HTML-Datei:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
  <title>http://www.carnivoren.pytalhost.de</title>  
  <link rel="stylesheet" type="text/css" href="Css/Stylesheet.css">  
</head>  
<body onLoad="textticker()";>  
  
              <!--Bild im Header-->  
<div id="gesamt">  
  <img id="logo" style="width: 1024px; height: 180px; border:0px;" alt="" src="bilder/header.png">  
  
              <!--Textticker mit Javascript-->  
    <script language="JavaScript" src="js/textticker.js"></script>  
    <form name="form1">  
    <input id="textticker" type="text" name="textfeld" value=" Willkommen ">  
    </form>  
  
  
                <!--Die Tabellen-->  
  <table style="text-align: left; width: 1024px; height: 800px;" cellpadding="2" cellspacing="2">  
    <tr>  
      <td id="linkeSpalte"></td>  
      <td id="mittlereSpalte"></td>  
      <td id="rechteSpalte"></td>  
    </tr>  
  </table>  
  <br>  
  <br>  
  
                <!--Seiteninhalt-->  
  <div id="text">  
    <h3>Herzlich willkommen auf meiner Seite</h3>  
  </div>  
  
                <!--Kalender-->  
  <div style="position:absolute;top:235px;right:5px;">  
      <APPLET CODEBASE="." CODE="noteb.class" NAME="Notebook" WIDTH=160 HEIGHT=185 HSPACE=0  VSPACE=0 ALIGN=middle>  
      <PARAM name="1" value="28.9.2009| Homepage wird erstellt!">  
      </APPLET>  
  </div>  
  
                <!--Navigation einfügen-->  
  <div id="linksuntengesamt" style="position:absolute;left:182px; top:1005px; right:181px;">  
    <div class="untereLinks" style="left:-3px;"><a href="#">Impressum</a></div>  
    <div class="untereLinks" style="left:300px;"><a href="#">Sitemap</a></div>  
    <div class="untereLinks" style="right:-3px;"><a href="#">Kontakt</a></div>  
  </div>  
  <div id="nav">  
      <h2>Navigation</h2>  
      <ul>  
        <li>Home</li>  
        <li><a href="#">Arten</a></li>  
        <li><a href="#">Sonstiges</a></li>  
        <li><a href="123">SONSTWAS!!!</a></li>  
      </ul>  
  </div>  
</div>  
</body>  
</html>  

Ich habe nun mal sicherheitshalber den gesamten Quellcode gepostet, auch wenn ein Teil vermutlich unwichtig ist.
Ich hoffe ihr könnt meinen Fehler finden, ich begreife und finde meinen Fehler leider nicht selbst :( .

Mit freundlichen Grüßen,
Pizzatoni

[Beat]

background: url(bilder/menüpunkt2.png); /* Menüpunkt der aktuellen Seite */

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Dein CSS schreibt ein menüpunkt.png
Offenbar ist es UTF-kodiert, denn der Rekuest lautet auf:
http://betafleischi.pytalhost.de/Css/bilder/men%C3%BCpunkt2.png

Keine Ahnung, wie dein Dateiname auf dem fernen Server lautet.

mfg Beat

[Pizzatoni]

Dein CSS schreibt ein menüpunkt.png
Offenbar ist es UTF-kodiert, denn der Rekuest lautet auf:
http://betafleischi.pytalhost.de/Css/bilder/men%C3%BCpunkt2.png

Keine Ahnung, wie dein Dateiname auf dem fernen Server lautet.

mfg Beat

Hi,
danke für deine Hilfe! Ich habe es jetzt endlich geschafft und die Grafiken werden angezeigt. Der Fehler lag in der Ordnerstruktur, ich hatte ganz vergessen, dass wenn ich die Css-Datei in einen extra Ordner abspeicher, ich wieder aus den Ordner mit "../" raus muss und dann in meinen Bilder Ordner ^^.
So jetzt kann ich endlich weitermachen :D
Danke nochmal vielmals!

Mit freundlichen Grüßen,
Pizzatoni

[Pizzatoni]

Hi,
jetzt hatte ich gedacht, dass das Problem jetzt endlich gelöst wäre und ich ohne Probleme weiterarbeiten kann, da zeigt sich schon das nächste Problem, welches wieder einmal mit der Navigation zusammenhängt.
Und zwar werden die Grafiken angezeigt, aber leider nur ein kleiner Teil der gesamten Grafik :/ . Ich versteh das nicht, irgendwie wird ein Teil der Grafik einfach weggeschnitten (ein Teil der Höhe), ich habe schon mit Firebug gesucht, aber ich finde im Quellcode nicht die Stelle, die dafür verantwortlich ist.
Immer wenn ich einen Fehler ausbessere, dann entsteht wieder ein neuer. Hoffentlich kann mir wieder jemand so super weiterhelfen!
Danke schoneinmal im Voraus.

Mit freundlichen Grüßen,
Pizzatoni

Ich habe die verbesserte Version meiner Seite bereits hochgeladen (http://betafleischi.pytalhost.de/).

[Beat]

jetzt hatte ich gedacht, dass das Problem jetzt endlich gelöst wäre und ich ohne Probleme weiterarbeiten kann, da zeigt sich schon das nächste Problem, welches wieder einmal mit der Navigation zusammenhängt.
Und zwar werden die Grafiken angezeigt, aber leider nur ein kleiner Teil der gesamten Grafik :/ .

Sollte bekannt sein dass background-image nicht skaliert.
Also musst du die Grafiken in der Endgrösse erstellen.

mfg Beat

[Pizzatoni]

Sollte bekannt sein dass background-image nicht skaliert.
Also musst du die Grafiken in der Endgrösse erstellen.

mfg Beat

Hi Beat,
ich habe die Grafiken ja schon in der Endgröße erstellt (180px * 40px), aber aus irgendeinen unerklärlichen Grund werden sie nur teilweise dargestellt :( .

Mit freundlichen Grüßen,
Pizzatoni

[ChrisB]

Hi,

ich habe die Grafiken ja schon in der Endgröße erstellt (180px * 40px), aber aus irgendeinen unerklärlichen Grund werden sie nur teilweise dargestellt :( .

Ich habe dir bereits vor einer Stunde erklärt, dass es nichts mit den Grafiken zu tun hat.

MfG ChrisB

[ChrisB]

Hi,

Und zwar werden die Grafiken angezeigt, aber leider nur ein kleiner Teil der gesamten Grafik :/ . Ich versteh das nicht, irgendwie wird ein Teil der Grafik einfach weggeschnitten (ein Teil der Höhe),

Ein Hintergrundbild wird innerhalb des Elements, dem du es gegeben hast, angezeigt. Wenn dieses Element "kleiner" ist als das Bild, dann kannst du auch nicht erwarten, das ganze Bild zu sehen.

ich habe schon mit Firebug gesucht, aber ich finde im Quellcode nicht die Stelle, die dafür verantwortlich ist.

Wenn du bisher noch gar nicht dafür gesorgt hast, dass die betreffenden Elemente "grösser" dargestellt werden, als es ihr reiner Inhalt verlangt - dann gibt es ja auch nichts zu finden.

MfG ChrisB

[Pizzatoni]

Ein Hintergrundbild wird innerhalb des Elements, dem du es gegeben hast, angezeigt. Wenn dieses Element "kleiner" ist als das Bild, dann kannst du auch nicht erwarten, das ganze Bild zu sehen.

Ich habe das Element ja schon mittels width und height größer gemacht, doch leider ist sind die Menügrafiken nur breiter geworden, nicht jedoch höher :(.
Irgendwie versteh ich das im Moment überhaupt nicht, warum die Grafiken breiter, aber nicht höher werden :(.

Mit freundlichen Grüßen,
Pizzatoni

[ChrisB]

Hi,

Ich habe das Element ja schon mittels width und height größer gemacht, doch leider ist sind die Menügrafiken nur breiter geworden, nicht jedoch höher :(.

Du redest von den A-Elementen?
Hast du denn auch dafür gesorgt, dass sie Angaben zu width und height überhaupt "annehmen" dürfen? Sie sind inline-Elemente, und so lange man sie auch als solche darstellen lässt, dürfen widht und height keine Wirkung zeigen.

Irgendwie versteh ich das im Moment überhaupt nicht, warum die Grafiken breiter, aber nicht höher werden :(.

Nicht die Grafiken, sondern die Elemente, denen du sie als Hintergrundbilder zugewiesen hast - bitte unterscheide das, es ist wesentlich für's Verständnis.

MfG ChrisB

[Pizzatoni]

Hast du denn auch dafür gesorgt, dass sie Angaben zu width und height überhaupt "annehmen" dürfen? Sie sind inline-Elemente, und so lange man sie auch als solche darstellen lässt, dürfen widht und height keine Wirkung zeigen.

Hi,
was muss ich denn schreiben, damit sie Angaben zu width und height annehmen dürfen?
Mein Wissen in CSS ist leider etwas beschränkt, aber ich arbeite zur Zeit daran, also nehmt es mir bitte nicht so böse, wenn ich (aus eurer Sicht) "blöde" Fragen stelle.

Mit freundlichen Grüßen,
Pizzatoni

[ChrisB]

Hi,

was muss ich denn schreiben, damit sie Angaben zu width und height annehmen dürfen?

Du musst dafür sorgen, dass sie nicht mehr inline dargestellt werden.
Die Eigenschaften display, float und position können sich darauf u.a. auswirken.

Mein Wissen in CSS ist leider etwas beschränkt, aber ich arbeite zur Zeit daran, also nehmt es mir bitte nicht so böse, wenn ich (aus eurer Sicht) "blöde" Fragen stelle.

Na dann wär's vielleicht mal Zeit für ein Tutorial.

MfG ChrisB

[Pizzatoni]

Du musst dafür sorgen, dass sie nicht mehr inline dargestellt werden.
Die Eigenschaften display, float und position können sich darauf u.a. auswirken.

Hi,
hm...mir bleibt wohl nichts andres übrig als das jetzt so zu lassen, ich hab jetzt schon allesmögliche ausprobiert (position/display gelöscht), aber irgendwie ändert sich die Höhe der Grafik nie. Das einzige was sich ändert ist die Breite :( .
Kann nicht nochmal jemand schauen, wo mein Fehler liegt?

Mit freundlichen Grüßen,
Pizzatoni

[Beat]

Kann nicht nochmal jemand schauen, wo mein Fehler liegt?

Kein Fehler, Ein Versäumnis. Wenn du willst, dass dein a Element 40px hoch sei, wie das background image, dann weise ihm diese Höhe zu.

mfg Beat

[Pizzatoni]

Kein Fehler, Ein Versäumnis. Wenn du willst, dass dein a Element 40px hoch sei, wie das background image, dann weise ihm diese Höhe zu.

mfg Beat

Das versteh ich jetzt aber nicht ganz, ich hatte vorhin schon das selbe ausprobiert und da ging das nicht XD.
Naja dann bedanke ich mich jetzt mal herzlich bei euch für eure erstklassige Hilfe :D
Ich hoffe ich habe jetzt erst mal vor solchen "Fehlern" Ruhe!

Mit freundlichen Grüßen,
Pizzatoni