Links mit Hintergrund?

FranzPG

Hi, erstmal!
Bin neu hier im Forum, und hoffe dass ich hier richtig gelandet bin und dass mir auch schnell geholfen werden kann.

Also, ich bin ein kleiner HTML-Anfänger, und habe mal ein bischen angefangen, eine Homepage zu erstellen. Nur da gibt es kleines Problem mit der Navigationsleiste.

http://hpfranzpg.hp.funpic.de/index.html
Bitte schaut nur mit dem neuesten IE7 nach. Mit Firefox und so geht das überhaupt nicht!
(Ich hoffe der Quelltext ist einigermaßen überschaubar...)

Ich hab mir gedacht, dass wenn man mit dem Cursor über den Link geht, dass sich dann die Farbe vom Link ändert und die Hintergrundgrafik vom Link.

Also, da gibts aber drei Fehler, die ich mal aufgelistet habe:

1. Link flutscht nach oben, Grafik bleibt dort wo se sein soll! (Link#1)
2. Grafik flutscht nach unten, Link bleibt dort wo er sein soll! (Link#2)
3. Alles bleibt dort wo es is (Platz von Grafik stimmt sogar), nur der Text vom Link ist zu weit oben! (Link#3)

So, wie krieg ich dann jetzt den Link genau in die Mitte von der Grafik und möglichst so, dass sich nichts verändert (außer die Farben)...

Kann mir jemand helfen?
Ich hoffe auf Antwort!

MfG, FranzPG

Ronald

Moin!

Du solltest mal zuerst die 44 Fehler bereinigen, welche der HTML-Validator meldet.
Das ist aber nicht dein wirkliches Problem:

Code

#effect1 a:hover { color:#ffcc33; text-decoration:none; width:170px; height:25px; background:url(http://hpfranzpg.hp.funpic.de/pics/effect1.jpg) no-repeat; border:0; }

Es heißt in CSS "background-image:url(.....)"

G.a.d.M.

Ronald

FranzPG

hmm... und wo liegt dann das Problem?

btw, mit "background-image:url(...)" funktioniert es gar nicht mehr... (es kommt keine andere Hintergrundgrafik mehr) (s. Link#4)!

http://hpfranzpg.hp.funpic.de/index.html

MfG, FranzPG

Ronald

Also ich seh noch massenweise Fehler, die mit ursächlich für Fhlfunktionen sind. Du verwendest z.B. für die Tabellenzellen mehrfach die selbe ID. Eine ID ist etwas einmaliges, die darf nur einmal in der HTML-Seite vorkommen, sonst können die Browser damit nichts anfangen. In deinem Fall solltest du stattdessen Klassen verwenden.

Ich weiß auch nicht, warum du für die Links noch einmal eine Unter-Tabelle verwendest ?

Im gegensatz zu anderenBackground-Angaben verstehen background-styles übrigens alle Browser, die in den letzten Jahren auf den Markt gekommen sind.

Ich habe deine Seite mal eben schnell durchgestylt. Allerdings habe ich nur die linke Navigation nach meinen Vorstellungen umgebaut, die rechte Navigation un der Footer sind zum Vergleich noch deine Originale, du sollst ja auch noch etwas zu tun haben.

Die Seite hat jetzt nur noch 12 Fehler/Warnungen, diese befinden sich alle in deinem Quelltext. Es lohnt sich tatsächlich CSS zu lernen.

Schau es dir mal an:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Willkommen bei &gt;&gt; FPG15.nsu.de.vu &lt;&lt; - Homepage von FranzPG</title>
 <base target="_parent">


 <style type="text/css">
   a:link, a:visited  {color:#888888;text-decoration:none;display:block;width:170px;height:25px;
                       border:0;text-indent:35px;font-weight:bold;font-size:11px;line-height:25px;}
   a:hover            {color:#DCCC0C;}
   a.effect1          {background-image:url(http://hpfranzpg.hp.funpic.de/pics/noeffect1.jpg);}
   a.effect1:hover    {background-image:url(http://hpfranzpg.hp.funpic.de/pics/effect1.jpg);}
   a.effect2          {background-image:url(http://hpfranzpg.hp.funpic.de/pics/noeffect2.jpg);}
   a.effect2:hover    {background-image:url(http://hpfranzpg.hp.funpic.de/pics/effect2.jpg);}
   .placer1,.placer2   {display:block;width:170px;height:25px;text-indent:35px;font-weight:bold;
                       font-size:11px;line-height:25px;border:0;}
   .placer1           {background-image:url(http://hpfranzpg.hp.funpic.de/pics/noeffect1.jpg);}
   .placer2           {background-image:url(http://hpfranzpg.hp.funpic.de/pics/noeffect2.jpg);}


   body,td,p,br       {font-family:Verdana,Arial,'MS Sans Serif';}
   body {color:#ffcc33;background-image:url(http://hpfranzpg.hp.funpic.de/pics/hintergrund.gif);background-color:#666666;background-attachment:fixed;margin:0px;text-align:center;}
   #maintable         {height:100%;width:1024px;margin:auto;border-left:2px outset #3F3F3F;
                       border-right:2px outset #3F3F3F;}
   .navitable         {border:3px ridge #e3e3e3;margin:auto;width:170px;height:auto;background-color:#000000;}
   #td_logo           {height:100px;width:1024px;vertical-align:middle;
                       background-image:url(http://hpfranzpg.hp.funpic.de/pics/banner.jpg );}


 </style>
</head>


<body>
<table id="maintable" cellpadding="0" cellspacing="10" border="0">
 <colgroup>
  <col style="width:180px">
  <col>
  <col style="width:180px">
 </colgroup>
 <tr>
  <td id="td_logo" colspan="3"></td>
 </tr>
 <tr>
  <td style="text-align:center;">

   <table class="navitable" cellpadding="0" cellspacing="0">
    <tr>
     <td style="vertical-align:top">
      [img]http://hpfranzpg.hp.funpic.de/pics/navigation.jpg[/img]
      [url='http://hpfranzpg.hp.funpic.de/index.html']Link#1[/url]
      [url='http://hpfranzpg.hp.funpic.de/index.html']Link#2[/url]
      [url='http://hpfranzpg.hp.funpic.de/index.html']Link#3[/url]
      [url='http://hpfranzpg.hp.funpic.de/index.html']Link#4[/url]
      <div class="placer1"></div>
      <div class="placer2"></div>
      <div class="placer1"></div>
      <div class="placer2"></div>
     </td>
    </tr>
   </table>
  </td>

  <td>Diese Seite ist leider im Moment noch im Aufbau!</td>

  <td>
   <table border="3" bordercolor="#e3e3e3" align="center" width="176" cellpadding="0" cellspacing="0" bgcolor="#000000">
    <tr>
     <td>
      <table border="0" align="center" width="170" cellpadding="0" cellspacing="0">
       <colgroup>
        <col width="170" align="center" valign="middle">
       </colgroup>
       <tr>
        <td height="45" width="170">[img]http://hpfranzpg.hp.funpic.de/pics/sonstiges.jpg[/img]</td>
       </tr>
       <tr>
        <td height="25" width="170" valign="middle" background="http://hpfranzpg.hp.funpic.de/pics/noeffect1.jpg"></td>
       </tr>
       <tr>
        <td height="25" width="170" valign="middle" background="http://hpfranzpg.hp.funpic.de/pics/noeffect2.jpg"></td>
       </tr>
       <tr>
        <td height="25" width="170" valign="middle" background="http://hpfranzpg.hp.funpic.de/pics/noeffect1.jpg"></td>
       </tr>
       <tr>
        <td height="25" width="170" valign="middle" background="http://hpfranzpg.hp.funpic.de/pics/noeffect2.jpg"></td>
       </tr>
       <tr>
        <td height="25" width="170" valign="middle" background="http://hpfranzpg.hp.funpic.de/pics/noeffect1.jpg"></td>
       </tr>
       <tr>
        <td height="25" width="170" valign="middle" background="http://hpfranzpg.hp.funpic.de/pics/noeffect2.jpg"></td>
       </tr>
       <tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td height="50" colspan="3"><font size="1">zuletzt aktualisiert: 19:42 25.01.2007<hr width="80%" align="center"><font size="1">Diese Seite ist urheberrechtlich geschützt!
Copyright &copy;Franz Peter Griger</font></td>
 </tr>
</table>
</body>
</html>

Alles anzeigen

Vergleich mal den Quelltext, der ist jetzt nicht einmal mehr halb so lang wie vorher. Wenn du Fragen hast, dann lies bitte erstmal bei SelfHTML nach und rest dann frag ruhig wieder hier

G.a.d.M.

Ronald

FranzPG

puuhh.... erstmal danke für deine Antwort...
es sieht zwar noch nicht ganz so aus, wie ich es mir vorgestellt habe, aber schon viel besser als meine Version!

Ist CSS zum Erstellen einer Homepage wirklich dringend nötig?
Ich glaube, wenn es so sein sollte (oder auch wenn nicht), ich lerne erst CSS, bevor ich mit der Homepage weitermache...

Danke!

MfG, FranzPG!

Ronald

Moin!

Zwingend nötig ist CSS nicht, wenn es aber vernünftig aussehen soll und die Browser es auch verstehen können sollen, dann kommst du heute um CSS nicht herum.
Alternativen wäre Browserweichen und/oder Javascript, was beides nicht wirklich glücklich ist.

G.a.d.M.

Ronald

phore

Zitat

Ist CSS zum Erstellen einer Homepage wirklich dringend nötig?

html stellt einfach die erforderlichen elemente zur verfügung, und mit css machst du dann das design draus.
dringend nötig ist relativ.. wenn dir das aussehen der webseite unwichtig ist, dann nicht. ansonsten eigentlich schon.

Zitat

Ich glaube, wenn es so sein sollte (oder auch wenn nicht), ich lerne erst CSS, bevor ich mit der Homepage weitermache...

das wär eine gute idee.

/edit - ronald war schneller

so long

Tags