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. 18  2558 
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
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.
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/>
"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"> </div>
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"> </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.
"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>
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
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.
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>
"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>
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
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
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
(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.
"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.
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
"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.
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Larry Woods |
last post by:
I have a site that works fine for days, then suddenly, I start getting ASP
0115 errors with an indication that session variables IN SEPARATE SESSIONS
have disappeared!
First, for background...
|
by: Csaba2000 |
last post by:
I apologize for the length of the page below, but I've tried
to whittle it down as much as I can. The problem is that
Netscape 6.1 on my Win 2K Pro machine is disappearing
the final row of the...
|
by: R0bert Neville |
last post by:
My web page has one unordered list that disappears in Firefox. The
unordered list in question has the class="dir". I double-checked the
source code and verified the markup's semantics. Everything...
|
by: Harry Keck |
last post by:
I am trying to create an xsl stylesheet on the fly as an xml document. I
create elements of type "xsl:value-of" and insert them into my document, but
when I output the xml representation of the...
|
by: Rachel Suddeth |
last post by:
Here is my scenario:
I have a few custom controls that I set up on a form and tested setting
properties and appearances.
Then I added a couple references to the project which add classes I need to...
|
by: farseer |
last post by:
Hi,
I am asking this here in addition to the vstools.office group because i
think the issue could possibly be schema or serilazation related...
i have a word document which has a custom schema...
|
by: Annelies |
last post by:
I've come across a strange problem I can't seem to solve.
Every now and then the scrollbars in IE for http://www.websaid.be/
disappear. Most of the time the problem can be reproduced by following...
|
by: dale.zjc |
last post by:
I've got some bizarre behavior going on with my ASP code below. For
some strange reason (and I'm a newbie to ASP so it's probably obvious
to others) I can't display all the rows of data from the...
|
by: =?Utf-8?B?Q2hhcmxlcw==?= |
last post by:
Like many people, I normally use Yahoo! Mail via the web and like to keep all
my emails stored on the Yahoo! server. However sometimes I can’t get access
to a PC/the web and I download my emails...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |
