Beiträge von dekonstruktiv

    Grundsätzlich wird das verschachtelte ul per display : none versteckt und mit li:hover > ul wieder in den block-level Zustand zurückversetzt.
    Die Positionierung wird meist absolute eingerichtet, da sonst keine Überlagerung anderer Elemente möglich ist.


    Gibt es einen Grund weshalb die Anzeige nur bei Klick ausgeführt werden soll?

    Also selfhtml ist nunam (unter dem Standpunkt das es html5 gibt) durchaus veraltet ...


    Ach, das war mit veraltet gemeint, ss las sich als ginge es um die Doctypes.
    Veraltet kann man trotzdem nicht unbedingt sagen, die Tatsache dass wie in einer Bibliothek noch alles korrekt beschrieben wird
    und lediglich die neue Versionierung versäumt wurde, macht es trotzdem zu einer soliden Grundlage.


    Aber ja, warum sollte man neue Technologie nicht nutzen :)

    Nix veraltet.
    Da steht aber XHTML1 welches genau wie HTML4 noch heute weit verbreitet genutzt wird, auch wenn es über 10 Jahre alt ist.


    Bitte beide einmal Wiki anschmeißen :P


    Lohnend ist die neueste Version natürlich heute schon, und sobald Suchmaschinen die neue Semantik besser werten hat es sich wirklich gelohnt. HTML5 release war erst vor Kurzem.

    Der harte Übergang kommt vom Reload der Seite.
    Wenn du diesen vermeiden möchtest, musst du dir ein Formular suchen, welches per Ajax die Fehler- oder Erfolgsmeldung darstellt.
    Du kennst das beispielsweise von den Benachrichtigungen auf Facebook oder ähnlichen Netzwerken, die erscheinen, ohne dass die Seite neu geladen werden muss.


    Es gibt da zahlreiche Fertiglösungen im Netz zu finden.
    Da bereits die JavaScript Bibliothek jQuery eingebunden ist, suche einfach mal nach 'jquery ajax form'.

    Du hättest einfach alle Inhaltsbezogenen Elemente in einen <div>-Container verschachteln können.


    Du solltest dringend darauf achten, dass du HTML-Elemente nutzt, die für den entsprechenden Inhalt gedacht sind.
    Warum hast du für die Überschrift ein <a>-Element erstellt, welches du sogar nochmals in einen Container verschachtelst? - wenn daraus ein Link entsteht OK, trotzdem wäre dann die korrekte Syntax

    Code
    <h1><a href="#" title="Linktitel">Überschrift</a></h1>

    Ne das mit der Höhe ist blöd...


    Variable Höhen sind auch kein Problem, sofern man beim 2. die Höhe des vorherigen Elementes ausliest und übermittelt.


    Alternativ könnte ein Wrapping helfen, welches als absolutes Overlay dient.
    Somit können Inhalte ohne position: absolute verschachtelt werden und die Boxen bleiben im Fluß der Struktur um sich gegenseitig zu verdrängen.

    Von der Idee her:
    - eventuell ein Klick-Maximum einsetzen
    - bei jedem Klick die Höhe der Alertbox zum top-Wert hinzuzählen


    1. box -> kein zusätzlicher wert
    2. -> + Höhe
    3. -> + 2x Höhe
    ...
    Nach jedem Timeout eine Höhe subtrahieren.



    Zum debuggen hab ich keine Zeit 8o

    ... aber wie bekomme ich nun die ganze Auflistung etwas weiter nach links?


    Setz den Innenabstand des entsprechenden <ul>-Elements auf 0, dann kannst du das Listenelement beliebig steuern.


    Zitat von Skeptar

    ... gibt es im Internet eine Seite wo ich mir Icons runterladen kann, und diese benutzen darf?


    Ja, gibt es.

    Würde hier gerne noch was hinzufügen:


    Der Ansatz von wolf ist natürlich korrekt, bei dem Icon handelt es sich aber im weiteren Sinn um ein "Dekoelement",
    welches meiner Meinung nach nicht unbedingt als durchsuchbarer Inhalt (img) ausgegeben werden muss/sollte.


    Die Lösung per list-style-image wirft meist Probleme bei der vertikalen Zentrierung auf, daher rate ich dazu,
    das Bild als <li> Hintergrundgrafik einzubetten. Das Listenelement erhält zusätzlich in height sowie line-height die Höhe des Bildes (Zentrierung).
    Durch einen padding-Wert kann der Text beliebig nach rechts verschoben werden.

    Code
    .checkpoints { list-style: none; }
    .checkpoints li {
        background: url(check-icon_30px.png) no-repeat left center;
        height: 30px;
        line-height: 30px;
        margin: 0 0 5px;
        padding: 0 0 0 40px;
    }


    //editing Rechtschreibgrütze

    ... viel UNNÖTIGES vermittelt ...


    Abschnitt 14 bis 19 mag für Anfänger etwas zu viel Input sein, aber keinesfalls unnötig.


    Zitat von andreas71

    ... werde mir den genau durchlesen und damit üben ...


    War nicht böse gemeint. Du hast den falschen Ansatz zur CSS-Umsetzung deiner Layoutidee,
    sodass eine Verbesserung und Erklärung des bisherigen Codes einfach umständlicher wäre als ein richtiger Cut.


    Den Tipp von Wolf mit dem CSS-Reset solltest du ebenfalls berücksichtigen.
    Nur so kannst du eine Softwareübergreife Lösung erstellen - die Werte musst du natürlich neu definieren, dafür werden sie wie erwähnt identisch gerendert.



    Bei Kreativarbeiten ist Zerknüllen und Löschen von gescheiterten Ideen nie eine Schande.