Planetarion Forums

Planetarion Forums (https://pirate.planetarion.com/index.php)
-   Programming and Discussion (https://pirate.planetarion.com/forumdisplay.php?f=57)
-   -   HTML & CSS - inlining a block element (https://pirate.planetarion.com/showthread.php?t=195240)

Structural Integrity 23 Aug 2007 12:54

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?

GReaper 23 Aug 2007 13:58

Re: HTML & CSS - inlining a block element
 
Replace the div with span?

The div tag is a block level element, span is an inline element.

Structural Integrity 23 Aug 2007 14:06

Re: HTML & CSS - inlining a block element
 
Quote:

Originally Posted by GReaper
Replace the div with span?

The div tag is a block level element, span is an inline element.

I tried that, a span can not have a width and height attribute though. So a span is inserted with a width and height of 0, so the image is not visible.

GReaper 23 Aug 2007 23:08

Re: HTML & CSS - inlining a block element
 
Sorry! This however explains how to do it.

Structural Integrity 24 Aug 2007 07:46

Re: HTML & CSS - inlining a block element
 
Aha, that is rather interesting...
I tried the inline-block before, but FF does not recognise the inline-block keyword for the display parameter. But in that example I see the ":before" selector to insert the image. I never heard of that selector before, but that would work I guess.

djbass 29 Aug 2007 10:33

Re: HTML & CSS - inlining a block element
 
Personally I stand by my signiture, CSS is just plain evil (though sadely a necessary evil).


All times are GMT +1. The time now is 07:43.

Powered by vBulletin® Version 3.8.1
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Copyright 2002 - 2018