Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

[santscho]

Ich habe nach einer Lösung gesucht, die Sitemap mit Hilfe eines Javascriptes "schöner" zu gestalten. Habe herausgefunden, dass man auch "nur" mit CSS und vier Gif-Bilder etwas anständiges machen kann. Sehr einfach.
---
Searched a solution to style the sitemap with Javascript. Found out, that it is also possible to do something nice "just" with CSS and four Gif-Images. Very simple.
---
Und so wird die Sitemap in etwa aussehen:
---
The sitemap will look like this:


1. Die vier Gif runterladen:
---
1. Download the 4 Gif:
http://www.gameculture.com.sg/screenshots/sitemap_images.zip

2. Die CSS einfügen:
---
2. Insert the CSS:

Code: Select all


ul.sitemap
{
margin: 1em 0;
list-style-type: none;
background: url(images/dot.gif) repeat-y 3px 0;
padding: 0;
}

ul.sitemap li
{
margin-bottom: .5em;
}

ul.sitemap li a
{
background: url(images/bullet1.gif) no-repeat 0 .4em;
padding-left: 15px;
}

ul.sitemap li a.open, ul.sitemap li li a.open, ul.sitemap li li li a.open, ul.sitemap li li li li a.open
{
background-image: url(images/bullet2.gif);
}

/* second level */
ul.sitemap ul
{
margin: .5em 0 0 0;
padding: 0;
list-style-type: none;
}

ul.sitemap li li
{
background: url(images/dot2.gif) no-repeat 2px .5em;
}

ul.sitemap li li a
{
padding: 0 0 0 30px;
background: url(images/bullet1.gif) no-repeat 20px .3em;
}

/* third level */
ul.sitemap ul ul
{
background: url(images/dot.gif) repeat-y 30px 0;
}

ul.sitemap li li li
{
background: url(images/dot2.gif) no-repeat 30px .5em;
}

ul.sitemap li li li a
{
padding: 0 0 0 60px;
background: url(images/bullet1.gif) no-repeat 50px .3em;
}

/* fourth level */
ul.sitemap ul ul ul
{
background: url(images/dot.gif) repeat-y 60px 0;
}

ul.sitemap li li li li
{
background: url(images/dot2.gif) no-repeat 60px .5em;
}

ul.sitemap li li li li a
{
padding: 0 0 0 90px;
background: url(images/bullet1.gif) no-repeat 80px .3em;
}

3. Sicherstellen, dass in der CSS die Gif-Bilder richtig verlinkt sind.
---
3. Make sure, that the images are linked correct in the CSS.

4. CSS-Klasse "sitemap" im CP Sitemap eintragen:
--- Entry "sitemap" in the CP Sitemap:


Vielleicht ist dieses Tutorial brauchbar für dich?
---
Maybe this tutorial is useful for you?


Ralf
---
Ralph

[Heiko H.]

Habe herausgefunden, dass man auch "nur" mit CSS und vier Gif-Bilder etwas anständiges machen kann

Wow, man kann unsortierte Listen per CSS formatieren...
Hast Du dir schon mal die Ausgabe diverser Navi-RT's angesehen?
'ne Menge von ul's dabei... das beste Beispiel ist wohl flip-flop's NAV_LIST_UL, sorry konnte mir die Klugsch...erei grad nicht verkneifen.

Wie heißt's doch so schön, "duck und weg..."

[santscho]

Vielleicht gibt es auch noch andere in diesem Forum, die noch nicht so viel von CSS verstehen. Und gib mal einem Anfänger eine Navi und sag: "hier: nimm und kapier!". Wenn es auch nur simpel ist... vielleicht ein kann jemand wirklich damit etwas anfangen, ohne ein CSS-Guru zu sein. Anfänger gibt es viele hier im Forum.

Auch die Meinung und Ideen "kleiner" Leute sind wichtig. Und warum machst Du Dir nicht die Mühe und schreibst ein ganz einfaches Tutorial (mit Beispielen), wie Du eine Sitemap CSS formatieren würdest? Eine schönere! Und eine kompliziertere! Dann kann ich meine C64-Sitemap austauschen.

Ducken nutzt nix! Zur Strafe für Deine Sticheleien gibts für Dich keinen Schoko-Osterhasen! Höchstens ein paar Möhren .

[claus]

@ Heiko: nana... jetzt trampel doch nicht gleich auf dem zarten Pflänzchen 'rum, das da entstehen mag...
@Santcho: Auch wenn's ein eher "alter Hut" sein mag - ich habe Deine Anleitung einfach mal befolgt und siehe da - ich habe sitemappp. Ein wenig am CSS musst Du aber noch rumschrauben - so wie das da gepostet ist, geht es noch nicht so 100%ig gut. Aber die Anleitung ist schon mal Klasse...

Auch "Duck und wech"

[Heiko H.]

@ Heiko: nana... jetzt trampel doch nicht gleich auf dem zarten Pflänzchen 'rum, das da entstehen mag...

Na gut , ich hatte heute vielleicht nicht den besten Tag... S O R R Y !!!
Schokohasen? Hatte ich schon
http://www.cafepress.com/buy//-/pv_design_details/hlv_t/id_17167717

Heiko...

[santscho]

Heiko und Klaus

Wäre schon mal gut, wenn man folgende Fehler ausbessern könnte:


1. Die erste vertikale Linie: Unnütz.
2. Die Abstände zwischen den Verbindungen: Zu gross. Wäre schön, wenn diese anschliessen würden. Habe mit den Werten rumgespielt, bringt aber nix.

Thanks!
Ralph Mimosa

[claus]

mach mal so (imagepfade wieder anpassen)

Code: Select all

    ul.sitemap
    {
    margin: 1em 0;
    list-style-type: none;
    /*background: url(../../images/dot.gif) repeat-y 3px 5px;*/
    padding: 0;
    }
   ul.sitemap a
    {
   color:#222222;
    }
   ul.sitemap a:hover
    {
   color:#222222;
   display: block;
   background-color: #f4f4f4;
    }

    ul.sitemap li
    {
    margin-bottom: .5em;
   display: block;
    }

    ul.sitemap li a
    {
    background: transparent url(../../images/bullet1.gif) no-repeat 0 .4em;
    padding-left: 15px;
   display: block;
    }

    ul.sitemap li a.open, ul.sitemap li li a.open, ul.sitemap li li li a.open, ul.sitemap li li li li a.open
    {
    background: transparent url(../../images/bullet2.gif);
    }

    /* second level */
    ul.sitemap ul
    {
    margin: .5em 0 0 0;
    padding: 0;
    list-style-type: none;
       background: transparent url(../../images/dot.gif) repeat-y 3px 0;

    }

    ul.sitemap li li
    {
    background: transparent url(../../images/dot2.gif) no-repeat 2px .5em;
    }

    ul.sitemap li li a
    {
    padding: 0 0 0 30px;
    background: transparent url(../../images/bullet1.gif) no-repeat 20px .3em;
    }

    /* third level */
    ul.sitemap ul ul
    {
    background: transparent url(../../images/dot.gif) repeat-y 25px 0;
    }

    ul.sitemap li li li
    {
    background: transparent url(../../images/dot2.gif) no-repeat 25px .5em;
    }

    ul.sitemap li li li a
    {
    padding: 0 0 0 55px;
    background: transparent url(../../images/bullet1.gif) no-repeat 45px .3em;
    }

    /* fourth level */
    ul.sitemap ul ul ul
    {
    background: transparent url(../../images/dot.gif) repeat-y 50px 0;
    }

    ul.sitemap li li li li
    {
    background: transparent url(../../images/dot2.gif) no-repeat 50px .5em;
    }

    ul.sitemap li li li li a
    {
    padding: 0 0 0 80px;
    background: transparent url(../../images/bullet1.gif) no-repeat 70px .3em;
    }
    /* fifth level */
    ul.sitemap ul ul ul ul
    {
    background: transparent url(../../images/dot.gif) repeat-y 75px 0px;
    }

    ul.sitemap li li li li li
    {
    background: transparent url(../../images/dot2.gif) no-repeat 75px .5em;
    }

    ul.sitemap li li li li li a
    {
    padding: 0 0 0 105px;
    background: transparent url(../../images/bullet1.gif) no-repeat 95px .3em;
    }
    /* sixthlevel */
    ul.sitemap ul ul ul ul ul
    {
    background: transparent url(../../images/dot.gif) repeat-y 100px 0px;
    }

    ul.sitemap li li li li li li
    {
    background: transparent url(../../images/dot2.gif) no-repeat 100px .5em;
    }

    ul.sitemap li li li li li li a
    {
    padding: 0 0 0 130px;
    background: transparent url(../../images/bullet1.gif) no-repeat 120px .3em;
    }
       /* seventhlevel */
    ul.sitemap ul ul ul ul ul ul
    {
    background: transparent url(../../images/dot.gif) repeat-y 125px 0px;
    }

    ul.sitemap li li li li li li li
    {
    background: transparent url(../../images/dot2.gif) no-repeat 125px .5em;
    }

    ul.sitemap li li li li li li li a
    {
    padding: 0 0 0 155px;
    background: transparent url(../../images/bullet1.gif) no-repeat 145px .3em;
    }


Was'n Haufen lis - das muss doch auch anders gehen

[claus]

...wenn Heiko n Schokohasen kriegt - ich nehme auch einen. Mach aber schnell...

[zonk]

Hallo Santscho,

habe alles nach deiner Anleitung gemacht, hab den CSS Text genommen und eine sitemap.css angelegt. Diese habe ich unter Admin Vorlagen eingebunden und markiert.

Hab bei meinem CP Sitemap wie im Bild von dir die Klasse sitemap dfiniert. Bekomme auch eine Ausgabe der Sitemap aber ohne die Grafiken.

Diese liegen bei mir im Verzeichnis {root}/img/ dies habe ich auch in der css angepasst. Lasse ich die Levelclass im CP weg sieht meine Sitemap normal aus, füge ich sie ein ändert sich die Ausgabe, jedoch ohne Grafiken ..

Wo könnte noch ein Fehler liegen ?

Danke Daniel

Zur Ansicht: http://www.feuerwehr-nauheim.de/sitemap.phtml

[Heiko H.]

Ich hab jetzt 'ne Weile rumprobiert...
...um das irgendwie sinnvoll aussehen zu lassen, fehlt den jeweils letzten ul's und li's eine Klasse, um die Punkte dann nicht nach unten fortzusetzen.
Entweder man lässt diese Art der "optischen Verbindung", oder man schreibt sich ein eigenes frontend_render script, das besagte Klassen ausgibt, oder man setzt das auf die Feature-Wunsch-Liste aber ich glaube kaum dass das in absehbarer Zeit Gehör findet....


Ach ja, der geistige Vater deines Tutorials hätte sich über eine Nennung sicher nicht geärgert.

Oder bin ich etwa auf dem Holzweg?

[Heiko H.]

@zonk

../../img/bildname.ext

Heiko...

[claus]

Ach ja, der geistige Vater deines Tutorials hätte sich über eine Nennung sicher nicht geärgert.

Huch - dann sollte ich die kleinen Bildchen ja mal schleunigst bearbeiten - na, das hatte ich ja sowieso vor..
Ansonsten sieht das ganz hübsch aus... allerdings nicht so zerfleddert wie in Deinem (Original) Beispiel aus dem Link oben

Wo könnte noch ein Fehler liegen ?

Der liegt da, wo ich geschrieben habe:

mach mal so (imagepfade wieder anpassen)

jaja, da fehlt vor dem "img" jeweils einfach mal ein "../../"

[claus]

auch wenn's nur ne Sekunde war- too late

[zonk]

Hallo Heiko .. hab natürlich die Bildnamen hintendran .. sieht auszugsweise dann so aus:

Code: Select all

ul.sitemap li a
{
background: url(img/bullet1.gif) no-repeat 0 .4em;
padding-left: 15px;
}


EDIT EDIT EDIT ..

omg .. vor dem img fehlt ein / .. hätt ich auch drauf kommen können..

[claus]

Hallo Heiko .. hab natürlich die Bildnamen hintendran .. sieht auszugsweise dann so aus:

Code: Select all

ul.sitemap li a
{
background: url(img/bullet1.gif) no-repeat 0 .4em;
padding-left: 15px;
}


ja super - das wird doch.
Jetzt nur noch die ../../ vorne dran, dann biste da!