Verschachtelte Listen (und ein Prob mit Tabellen)

Ich hab zwei "Probleme" *g* Im Moment arbeite ich an einer Website, die ich abgeben muss und aus dem Grund lass ich jede Seite bei W3C auf ihre Korrektheit überprüfen.
Jetzt wollte/muss ich auf einer Seite eine verschachtelte Liste erstellen, also nummeriert mit Unterpunkten.

Code:

---

        <ol>
          <li>The Sword of Shannara (1977 in den USA erschienen)</li>
              <ul>
                  <li>Das Schwert von Shannara (1978 in Deutschland erschienen)</li>
                  <li>Der Sohn von Shannara (1978 in Deutschland erschienen)</li>
                  <li>Der Erbe von Shannara (1978 in Deutschland erschienen)</li>
            </ul>
            <br/>
          <li>The Elfstones of Shannara (1982 in den USA erschienen)</li>
            <ul>
                  <li>Die Elfensteine von Shannara (1983 in Deutschland erschienen)</li>
                  <li>Der Druide von Shannara (1983 in Deutschland erschienen)</li>
                  <li>Die Dämonen von Shannara (1983 in Deutschland erschienen)</li>
            </ul>
            <br/>
      </ol>

---

Jedenfalls wird mir da immer gesagt, dass da was nicht passt, ich weiß aber leider nicht genau was, daher hoffe ich, dass ihr mir helfen könnt? Es kommen dann solche Meldungen:

Zitat:

---

Line 42, column 9: document type does not allow element "ol" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<ol>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").


Line 44, column 61: document type does not allow element "ul" here; assuming missing "li" start-tag

---

(nur mal so als Beispiel)


Mein 2. Problem ist, dass ich auf meiner Seite eine Tabelle habe. Links ist das Menü und rechts soll dann eben der Inhalt der einzelnen Links hinkommen. Die einzelnen Menüpunkte sind ca 50 Pixel hoch (Buttons), wenn jedoch der Text im rechten Teil länger ist als die eigentliche Seite, werden die Tabellen-Zellen im Linken Bereich auseinandergezogen, so dass sie viel größer als 50 Pixel sind (wobei das nur im IE und nicht bei Opera auftritt). Das soll so aber eigentlich nicht sein, höchstens die letzte Zelle soll eben größer sein (falls das jetzt jemand verstanden hat *g*) Ich werd die Seite gleich mal hochladen, dann editier ich den Link hier noch rein, damit man sich mal ein Bild machen kann *g*

Hier ist der Link zu der Seite. Wäre schön, wenn mir jemand helfen könnte ^_^ (Diverse Schönheitsanmerkungen bitte unterlassen, die Seite ist ja noch im Aufbau und erstmal nur so zu Testzwecken da, deshalb sind noch inhaltliche Fehler da *g*)

Code:

---

        <ol>
        <li>The Sword of Shannara (1977 in den USA erschienen)
            <ul>
                <li>Das Schwert von Shannara (1978 in Deutschland erschienen)</li>
                <li>Der Sohn von Shannara (1978 in Deutschland erschienen)</li>
                <li>Der Erbe von Shannara (1978 in Deutschland erschienen)</li>
            </ul>
        </li>
        <li>The Elfstones of Shannara (1982 in den USA erschienen)
            <ul>
                <li>Die Elfensteine von Shannara (1983 in Deutschland erschienen)</li>
                <li>Der Druide von Shannara (1983 in Deutschland erschienen)</li>
                <li>Die Dämonen von Shannara (1983 in Deutschland erschienen)</li>
            </ul>
        </li>
        </ol>

---

So ist es richtig verschachtelt.

Nebenbei, wenn du dich ans W3C halten möchtest solltest du auch die Notizen des Validators lesen ;), dir fehlt nämlich eine Angabe zur Zeichenkodierung:

Code:

---

<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />

---

Für dein Tabellenproblem hast du mehrere Lösungen:
1. Einfach alle Bilder untereinander anzeigen (ohne weitere Tabellenzeilen).
2. Du gibst den Zellen die genaue Größe von 50px (z.B. per CSS) und erstellst eine weitere 'blinde' Zelle, ohne Größenangabe, diese sollte sich dann der rechten Spalte anpassen (so machen es momentan die oberste und unterste bei einer Ansicht per Firefox).
3. Wie 1. nur, dass du eine weitere Tabelle in der linken Zelle erstellst, die dir dann z.B. den Tabellenrand formatiert.

Ach so funktioniert das ^_^ Vielen Dank :)

Naja hab bei dem Validator das meiste nur überflogen, weil ich eh nur die Hälfte verstanden habe Aber danke für den Hinweis, werd das gleich mal einbauen :)

Schön, dass das alles so funktioniert, aber bitte update doch dann das Resultat auch ;)

Ansonsten sag ich dir jetzt, dass der erste Menüpunkt vertikal zentriert in der Zelle ist! (kann sein, dass das in deinem Update dann bereits verarbeitet ist, aber das hast du ja nicht hochgeladen ;) )

10 Tage Signaturverbot von Kimahri
8 days remaining

Ist geupdatet, auch wenn ich nicht ganz verstehe, wieso *g* Es ist ja nur ne Art Testseite und da es ja nun funktioniert, ist es ja in Ordnung ^^ Außer hier will noch jemand was aus meinem Quelltext lernen *hust hust* Aber da er sowieso demnächst nicht mehr da ist, bringts das nicht wirklich *G*

aber ich denke, genau deshalb sollte die seite dann auch drin stehen: damit jemand sich die angucken und daraus lernen kann!

bei mir zumindest ist jetzt ein rahmen um "Über den Autor", weil das bild ein link ist. glaube nicht, dass das gewollt ist! ;) aber ansonsten entschuldige ich mich dafür, dass ich jetzt naiv das update sehen wollte! http://www.multimediaxis.de/images/s.../old/sm_12.gif

10 Tage Signaturverbot von Kimahri wegen angelassener Signatur in einem "Sig-off"-Theard
7 days remaining

Nee is ja nicht schlimm ^_^ Hab nur erst gedacht, dass ich was falsch gemacht hätte oder so, hörte sich son bisschen so an (auch wenns nicht so gemeint war, ist mir schon klar :D) Wieso ist denn da ein Rahmen drum? Womit surfst du denn? Ich hab weder im IE noch bei Opera einen Rahmen :confused:
Insofern weiß ich auch nicht, womit man das wegbekommen soll und testen könnt ichs ja auch nicht. Aber ist im Prinzip (jedenfalls für meine Zwecke) egal, da die dozentin wahrscheinlich eh nur den IE zum angucken benutzt *G*

Wegen dem Rahmen:

Da gibts zwei Möglichkeiten. Entweder er hat User Stylesheets drinnen ohne es zu merken, oder was ich bei manchen Browser gesehen habe ist, dass wenn Bilder verlinkt sind und kein border="0" im img-Tag steht, so wird nach anklicken des Links unter Umständen in Rahmen angezeigt. Ist allerdings nicht immer so.

Ich hab aber überall den border="0"-Tag drin, kriegt man nicht sonst automatisch einen Rahmen um das bild von einem Pixel?

Naja, scheint ja dann wohl an ihm und nicht an mir zu liegen, hoff ich :D

Nur wenn du ein Bild als Link nutzt, entsteht ein Rahmen. In deinem aktuell hochgeladenem Quelltext sehe ich kein border="0" Attribut, aber das muss auch nicht sein, denn man kann das ganze auch einfach mit Stylesheets verhindern:

Code:

---

img { border-width: 0px; }

---

Nebenbei hast du auch einen kleinen Fehler im DOCTYPE: Statt W3C/DTD muss es W3C//DTD lauten.

Oops O.o sonst mach ich den Tag eigentlich immer hin, peinlich *g* Aber heute morgen ist sowieso alles daneben gegangen, kein Wunder, dass da auch was falsch ist.


Das man / doppelt hinschreiben musste, wusste ich gar nicht. Hab das aus den Materialien meiner Dozentin abgeschrieben, tztz, hätte nicht gedacht, dass die mir was falsches beibringt :D :rolleyes:

Danke jedenfalls, werd das dann morgen berichtigen (heute ist kein guter Tag, bis ich alles berichtigt hab, hab ich wohl eher noch 10 Fehler mehr drin :p :D)

Zitat:

---

Original geschrieben von mitaki

Code:

---

img { border-width: 0px; }

---

---

Wenn es so einen Code gibt, der für alle Bilder den Rand wegnimmt, gibt es vielleicht auch einen, der grundsätzlich dafür sorgt, dass bilder in die mitte gerückt werden oder muss ich da immer noch überall 'von hand' align="center" in den html-code einfügen?

Und wo ich grad dabei bin, Fragen zu stellen *g*

Ich hab folgenden Code von einer Freundin bekommen:

Code:

---

<head>
<script Language=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
function newWindow ()
{
neuWindow = window.open( "URL der Seite mit dem großen Bild.html",
"neu", "width=xxx,height=xxx", "titlebar=no",
 "menubar=no", "outerheight=656", "resizeable=no")
}
</script>
</head>

<body>
<a href="javascript:newWindow()">Link</a></font>
</font><a href="javascript:newWindow()">
<img SRC="Bild.jpg" BORDER=0 height=1 width=1></a>
</body>

---

Der ist ja dafür da, dass ein Bild beim Anklicken in einer Art Pop-Up nochmal größer dargestellt wird (zumindest wollte ich so einen Code haben und daraufhin hat sie mir eben den gegeben, deswegen geh ich mal davon aus, dass dem auch so ist *G*).
Wenn ich mir den aber so angucke, ist der ja nur dafür geeignet, dass auf der Seite nur ein Bild ist, das ich anklicken will. Jetzt hab ich aber eine Seite, wo mehrere Bilder drauf sind und ich würds gern so hinbekommen, dass ich wenn ich Bild 1 anklicke das in vergrößerter Form in einem Pop-Up erscheint und wenn ich bild 2 anklicke eben das Bild. (sind insgesamt ca 20 Bilder)
Geht das auch mit Java-Script und wenn ja wie?
Falls mir jetzt jemand eine Lösung mit PHP anbieten möchte, so soll er das gleich lassen, ich darf kein PHP verwenden, das lern ich erst nächstes Semester und die Website, die ich abgeben soll, soll nicht dynamisch sein, abgesehen von so Kram, den ich mit Java-Script machen kann.

edit: ich glaub die beiden </font>-tags gehören da nicht rein, sie hat den Code wahrscheinlich nur aus einer alten Seite von sich rauskopiert *g*

Es gibt die Angabe text-align: center; doch diese kannst du nicht direkt auf ein Bild anwenden. Du kannst es aber z.B. einer Tabellenzelle <td> geben, das sollte auf jeden Fall funktionieren (bei mir ist mit IE6 und FF0.9 alles in Ordnung).

Ich schreib dir das gleich ganz konform ;)

Code:

---

<script type="text/javascript">
<!--
function newWindow(uri,uwidth,uheight)
{
 neuWindow = window.open(uri, 'neu', 'width=' + uwidth + ',height=' + uheight, 'titlebar=no', 'menubar=no', 'resizeable=no');
}
//-->
</script>

---

An deiner Stelle würde ich resizeable auf yes stellen, das ist benutzerfreundlicher. Weiterhin bin ich mir nicht sicher, ob das neuWindow = überhaupt benötigt wird, aber so lange es funktioniert...
Ach ja, aufrufen geht so (javascript gehört normal zusammengeschrieben, das Forum trennt die beiden Wörten aber automatisch):

Code:

---

<a href="javascript:newWindow('aa',bb,cc);">link</a>

---

Dabei steht 'aa' für die Adresse des Bildes, 'bb' für die Breite des PopUps, und 'cc' für die Höhe des PopUps. 'bb' und 'cc' müssen nicht in ' stehen, da sie Zahlen sind.

Wie meinst du das, ich kann es einer Tabellenzelle geben? Also per HTML oder per CSS? Ich hab nämlich für jedes Bild eine eigene Zelle, das wär genauso umständlich in HTML wie wenn ichs gleich ins Bild reinpacken würde.

Das andere werd ich morgen mal ausprobieren, vielen Dank :) Ich hoffe ich krieg alles so hin, sonst meld ich mich eben wieder :D

Per CSS, Doppelpunkte bedeute immer CSS^^
Sag mal, kennst du die <colgroup> und <col> Elemente? Direkt nach dem <table> Tag notiert man <colgroup> und </colgroup> darin befindet sich für jede Tabellenspalte ein <col> Element, das du individuell gestalten kannst. Sieh dir dazu diesen Code im Browser an:

Code:

---

<style type="text/css">
col.menu { background-color:red; color:black; text-align: left; }
col.content { background-color:blue; color:pink; text-align: center; }
col.navi_zwo { background-color:green; color:orange; text-align: right; }
</style>

<table width="100%">
<colgroup><col class="menu"><col class="content"><col class="navi_zwo"></colgroup>
<tr>
 <td>BE</td><!-- Eigenschaften von 'menu' -->
 <td>CE</td><!-- Eigenschaften von 'content' -->
 <td>DE</td><!-- Eigenschaften von 'navi_zwo' -->
</tr>
<tr>
 <td>EF</td><!-- Eigenschaften von 'menu' -->
 <td>GE</td><!-- Eigenschaften von 'content' -->
 <td>HA</td><!-- Eigenschaften von 'navi_zwo' -->
</tr>
<tr>
 <td>KA</td><!-- Eigenschaften von 'menu' -->
 <td>EL</td><!-- Eigenschaften von 'content' -->
 <td>EM</td><!-- Eigenschaften von 'navi_zwo' -->
 </tr>
</table>

---

Naja, aber das bezieht sich ja immer noch nur auf einen Text und nicht auf Bilder. Texte ausrichten ist ja nicht das Problem, aber bis jetzt kleben alle Bilder links.

Code:

---

<table align="center" border="1" width="100%">
    <tr>
        <td width="33%">
            <img src="schwert_small.gif" alt="Das Schwert von Shannara" title="Das Schwert von Shannara"/>
            <br/>
            Das Schwert von Shannara
        </td>
        <td width="33%">
            <img src="sohn_small.gif" alt="Der Sohn von Shannara" title="Der Sohn von Shannara"/>
            <br/>
            Der Sohn von Shannara
        </td>
        <td width="33%">
            <img src="erbe_small.gif" alt="Der Erbe von Shannara" title="Der Erbe von Shannara"/>
            <br/>
            Der Erbe von Shannara
        </td>
    </tr>
</table>

---

Das ist jetzt nur ein Ausschnitt, insgesamt hab ich 7 oder 8 solcher mini-tabellen untereinander, wo immer 2-3 Bilder nebeneinander stehen sollen, für jedes bild eine Zelle, in den Zellen soll das Bild dann zentriert stehen. Irgendwie versteh ich da den Zusammenhang mit deinem code nicht so richtig §doof

edit: Naja egal, ich hab jetzt in jede Zelle ein <div align="center"> gepackt und das Problem eben so gelöst, war zwar etwas viel Schreibkarm (sogar mit copy&paste *G*) aber was solls :D

Wenn du den obigen Code entsprechend umänderst, müste das auch gehen...

Code:

---

<style type="text/css">
col.menu { background-color:red; color:black; text-align: center; }
col.content { background-color:blue; color:pink; text-align: center; }
col.navi_zwo { background-color:green; color:orange; text-align: center; }
</style>

---

Manni

Bilder sind Inline Elemente, d.h. sie können Teil eines Fließtextes sein. So sind z.B. auch Smilies Bilder. Es gibt für die Ausrichtug von Bildern nur das die float Eigenschaft (CSS), diese bewirkt aber das gegebteil von dem, was du erreichen möchtest.

Wenn ich deinen Code ansehe, fällt mir auf, dass wir wohl aneinander vorbeigeredet haben..
Wenn du alle Inhalte einer Zeile zentriert darstellen möchtest brauchst du nur dem <tr> Diese Eigenschaft geben.

Hier nochmal dein Code:

Code:

---

<table align="center" border="1" width="100%">
    <tr style="text-align: center;">
        <td width="33%">
            <img src="schwert_small.gif" alt="Das Schwert von Shannara" title="Das Schwert von Shannara"/>
            <br />
            Das Schwert von Shannara
        </td>
        <td width="33%">
            <img src="sohn_small.gif" alt="Der Sohn von Shannara" title="Der Sohn von Shannara"/>
            <br />
            Der Sohn von Shannara
        </td>
        <td width="33%">
            <img src="erbe_small.gif" alt="Der Erbe von Shannara" title="Der Erbe von Shannara"/>
            <br />
            Der Erbe von Shannara
        </td>
    </tr>
</table>

---

Hast du in dieser Tabelle jedoch mehrere <tr>s, dann rate ich dir doch zu meiner Variante:

Code:

---

<table align="center" border="1" width="100%">
<colgroup>
 <col style="text-align: center;">
 <col style="text-align: center;">
 <col style="text-align: center;">
</colgroup>
    <tr>
        <td width="33%">
            <img src="schwert_small.gif" alt="Das Schwert von Shannara" title="Das Schwert von Shannara"/>
            <br />
            Das Schwert von Shannara
        </td>
        <td width="33%">
            <img src="sohn_small.gif" alt="Der Sohn von Shannara" title="Der Sohn von Shannara"/>
            <br />
            Der Sohn von Shannara
        </td>
        <td width="33%">
            <img src="erbe_small.gif" alt="Der Erbe von Shannara" title="Der Erbe von Shannara"/>
            <br />
            Der Erbe von Shannara
        </td>
    </tr>
</table>

---

Funktioniert einwandfrei.
<col> Beschriebt eine Spalte, <tr> eine Zeilenreihe und <td> eine Zelle.

Hm, ich habs jetzt sowohl mit der ersten als auch mit der zweiten Methode ausprobiert und bei mir funktioniert beides nicht, die Bilder und der Text sind immer noch linksbündig. Naja ist ja auch egal, bleibts eben bei dem herkömmlichen div ^_^ Trotzdem danke :)

edit: (ich hoffe, das liest jetzt noch einer *G*) Hab das jetzt eben mit dem Java-Script ausprobiert. Klappt aber irgendwie auch nicht (scheinbar funktioniert bei mir GAR NIX mehr >_>)
Dazu aber nochmal ein paar fragen: Muss ich einfach nur das Bild an der Stelle von 'aa' angeben als 'blabla.jpg' oder einen ganzen Pfad oder muss ich extra eine neue html-datei dafür machen oder wie sieht das aus?
Ich habs einmal versucht, indem ich 'blabla.jpg' eingegeben hab und einmal 'blabla.html' aber der (Opera) sagt mir jedes Mal, dass er die Datei nicht öffnen kann, wieso? Im IE gehts abera uch nicht und soweit ich weiß, ist JavaScript nicht deaktiviert.

Da muss ein kompletter Pfad rein.
Es sei denn du machst das so:

Code:

---

<script type="text/javascript">
<!--
function newWindow(uri,uwidth,uheight)
{
 neuWindow = window.open("Dein/Pfad/"+uri, 'neu', 'width=' + uwidth + ',height=' + uheight, 'titlebar=no', 'menubar=no', 'resizeable=no');
}
//-->
</script>

---

In dem Fall ist "Dein/Pfad/" der Standart Ausgangspfad ;)

Du kannst ein einfaches Bild angeben (Dann wird halt nur das unformatierte, unpositionierte Bild geöffnet) oder du machst für jedes Bild eine HTML Datei, in der du dann formatieren kannst. Noch besser wäre PHP, aber das darfst du scheinbar net verwenden :(

Manni

Hm, das hab ich jetzt gemacht, aber der will einfach nicht. Ich weiß ja nicht, was ich falsch gemacht habe, aber irgendwas ist da nicht richtig >_>
Habs sowohl auf meiner Festplatte probiert, als auch auf meinem Webspace (hätt ja sein können, dass er den Pfad auf der festplatte nicht annimmt, auch wenns eher unwahrscheinlich ist). Aber jedes mal kommt ne Meldung, dass er die Datei nicht finden oder öffnen konnte.

Hier ist erstmal diese Übersicht. Hab bisher nur für das erste Bild das eingefügt, vielleicht kann ja einer im Quelltext meinen Fehler finden? >_< Ich bin echt am verzweifeln >_<

Du hast java script geschrieben, dabei habe ich doch geschrieben, dass das Forum die beiden Wörter automatisch trennt (der Sicherheit wegen). Richtig ist also java und script zusammengeschrieben. ;)

Zu dem anderen: Mit <col> und der CSS Angabe funktioniert bei mir alles einwandfrei, ich sehe in deinem Quelltext jetzt keines der Elemente, aber eventuell hast du dort etwas falsch gemacht. Möglicherweise hängt es aber mit XHTML zusammen, dort schreibt man <col /> weil es keinen abschließenden Tag gibt.

Zitat:

---

Original geschrieben von mitaki
Du hast java script geschrieben, dabei habe ich doch geschrieben, dass das Forum die beiden Wörter automatisch trennt (der Sicherheit wegen). Richtig ist also java und script zusammengeschrieben. ;)

---

LOL ich bin doof, sag ich ja :D Ich hab das zwar gelesen, aber dann wieder vergessen und einfach nur deinen Code kopiert, sowas sollte man besser lassen :D Danke nochmal ^_^ Jetzt klappts endlich *freu* (aber ihr freut euch besser nicht zu früh, ich komme bestimmt wieder :rolleyes: :D, naja spätestens am 1.9. seid ihr mich los, da muss ichs abgeben *g*)