• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JavaScript in XHTML

Status
Für weitere Antworten geschlossen.

lorach

Neues Mitglied
Hi
Ich habe nur eine kleine Frage an euch:

Ich erstelle mir gerade eine XHTML-basierende Webseite. Ich habe jetzt eine JavaScript-Navigation gefunden die ich einbauen möchte. Das Problem ist nur das diese im Firefox, wenn das Dokument als XHTML Dokument deklariert ist, also so:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
[/html]nicht richtig dargestellt wird (die Zeilen sind viel zu hoch). Im IE funkt sie ohne Probleme. Wenn das Dokument nicht als XHTML deklariert ist funkt sie auch im FF super.
Jetzt ist meine Frage, was kann ich machen damit sie auch im Firefox funktioniert wenn das Dokument als XHTML deklariert ist?

Hier noch der Gesamte Quelltext der Navigation:
[html]<style>
<!--
.BorderOn  { width:90px;
             margin-left:10px;
             border:1px solid #DADADA }
.BorderOff { width:90px;
             margin-left:0px;
             border:1px solid #C0C081 }

A.Links:link      {color:#DADADA; text-decoration:none;}
A.Links:visited   {color:#DADADA; text-decoration:none;}
A.Links:active    {color:#000000; text-decoration:none;}
A.Links:hover     {color:#000000; text-decoration:none;}

//-->
</style>
<script language="JavaScript1.2">
<!--

offMessage = "Schön dass Sie da sind!"

function boxOn(which,message){
   if (document.all||document.getElementById){
      which.className='BorderOn'
      if (document.getElementById)
{document.getElementById("Message").innerHTML = message}
         else {Message.innerHTML = message}
   }
}

function boxOff(which){
   if (document.all||document.getElementById){
      which.className='BorderOff'
      if (document.getElementById)
{document.getElementById("Message").innerHTML = offMessage}
         else {Message.innerHTML = offMessage}
   }
}

//-->
</script>

<body bgcolor="#407491">

<table cellpadding="0" cellspacing="0" width="100">
  <tr>
    <td align="center"><!-- Header Table // --> <table cellpadding="3" cellspacing="0" bgcolor="#000000"
    class="BorderOff">
      <tr>
        <td><p align="center"><a href="http://www.jsunity.de"><strong><font color="#C0C081" size="2" face="Arial">JSUNITY</font></strong></a></td>
      </tr>
    </table>
    <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Sie finden hier die wohl größte JavaScript-Sammlung im deutsch- sprachigen Raum.')" onMouseout="boxOff(this)" bgcolor="#525252">
      <tr>
        <td><p align="center"><font color="#00FF80" size="2" face="Arial"><a class="Links" href="http://www.jsunity.de/index.php?opencat=Home" target="_blank">Home</a></font></td>
      </tr>
    </table>
    <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Hier finden Sie unsere JavaScripts aufgeteilt in mehrere Kategorien.')" onMouseout="boxOff(this)" bgcolor="#707070">
      <tr>
        <td><p align="center"><font color="#00FF80" size="2" face="Arial"><a class="Links" href="http://www.jsunity.de/index.php?opencat=JavaScripts" target="_blank">JavaScripts</a></font></td>
      </tr>
    </table>
    <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'PHP - die perfekte Sprache.')" onMouseout="boxOff(this)"     bgcolor="#8C8C8C">
      <tr>
        <td><p align="center"><font color="#00FF80" size="2" face="Arial"><a class="Links" href="http://www.jsunity.de/index.php?opencat=PHP+%2F+MySQL" target="_blank">PHP/MySQL</a></font></td>
      </tr>
    </table>
    <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Hier finden Sie zahlreiche Photoshop-Tutorials.')" onMouseout="boxOff(this)" bgcolor="#9B9B9B">      <tr>
        <td><p align="center"><font color="#00FF80" size="2" face="Arial"><a class="Links" href="http://www.jsunity.de/index.php?opencat=Photoshop" target="_blank">Photoshop</a></font></td>
      </tr>
    </table>
    <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Im Impressum finden Sie alles Wissenswerte über diese Seiten.')" onMouseout="boxOff(this)" bgcolor="#A7A7A7">
      <tr>
        <td><p align="center"><font color="#00FF80" size="2" face="Arial"><a class="Links" href="http://www.jsunity.de/index.php?opencat=Impressum" target="_blank">Impressum</a></font></td>
      </tr>
    </table>
    <table cellpadding="1" cellspacing="0" bgcolor="#BABA74" width="90">
      <tr>
        <td><table cellpadding="3" cellspacing="0" bgcolor="#000000" width="88" height="150" background="gfx/js_logopic3.jpg">
          <tr>
            <td align="left" valign="top"><p align="center"><strong><font id="Message" color="#C0C081" face="Arial" size="2">Welcome to JSUNITY!</font></strong></td>
          </tr>
        </table>
        </td>
      </tr>
    </table>
    </td>
  </tr>
</table>
Danke im Voraus
 
Zuletzt bearbeitet:
Oh sry, mein Fehler, da habe ich wohl den Falschen Code reinkopiert....
Ich habe meine Seiten natürlich so als XHTML deklariert:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ich habe vorhin nur auspribiert ob das Script funkt (es funkt) wenn ich es als HTML 4 deklariere, und habe dann den falschen Code hier rein gepostet.

Aber leider funkt es mit XHTML einfach im FF nicht.
 
Was geht denn nicht? Wird nicht der richtige Empfänger angefunkt?

EIne JavaScript-Navigation ist keine gute Idee in Sachen Nutzbarkeit. Ist JS abgeschaltet, ist die ganze Website u.U. unbenutzbar.
 
Jo, ich weiss das es keine Gute Idee ist...:-?

Wie ihr sicher seht ist die Navi wie eine Tabelle auzfgebaut und wenn das Dokument als XHTML definiert ist, werden (nur) im Firefox die Zellen etwa drei mal so hoch dargestellt wie sie sein sollten.
 
Wer würde denn auf die Idee kommen, eine Navigation als Tabelle auszuzeichnen?
 
Ich glaube du hast mich nicht ganz verstanden, deshalb habe ich zwei Screenshots von meinem Problem gemacht. Wie ihr sicher seht sind die Zellen im Firefox viel höher als im IE... Meine frage ist jetzt nur, was muss ich ändern damit auch der Firefox das richtig darstellt. (Wie schon gesagt wenn das Dokument als HTML und nicht als XHTML definiert ist, funktioniert es auch im Firefox)
 

Anhänge

  • Firefox.jpg
    Firefox.jpg
    7,5 KB · Aufrufe: 12
  • IE.jpg
    IE.jpg
    6,7 KB · Aufrufe: 8
Anhand der Screenshots kann ich keine Fehler im Code finden. Und Deinen Code oben könntest Du bitte statt mit dem [*html]-Tag mit dem [*php]-Tag auszeichnen, dann kann man ihn auch lesen. Das kannst Du nicht wissen, Bug im Forum.

Eine Anwendung für eine Tabelle ist das definitiv nicht.

Und ob man HTML benutzt oder XHTML, das hat eigentlich keine Auswirkung auf die Darstellung. Interessant ist da nur der Doctype, der sollte die Browser schon in den Standards Mode versetzen, sonst gibts natürlich Darstellungsunterschiede.
 
Hast Du die Tabelle inzwischen durch eine Liste ersetzt?

Dass es Darstellungsunterschiede kommt, ist eigentlich klar, denn Du setzt ja nirgendwo die von Dir gewünschten Größen und Abstände. Das geschicht im Stylesheet.

1. Tabellen entfernen. Diese Auszeichnung ist falsch. Liste daraus machen.
2. Design&Layout komplett in CSS. Keine veralteten HTML-Attribute für sowas.
3. margin und padding so definieren, wie Du es haben willst. Wenn Du nichts angibst, macht jeder Browser, was er will.

Dann sollte es gehen.
 
Ich habe nichts geändert, ich habe das Script im Internet gefunden und dachte es wäre wie eine Tabelle aufgebaut... Ich habe noch sozusagen keine Erfahrung mit HTML, könntest du mal eine Vorschlag machen wie du es machen würdest?

Danke schon Mal.
 
könntest du mal eine Vorschlag machen wie du es machen würdest?
Schreibe ich Geisterschrift?

Wenn Du Deine Probleme konkretisierst, kann ich Dir gern antworten, ein Tutorial für HTML kann ich nicht mal eben schnell in eine Antwort schreiben.
"Kann ich nicht" ist meist ne schlechte Ausrede, ein bisschen Eigeninitiative und das, was andere schreiben selbständig versuchen, mit Inhalt zu füllen, ist nie verkehrt.

HTML ist eine Strukturbeschreibungssprache. Damit legst Du fest, was Dein Inhalt bedeuten soll: Was ist eine Überschrift, was ist ein Textabsatz, was ist eine Liste, welche Textpassagen sind wichtig, usw. Tabellen benutzt man dabei nur zur Auszeichnung tabellarischer Daten. Nichts, was man in HTML macht, hat mit Layout oder Design zu tun. Niemals wählt man ein Tag, weil es im aktuellen Browser vielleicht eine gewünschte darstellung hervorruft.
 
Okey also
Was man in meinem ersten Screenshot nicht sieht (meine Fehler:?), ist das der Link bei mouseon sich nach rechts verschiebt (siehe neuen Screenshot) meine grösste Frage ist jetzt ob man das mit einer Lieste überhaupt machen kann?
 

Anhänge

  • Menu.jpg
    Menu.jpg
    8 KB · Aufrufe: 7
Du hast doch ein Problem mit der Darstellung. Die Darstellung hat mit HTML rein gar nichts zu tun.
Ein Menü wird als Liste ausgezeichnet, weil es die richtige Auszeichnung im Sinne von HTML ist. Mit der Darstellung hat das aber gar nichts zu tun. Darstellung wird allein von CSS gemacht.
Die Frage, ob man das mit einer Liste machen kann, ist also sinnfrei.

Zur Bearbeitung Deiner Probleme solltest Du mal einen Link posten, keine Screenshots und keinen Quellcode.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben