kostenloser Webspace werbefrei: lima-city

Frage zum Layout.

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   fiffi

   

   fiffi hat kostenlosen Webspace.

   20:40, 8.3.2006

   Ich hatte mal eine Frage.Also wenn ich ein Layout mache,in Photoshop,wird oft in Tutorials geschrieben das die Navi direkt im Bild ist.http://maarjakivi.de.vu/
   Da zum Beispiel.Wie kann man das mit HTML machen?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. thoba

   Co-Admin

   thoba hat kostenlosen Webspace.

   20:43, 8.3.2006

   
   Wie kann man das mit HTML machen?
   

   
   Da es sich um HTML handelt, verschoben nach HTML & Javascript.

4. robin

   

   robin hat kostenlosen Webspace.

   23:22, 17.3.2006

   schau mal hier:
   http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren
   du hast das bild und definierst dann bereiche auf dem bild
   das k?nnen kreise und rechtecke sein soweit ich wei?
   

5. portalofhell

   portalofhell hat kostenlosen Webspace.

   23:55, 17.3.2006

   Das ist gar nicht so schwierig.
   
   Ersmal denken wir uns, dass die schr?gen
   Bilder einfach nur Quadrate sind, mit ein
   wenig schwarz drumrum und einem schiefen
   Bild als Inhalt.
   
   Zun?chst machen wir also ein solches
   Quadrat, d.h. wir machen ein neues Bild,
   setzen da etwas kleiner ein Foto rein,
   einen Rahmeneffekt drumherum,
   schreiben den Text dar?ber und verdrehen
   das ganze ein wenig nach links, aber so
   dass noch alles sichtbar ist. Dann f?llen
   wir den Bereich drumrum - also das was ausserhalb
   des Rahmens ist - mt der Hintergrundfarbe der
   Seite.
   
   Im Html kannst du dann eine normale Tabelle
   f?r die Navigation erstellen:
   <table>
   <tr>
   <td class="home">
   <a href="home.html>
   <img src="transparentesbild.gif">
   </a>
   </td>
   </tr>
   <tr>
   <td class="seite1">
   <a href="seite1.html>
   <img src="transparentesbild.gif">
   </a>
   </td>
   </tr>
   </table>
   
   Als n?chstes muss ein transparentes Gif
   erstellt werden, das einfach nur dar?ber
   liegt, aber keine Funktion hat, es soll
   jedoch genauso gro? sein wie die Quadrate.
   Dieses Bild sorgt dann daf?r, dass der
   Link auch funktioniert.
   
   Die einzelnen Bilder kannst du dann
   ?ber die CSS Datei als Hintergrund einbinden
   
   .home
   {
   background-image: url('home.jpg');
   }
   .seite1
   {
   background-image: url('seite1.jpg');
   }
   usw...
   

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?