Controlling location of SVG image on web page with CSS -

Controlling location of SVG image on web page with CSS -

i working svg drawing. has been created developer , delivered me utilize on web site.

it uses raphael.js vector graphics library draw map , animations.

it inserted web page 2 lines of javascript:

<script type="text/javascript" src="raphael.js"></script> <script type="text/javascript" src="maine_map.js"></script>

my challenge cannot svg file appear need in page. needs appear right of slide show on demo page:

http://owlpress.net/work/

rather appearing in parent div created it, appears floating @ bottom of page. i've played css every way, , i'm stumped. if can help point me in right direction, wonderful.

susan

in main_map.js have:

// insert <div> body document. document.body.appendchild(div);

this reason why generated after everything.

create own div + id , appendchild() instead body tag. demo

var apme = document.getelementbyid('ap'); // create div we'll slotting map , set right size. var div = document.createelement('div'); div.setattribute('id', "mobilize_maine_map"); div.style.width = "200px"; div.style.height = "200px"; div.style.borderwidth = "1px"; div.style.bordercolor = "#000"; div.style.borderstyle = "solid"; // insert <div> heml document. apme.appendchild(div);

now , div inserted within div#ap. div can anywhere wish within markup.

<edit>

you did :

// create div we'll slotting map , set right size. var div = document.createelement('div'); div.setattribute('id', "mobilize_maine_map"); div.style.width = divwidth+"px"; div.style.height = divheight+"px"; // div.style.borderwidth = "0px"; // div.style.bordercolor = "#000"; // div.style.borderstyle = "solid"; // insert <div> heml document. document.body.appendchild(div); var apme = document.getelementbyid('map'); // create div we'll slotting map , set right size. var div = document.createelement('div'); div.setattribute('id', "mobilize_maine_map"); div.style.width = "203px"; div.style.height = "306px"; div.style.borderwidth = "0px"; div.style.bordercolor = "#000"; div.style.borderstyle = "solid"; // insert <div> heml document. apme.appendchild(div);

this makes 2 div same id , not :).

you should have removed :

// create div we'll slotting map , set right size. var div = document.createelement('div'); div.setattribute('id', "mobilize_maine_map"); div.style.width = divwidth+"px"; div.style.height = divheight+"px"; // div.style.borderwidth = "0px"; // div.style.bordercolor = "#000"; // div.style.borderstyle = "solid"; // insert <div> heml document. document.body.appendchild(div);

and replace :

var apme = document.getelementbyid('map'); // create div we'll slotting map , set right size. var div = document.createelement('div'); div.setattribute('id', "mobilize_maine_map"); div.style.width = divwidth+"px"; div.style.height = divheight+"px"; // insert <div> heml document. apme.appendchild(div);

css svg