Page 1 of 3
Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 10:52
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:
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:
Vielleicht ist dieses Tutorial brauchbar für dich?
---
Maybe this tutorial is useful for you?
Ralf
---
Ralph
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 19:07
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...
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..."
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 19:33
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
.
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 19:39
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"
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 19:48
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 !!! 
Schokohasen? Hatte ich schon
http://www.cafepress.com/buy//-/pv_desi ... d_17167717
Heiko...
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 19:55
by 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
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 20:04
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
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 20:06
by update
...wenn Heiko n Schokohasen kriegt - ich nehme auch einen. Mach aber schnell...
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 21:50
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
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 22:10
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.
Oder bin ich etwa auf dem Holzweg?
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 22:32
by Heiko H.
@zonk
../../img/bildname.ext
Heiko...
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 22:34
by update
Heiko H. wrote: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
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 "../../"
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 22:35
by update
auch wenn's nur ne Sekunde war- too late
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 22:36
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..
Re: Tutorial. Sitemap – Gestalten mit CSS / Styling with CSS
Posted: Sat 22. Mar 2008, 22:38
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!