Hi,
I have a little trouble. I'm trying to introduce side-notes at my web page and need a little guidance please. Based on different tutorials I've managed to crack out this code, which works fine for a web page:
---------------- CODE ------------------
<style type="text/css">
div.sidenote-left { float: left; margin-left: 0px; }
div.sidenote-right { float: right; margin-right: 0px; }
div.sidenote-left, div.sidenote-right { width: 150px; text-align: left; }
div.sidenote-left div, div.sidenote-right div { margin: 0 10px; border: 1px solid #666; padding: 4px; }
</style>
<p>Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here.</p>
<div class="sidenote-left"><div>See "link" for further explanation</div></div>
<p>Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here.</p>
<div class="sidenote-right"><div>Tip<br><ul><li>Tip 1</li><br><li>Tip 2</li></div></div>
<p>Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here.</p>
<p>Main text here. Main text here. Main text here. Main text here.</p>
------------------------------
However, I'd like to implement this to my "style.css"-file so I won't have to copy this code for every page with sidenotes. I've tried to copy the css-bit into my style.css, but (off course) it doesn't work
This is what I've copied to my css-file:
------------- CSS -----------
div.sidenote-left { float: left; margin-left: 0px; }
div.sidenote-right { float: right; margin-right: 0px; }
div.sidenote-left, div.sidenote-right { width: 150px; text-align: left; }
div.sidenote-left div, div.sidenote-right div { margin: 0 10px; border: 1px solid #666; padding: 4px; }
-----------------------
I've tried to change "div.sidenote-right" to "div#sidenote-right" and ".sidenote-right". Also, I've tried to reorganize the code without any luck.
Does anyone know how to change the code, so that it works from my "style.css"-file?
Thanks!
I already have a "style.css"-file which works perfectly for headlines, fonts etc.
The problem is that the code doesn't work in this file.
I have a little trouble. I'm trying to introduce side-notes at my web page and need a little guidance please. Based on different tutorials I've managed to crack out this code, which works fine for a web page:
---------------- CODE ------------------
<style type="text/css">
div.sidenote-left { float: left; margin-left: 0px; }
div.sidenote-right { float: right; margin-right: 0px; }
div.sidenote-left, div.sidenote-right { width: 150px; text-align: left; }
div.sidenote-left div, div.sidenote-right div { margin: 0 10px; border: 1px solid #666; padding: 4px; }
</style>
<p>Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here.</p>
<div class="sidenote-left"><div>See "link" for further explanation</div></div>
<p>Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here.</p>
<div class="sidenote-right"><div>Tip<br><ul><li>Tip 1</li><br><li>Tip 2</li></div></div>
<p>Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here. Main text here.</p>
<p>Main text here. Main text here. Main text here. Main text here.</p>
------------------------------
However, I'd like to implement this to my "style.css"-file so I won't have to copy this code for every page with sidenotes. I've tried to copy the css-bit into my style.css, but (off course) it doesn't work
This is what I've copied to my css-file:
------------- CSS -----------
div.sidenote-left { float: left; margin-left: 0px; }
div.sidenote-right { float: right; margin-right: 0px; }
div.sidenote-left, div.sidenote-right { width: 150px; text-align: left; }
div.sidenote-left div, div.sidenote-right div { margin: 0 10px; border: 1px solid #666; padding: 4px; }
-----------------------
I've tried to change "div.sidenote-right" to "div#sidenote-right" and ".sidenote-right". Also, I've tried to reorganize the code without any luck.
Does anyone know how to change the code, so that it works from my "style.css"-file?
Thanks!
I already have a "style.css"-file which works perfectly for headlines, fonts etc.
The problem is that the code doesn't work in this file.