Ergebnis 1 bis 7 von 7

Thema: Links mit Hintergrund?

  1. #1
    HTML Newbie
    Registriert seit
    22.01.2007
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Links mit Hintergrund?

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    22.01.2007
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  4. #4
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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&#58;link, a&#58;visited  &#123;color&#58;#888888;text-decoration&#58;none;display&#58;block;width&#58;170px;height&#58;25px;
                           border&#58;0;text-indent&#58;35px;font-weight&#58;bold;font-size&#58;11px;line-height&#58;25px;&#125;
       a&#58;hover            &#123;color&#58;#DCCC0C;&#125;
       a.effect1          &#123;background-image&#58;url&#40;http&#58;//hpfranzpg.hp.funpic.de/pics/noeffect1.jpg&#41;;&#125;
       a.effect1&#58;hover    &#123;background-image&#58;url&#40;http&#58;//hpfranzpg.hp.funpic.de/pics/effect1.jpg&#41;;&#125;
       a.effect2          &#123;background-image&#58;url&#40;http&#58;//hpfranzpg.hp.funpic.de/pics/noeffect2.jpg&#41;;&#125;
       a.effect2&#58;hover    &#123;background-image&#58;url&#40;http&#58;//hpfranzpg.hp.funpic.de/pics/effect2.jpg&#41;;&#125;
       .placer1,.placer2   &#123;display&#58;block;width&#58;170px;height&#58;25px;text-indent&#58;35px;font-weight&#58;bold;
                           font-size&#58;11px;line-height&#58;25px;border&#58;0;&#125;
       .placer1           &#123;background-image&#58;url&#40;http&#58;//hpfranzpg.hp.funpic.de/pics/noeffect1.jpg&#41;;&#125;
       .placer2           &#123;background-image&#58;url&#40;http&#58;//hpfranzpg.hp.funpic.de/pics/noeffect2.jpg&#41;;&#125;
    
       body,td,p,br       &#123;font-family&#58;Verdana,Arial,'MS Sans Serif';&#125;
       body &#123;color&#58;#ffcc33;background-image&#58;url&#40;http&#58;//hpfranzpg.hp.funpic.de/pics/hintergrund.gif&#41;;background-color&#58;#666666;background-attachment&#58;fixed;margin&#58;0px;text-align&#58;center;&#125;
       #maintable         &#123;height&#58;100%;width&#58;1024px;margin&#58;auto;border-left&#58;2px outset #3F3F3F;
                           border-right&#58;2px outset #3F3F3F;&#125;
       .navitable         &#123;border&#58;3px ridge #e3e3e3;margin&#58;auto;width&#58;170px;height&#58;auto;background-color&#58;#000000;&#125;
       #td_logo           &#123;height&#58;100px;width&#58;1024px;vertical-align&#58;middle;
                           background-image&#58;url&#40;http&#58;//hpfranzpg.hp.funpic.de/pics/banner.jpg &#41;;&#125;
    
     </style>
    </head>
    
    <body>
    <table id="maintable" cellpadding="0" cellspacing="10" border="0">
     <colgroup>
      <col style="width&#58;180px">
      <col>
      <col style="width&#58;180px">
     </colgroup>
     <tr>
      <td id="td_logo" colspan="3"></td>
     </tr>
     <tr>
      <td style="text-align&#58;center;">
      
       <table class="navitable" cellpadding="0" cellspacing="0">
        <tr>
         <td style="vertical-align&#58;top">
          [img]http&#58;//hpfranzpg.hp.funpic.de/pics/navigation.jpg[/img]
          Link#1
          Link#2
          Link#3
          Link#4
          <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&#58;//hpfranzpg.hp.funpic.de/pics/sonstiges.jpg[/img]</td>
           </tr>
           <tr>
            <td height="25" width="170" valign="middle" background="http&#58;//hpfranzpg.hp.funpic.de/pics/noeffect1.jpg"></td>
           </tr>
           <tr>
            <td height="25" width="170" valign="middle" background="http&#58;//hpfranzpg.hp.funpic.de/pics/noeffect2.jpg"></td>
           </tr>
           <tr>
            <td height="25" width="170" valign="middle" background="http&#58;//hpfranzpg.hp.funpic.de/pics/noeffect1.jpg"></td>
           </tr>
           <tr>
            <td height="25" width="170" valign="middle" background="http&#58;//hpfranzpg.hp.funpic.de/pics/noeffect2.jpg"></td>
           </tr>
           <tr>
            <td height="25" width="170" valign="middle" background="http&#58;//hpfranzpg.hp.funpic.de/pics/noeffect1.jpg"></td>
           </tr>
           <tr>
            <td height="25" width="170" valign="middle" background="http&#58;//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&#58; 19&#58;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>
    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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    22.01.2007
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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!

  6. #6
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  7. #7
    Forum Guru
    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

    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

Ähnliche Themen

  1. schwarzer Hintergrund bei Links
    Von x-dast im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 10.09.2006, 17:32
  2. Hintergrund bei Target Links?
    Von im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 01.03.2006, 18:44
  3. Hintergrund?!
    Von Pitchfork im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.09.2005, 13:25
  4. Hintergrund von rechts nach links?
    Von hhspre im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 04.08.2005, 13:00
  5. hintergrund
    Von viper3000 im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 25
    Letzter Beitrag: 24.06.2005, 17:44

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •