2008-11-29T15:23:43Z
Dave Pawson.
link
Home
Workarounds?
Using CSS for layout and decoration, I was asked if I could provide a navigation list 'in an oval'. Immediate reaction was no. The CSS model is based on a box. Then I got to thinking around it a bit and tried to persuade a background image to substitute for an oval text 'box'. Being tidy (fatal in this case) I'd put all the CSS in a css directory. Using
div#nav {
background: white url('graphics/oval.png');
}
For whatever reason (wrong though it was), I assumed that the 'url' was relative to the HTML file, which it was for my trial run. Then I ran into the RTFM moment when I tried to apply it to the real thing. Firefox... sorry, Firebug (the debugging plugin) tried to tell me but I wasn't listening. When you hover over the link in the CSS, it sort of shows a 'loading' message? A spinning disk image? Once I'd realised the relative url was relative to the CSS file (Why!) hovering shows the actual image, and hey presto I have my background 'oval' shape. Well, nearly
I then swapped windows for ten minutes between my SVG drawing tool, the CSS file and ImageMagic (convert) until I'd tweaked the padding, margins, offsets to all align and make the text look as if it was 'in' an oval. Of course it will all fall over once the nav list changes.
CSS doesn't do ovals.
Norm announced last call on xproc, then promptly followed it with his Calabash announce. He has it full coverage, which is quite impressive! I know there are one or two others in the pipeline, so I guess he'll have the requisite implementations! Good look WG!
Keywords: css
Comments (View)Return to main index