Beiträge von rincewind

http://www.alistapart.com --> code --> CSS

browserhacks lernen...

es funktioniert normkonform wie folgt:

div table {
  margin: 0 auto;
}

und das attribut "align" gibt es in dieser form in css nicht. entweder v-align oder text-align...

Das Attribut "id" zeichnet ein Element wie das "name" Attribut aus, es benennt es. Eine "id" kann daher immer nur auf ein Element zutreffen, und ist gleichzeitig die CSS-Definition, die mit höchster Gewichtung behandelt wird, da sie am speziellsten auf ein Element zutrifft.

"class" hingegen wird für Elemente verwendet, die die gleichen Eigenschaften aufweisen sollen. Es ist allerdings meistens sinnvoller, Klassen zu sparen, und Kaskaden zu nutzen.

Ich hoffe, ich konnte ein bischen Klarheit schaffen.

Elvis
falsch

Alle Bilder im div mit der Klasse xyz sind rechts

.xyz img { float:right; }

Nur Bilder mit der Klasse abc

.abc { float: right; }

Nur Bilder mit der Klasse abc innerhalb von Elementen mit der Klasse xyz

.xyz .abc { float: right; }

float: [right/left/none] bezeichnet den textumfluss und ermöglicht es uns, Elemente, wie z.B. Bilder damit zu positionieren.

Ziel ist, das Ganze "unobtrusive" zu machen, dh mit einem Markup ohne zusätzliche eventhandler, ids oder divs und ähnliches...

definitions-liste:

dl - eröffnet die liste
dt - /dt - Definitionsterm
dd - /dd - Derfinitonsbeschreibung

so ist auch meine liste strukturiert

Hallo.

Ich bastel gerade an einer JavaScript-Bibliothek für eine Homepage. In dieser Bibliothek soll es unter anderem Funktionen für eine dynamische Navigationsleiste geben. Aufgrund der Strukturierung der Seite haben wir beschlossen, die Navigationsleiste wie folgt zu strukturieren:

<dl>
  <dt>Sektion</dt>
  <dd>
    <ul>
      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

    [/list]
  </dd>
  <dt>Sektion</dt>
  <dd>
    <ul>
      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

    [/list]
  </dd>
</dl>

Okay. Folgende Gedanken stecken dahinter:

Das Ganze soll in einer Leiste am linken Rand des Bildschirms angezeigt werden. Die Inhalte der dt-Tags geben Sektionen an, die Inhalte der dd-Tags Untersektionen/-kapitel und die Links innerhalb der Liste die Verweise zu Unteruntersektionen/-Kapitel. D.h., die gesamte Homepage ist - vorerst - auf drei Ebenen aufgebaut:

1. Sektion 1
1. 1. Unterkapitel 1 von Sektion 1
1. 1. 1. Unterkapitel 1 von Unterkapitel 1 von Sektion 1
1. 1. 2. Unterkapitel 2 von Unterkapitel 1 von Sektion 1
1. 2. Unterkapitel 2 von Sektion 1
2. Sektion 2
2. 1. Unterkapitel 1 von Sektion 1
2. 1. 2. Unterkapitel 1 von Unterkapitel 1 von Sektion 1
usw.

Die Sektionen werden links angezeigt, wenn man auf den Titel einer Sektion klickt, sollen darunter die Untersektionen zum Vorschein kommen, wenn ich den Zeiger über den Link zu einem Unterkapitel fahre, kommen daneben die Links zu den Unteruntersektionen zum Vorschein. Zweiteres ist kein Problem, da es ein ganz normales, simples JS-CSS-hybrides DropDown-Menu ist. Der erste Teil bereitet mir Schwierigkeiten...

Mein Problem ist, dass ich die dd's nicht vernüftig ansprechen kann. Kann mir jemand hierbei helfen?

(Wenn meine Erklärungen nicht verständlich genug waren, kann ich gerne ein paar meiner Skizzen posten...)

MfG,
rincewind