Felix Riesterer: Multi-Column mit Navigation...

Liebe CSS-Experten,

ich möchte meine Navi in zwei Spalten darstellen lassen, wobei die Liste der Links (ul) und ihre vorausgehende Unter-Überschrift (h2) nicht in einem eigenen Element gekapselt sind. Beispiel:

<nav>  
    <h2>Hauptmenü</h2>  
    <ul>  
        <li><a href="/">Home</a></li>  
        ...  
    </ul>  
    <h2>Untermenü</h2>  
    <ul>  
        <li><a href="/impressum">Impressum</a></li>  
        ...  
    </ul>  
</nav>

Mit den bisher verfügbaren Mitteln bin ich so weit gekommen, dass ich prinzipiell schon zwei Spalten erhalte:

nav {  
	-moz-column-count: 2;  
	-moz-column-gap: 10px;  
	-webkit-column-count: 2;  
	-webkit-column-gap: 10px;  
	column-count: 2;  
	column-gap: 10px;  
	width: 100%;  
}

Jetzt hätte ich aber gerne noch ein Extra dazu: Die beiden Überschriften sollen visuell nebeneinander stehen. Hier sieht das wie selbstverständlich aus, da jede Beispielliste nur ein Element hat:

Hauptmenü       Untermenü
* Home          * Impressum

In meinem Fall ist das Untermenü aber gerne sehr viel länger als das Hauptmenü. In FF und Android-Browser sehe ich in diesen Fällen, dass die Unterüberschrift des Untermenüs noch in der linken Spalte beginnt, was ich ja gerade nicht möchte. Außerdem möchte ich beim völligen Fehlen des Untermenüs gerne _keine_ Spalten mehr.

Wie geht das?

Was das Umbrechen der zweiten Unterüberschrift angeht, so habe ich das hier versucht, erhalte aber nicht das gewünschte Ergebnis:

nav h2 {  
	page-break-before: always;  
	page-break-after: avoid;  
	-webkit-column-break-before: always;  
	-webkit-column-break-after: none;  
	break-before: column;  
	break-after: avoid-column;  
}

Wer weiß Rat?

Liebe Grüße,

Felix Riesterer.

--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
  1. Om nah hoo pez nyeetz, Felix Riesterer!

    Der default-Wert von column-fill ist balance. Möglicherweise wiederspricht dies deinem Ansinnen.

    Keine Spalten bei fehlendem Untermenü sieht für mich nach Aufwärtsselektieren aus, was CSS bekanntermaßen nicht kann. Deshalb würde ich eine flexbox-Lösung suchen.

    Kannst du schon was zeigen? Mach doch mal ein dabblett, dass jeder, der möchte was zum Spielen hat.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Sonde und Sonderzeichen.

  2. @@Felix Riesterer:

    nuqneH

    wobei die Liste der Links (ul) und ihre vorausgehende Unter-Überschrift (h2) nicht in einem eigenen Element gekapselt sind.

    Warum nicht? Was spricht gegen div (section?) im nav-Element? Oder gegen getrennte nav-Elemente?

    Ich glaube, du schaffst dir Probleme, die du mit sinnvollem Markup gar nicht hättest.

    <h2>Hauptmenü</h2>
        <h2>Untermenü</h2>

    Die Überschriften hören sich nicht so an, als wären sie gleichberechtigt h2.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Lieber Gunnar Bittersmann,

      wobei die Liste der Links (ul) und ihre vorausgehende Unter-Überschrift (h2) nicht in einem eigenen Element gekapselt sind.

      Warum nicht? Was spricht gegen div (section?) im nav-Element? Oder gegen getrennte nav-Elemente?

      ich habe nun jeweils ein <article> drumherum gebastelt. Jetzt kann ich mein Vorhaben mittels float umsetzen.

      <h2>Hauptmenü</h2>
          <h2>Untermenü</h2>

      Die Überschriften hören sich nicht so an, als wären sie gleichberechtigt h2.

      Es ist die Navigation auf der Schulwebsite, die ich betreue. Für die bin ich gerade dabei, die Ansicht für kleine Viewports günstiger zu gestalten. Dazu zählt auch die Navi am unteren Ende der Seite. Kannst ja mal ausprobieren... ;-)

      Liebe Grüße,

      Felix Riesterer.

      --
      "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)