[Problem] Verweis-sensitive Grafik in XHTML

Foxbuild

Foxbuild

Reisender
Hallo,

Ich beschäftige mich schon seid ein paar Tagen mit XHTML 1.0.
Jetzt bin ich aber auf ein Problem gestoßen. Ich wollte, zum "Übungszweck", eine eingache HP erstellen. Dann kam ich an den Punkt "Navigastionsleiste".

Das sah dann im Endefekt so aus:
HTML: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>So lala</title>
<meta name="description" content="Das ist eine Berschreibung." />
<meta name="author" content="Ich" />
</head>
<body background="Images/bg.gif">
<table align="center">
 <tr>
  <td><img type="image/jpg" alt="Header" src="Images/header.jpg" /></td></tr>
  </table>
<p>
<img usemap="#navileiste.jpg" src="images/navileiste.jpg" width="1064" height="50" border="0" alt="Navileiste" />
<map name="navileiste" title="Navileiste" >
<area shape="RECT" coords="0,0,142,50" href="http://www.lirgendwo.de" alt="Link 1" />
<area shape="RECT" coords="143,0,439,50" href="http://www.dahin.de" alt="Link 2" />
<area shape="RECT" coords="440,0,589,50" href="http://www.nirgendwo.de" alt="Link 3" />
<area shape="RECT" coords="590,0,736,50" href="http://www.über-aus-lustig.de" alt="Link 4" />
<area shape="RECT" coords="737,0,883,50" href="http://www.ganz-und-garnicht-lustig.de" alt="Link 5" />
<area shape="RECT" coords="884,0,1064,50" href="http://www.oder-doch-lustig.de" alt="Link 6" />
</map>
</p></body>
</html>

Das Problem ist, wenn ich mir die Seite Anzeigen lasse, sehe ich den Hintergrund, den Header, die Grafik der Navileiste aber darauf keine Verweise.
Weis jemand woran das liegt oder wenigsens eine andere Möglichkeit?

Danke schonmal im Vorraus!
 
Mal abgesehen davon, dass das ein äußerst eigenwilliger Stil ist (um nicht zu sagen äußerst unschön), (d)ein Fehler liegt vermutlich hier (korrigierte Version):

HTML: 
<img usemap="#navileiste" src="images/navileiste.jpg" width="1064" height="50" border="0" alt="Navileiste" />

Warum das unschön ist:
  • Hintergrundgrafiken in HTML zu definieren ist veraltet. Heutzutage macht man das über CSS.
  • Dein Header-Bild kannst du auch in ein <div>-Tag packen, dazu musst du keine Tabelle missbrauchen
  • Statt einer Imagemap für die Navigation könntest du auch eine Reihe Bilder verwenden:
    HTML: 
    <a href="#link1"><img src="img/nav/link1.png" alt="link1" width="50" height="20" /></a><a href="#link2"><img src="img/nav/link2.png" alt="link2" width="50" height="20" /></a>
    Das wäre deutlich einfacher und flexibler.
  • Eine Angabe zur Zeichenkodierung für den Browser fehlt (wird dir z.B. bei einer Validierung angemeckert werden):
    HTML: 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  • Die Zeile
    HTML: 
    <?xml version="1.0" encoding="ISO-8859-1" ?>
    ganz oben wird dir den Internet Explorer in den Quirks-Mode schalten
  • UTF-8 statt iso-8859-1 wäre zeitgemäßer ;)

Aber das wird schon noch, Übung macht den Meister! ;)
 
  • Like
Reaktionen: Foxbuild
Danke!
Ich hab jetzt erstmal das so geändert
HTML: 
<img usemap="#navileiste" ...
.Es klappt immer noch nicht mit der Imagemap, aber wie solls denn auch anders sein, funktioniert deine Version natürlich.:)
Das Problem mit dem CSS, ist, dass ich das noch nicht kann - angeguckt zwar schon aber noch nicht drauf eingegangen. Ich wollt mir erstmal das XHTML so aneignen, dass ich es halbwegs beherrsche und dann mich um das Zusätzliche "kümmern"(Stylesheet/CSS+PHP+Java(-einbindung)).
 
Also ich hab auch noch ne kurze frage zu html. Wenn ich ein bild verlinke weil ich es zB als button benutze. wie mach ich es das sich kein blauer oder lilaner kasten drum bilden sobald man es zB anklickt?
 
border ist null das ist ja der tabellen rahmen. aber der umriss vom bild färbt sich ja. Also wie bring ich es zustande das es nicht angezeigt wird, dass ein link auf dem pic ist?
 
Die Hintergrundgrafik mit CSS definieren:

Code: 
<style type="text/css">

body {background-image:url(Images/bg.gif);}

</style>

Eine gute Beispielseite für CSS

CSS4YOU
 
Unbekannt888 schrieb:
border ist null das ist ja der tabellen rahmen. aber der umriss vom bild färbt sich ja. Also wie bring ich es zustande das es nicht angezeigt wird, dass ein link auf dem pic ist?
Zum Vergrößern anklicken....

<border=""> ist nicht nur für Tabellen ;) Aber machs lieber wie Jubidu gesagt hat-->CSS

@Alle: Wenn ich jetzt im <head> die Verschiedene Teile der Seite formatiere - also auch das mit den Bildern - wie trenn ich die?
 
In dem du Klassen oder ID's vergibst.

Zum Beispiel
Code: 
<style type="text/css">
.VerweisGrafik {padding:2px;
                     margin:0px;
                     }
</style>
<body>
<img usemap="#navileiste.jpg" src="images/navileiste.jpg" width="1064" height="50" border="0" [COLOR="Red"]class="VerweisGrafik" [/COLOR]alt="Navileiste" />

Betreffs Hyperlinks ohne Rand:

Dies gilt auch für Grafiken, die als Links fungieren.

a {text-decoration:none;}

NNW
 
Noch 'n Problem:
Wenn ich einen <div> Container habe,dem mit CSS eine Hintergrundgrafik zugeteilt, und dem ein Header zuschieben will, wird der Header nicht auf den Hintergrund gesetzt, sondern die Hintergrundgrafik "fängt" unter dem Header an. Wie schaff ich's, dass der Header auf der Hindergrundgrafik erscheint, nicht darüber.
 
theOutlaw schrieb:
Noch 'n Problem:
Wenn ich einen <div> Container habe,dem mit CSS eine Hintergrundgrafik zugeteilt, und dem ein Header zuschieben will, wird der Header nicht auf den Hintergrund gesetzt, sondern die Hintergrundgrafik "fängt" unter dem Header an. Wie schaff ich's, dass der Header auf der Hindergrundgrafik erscheint, nicht darüber.
Zum Vergrößern anklicken....

Was meinst du mit Header ?
 
Headergrafik.

Ich habs nach einigen versuchen hingekriegt, mit
HTML: 
<img sry...style="position:fixed"

Dabei ist mir aufgefallen, das die Headergrafik einfach nur den Hintergrund verdeckt hat:rolleyes:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Jim-Panse
Fehler bei einer Seite mit Tabelle
Antworten
2
Aufrufe
743
PC- und Technik-Forum
Jim-Panse
Jim-Panse
EraZeR
PHP-Problem
Antworten
13
Aufrufe
2K
PC- und Technik-Forum
Jubidu
Jubidu
L
[html] Grafik unabhängig der Auflösung ausrichten
Antworten
8
Aufrufe
2K
PC- und Technik-Forum
Cheecat
Cheecat
Oben Unten
Zurück