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!
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!
Response by poster: 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
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
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
Response by poster: 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
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
posted by michaelh at 12:07 PM on June 11, 2012
Sidenotes using only CSS
How to do sidenotes in HTML documents using CSS and Javascript
posted by kirkaracha at 12:08 PM on June 11, 2012
How to do sidenotes in HTML documents using CSS and Javascript
posted by kirkaracha at 12:08 PM on June 11, 2012
This thread is closed to new comments.
posted by michaelh at 10:40 AM on June 11, 2012