473,569 Members | 2,593 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Caption on an image using CSS

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 research is a graph that I want to display as
Figure 1.

+---------------------+
| |
| |
| |
| Graph Here |
| |
| |
| |
| |
+---------------------+
Figure 1: This is the Graph

Then the text continues here.

I shouldn't have to put the image and the text into a table to get it to be
centered with a caption. There must be some way that I can group the image and
its caption together and then have the grouping centered. Does anyone know
how?

Thanks.

Jul 23 '05 #1
1 2676
"Eric" <er**@localhost .localdomain> wrote:
I want to do the following using CSS,
So is this about HTML, which we discuss here, or about CSS, which is
discussed in the next room (c.i.w.a.styles heets)?
and I just can't seem to find the solution:
There are many solutions to the problem of image captioning, but no really
good solution, since there is no really appropriate markup for an image
caption in HTML. The difficult part is to choose among the various
solutions (or workarounds).
I shouldn't have to put the image and the text into a table to get it
to be centered with a caption.
You don't have to do so, but to tell a public secret, it might be the
easiest way. You might even find some alleged Purists who say, with a
straight face, that it would be a data table (with a single data cell and a
caption) and that you could alternatively use a two-cell data table, with
the image in one cell and the caption text in another cell, which acts as a
header cell.
There must be some way that I can group
the image and its caption together and then have the grouping centered.


Yes, you can wrap them inside a <div> element and then center it using CSS,
which is actually more difficult than people often think.

I've written a comparison of some methods:
http://www.cs.tut.fi/~jkorpela/www/captions.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 23 '05 #2

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

Similar topics

0
1480
by: Abdalla Fawaz Elhawary | last post by:
can any body can help me to find a com that can read the image caption ... image caption : some images can store some data like image caption it's like text data and it can viewed from the photoshop by clicking file-->Fileinfo i need a components to help me in this issue thankx alot
8
3929
by: Wally | last post by:
I would like to have an image with a caption displayed below it. The size of the image will vary. The caption should not extend beyond the width of the image. How can I cause the text of the caption to wrap so that it will stay within the (varying) width of the image? Any ideas?
2
5258
by: aqualizard | last post by:
I have made and image with a caption using CSS, but I am hoping someone can show me how to do it better. By better I mean less HTML, and hopefully have it work with any sized image where I do not have to hard code the width of the container that holds the image. Here is a description: I want to have an image with a caption underneath,...
11
4195
by: Tomek Toczyski | last post by:
What is the best way to attach a caption to an image in xhtml? I can attach a caption to a table by a "<caption>" tag but I would like to do sth similar to an image. How to do it in a natural way? -tt.
11
4980
by: Chris Beall | last post by:
See http://pages.prodigy.net/chris_beall/Demo/photo%20block%20experiments.html I've ended up with what seems like a rather complex structure for what I thought would be a somewhat simple problem. Even that complex solution works well only in FireFox (haven't tested Safari...). Can anyone come up with a better solution, where 'better'...
4
3047
by: Wolfman | last post by:
Hi guys I've been using this, my favorite slideshow script for its simplicity. Now I'd like to add a text caption to each image that rotates in-kind, but I'm having trouble working out the dynamics. Here's the current script: <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- myPix = new Array( "images/picture01.jpg",
7
5809
by: Peter Parker | last post by:
Could someone show me how to limit caption width to image width dynamically (image width is not known in advance) if that's possible? I was thinking of using Javascript to get the image width which is then used for caption width. Is there a better way? Thank you.
0
1334
by: Pete Horrobin | last post by:
I'm having a problem getting a table caption to appear as desired in Firefox, and am wondering if anyone here might have an answer. Test page: http://www.horshamhc.co.uk/site07/captiontest.htm The desired effect is for the caption to have curved corners at top left and right. This version tries to achieve this by coding the caption...
5
1401
by: umeshj99 | last post by:
Hello! I want to know how to retrieve image caption using .NET. I have collected some information about IPTC and exif tags. I have a function where it retrieves image caption stored in tag 10e. However, this code does not work for many of the images. Please help. Public Function displaydetails(ByVal img1 As String) Dim s As String ...
0
7700
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7924
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
7676
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7974
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5513
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3642
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2114
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1221
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
938
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.