2 gleiche Listen haben unterschiedlichen Abstand

[wernersbacher]

Hallo Leute,
ich bastel momentan an meiner Website und komme gar nicht weiter. Folgendes: Auf der Startseite ist eine Liste mit 3 Punkten, in denen jeweils nochmal eine Liste mit jewils 3 Punkten sind.
Ich habe also eine Art Menü aus Bilder, welches 3x3 groß sein kann.
So sieht der Code diese Startseite aus:

        <ul class="drei">
            <li>
                <ul>
                    <li><a href="?categorie=landscapes"><img src="content/thumbs/landscapes_3.png" /></a></li>
                    <li><a href="?categorie=landscapes"><img src="content/thumbs/landscapes_3.png" /></a></li>
                    <li><a href="?categorie=landscapes"><img src="content/thumbs/landscapes_3.png" /></a></li>
                </ul>
            </li>
        </ul>

Der zugehörige CSS Code:

ul {
    padding:0;
}


.drei {
    margin-top:30px;
}


.drei li {


    list-style:none;
    display:inline;
    margin: 10px 15px 15px 15px;
}

Schön und gut, funktioniert auch.
Wenn man jetzt aber die nächste Seite aufruft, werden wieder in Dreierreihen Bilder angezeigt. Dazu benutzt die Auflistung genau dieselbe CSS Anweisung wie oben. Der Code hier lautet:

<ul class="drei">
    <li>
        <ul>
            <li><a href="#"><img src="content/thumbs/landscapes_1.png"></a></li>
            <li><a href="#"><img src="content/thumbs/landscapes_2.png"></a></li>
            <li><a href="#"><img src="content/thumbs/landscapes_3.png"></a></li>
        </ul>
    </li>


    <li>
        <ul>
            <li><a href="#"><img src="content/thumbs/landscapes_4.png"></a></li>
        </ul>
    </li>
</ul>

An sich ja eigentlich dasselbe wie oben, klappt auch. Nur: Der Abstand zwischen den ELementen ist nicht gleich groß! Wenn ich auf der Startseite auf ein Bild klicke komme ich ja auf die Seite mit unterem Code, und wenn man hin und her wechselt, fällt das total auf!


Hier das Livebeispiel: Photographie und Websites | wernersbacher.de


Wie gesagt, einfach auf ein Bild klicken und dann mal vergleichen (einfach vor-zurück)

Danke für Tipps!

 

[Marv]

Hi, ich trau mich eigentlich nicht die Antwort zu schreiben, weil das eigentlich nicht sein kann, aber.

Ich habe deinen Code von dem ul Element auf deiner Landscapes seite mit diesem Tool mal ordentlich Formatiert (also eingerückt usw):

Also aus

<ul class="drei"><li>
                <ul><li><a href="#"><img src="content/thumbs/landscapes_1.png"></a></li><li><a href="#"><img src="content/thumbs/landscapes_2.png"></a></li><li><a href="#"><img src="content/thumbs/landscapes_3.png"></a></li></ul>
            </li><li>
                <ul><li><a href="#"><img src="content/thumbs/landscapes_4.png"></a></li></ul>
            </li></ul>

Das gemacht:

<ul class="drei">
    <li>
        <ul>
            <li>
                <a href="#"><img src="content/thumbs/landscapes_1.png"></a>
            </li>
            <li>
                <a href="#"><img src="content/thumbs/landscapes_2.png"></a>
            </li>
            <li>
                <a href="#"><img src="content/thumbs/landscapes_3.png"></a>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                <a href="#"><img src="content/thumbs/landscapes_4.png"></a>
            </li>
        </ul>
    </li>
</ul>

Und eingefügt und der Abstand war richtig. Probier das mal.

 

[wernersbacher]

Nunja das Problem ist eben, dass die Liste dynamisch generiert wird. Und ich weiß nicht Recht, ob ich das so hinbekomme. Werds nochmal probieren gleich.

edit: Habs endlich hinbekommen, ich hab das dynamsich generierte eingerückt, und jetzt sieht es normal aus. Danke!