Design Sitemap Baum mit CSS

Ich habe einfache Sitemap Baum und ich würde es gerne wie in Beispiel (http://www.csshook.com/cssexamples/how-to-design-css-sitemap-tree), Problem ist, dass dieses Beispiel erfordert die gleiche Farbe für den Hintergrund, aber mein Element Sitemap-Container hat Hintergrundbild. Wie kann ich den Sitemap-Baum wie in diesem Beispiel gestalten, so dass ich keinen einfarbigen Hintergrund verwenden muss? Ich möchte dafür kein JavaScript verwenden, da es nicht benötigt wird. VersuchenDesign Sitemap Baum mit CSS

<div class="sitemap-container"> 
    <ul> 
     <li>Page</li> 
     <li>Page</li> 
     <li>Page 
      <ul> 
       <li>Page</li> 
       <li>Page</li> 
       <li>Page</li> 
      </ul> 
     </li> 
    </ul> 
</div>

Quelle

2011-01-10 newbie

Ich sehe nicht, wie das Styling in dem Beispiel Sie zwingt, irgendeine Hintergrundfarbe zu verwenden? Stellen Sie sicher, dass Ihre Bilder (die Bilder für die "Verbindungslinien") einen transparenten Hintergrund haben und Sie mit dem Hintergrund des Containerelements alles tun können, was Sie möchten. - Oder verstehe ich dich irgendwie falsch? – polarblau

Nun, ich hatte diese Zeile, die mich beunruhigte: ul.tree li: last-child {Hintergrund: #fff URL (lastnode.png) no-repeat; } – newbie

ul.tree li:last-child { background: transparent url(lastnode.png) no-repeat; }

statt. Willst du das?

Quelle

2011-01-10 12:58:05 polarblau

Beachten Sie auch, dass für diesen bestimmten Stil Bilder verwendet werden müssen, um die Verbindungslinien des Baums zu zeichnen. Sie müssen sicherstellen, dass Sie diese Bilder mit transparentem Hintergrund neu erstellen, sodass die Baumverknüpfungen vor den Listenelementen auch Ihren Hintergrund anzeigen.

Quelle

2011-01-10 13:59:18 Alain

Design Sitemap Baum mit CSS

Antwort

Verwandte Themen