Comments on: Sitemaps 2.0 with SlickMap CSS

By: tarwin

tarwin — Thu, 16 Jul 2009 04:08:23 +0000

I added the following so I could put comments “alt” and divs with more descriptions.

a:link:after,
a:visited:after {
content: attr(alt);
display: block;
font-size: 9px;
margin-top: 5px;
font-weight: normal;
text-align: left;
margin-left: 5px;
margin-right: 5px;
}
a+div{
margin-right: 20px;
margin-top: 5px;
background: #fff;
padding: 3px;
font-size: 10px;
}

By: MikeyMcCorry

MikeyMcCorry — Thu, 16 Jul 2009 03:44:42 +0000

I disagree; this is pretty awesome. Currently the sitemaps on my web pages are just simple, nested ULs. By throwing this CSS into my non-ie stylesheet awesome browsers can get an awesome sitemap page. IE will get, well, what it has always gotten. I agree that it could at least be a little more compatible in IE8, sans-rounded corners (there’s always javascript for that if necessary though…)

By: otatop

otatop — Wed, 15 Jul 2009 18:17:39 +0000

I gotta agree with jmccabe. Looks cool, love that it’s all in CSS, but if it doesn’t work on all browsers it may as well not exist.

By: hdragomir

hdragomir — Wed, 15 Jul 2009 08:25:16 +0000

Looks pretty awesome in Opera as well.

And I love how clean the CSS is

By: stoimen

stoimen — Wed, 15 Jul 2009 06:05:12 +0000

Good work! I think the Web is underestimating the sitemaps at all! Strange for me but even now I start projects where the sitemat isn’t present!

Thanks!

By: astuteo

astuteo — Tue, 14 Jul 2009 19:07:32 +0000

Thanks for the mention, Dion. Much appreciated!

I made this thing primarily to avoid drawing sitemaps in Graffle, Illustrator, etc. and go straight to coding navigation. That was my whole motivation. So to avoid extensive HTML markup (which would make the whole thing pointless, IMO), I necessarily employed CSS2 pseudo-elements (:first-child, :last-child, :before).

It’s not hard to make this thing look the same in IE, it’s just a pointless venture.

By: WillPeavy

WillPeavy — Tue, 14 Jul 2009 18:06:09 +0000

@jmccabe – I agree I don’t like user agent specific junk either. For a production app, I would never use this sitemap. For internal use for apps in dev, it’s great though.

It took me about 2 minutes to tweak the CSS so it works okay in IE 7 and 8. It doesn’t have the rounded corners and shadows in IE, but I don’t really care about rounded corners or shadows – I just like to have a UL layed out nicely as sitemap for internal dev.

By: nanodocumet

nanodocumet — Tue, 14 Jul 2009 17:52:27 +0000

Looks nice on FF3.5, but on IE7 it doesn’t even show the links, just the name of the pages.

By: Darkimmortal

Darkimmortal — Tue, 14 Jul 2009 17:35:51 +0000

@jmccabe: +1. People might as well [somehow] use ActiveX to render their rounded corners. They’d probably end up supporting a similar if not higher percentage of their users.

By: jmccabe

jmccabe — Tue, 14 Jul 2009 16:59:01 +0000

The demo looks pretty bad in IE – not surprising since the CSS uses a lot of Firefox and Safari extensions.

I’m surprised that more people don’t complain about this kind of thing. One of the reasons everyone hates Microsoft is because they add their own custom extensions to things (the browser, Java, etc) which then lock people into their platform. But when people make extensive use of Safari/Firefox extensions nobody seems to find it as offensive.

Don’t get me wrong – I hate IE and get a little bit of satisfaction with the fact that a lot of sites now look uglier in IE than in other browsers. But I’m just surprised that I keep seeing so many articles about Safari-specific CSS transforms and other browser-specific things which we shouldn’t really be using.

By: WillPeavy

WillPeavy — Tue, 14 Jul 2009 14:33:22 +0000

Nice work. I’m going to use this in a project I’m working on.