Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

If you have created additional (non official) documentation or tutorials or something like that please post this here
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by 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:
Image

1. Die vier Gif runterladen:
---
1. Download the 4 Gif:
http://www.gameculture.com.sg/screensho ... 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:
Image

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


Ralf
---
Ralph
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by Heiko H. »

santscho wrote: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... :mrgreen:
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..."
Last edited by Heiko H. on Sat 22. Mar 2008, 19:51, edited 1 time in total.
Not longer here - sorry...

Haubner-IT GbR Dresden
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by 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 :lol: .
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by update »

@ 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"
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by Heiko H. »

claus wrote:@ 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 !!! :oops: :oops: :oops:
Schokohasen? Hatte ich schon :lol:
http://www.cafepress.com/buy//-/pv_desi ... d_17167717

Heiko...
Not longer here - sorry...

Haubner-IT GbR Dresden
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by santscho »

Heiko und Klaus

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

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
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by update »

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 :?:
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by update »

...wenn Heiko n Schokohasen kriegt - ich nehme auch einen. Mach aber schnell...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
zonk
Posts: 173
Joined: Thu 5. Apr 2007, 12:21
Location: Nauheim
Contact:

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by 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
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by 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. :evil:

Oder bin ich etwa auf dem Holzweg?
Last edited by Heiko H. on Sun 23. Mar 2008, 12:17, edited 1 time in total.
Not longer here - sorry...

Haubner-IT GbR Dresden
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by Heiko H. »

@zonk

../../img/bildname.ext :wink:

Heiko...
Not longer here - sorry...

Haubner-IT GbR Dresden
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by update »

Heiko H. wrote:Ach ja, der geistige Vater deines Tutorials hätte sich über eine Nennung sicher nicht geärgert. :evil:
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 ;)
zonk wrote:Wo könnte noch ein Fehler liegen ?
Der liegt da, wo ich geschrieben habe:
claus wrote:mach mal so (imagepfade wieder anpassen)
jaja, da fehlt vor dem "img" jeweils einfach mal ein "../../"
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by update »

:oops: auch wenn's nur ne Sekunde war- too late :oops:
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
zonk
Posts: 173
Joined: Thu 5. Apr 2007, 12:21
Location: Nauheim
Contact:

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by 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..
Last edited by zonk on Sat 22. Mar 2008, 22:39, edited 1 time in total.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS

Post by update »

zonk wrote: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!
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Post Reply