Webseite mit div container wird im IE nicht richtig dargestellt

[Gunnar Bittersmann]

@@Martin Seidel

	<ul id="gal-nav">
		<h3>Teppiche</h3>
		     <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
		     <li><a href="gal-carpets-kl.php">Klassisch</a></li>
		     <li><a href="gal-carpets-nom.php">Nomaden- und <br>Dorfteppiche</a>
        	<h3>Kelims</h3>
		     <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
		     <li><a href="gal-kilims-nom.php">Nomaden- und <br>Dorfteppiche</a>
	</ul>

Dass h3 nicht Kindelement von ul sein darf, sagte doch schon jemand?

Und wozu die br? Die Zeilenumbrüche macht der Browser automatisch.

Das sollte eher so aussehen:

    <h3>Teppiche</h3>
    <ul id="gal-carpets-nav">
        <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
        <li><a href="gal-carpets-kl.php">Klassisch</a></li>
        <li><a href="gal-carpets-nom.php">Nomaden- und Dorfteppiche</a>
    </ul>
    <h3>Kelims</h3>
    <ul id="gal-kilims-nav">
        <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
        <li><a href="gal-kilims-nom.php">Nomaden- und Dorfteppiche</a>
    </ul>

oder wenn du Überschrift und Listen jeweils gruppieren möchtest:

    <section id="gal-carpets-nav">
        <h3>Teppiche</h3>
        <ul>
            <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
            <li><a href="gal-carpets-kl.php">Klassisch</a></li>
            <li><a href="gal-carpets-nom.php">Nomaden- und Dorfteppiche</a>
        </ul>
    </section>
    <section id="gal-kilims-nav">
        <h3>Kelims</h3>
        <ul>
            <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
            <li><a href="gal-kilims-nom.php">Nomaden- und Dorfteppiche</a>
        </ul>
    </section>

Dass bei <li><a href="gal-kilims-nom.php">Nomaden- und Dorfteppiche</a> die Beschriftung nicht stimmt, willst du sicher noch ändern.

Wie kann ich bei einem einzelnen Menüpunkt die Hintergrundfarbe ändern (so soll die gerade aktive Seite gekennzeichnet werden)? Habe es mit <style background-color=...>, damit wurde dann aber die Funktion des Links deaktiviert

??

Im style-Element müssen CSS-Regeln stehen, und zwar im Inhalt, nicht in einem Attribut. In etwa dasselbe, was auch in einem externen Styelsheet stehen kann.

Wenn du die aktuelle Seite nicht im Menü verlinkst, sieht dein Markup für Menü auf der Teppiche-klassisch-Seite bspw. so aus:

    <h3>Teppiche</h3>
    <ul id="gal-carpets-nav">
        <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
        <li><a>Klassisch</a></li>
        <li><a href="gal-carpets-nom.php">Nomaden- und Dorfteppiche</a>
    </ul>
    <h3>Kelims</h3>
    <ul id="gal-kilims-nav">
        <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
        <li><a href="gal-kilims-nom.php">Nomaden- und Dorfteppiche</a>
    </ul>

(bzw. mit sections)

Nun kannst du das a-Element, das kein href-Attribut hat, gezielt stylen:

a:not([href])
{
    background-color: …;
}

Oder besser als Nachfahre des Navigationscontainers. (Das war vorher <ul id="gal-nav">, aber das sind ja jetzt zwei Listen.

Zur Not ginge auch

#gal-carpets-nav a:not([href]),
#gal-kilims-nav a:not([href])
{
    background-color: …;
}

Aber nur zur Not.)

LLAP 🖖