By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Disappearing Elements

P: n/a
I also posted this as a reply to another string, I have no idea why? Too
much time infront of the pretty blinking screen I suppose.

A curious thing is happening, when I use display:inline; and background:
url(); my object(<div> do you call that an object?) disappears.

Jul 20 '05 #1
Share this Question
Share on Google+
18 Replies


P: n/a
Heath wrote:
A curious thing is happening, when I use display:inline; and background:
url(); my object(<div> do you call that an object?) disappears.


<div> is an element type. A particular instance of it is called an element.
So basically, you are saying that when you make a <div> element inline and
set a background, you can't see it.

Is there anything actually in the element? A non-replaced inline element
doesn't usually have a size unless there is something inside it. It would
be more helpful if you supplied a URL to a testcase.

--
Jim Dabell

Jul 20 '05 #2

P: n/a
Here is the mark up with Style:
#test {
height: 55px;

border: solid 1px #230;

background: transparent url(images/identity-c.jpg) no-repeat center;
display: inline;
}

<html>
<body>
<div id="test"></div>
</body>
</html>

While testing this I put some words in the element and my background
shows up, but not to the size that I set. I am starting to see the light
here, but I don't quite have it figured out.

Also, if possible, I think Anne is offline, can you take a look at the
Centering Images post, I am quite stuck and I would really appreciate it.

Jim Dabell wrote:
Heath wrote:

A curious thing is happening, when I use display:inline; and background:
url(); my object(<div> do you call that an object?) disappears.

<div> is an element type. A particular instance of it is called an element.
So basically, you are saying that when you make a <div> element inline and
set a background, you can't see it.

Is there anything actually in the element? A non-replaced inline element
doesn't usually have a size unless there is something inside it. It would
be more helpful if you supplied a URL to a testcase.


Jul 20 '05 #3

P: n/a
Heath wrote:

Please direct your attention towards:
http://www.allmyfaqs.com/faq.pl?How_to_post
Here is the mark up with Style:
#test {
height: 55px;
display: inline;
}


The height (and width) properties do not apply to non-replaced inline
elements.

--
David Dorward <http://dorward.me.uk/>
Jul 20 '05 #4

P: n/a

"Heath" <hj******@email.moc> wrote in message
news:3f**********************@news.skynet.be...
Here is the mark up with Style:
#test {
height: 55px;

border: solid 1px #230;

background: transparent url(images/identity-c.jpg) no-repeat center;
display: inline;
}

<html>
<body>
<div id="test"></div>
</body>
</html>

While testing this I put some words in the element and my background
shows up, but not to the size that I set. I am starting to see the light
here, but I don't quite have it figured out.

1) Please don't top post. The locals get vicious. And it's disruptive to the
flow of both reading and getting help around here.

2) You need to have content within a div for it to have any dimension. What
you're trying to do is have a region of something, and you really can't do
that. The width can be made larger than the content requires, but the height
relies solely on the content's space and what you set for padding. Setting
height really has no effect.

That said, the following is something I'd never do, but check it out.

#test {
padding: 20px;
border: solid 1px #230;
background: transparent url(images/identity-c.jpg) no-repeat center;
display: inline;
}

<div id="test">&nbsp;</div>

Jul 20 '05 #5

P: n/a


Neal wrote:
"Heath" <hj******@email.moc> wrote in message
news:3f**********************@news.skynet.be...
Here is the mark up with Style:
#test {
height: 55px;

border: solid 1px #230;

background: transparent url(images/identity-c.jpg) no-repeat center;
display: inline;
}

<html>
<body>
<div id="test"></div>
</body>
</html>

While testing this I put some words in the element and my background
shows up, but not to the size that I set. I am starting to see the light
here, but I don't quite have it figured out.


1) Please don't top post. The locals get vicious. And it's disruptive to the
flow of both reading and getting help around here.

2) You need to have content within a div for it to have any dimension. What
you're trying to do is have a region of something, and you really can't do
that. The width can be made larger than the content requires, but the height
relies solely on the content's space and what you set for padding. Setting
height really has no effect.

That said, the following is something I'd never do, but check it out.

#test {
padding: 20px;
border: solid 1px #230;
background: transparent url(images/identity-c.jpg) no-repeat center;
display: inline;
}

<div id="test">&nbsp;</div>

Thanks Neal. I am being lazy because my reply automatacally goes to the
top (netscape 7.1). Thanks for the tip. I don't think I am quite a
newbie, but not too far from it. The more I read about it (which I
obviously need to do more of) the more I think that I am going about
this problem the wrong way. I don't have a very solid understanding of
the elements and how they interact with css.

I am having trouble with the div and what goes in it. Most the time I
get what I want, but positioning images within a div has kind of got me
stumped. Thanks for the advice, but like you said it is probably better
to find another way.

Jul 20 '05 #6

P: n/a

"Heath" <hj******@email.moc> wrote in message
news:3f**********************@news.skynet.be...
I am having trouble with the div and what goes in it. Most the time I get what I want, but positioning images within a div has kind of got me stumped. Thanks for the advice, but like you said it is probably better to find another way.


Do what I did. Visit, oh, a couple dozen sites that have a look
similar to what you want, and look at their code and CSS. Then
test it out on your own computer. I still get into situations,
mind you.

Your problem was two images left and right, with the logo
between? Try this:

#foo {
float: left;}
#bar {
float: right;}
#top {
text-align: center;}

<div id="top">
<img id="foo" src="" alt="foo" height="55" width="55" />
<img id="bar" src="" alt="bar" height="55" width="55" />
<img id="logo" src="" alt="logo" height="55" width="150" />
</div>
Jul 20 '05 #7

P: n/a
Heath wrote:
[snip]
Thanks Neal. I am being lazy because my reply automatacally goes to the
top (netscape 7.1).
The idea is that you start at the top, go down and reply to each point in
turn, removing the irrelevant bits. Newsgroups vary, but it's very useful
in technical groups like this one.

[snip] I am having trouble with the div and what goes in it. Most the time I
get what I want, but positioning images within a div has kind of got me
stumped.


It's hard to give you pointers without knowing what you are trying to
achieve. If you have an element with a background image but no content,
perhaps you would be better off with an <img> element. Alternatively, you
could leave the <div> element with block display (why do you want to change
it to inline?).

--
Jim Dabell

Jul 20 '05 #8

P: n/a
Jim Dabell wrote:
Heath wrote:
[snip] Response to Top Posting: Yeah, I am usually in other newsgroups that are
more top down, but I'm getting the hang of it.
[snip]
It's hard to give you pointers without knowing what you are trying to
achieve. If you have an element with a background image but no content,
perhaps you would be better off with an <img> element. Alternatively, you
could leave the <div> element with block display (why do you want to change
it to inline?).


This post is merging with my other post, but basically I have now
changed my div to an img. I have a div and in it three images. I want
image one on the left, image two in the middle, and image three on the
right. I was trying to stay away from using img align, because it isn't
good, and I really dislike using absolute or relative positioning.

So I am trying to use float and I asked earlier if it is okay to use
text-align on images. So far I haven't been able to get this to work.

xhtml

<div id="container">
<img id="imageOne" />
<img id="imageTwo" />
<img id="imageThree" />
</div>

and I want them to be on the same line and stay glued to their edges, in
a more legal way than align=left, etc.

Jul 20 '05 #9

P: n/a

Neal wrote:
I am having trouble with the div and what goes in it. Most the time I get what I want, but positioning images within a div has kind
of got me stumped. Thanks for the advice, but like you said it is
probably better to find another way.

Do what I did. Visit, oh, a couple dozen sites that have a look
similar to what you want, and look at their code and CSS. Then
test it out on your own computer. I still get into situations,
mind you.
Yeah, tell me about it. The problem is everywhere I go I see tables,
tables, tables.
Your problem was two images left and right, with the logo
between? Try this:

#foo {
float: left;}
#bar {
float: right;}
#top {
text-align: center;}

<div id="top">
<img id="foo" src="" alt="foo" height="55" width="55" />
<img id="bar" src="" alt="bar" height="55" width="55" />
<img id="logo" src="" alt="logo" height="55" width="150" />
</div>

I am getting a funny result. My left is left. My center is left next to
my left. My right is right, but right bottom. Strange, strange, and what
the hell am I doing here.

Code:
#identity {
height: 55px;
text-align: center;
}

/* Ads */
/*---------------------------------------------------*/
#adOne {
height: 66px;
float: left;
}
#adTwo {
height: 66px;
float: right;
}

<div id="identityBox">
<img src="Game_files/ads/Sugar Banner.gif" id="adOne" />
<img src="Game_files/images/identity-c.jpg" id="identity" />
<img src="Game_files/ads/Ritalin Banner.gif" id="adTwo" />
</div>

Jul 20 '05 #10

P: n/a

"Heath" <hj******@email.moc> wrote in message
news:3f**********************@news.skynet.be...
I am getting a funny result. My left is left. My center is left next to my left. My right is right, but right bottom. Strange, strange, and what the hell am I doing here.


Look at what I did in the last post. First, I made a div to hold
all these three images. I set that div to text-align: center.
Then I set the ids for the left and right images as floats.

In the HTML, I open the div, I begin with all floated content,
then I put my regular content.

There's no need to set heights in the CSS, it's redundant. You
should do that in the HTML, so that browsers with no access to
CSS can leave space for the images before they fully load.

So here's what your code ought to be.

CSS;

#identityBox {
text-align: center;
}

#adOne {
float: left;
}

#adTwo {
float: right;
}
And the HTML - note the logo comes AFTER the two floated ads. You
should also specify height and width, and provide alt text for
each image.

<div id="identityBox">
<img src="Game_files/ads/Sugar Banner.gif" id="adOne" />
<img src="Game_files/ads/Ritalin Banner.gif" id="adTwo" />
<img src="Game_files/images/identity-c.jpg" id="identity" />
</div>
Jul 20 '05 #11

P: n/a
Heath wrote:

Thanks Neal. I am being lazy because my reply automatacally goes to
the top (netscape 7.1).


Please *do* trim your quotes. Your laziness means more work for all of
us, and needlessly uses bandwith.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #12

P: n/a
Heath wrote:
I have a div and in it three images. I want image one on the left, image
two in the middle, and image three on the right. I was trying to stay away
from using img align, because it isn't good, and I really dislike using
absolute or relative positioning.

So I am trying to use float and I asked earlier if it is okay to use
text-align on images. So far I haven't been able to get this to work.


I dislike absolute positioning too. The text-align property should be
applied to a block-level element, which will then influence inline elements
inside it (including images). So what you want to do is use { text-align:
center; } to centre the images, and then float two of them to each side.

There is an added complication in that floated elements automatically turn
into block-level elements, so when you try and float the third image to the
right, it drops down to the line below the first two images. If the order
of the images in the source is not important, then just place the third
image second in the flow:

<URL:http://www.jimdabell.com/misc/usenet/spread-out-images/1/>

Alternatively, if the third image is merely decoration, you could set it as
the background image for the container:

<URL:http://www.jimdabell.com/misc/usenet/spread-out-images/2/>

Note that in the second example, extra padding is required on the right hand
side (to take up the same amount of space as the image on the left - so
that the middle image is centred exactly).
--
Jim Dabell

Jul 20 '05 #13

P: n/a
On Sun, 4 Jan 2004, Neal wrote:
Do what I did. Visit, oh, a couple dozen sites that have a look
similar to what you want, and look at their code and CSS. Then
test it out on your own computer.


Could I make a general comment, unrelated to this specific problem but
to the impression set by the above?

You seem to have omitted the intermediate step of consulting the
interworking specifications (and then reviewing which of those
specifications are violated by MS's operating system component that
tries to give the impression that it's a web browser). With a little
authoring care, MS's component is capable of browsing WWW-compatible
pages, but I think it's fair to say that it rarely happens by copying
random other pages found out there.

Or do you _really_ want to make your web pages reliant on a random
selection of bugs that are used by the random web pages that you found
on the web? Sturgeon's Law lies in wait for you, if you do.

good luck
Jul 20 '05 #14

P: n/a
(trim)

Thanks for your help Alan, Anne, Brian, Jim, and Neal. I think that
someone should put a sign on this group that reads the following: Follow
the posting rules and there are some of the most helpful individuals
over here.

This solves some issues that I have been struggling with. I really
appreicate it.

Jul 20 '05 #15

P: n/a

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in message
news:Pi*******************************@ppepc56.ph. gla.ac.uk...
On Sun, 4 Jan 2004, Neal wrote:
Do what I did. Visit, oh, a couple dozen sites that have a look similar to what you want, and look at their code and CSS. Then test it out on your own computer.
You seem to have omitted the intermediate step of consulting

the interworking specifications (and then reviewing which of those
specifications are violated by MS's operating system component that tries to give the impression that it's a web browser). With a little authoring care, MS's component is capable of browsing WWW-compatible pages, but I think it's fair to say that it rarely happens by copying random other pages found out there.
Oh, yes. I never intended anyone to suppose one should emulate
bad design and structure. I guess it's an assumption I should not
make that you need to verify what works in the viewport is what
follows the specs.
Or do you _really_ want to make your web pages reliant on a random selection of bugs that are used by the random web pages that you found on the web? Sturgeon's Law lies in wait for you, if you do.


Yes, indeed. Good point.
Jul 20 '05 #16

P: n/a
Jim Dabell wrote:
Heath wrote:

There is an added complication in that floated elements automatically turn
into block-level elements, so when you try and float the third image to
the right, it drops down to the line below the first two images. If the
order of the images in the source is not important, then just place the
third image second in the flow:


I can see that this works from your excellent example but I don't understand
why putting the third image (floated right) second in the source means it no
longer wants to drop down a line. Putting it second does not alter the fact
that it is block level - a bit of help for me please so that I can
understand this

thanks
David

Jul 20 '05 #17

P: n/a

"David Graham" <da************@ntlworld.com> wrote in message
news:9a*************@newsfep1-gui.server.ntli.net...
I can see that this works from your excellent example but I don't understand why putting the third image (floated right) second in the source means it no longer wants to drop down a line. Putting it second does not alter the fact that it is block level - a bit of help for me please so that I can understand this


Because the UA renders from top down. The first is a float, so it
floats it. The second is not, it takes up the rest of the space
the float does not use up, even spilling under if need be. Next
is a float, and it floats it below, because you put it after a
non-floated item.

Always put floats before non-floats you want side-by-side. The
first non-float will cause the next float to be below.
Jul 20 '05 #18

P: n/a
Neal wrote:
"David Graham" <da************@ntlworld.com> wrote in message
news:9a*************@newsfep1-gui.server.ntli.net...
I can see that this works from your excellent example but I don't
understand why putting the third image (floated right) second in the
source means it no longer wants to drop down a line. Putting it second
does not alter the fact that it is block level - a bit of help for me
please so that I can understand this


Because the UA renders from top down. The first is a float, so it
floats it. The second is not, it takes up the rest of the space
the float does not use up, even spilling under if need be. Next
is a float, and it floats it below, because you put it after a
non-floated item.

Always put floats before non-floats you want side-by-side. The
first non-float will cause the next float to be below.


Thanks Neal, I've got it now
David
Jul 20 '05 #19

This discussion thread is closed

Replies have been disabled for this discussion.