User Name
Password

Go Back   Planetarion Forums > Non Planetarion Discussions > Programming and Discussion

Reply
Thread Tools Display Modes
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
Unread 23 Aug 2007, 13:58   #2
GReaper
The BOFH
 
GReaper's Avatar
 
Join Date: Mar 2001
Posts: 463
GReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant future
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.
GReaper is offline   Reply With Quote
Unread 23 Aug 2007, 14:06   #3
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
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.
__________________
"Yay"
Structural Integrity is offline   Reply With Quote
Unread 23 Aug 2007, 23:08   #4
GReaper
The BOFH
 
GReaper's Avatar
 
Join Date: Mar 2001
Posts: 463
GReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant futureGReaper has a brilliant future
Re: HTML & CSS - inlining a block element

Sorry! This however explains how to do it.
GReaper is offline   Reply With Quote
Unread 24 Aug 2007, 07:46   #5
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
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.
__________________
"Yay"
Structural Integrity is offline   Reply With Quote
Unread 29 Aug 2007, 10:33   #6
djbass
mmm.. pills
 
djbass's Avatar
 
Join Date: Apr 2000
Location: Australia
Posts: 2,152
djbass has a reputation beyond reputedjbass has a reputation beyond reputedjbass has a reputation beyond reputedjbass has a reputation beyond reputedjbass has a reputation beyond reputedjbass has a reputation beyond reputedjbass has a reputation beyond reputedjbass has a reputation beyond reputedjbass has a reputation beyond reputedjbass has a reputation beyond reputedjbass has a reputation beyond repute
Re: HTML & CSS - inlining a block element

Personally I stand by my signiture, CSS is just plain evil (though sadely a necessary evil).
__________________
CSS : the result of letting artists design something only an engineer should touch.
djbass is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Forum Jump


All times are GMT +1. The time now is 10:49.


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