473,395 Members | 2,222 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

Image Captions

Hi,

I habe a page with an image with variable width. I need a caption below
the image with the same width as the image.
See http://www.dietzk.de/test/ - the first example is what I need.
This first example works fine as long as I know the image width. But if
I don't know it (and later I won't) it does not.

I tried examples 2 and 3. But they don't work :-(

Any ideas?

Thanks Chris
Jul 21 '05 #1
2 2621
Chris Leipold wrote:
I habe a page with an image with variable width. I need a caption below
the image with the same width as the image.
See http://www.dietzk.de/test/ - the first example is what I need.
This first example works fine as long as I know the image width. But if
I don't know it (and later I won't) it does not.


You may try to read the image dimensions on the server-side and then put
them into HTML/inline CSS code.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Jul 21 '05 #2
Chris Leipold <cl******@dietzk.de> wrote:
I habe a page with an image with variable width. I need a caption below
the image with the same width as the image.
See http://www.dietzk.de/test/ - the first example is what I need.
This first example works fine as long as I know the image width. But if
I don't know it (and later I won't) it does not.


span{display:inline-table;width:2em}

<span>
<img src="img.jpg" alt="something suitable">
caption caption caption caption caption caption
</span>

Won't work in Mozilla or IE. Or:

span{display:table;width:2em}

<span>
<img src="img.jpg" alt="something suitable">
caption caption caption caption caption caption
</span>

Won't work in IE and forces the img/caption combo to block. Or:

http://www.spartanicus.utvinternet.i...d_to_image.htm

Works in all three, but the img/caption combo renders as block in
Mozilla.

Take your pick :-)

--
Spartanicus
Jul 21 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

15
by: 1 | last post by:
hi there i need a site where the client can upload an image every week, with a caption, (so pref use the php upload image function to provide a web based interface) and that then automatically...
1
by: matt | last post by:
I don't have a database available, so i'm writing an Image Gallery with a flat file database. I have an Add Page: Uploads Image file, and saves $filename and $caption to text file: captions.txt...
10
by: Florian Brucker | last post by:
There are several tutorials on the net showing you how to create a thumbnail gallery with floating thumbails which automagically uses all horizontal space available (e.g....
6
by: Michael Rozdoba | last post by:
I've tried to apply something along the lines of http://www.spartanicus.utvinternet.ie/test/caption_sized_to_image.htm to a floated span containing an image & caption, but I can't find anything...
2
by: Joakim Braun | last post by:
Greetings, say I have a table with two rows of one column each. How do I get the text of the second row's cell to line-break at the width of the first row's cell, which is determined by the...
1
by: Eric | last post by:
I want to do the following using CSS, and I just can't seem to find the solution: There is some text here that describes some research or something that I'm doing. Part of the results of the...
14
by: mikeoley | last post by:
Why would this script below work on an html page: http://www.eg-designdev.com/aircylinders/test.htm But not a java page such as this: "http://www.eg-designdev.com/aircylinders/index3.jsp" Or...
6
by: RoseW | last post by:
This is a collection of images with its own style sheet to create the hover over the thumbnail and the larger image appears. http://www4.webng.com/chesleyhs/images/planting/Planting.html Narrow...
0
by: numbnutz | last post by:
Hi, I am currently working on an XML Gallery for my girlfriend's brother who is a photographer. I have created a flash front end template and am using an XML database to load the images and...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
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...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
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...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
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...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.