XHTML/CSS-Sitemap mit Tidy

Ingo Schommer
2004-03-16 23:21
So, zur Abwechslung auch mal ne Lösung, keine Frage :D
Da anscheinend schon mehrere Leute Probleme mit den Sitemap-Quellcode-Modifikationen
von Tidy hatten, hier ein kleines Tutorial:

Es ist wichtig, die -Elemente in den AllWrap zu schreiben, sonst erkennt Tidy
die falsche Schachtelung von Block/Inline-Elementen und korrigiert diese
zu , und Links werden logischerweise nicht mehr angezeigt.
Da die Sitemap letztendlich nur ein normales TMENU-Content-Element ist,
lässt sich auch hier mit Wraps arbeiten, um eine halbwegs XHTML/CSS-konforme
Struktur zu Erstellen. Leider wird die gesamte Sitemap nicht in einen globalen
gewrappt, was die CSS-Handhabung vereinfachen würde (Verbesserungsvorschläge
bitte an meDELETETHIS@chillu.com)

Extension-Template (Setup):


page.stylesheet = pfad-zum-stylesheet/typo3-sitemap.css

tt_content.menu.20.2.1.noBlur = 1

tt_content.menu.20.2.1.target =

tt_content.menu.20.2.1.wrap = <ul class="sitemapLvl1"> | </ul>

tt_content.menu.20.2.1.NO.allWrap = <li> | </li>

tt_content.menu.20.2.1.NO.linkWrap =

tt_content.menu.20.2.2.noBlur = 1

tt_content.menu.20.2.2.target =

tt_content.menu.20.2.2.wrap = <ul class="sitemapLvl2"> | </ul>

tt_content.menu.20.2.2.NO.allWrap = <li> | </li>

tt_content.menu.20.2.2.NO.linkWrap =

tt_content.menu.20.2.3.noBlur = 1

tt_content.menu.20.2.3.target =

tt_content.menu.20.2.3.wrap = <ul class="sitemapLvl3"> | </ul>

tt_content.menu.20.2.3.NO.allWrap = <li>|</li>

tt_content.menu.20.2.3.NO.linkWrap =






Externe CSS-Datei (typo3-sitemap.css):

/* Haupt-Klasse, für globale Textformatierungen etc. */
ul.sitemapLvl1, ul.sitemapLvl2, ul.sitemapLvl3 {
list-style-type: none;
}
ul.sitemapLvl1 {
font-size : 12px;
border: 1px solid #ccc;
}
ul.sitemapLvl1 li {
margin-bottom: 10px;
margin-left: -30px;
padding-left: 10px;
}
ul.sitemapLvl2 {
font-size : 11px;
margin-top: -20px;
}
ul.sitemapLvl2 li {
margin: 0 10px 2px -30px;
padding: 3px;
background: #ddd;
}
ul.sitemapLvl3 {
font-size : 10px;
margin-top: -20px;
}
ul.sitemapLvl3 li {
margin: 0 10px 2px -30px;
padding: 3px;
background: #eee;
}

/* Vorsicht: Reihenfolge der Pseudo-Elemente ist wichtig für einige Browser */
.sitemap a:link, a:visited { }
.sitemap a:hover { }
.sitemap a:active { }



Getestet mit Typo3 3.6RC1, CSS Styled Content und HTML Tidy (Ver. vom 1st April 2002).

Grüße
Ingo
Durchschnittliche Bewertung: 3.33 (3 Abstimmungen)

Es ist möglich, diese FAQ zu kommentieren.