They tricked me into doing HTML and CSS, and I've run into a lil' problem.
What I want to do is the following:
"Howdy, please press button (1) to continue"
where "(1)" is an image of a button 1.
This is what my logic came up with:
Code:
<style type="text/css">
.buttonholder
{
display: inline;
}
#button1
{
width: 50px;
height: 50px;
background-image: images/button1.png;
}
</style>
<html>
<body>
Press <span class="buttonholder"><div id="button1"></div></span> to continue
</body>
</html>
This gives weird results. The span is inlined properly, but the div is aligned against the left edge of the window as if it is not a child of the span.
I'm thinking of using <img> tags instead, that would inline properly, but I would lose the advantage of defining the images in the CSS file, right?
So is there a way to keep the image url in the css, AND inline properly?