Skip

Footnotes to Sidenotes in Marked
June 11, 2012 10:38 AM   Subscribe

I'm trying to use CSS to display footnotes as side-notes instead.

I'm using Marked.app to preview Markdown formatted text.

The effect I'm trying to achieve is to have Marked handle footnotes as side-notes (example). I think I can do this by creating a custom CSS style perhaps utilizing the HTML5 "aside" tag but I have no real coding/web-development experience/training so I need some hand holding!

Any ideas? Thanks!
posted by shotgunbooty to Computers & Internet (6 answers total) 6 users marked this as a favorite
 
Position absolute on the aside and give them a negative left value to sit in the sidebar. Position relative on the article or div element.
posted by michaelh at 10:40 AM on June 11, 2012


hey michaelh, thanks for the feedback – I'm getting a weird indenting effect on the main body text though (see here). Here's the code I'm using if that helps. I think my "float" attribute may be messing things up.
posted by shotgunbooty at 11:45 AM on June 11, 2012


You have a few simple ways to do this. One would be to start with a pre-built CSS grid system. This would get you up and running quickly. If you want something more robust and with some UI added you can look at something like Zurb Foundation

Honestly the most simple way to do this is to go old school (very non-hipster but works like achamp) and use a table with two columns.

Yes floating left will wrap content. you want the thing you float left to have a width of the offset (so it should be 200px wide (not including margin and padding) if you're using a -200 left margin.
posted by bitdamaged at 12:02 PM on June 11, 2012


thanks guys! I've solved the indenting problem (see here) using a "margin-left" attribute. Now I'm stuck on working backwards and trying to come up with the CSS so that this happens automatically...
posted by shotgunbooty at 12:04 PM on June 11, 2012


Shotgunbooty, glad it's working but you'd do better to use position:absolute so it doesn't interfere with the flow of your document.
posted by michaelh at 12:07 PM on June 11, 2012




« Older Strategies for getting the bes...   |  I'm paranoid about bedbugs, pr... Newer »
This thread is closed to new comments.


Post