![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Entry tags:
Don't stand, don't stand, don't stand so close to me
Yet another boring geeky work question.
I have the following html:
<div style="background-color: #C7C7FE;
border-style: solid;
border-color: blue;
border-width: 0.25pt;
padding: 1pt">
<p class="instruction">Get to bed immediately.</p></div>
<div><img src="picture_of_bed.png"></div>
(OK, I've changed some of the text, but the markup's the same.)
Its job is to print "Get to bed immediately" in a nice blue box, and then a picture underneath. Unfortunately, it doesn't look very good because the picture and the blue box are jammed right up against each other instead of having space between.
The html is auto-generated (by and XSLT transform thingy), so it's not something I can do anything about without serious knowledge of XSL stylesheets. However, I could wrap another <div> tag round the <div> that contains the image, and give it some properties which added a little padding... if only I knew what those properties were.
I've tried:
<div style="padding: 1pt">
<div><img src="picture_of_bed.png"></div>
</div>
but that doesn't seem to be the answer. My html skills start to fail after headings and paragraphs, so can anyone suggest a property (or anything else) I might want to investigate ?
I have the following html:
<div style="background-color: #C7C7FE;
border-style: solid;
border-color: blue;
border-width: 0.25pt;
padding: 1pt">
<p class="instruction">Get to bed immediately.</p></div>
<div><img src="picture_of_bed.png"></div>
(OK, I've changed some of the text, but the markup's the same.)
Its job is to print "Get to bed immediately" in a nice blue box, and then a picture underneath. Unfortunately, it doesn't look very good because the picture and the blue box are jammed right up against each other instead of having space between.
The html is auto-generated (by and XSLT transform thingy), so it's not something I can do anything about without serious knowledge of XSL stylesheets. However, I could wrap another <div> tag round the <div> that contains the image, and give it some properties which added a little padding... if only I knew what those properties were.
I've tried:
<div style="padding: 1pt">
<div><img src="picture_of_bed.png"></div>
</div>
but that doesn't seem to be the answer. My html skills start to fail after headings and paragraphs, so can anyone suggest a property (or anything else) I might want to investigate ?
no subject
Failing that, padding and margin are usually appropriate. They do different things, but the difference may not matter in this case. Or border, although this isn't what it's for.
no subject
no subject
A div with padding: 1pt does what I'd expect, i.e. introduce a small amount of space above and to the left of the image. padding-top: 1px (or some higher number) is more like what I'd write myself. Perhaps it would help if you posted a screenshot showing what you got and indicating what you'd expected - "doesn't seem to be the answer" is, um, not very specific.
A "div" was an idiot when I was at school.
no subject
no subject
I really must work out how to fix my makefile so that it rebuilds things if the stylesheet has changed instead of just if the XML has changed. Maybe I forgot to touch the XML before building or something.
I think it was more "divvies" round our way.
no subject
%.html : stylesheet.xsl
pretty much anywhere in your makefile (maybe not first).
Since there's no tab-indented stuff underneath it, it's not a rule, just a dependency, and it adds to any dependencies elsewhere for the same target. I think. I could be wrong.
no subject
no subject
Layout fiddling sucks.
no subject
You can tell I've finished work for the week and settled into G&T mode.
no subject
If you want to do this a lot use a separate style sheet or embed the style for a new class of img. Here is an embedded example:
<style type="text/css"> <!-- img.spaceypic { margin:10px; } } --> </style>Then instead of using div and defining the style each time, use
no subject
no subject
Mind you, as they say, if I were going to the Post Office, I wouldn't start from here. We much prefer ems as the units of measurement, but that's on the desktop. px should produce quite predictable results too, though they don't size well if the user changes the text size; but pt really could be quite device-specific.
no subject
no subject