Navigation

html.de-Forum HTML, XHTML & CSS
1

Hallo,
ich komme gerade nicht bei meiner Übungssite weiter. Ich möchte das Menü am ‚Hintergrund‘ von

heften. Bin mir aber nicht sicher, ob das der richtige Ansatz ist, wie ich es gemacht habe. Mit meiner Methode funktioniert es im Firefox- und im Opera-Browser, nicht jedoch im IE.

Hier der Link(Feedback zum Design sind irrelevant, weil ich da noch nicht weiter gemacht habe, aufgrund des Problems).
Titel

2

Mir ist nicht klar, worum es dir geht. Bei mir sieht es in jedem Browser annähernd gleich aus.

3

Bei allen Browsern außer dem IE wird das Menü direkt am Hintergrund von

angedockt, beim IE sind aber ca. 10px Lücke zu sehen. Die Lücke ist die vom background des (body{})

4

Problem ist das negatives margin für die li-Elemente. Nicht alle IE-Versionen scheinen Text gleich groß zu rendern.

Ich würde es so machen:

CSS:

[code] /* Google: „clearfix“ */
.clearfix:after {
content: „.“;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

        .clearfix {
            display: inline-block;
        }

        html[xmlns] .clearfix {
            display: block;
        }

        * html .clearfix {
            height: 1%;
        }

        html, body {
            background: url(image/back.png) repeat-x #444;
            color: #bbb;
            margin: 0;
            padding: 0;
        }

        h1 {
            background: #666;
            margin: 10px 0 0 0;
            padding: 5px 0 0 100px;
            border-bottom: 2px solid #999;
            border-top: 2px solid #444;
        }

        h1 img {
            border: none;
        }

        .navigation {
            background: #123;
            margin: 0 0 0 100px;
            padding: 0;
        }

        .navigation li {
            list-style: none;
            float: left;
            margin-right: 10px;
        }

        .navigation li a {
            font-size: 20px;
            text-decoration: none;
            color: #fff;
            padding: 5px;
            display: block;
            background: #666;
            border: 2px solid #999;
        }

        .navigation li a.active {
            background: #999;
        }

        div#content {
            background: url(image/back_div_content.png) no-repeat #666;
            margin-top: 70px;
            padding: 10px 10px 10px 10px;
            border-bottom: 2px solid #999;
            border-top: 2px solid #444;
            word-spacing: 4px;
        }[/code]

HTML:

[code]

[/code]

Btw: Der IE 6 rendert die transparenten PNGs bei mir nicht korrekt.

5

Danke, werde ich mir mal näher ansehen.

Btw: Der IE 6 rendert die transparenten PNGs bei mir nicht korrekt.

Okay, da werde ich mich mal nach einem Hack umsehen(PNG-FIX)