View Single Post
Unread 23 Aug 2007, 12:54   #1
Structural Integrity
Rawr rawr
 
Structural Integrity's Avatar
 
Join Date: Dec 2000
Location: Upside down
Posts: 5,300
Structural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriendStructural Integrity needs a job and a girlfriend
HTML & CSS - inlining a block element

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?
__________________
"Yay"

Last edited by Structural Integrity; 23 Aug 2007 at 13:07.
Structural Integrity is offline   Reply With Quote