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

Dropdown oder ähnliches für zusammenfassung mehrerer Themen

Status
Für weitere Antworten geschlossen.
L

lud

Neues Mitglied
Hallo,

hab folgendes problem:

Auf meiner Homepage (HTML) hab ich eine Seite (wird noch mehr gefüllt), auf der ich einige Testberichte und sonstiges zu Fachbereichen darstellen will.
Wenn man die alle Untereinander, nicht unter Überbegriffe geordnet hat, wird das ganze ziemlich un übersichtlich. Also hätte ich es gerne so gelsöst:

"Testbericht zu WEISNEDWAS"
"Testbericht zu WEISNEDWAS2"
"Tippsundtricks zu WEISNEDWAS3"
.
.
.
Wenn man dann die jeweiligen "links" anklickt, soll sich unter selbigendann der Testbericht oder sonstiges öffnen und die "links" die untendrunter stehen dann auch unter dem Testbericht sein. Das dann am besten so, dass alles auf einer HTML seite steht...

Google hat leider nichts ergeben.
Wäre soetwas möglich und wenn ja wie ?

lg
Lud
 
1. Hi, erstmal würde ich dir dringend empfehlen den Ton von dem Flashteil auf deiner Startseite abschaltbar zu machen / ihn ganz abzuschalten, da das viele Leute sicher nervt.

2. Ich würde es so lösen, dass ich einfach unter jeder Überschrift ein Div setze mit dem Inhalt und das Div standardmäßig mit css display:none; versehen ist und du die Überschrift mit dem JS Eventhandler onClick versiehst. Dieser prüft dann ob das Teil sichtbar ist, falls ja es unsichtbar macht, falls nein es sichtbar macht.

SELFHTML: JavaScript / Objektreferenz / style

Das ist alles.

Du kannst es optional auch noch mit Ajax machen, dann wird der Teil den du brauchst erst dann nachgeladen, wenn du es brauchst, aber das ist bei heutzutagiem rasant schnellem Internet nicht mehr zwingend nötig.

Falls doch, finde ich das Tutorial ganz gut: Ajax Tutorial


3. Dein Code ist von der Semantik akzeptabel allerdings auch verbesserungswürdig allerdings vom Syntax nicht valide:
[Invalid] Markup Validation of http://ludwig-modellbau.bplaced.net/tippsundtricks.htm - W3C Markup Validator

Ergebnisse des CSS-Validators http://ludwig-modellbau.bplaced.net/tippsundtricks.htm (CSS level 2.1)


MfG
 
Zuletzt bearbeitet:
Hi,

Danke erstmal.

zu 2.: Also das mit den Div hört sich ja super an, nur leider hab ich dann doch nicht so viel ahnung von HTML und CSS. vlt hast du mir da ja einen Link, wo steht was ich ins CSS einfügen und was in die Seite einfügen muss...
des wär super nett :-)

zu 3.: Hmmmm... Ist das schlimm? Ich kenn mich da nicht so aus, aber so lange es funktioniert?!

lg
Ludwig
 
lud schrieb:
Hi,

Danke erstmal.

zu 2.: Also das mit den Div hört sich ja super an, nur leider hab ich dann doch nicht so viel ahnung von HTML und CSS. vlt hast du mir da ja einen Link, wo steht was ich ins CSS einfügen und was in die Seite einfügen muss...
des wär super nett :-)
Zum Vergrößern anklicken....

Eine explizite Seite kenne ich nicht. Du solltest mal ein XHTML CSS Tutorial durchmachen, das hilft jedem, egal wie erfahren.

Einführung in XHTML, CSS und Webdesign - Michael Jendryschik

Als nachschlagwerk für CSS : CSS 4 You - The Finest in Stylesheets

lud schrieb:
zu 3.: Hmmmm... Ist das schlimm? Ich kenn mich da nicht so aus, aber so lange es funktioniert?!

lg
Ludwig
Zum Vergrößern anklicken....

Eben das ist das Problem, wenn die Seite fehlerhaft ist, kannst du nicht sichergehen dass sie überall richtig angezeigt wird.

Es gibt genaue Regeln wie man korrektes HTML interpretiert, doch wie man falsches interpretiert ist von Browser zu Browser anders.

Wenn deine Seite korrekt ist, kannst du sie außerdem als XHTML Strict auszeichnen, ein Doctype der keine Fehler zulässt. XHTML wird bei bei modernen Browser von einem XML Parser verarbeitet wird, wodurch die Seite ein klein bisschen schneller dargestellt wird.

Außerdem ist deine Aussage gegenüber sehbehinderten Menschen assig, da ein Screenreader mit solchen Fehlern Probleme haben kann.


MfG
 
Zuletzt bearbeitet:
Imbericle schrieb:
du die Überschrift mit dem CSS Eventhandler onClick versiehst.
Zum Vergrößern anklicken....
CSS kennt weder Events, noch Event-Handler. Es muss natürlich "JavaScript" heißen.

Zu einer sauberen Semantik gehört übrigens auch, dass keine Tags oder Attribute verwendet werden, die der physischen Auszeichnung dienen, von denen es hier noch unendlich viele gibt. Allen voran das <font>. Die Semantik ist daher keineswegs akzeptabel.
 
Efchen schrieb:
CSS kennt weder Events, noch Event-Handler. Es muss natürlich "JavaScript" heißen.
Zum Vergrößern anklicken....
Das ist natürlich richtig, verzeihe ich wollte natürlich JS schreiben. Hatte mir den Beitrag vor dem Absenden nicht nochmal durchgelesen, da ich wegmusste.

Efchen schrieb:
Zu einer sauberen Semantik gehört übrigens auch, dass keine Tags oder Attribute verwendet werden, die der physischen Auszeichnung dienen, von denen es hier noch unendlich viele gibt. Allen voran das <font>. Die Semantik ist daher keineswegs akzeptabel.
Zum Vergrößern anklicken....

Ich hab mir nur die Grundstruktur im Firebug angesehen und solange eine Seite nicht aus Tabellengepfusche besteht, finde ich es wenn jemand 148 Syntaxfehler hat und daher Anfänger ist, akzeptabel.
Ich habe nicht ok, noch gut gesagt :P

Hab jetzt es mal ein wenig erweitert.

Gut das du dir die Seite genauer angesehen hast.



MfG
 
Hallo,

hab ein wenig nach JS Eventhandler onklick gesucht und das gefunden:
Code: 
<a href="#"><img src="bild.jpg" id="bild1" 
   onClick="MM_swapImage('bild_gross','','bild1-XL.jpg',1);return false" />
</a>

Das ist ja im Prinzip nichts anderes als ich will, ausser, dass es halt mit Bildern ist!?

Wie könnte man da statt Bilder einfach einen Text einfügen?


Vielen Dank

Ludwig
 
Hab dir mal ein Beispiel geschrieben:

HTML: 
 <?xml version="1.0" encoding="UTF-8"?>

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Titel deiner Seite</title>
        <script type="text/javascript">
            function zeige(s)
            {
                if (document.getElementById(s).style.display == "block")
                    document.getElementById(s).style.display = "none";
                else
                    document.getElementById(s).style.display = "block";
            }
        </script>
    </head>
    <body>
        <h1 onclick="zeige('Inhalt1')">Überschrift1</h1>
        <p id="Inhalt1" style="display:none;">
            zur Überschrift gehörender Inhalt.
        </p>
        
    </body>
</html>



MfG
 
Hi,

VIELEN DANK, dass du mir das geschrieben hast!

Stimmt das, dass in der 4. Zeile vom script 2 mal "=" steht?

Habs aber schonmal ausprobiert, hat soweit funktioniert :-)

DAnke nochmal

Ludwig
 
lud schrieb:
Hi,

VIELEN DANK, dass du mir das geschrieben hast!
Zum Vergrößern anklicken....

bevor du es noch rot unterstreichst und Herzchen zu machst kannst du auch einfach positiv bewerten ;)
links unter dem Kurzprofil der Stern.

lud schrieb:
Stimmt das, dass in der 4. Zeile vom script 2 mal "=" steht?
Zum Vergrößern anklicken....

Ja das stimmt. In einer aus meiner Sicht "guten" Sprache, ist == die Prüfung ob 2 Werte übereinstimmen und ein = eine Zuweisung.
Es gibt auch Sprachen in denen man mit einem = prüft, da entscheidet dann der Compiler nach seiner Logik ob man prüfen will oder zuweißen.


MfG
 
Du lässt einfach die äußerst falschen und unnützen <font> Elemente wegfallen und gibts schreibst ins CSS für alle h1 Elementen font-size:16pt;.

Allerdings würde ich diese Überschriften nicht als h1 auzeichnen, da sie meiner Meinung nach vom Rang unter der Überschrift der Seite also Ludwigs Modelbauseite, welches ich als h1 machen würde und unter "Hier findet ihr ein paar Testberichte, kleine "Zubehörteile" und Sonstiges..." welches ich h2 machen würde, stehen.
Von daher würde ich sie als h3 auszeichnen.

Desweiteren stehen diese Überschriften allesamt in einem span, welches ein Inline Element ist, das keinerlei Sinn noch Zweck hat und absolut falsch ist.


MfG
 
Efchen schrieb:
lud hat einen Renommee-Modifikator von 0. Du kriegst da nichtmal Renomee-Punkte für :-)
Zum Vergrößern anklicken....

Ich weiß, es ging mir auch nicht um meine Punkte, sondern darum, das Renommesystem, welches meiner Ansicht nach viel zu wenige nutzen, anzukurbeln.

Wenn dir soviel an meinem Punktestand liegt, will ich dich natürlich nicht davon abhalten es positiv zu bewerten :P ;)


MfG
 
Hi,

also Danke nochmal :-D Ich kann dich leider nich nochmal bewerten... xD

Ich hab dafür jetzt im CSS extra "h4" dafür definiert und gleich noch eingestellt, dass der Cursor zu einer Zeigehand wird ( cursor:pointer; ).
Jetzt gefällts mir richtg gut. Echt Klasse :-)

Technik, die fasziniert :-D

lg
ludwig
 
Apropos <h4>, Du hast auf Deiner Seite ein <h1>, ein <h4>, aber kein <h2> oder <h3>, das macht keinen Sinn und ist semantisch falsch. Ändere Dein <h4> also in <h2>.
 
Ja, wie Efchen schon sagte, man kann bei der Überschrift nicht einfach mal eine auslassen, das ist unlogisch.

Ich hatte dir empfohlen die Seitenüberschrift h1 zu machen, "Hier findet ihr ein paar Testberichte, kleine "Zubehörteile" und Sonstiges...", als h2 und die Überschriften die du nun als h4 hast, als h3..
Imbericle schrieb:
(...)Von daher würde ich sie als h3 auszeichnen.(...)
Zum Vergrößern anklicken....



Desweiteren
1. der Div der ID content-outer odercontent-wrapper ist überflüssig, einer von ihnen kann man weg optimieren

2. verstehe ich immer noch nicht das Inline Element <span>, welches alle h4 Überschriften umfasst, das ist falsch und zwecklos.

3. hast du noch zig unnütze <font> Elemente in deinem Code.

4. Du wolltest die Überschriften ja noch näher zusammen haben.

Daszu änderst du einfach in den Regeln Zeile 35 von Unbound.css da padding:15px 10px 5px; in padding:0; um.


MfG
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben