Jump to content


  • Posts

  • Joined

  • Last visited

Galen's Achievements


Newbie (1/7)



  1. Galen

    Svg Problem

    Thanks, passed that along to the admin. In the meantime I figured out to get it to have a transparent background too, so layering images will work in the meantime.
  2. Thanks, problem solved. I was converting from SVG to JPEG, then to GIF in Paint.NET, which wasn't working, but when I coverted from SVG to PNG instead it loaded up in NET with a blank background instead of white.
  3. Galen


    Paint.NET is free and shows the coordinates of the mouse cursor (also can do layers, which is handy). Also you could use CSS and use percentages with something along these lines:http://designreviver.com/tutorials/css-ima...-and-tutorials/Though it would probably take you way longer.
  4. I have a SVG I converted to a JPEG (just a bunch of diaganol lines) and want to layer it on top an image (a map), but need to strip the white background from the JPEG. Originally I just embedding the SVG with this line:<embed id="route" wmode="transparent" src="img/route.svg" width="558" height="620" type="image/svg+xml">which works from my desktop but my web server doesn't seem to handle this correctly, so now looking for a way to layer the two images instead. Ideally I could do this somehow on the web page, but I could probably get a hold of a PC with photoshop if necessary.thanks
  5. Galen

    Svg Problem

    I created the SVG below to use with my web page, which works fine locally on every browser except IE, which works fine with the plug-in. When I upload the files to my school's web server (its linux, that's about all I know), it only works on IE. FF thinks it needs a plug-in, and Opera and Chrome just display the text of the .svg file.I tried the <embed>, <object> and <iframe> tags as found here:http://www.w3schools.com/svg/svg_inhtml.aspI did convert it to a JPEG sucessfully, and could possibly combine it with the picture it draws over, but the JPEG has a white background and the program I'm using (Paint.NET) doesn't seem to have a way to ignore the background color. I could layer the two pictures in CSS/HTML but then I have the same problem. I read GIFs have a transparent background by default but changing to that type didn't seem to accomplish anything.Would appreciate any advice on either approach. I could probably access photoshop through my school if I could get some idea of how to go about stripping the white from the layer.thanks<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><line x1="33.2732%" y1="25.2435%" x2="35.7808%" y2="29.9512%" style="stroke:rgb(255,255,0);stroke-width:2"/><line x1="35.7808%" y1="29.9512%" x2="52.0289%" y2="35.9578%" style="stroke:rgb(255,242,0);stroke-width:2"/><line x1="52.0289%" y1="35.9578%" x2="43.2822%" y2="38.0682%" style="stroke:rgb(255,230,0);stroke-width:2"/><line x1="43.2822%" y1="38.0682%" x2="37.8720%" y2="36.6883%" style="stroke:rgb(255,217,0);stroke-width:2"/><line x1="37.8720%" y1="36.6883%" x2="27.6826%" y2="44.8864%" style="stroke:rgb(255,204,0);stroke-width:2"/><line x1="27.6826%" y1="44.8864%" x2="35.2570%" y2="42.0455%" style="stroke:rgb(255,191,0);stroke-width:2"/><line x1="35.2570%" y1="42.0455%" x2="42.0198%" y2="43.1818%" style="stroke:rgb(255,179,0);stroke-width:2"/><line x1="42.0198%" y1="43.1818%" x2="44.6348%" y2="47.0779%" style="stroke:rgb(255,166,0);stroke-width:2"/><line x1="44.6348%" y1="47.0779%" x2="27.6826%" y2="51.1364%" style="stroke:rgb(255,153,0);stroke-width:2"/><line x1="27.6826%" y1="51.1364%" x2="26.6005%" y2="54.8701%" style="stroke:rgb(255,140,0);stroke-width:2"/><line x1="26.6005%" y1="54.8701%" x2="17.9441%" y2="56.6558%" style="stroke:rgb(255,128,0);stroke-width:2"/><line x1="17.9441%" y1="56.6558%" x2="27.5023%" y2="64.7727%" style="stroke:rgb(255,115,0);stroke-width:2"/><line x1="27.5023%" y1="64.7727%" x2="25.6087%" y2="66.8019%" style="stroke:rgb(255,102,0);stroke-width:2"/><line x1="25.6087%" y1="66.8019%" x2="28.2236%" y2="67.6948%" style="stroke:rgb(255,89,0);stroke-width:2"/><line x1="28.2236%" y1="67.6948%" x2="20.6492%" y2="68.5065%" style="stroke:rgb(255,77,0);stroke-width:2"/><line x1="20.6492%" y1="68.5065%" x2="17.9441%" y2="56.6558%" style="stroke:rgb(255,64,0);stroke-width:2"/><line x1="17.9441%" y1="56.6558%" x2="17.9441%" y2="43.2630%" style="stroke:rgb(255,64,0);stroke-width:2"/><line x1="17.9441%" y1="43.2630%" x2="22.0018%" y2="38.2305%" style="stroke:rgb(255,51,0);stroke-width:2"/><line x1="22.0018%" y1="38.2305%" x2="19.9279%" y2="32.0617%" style="stroke:rgb(255,38,0);stroke-width:2"/><line x1="19.9279%" y1="32.0617%" x2="12.9847%" y2="30.3571%" style="stroke:rgb(255,26,0);stroke-width:2"/><line x1="12.9847%" y1="30.3571%" x2="28.9450%" y2="30.8442%" style="stroke:rgb(255,13,0);stroke-width:2"/><line x1="28.9450%" y1="30.8442%" x2="33.2732%" y2="25.2435%" style="stroke:rgb(255,0,0);stroke-width:2"/></svg>
  6. Thanks, sounds like #2 is a no go. But it looks like setting the ".menu td" width to something like 1000px solves the problem with technique #1. I'll go with that and see how it works.
  7. I thought I had this one figured out but ran into a new problem. I'm trying to get a CSS drop-down using tables, which I thought would make it easier to get the borders implemented. I've tried two techniques:1. Using diplay: none / block. This works, but in any browser but IE the revealed TDs are only the length of the text, not the entire row. I might be able to fix this cosmetically but the whole row is no longer clickable, which is what the .navlink class is meant for. Putting width: 100% for the td has no effect. Using pixels does work, but I want to keep the width of the bars relative.2. Using visibility: hidden / visible (this was my fix). This looks fine on all browsers, but the hover works for the invisible portion as well. This is presumbably because I have hover on the table instead of the first row, but when I get the first row a class name and hover on that (note "h2" for the first menu", it doesn't work. I'm really not sure why that is.would appreciate any help, I suppose I could always scrap the table and trying again with ULs, but hoping to avoid that.thanks<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><style type="text/css" media="all">body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: auto;}#navbar { width: 100%; height: 30px; font-size: 16px !important; border: thin blue; background-color: #497FBF; position: relative; z-index: 1;}.menu { background-color: #497FBF;/* visibility: hidden;*/ display: none;}.heading { text-align: center; float: left; width: 15%; border: none;}.heading tr td { padding: 4px 0px 5px 0px;}.heading tr td{ border-right: 1px solid blue; border-bottom: 1px solid blue;}.menu td{ border-left: 1px solid blue; border-top: 0; border-right: 1px solid blue; border-bottom: 1px solid blue;}.heading:hover .menu { /* visibility: visible; */ display: block;}.heading:hover { background-color: #00B5EF;}.navlink { display: block; width: 100%; color: black; text-decoration: none;}</style></head><body><div id="navbar"><table class="heading" cellspacing="0"><tr class="h2"><td>Screen Size</td></tr><tr class="menu"><td><a class="navlink" href="#" >Small</a></td></tr><tr class="menu"><td><a class="navlink" href="#" >Medium</a></td></tr><tr class="menu"><td><a class="navlink" href="#" >Large</a></td></tr></table><table class="heading" cellspacing="0"><tr><td>Font Size</td></tr><tr class="menu"><td><a class="navlink" href="#">Small</a></td></tr><tr class="menu"><td><a class="navlink" href="#">Medium</a></td></tr><tr class="menu"><td><a class="navlink" href="#">Large</a></td></tr><tr class="menu"><td><a class="navlink" href="#">X-Large</a></td></tr></table></div></body></html>
  8. Galen

    Delete Me

    Sorry- figured out this one on my own.
  • Create New...