Ergebnis 1 bis 1 von 1

Thema: Tutorial für Überschrift durch Bild ersetzen und trotzdem Text im Markup

  1. #1
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Tutorial für Überschrift durch Bild ersetzen und trotzdem Text im Markup

    Hi,

    Tutorial zur Image-Replacement-Technik nach Gilder/Levin:

    Ein header inklusive Hauptüberschrift einfach nur in den Quelltext schreiben und per CSS ein bißchen farblich und größenmäßig gestalten ist nicht schlecht, aber auch ziemlich langweilig.
    Ein schönes Foto/Grafik mit einer gut gestylten Schrift als header, macht da doch viel mehr her.
    Das Problem ist nur, das Suchmaschinen mit Bildern nix anfangen können und unsere Hauptüberschrift sollte natürlich auch vom "Sumabot" indexiert werden können.

    Mit Gilder/Levin bekommen wir beides hin:
    einen schönen header haben und den Überschriftentext als "Futter" für die "Sumabots" im Quelltext.

    Erstellt euch zunächst mit einem Grafikprogramm eurer Wahl eine schöne Header-grafik/foto mit den Ausmassen 800x150px.
    Den nachfolgenden Code einfach in einen HTML-Editor kopieren und als htm/html-Datei im gleichen Ordner wie die erstellte Grafik abspeichern.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Image Replacement nach Gilder/Levin</title>  
    <style type="text/css">
    *  {
        padding:0;
        margin:0;
    }
    body  {
        background-color:#696969;
        font:100.01%/1.5 verdana, arial, helvetica, sans-serif;
    }
    #wrapper  {
           width:800px;
        background-color:#dcdcdc;
        margin:2em auto;
    }
    #green  {
           width:800px;
           color:#f5f5f5;
        background-color:green;
    }
    p  {
        width:770px;
        color:#000;
        background-color:#dcdcdc;
        padding:15px;
        margin:2em auto;
    }
    .aenderungen  {
        color:#c20810;
    }
    </style>  
    </head>
    <body>
      <div id="wrapper">
      <div id="green"><h1>Kleine Kisten</h1></div>
     </div><!--Ende #wrapper-->
      <p>Die Überschrift in der Box soll aus optischen Gründen durch ein Bild ersetzt werden.<br />
            Da Suchmaschinen aber nicht in Bildern lesen können, wollen wir den Text der Überschrift
         durch eine HG-Grafik verdecken.<br /> Durch eine sogenannte <i>Image Replacement Technik</i>,
         hier nach <i>Gilder/Levin</i> wird die Grafik einfach über den Text geschoben.<br />
         Um das zu erreichen brauchen wir ein absolut positioniertes und ein relativ positioniertes Element. 
         Das absolut posit. Element  wird von den anderen Elementen ignoriert und kann deshalb
         über diese geschoben werden.<br /> Damit es sich nicht auf dem 
         Bildschirm oben links hinstellt, braucht es ein relativ positioniertes Elternelement, damit es sich daran 
         orientieren kann.<br />
         Bitte im Quelltext zwischen &lt;h1&gt; und <i>Kleine Kisten</i> ein leeres &lt;span&gt; notieren:<br />
         <strong class="aenderungen">&lt;h1&gt;&lt;span&gt;&lt;/span&gt;Kleine Kisten&lt;/h1&gt;</strong><br />
         Das leere &lt;span&gt; wird nun absolut positioniert und bekommt die HG-Grafik zugewiesen.<br />
         Das Elternelement &lt;h1&gt; bekommt <i>position:relative;</i> damit sich das absolute Element
         daran orientieren kann.<br />
         Die Grafik hat die Größe 800px x 150px.<br />
         Bitte tragen sie in die CSS-Anweisungen im Kopf dieses Dokumentes direkt unterhalb der Gestaltungsanweisungen von body folgendes 
            zusätzlich ein:<br /><strong class="aenderungen">h1 { position:relative; width:800px; height:150px; }</strong><br />
         <strong class="aenderungen">h1 span { position:absolute; width:100%; height:100%;<br /> 
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:url(kopp.jpg) no-repeat left top; }</strong><br />
          Speichern und im FF und im IE betrachten.<br />
         Im IE ist oben eine kleine Lücke, um die zu schließen ergänzen wir die CSS-Anweisungen wie folgt:<br />
         <strong class="aenderungen">* html h1 { line-height:1.2; }<br /> * + html h1 { line-height:1.2; }</strong><br />
         Das ist der sogenannte Sternchenhack für den IE.<br />
         <strong class="aenderungen">* html h1</strong> wird nur vom IE6 interpretiert,<br />
         <strong class="aenderungen">* + html h1</strong> wird nur vom IE7 interpretiert,<br />
         Alle anderen Browser ignorieren diese Deklarationen!<br />
         Jetzt müßte die Lücke oben verschwunden sein.<br />
         
         </p>         
    </body>
    </html>
    Im Browser aufrufen und den Anweisungen auf dem Bildschirm folgen.

    koslowski
    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 !!!!!
    Geändert von koslowski (22.09.2008 um 17:36 Uhr)

Ähnliche Themen

  1. Hyper Text Markup Language Newbie
    Von cretiv im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 12.10.2006, 08:45
  2. CSSZenGarden - Text in HTML-Datei durch CSS ersetzen?
    Von Stalafin im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.08.2006, 19:04
  3. Submit Button durch Bild ersetzen?
    Von Ivanman im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 23.03.2006, 18:17
  4. html code von überschrift als text in eine überschrift als
    Von anfängerein im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 26.11.2005, 23:43
  5. Tasten durch Gif´s ersetzen?
    Von darkblue im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 11.08.2005, 16:32

Stichworte

Berechtigungen

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