473,698 Members | 2,225 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Images with captions centered?

Hello,
I've been struggling with this problem for a while now, so I though I'd
get some input from anyone more skilled with CSS than I am.

I'm actually trying to accomplish two things with this:

1. Create a floated image with text around, with a caption centered
underneath. Image size can be varied but the caption needs to have a
fixed size to make it break correctly I think. I also need the image to
resize automatically when the browsers width gets very small, using the
'max-width' attribute, and this is where the problem lies, since Firefox
does not seem to accept the max-width attribute and handles it like the
image is non-existent or very small. It works like expected in MSIE 6 and
Opera 8.

2. Inspired by a 'A List Apart' article (see [1] below), I'm trying to
create a fluid way to display images with captions, but with the image-
display *centered* and with the possibility of different image sizes (ALA
had fixed image sizes). I've tried many different solutions but recently
tried using 'display: image-block' which judging from the CSS 2.1
standard should be the way to go, and it works perfectly in Opera but
fails totally in FF and MSIE, who just displays the images one below the
other.

I know the first problem can be fixed by not using max-width but I'd
really like to have it work with it. I guess Opera is the only browser
supporting on-the-fly resizing of images this way, is this correct?

As to the second problem, my guess is that using another solution than
inline-block would solve it but I've tried display:block and different
wrapper classes. Floating to the left would do it but I really want the
images centered, not to the left.

Is there a standards-compliant way to make this work in both Opera, FF
and MSIE?

I have created a test case for both problems here:
http://stian.freeshell.org/test/float/float.html

Could someone please have a look at this and give me some hints to what I
can do to fix the problems or improve the methods I'm using?

reagards,
Stian

links:
[1] http://www.alistapart.com/articles/practicalcss/
Sep 15 '05 #1
17 2266
Els
Stian Lund wrote:
Hello,
Hi :-)
I've been struggling with this problem for a while now, so I though I'd
get some input from anyone more skilled with CSS than I am.

I'm actually trying to accomplish two things with this:

1. Create a floated image with text around, with a caption centered
underneath. Image size can be varied but the caption needs to have a
fixed size to make it break correctly I think. I also need the image to
resize automatically when the browsers width gets very small, using the
'max-width' attribute, and this is where the problem lies, since Firefox
does not seem to accept the max-width attribute and handles it like the
image is non-existent or very small. It works like expected in MSIE 6 and
Opera 8.

2. Inspired by a 'A List Apart' article (see [1] below), I'm trying to
create a fluid way to display images with captions, but with the image-
display *centered* and with the possibility of different image sizes (ALA
had fixed image sizes). I've tried many different solutions but recently
tried using 'display: image-block' which judging from the CSS 2.1
standard should be the way to go, and it works perfectly in Opera but
fails totally in FF and MSIE, who just displays the images one below the
other.

I know the first problem can be fixed by not using max-width but I'd
really like to have it work with it. I guess Opera is the only browser
supporting on-the-fly resizing of images this way, is this correct?
I'm not sure if the max-width will work in combination with the
example I give below, but I'm interested in the results when you try
it out.
As to the second problem, my guess is that using another solution than
inline-block would solve it but I've tried display:block and different
wrapper classes. Floating to the left would do it but I really want the
images centered, not to the left.

Is there a standards-compliant way to make this work in both Opera, FF
and MSIE?

I have created a test case for both problems here:
http://stian.freeshell.org/test/float/float.html

Could someone please have a look at this and give me some hints to what I
can do to fix the problems or improve the methods I'm using? [...] [1] http://www.alistapart.com/articles/practicalcss/


Feel free to scrutinize the code:

http://locusmeus.com/test/thumbswith...scentered.html

The reason for the tables is that I had images of different heights,
which I wanted vertically centered per row.

--
Els http://locusoptimus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Juicy Lucy - Who Do You Love?
Sep 15 '05 #2
Stian Lund <st************ ***@operamail.c om> wrote:
2. Inspired by a 'A List Apart' article (see [1] below), I'm trying to
create a fluid way to display images with captions, but with the image-
display *centered*
http://www.spartanicus.utvinternet.i...h_captions.htm
and with the possibility of different image sizes


You'll have to specify a width for each wrapper.

--
Spartanicus
Sep 15 '05 #3
Spartanicus <in*****@invali d.invalid> wrote in
news:pd******** *************** *********@news. spartanicus.utv internet.ie:
http://www.spartanicus.utvinternet.i...ery_with_capti
ons.htm


Thanks for the pointer, a very good solution, although maybe not as
'intuituve' as the ALA one. However, I would rather not have to specify
the width in the img tag, while the width in '#gallery span' is ok since
it controls the captions wrapping, which is important.

I tried removing the width and height attributes and inserting some
larger images (250+300px) -- it still seems to work nicely in Firefox and
MSIE, but Opera insists on layering the images over each other if they
are larger... grr :/

Removing 'display: inline-block' from #gallery span solves this
fortunately :), but I don't know what problems this might cause with
other browsers since I only have FF, MSIE and Opera. Also, the caption is
not centered under the image in MSIE.

Example:
http://stian.freeshell.org/test/float/spartanicus.htm

I'm aware it doesn't look very good, but it's a bit closer to what I
wanted...

Any other ideas or tips?

Stian
Sep 15 '05 #4
Stian Lund <st************ ***@operamail.c om> wrote:
I tried removing the width and height attributes and inserting some
larger images (250+300px) -- it still seems to work nicely in Firefox and
MSIE, but Opera insists on layering the images over each other if they
are larger... grr :/
Works fine in my demo, must be your code.
Removing 'display: inline-block' from #gallery span solves this
fortunately :), but I don't know what problems this might cause with
other browsers since I only have FF, MSIE and Opera. Also, the caption is
not centered under the image in MSIE.


Works fine in my demo, must be your code.

--
Spartanicus
Sep 15 '05 #5
Spartanicus <in*****@invali d.invalid> wrote in
news:et******** *************** *********@news. spartanicus.utv internet.ie:
I tried removing the width and height attributes and inserting some
larger images (250+300px) -- it still seems to work nicely in Firefox
and MSIE, but Opera insists on layering the images over each other if
they are larger... grr :/


Works fine in my demo, must be your code.


You are correct of course, it IS my code - sorry if you misunderstood -
what I did was use your demo, remove the width and height attributes from
the img tags and put in some larger images.

The example I put on the site was the one which also *worked* in Opera,
here is one which does not:
http://stian.freeshell.org/test/float/opera.htm

Opening this in Opera 8.02 you can see how the larger images get put
underneath the butterflies. I'm not criticizing your demo, I'm just asking
*why* this happens in Opera while it works in MSIE and FF... if anyone
knows.

Your demo is great and I'll probably adopt the modified version on my
pages.

Stian
Sep 15 '05 #6
Stian Lund <st************ ***@operamail.c om> wrote:
I tried removing the width and height attributes and inserting some
larger images (250+300px) -- it still seems to work nicely in Firefox
and MSIE, but Opera insists on layering the images over each other if
they are larger... grr :/


Works fine in my demo, must be your code.


You are correct of course, it IS my code - sorry if you misunderstood -
what I did was use your demo, remove the width and height attributes from
the img tags and put in some larger images.

The example I put on the site was the one which also *worked* in Opera,
here is one which does not:
http://stian.freeshell.org/test/float/opera.htm

Opening this in Opera 8.02 you can see how the larger images get put
underneath the butterflies. I'm not criticizing your demo, I'm just asking
*why* this happens in Opera while it works in MSIE and FF... if anyone
knows.


Did you even bother to look at the code, or read the article?

You can't just plonk other images into my code, my code contains the
width suitable for *my* 172px wide images. If you want to use it with
other images you'll have to change that.

--
Spartanicus
Sep 15 '05 #7
Spartanicus <in*****@invali d.invalid> wrote in
news:v9******** *************** *********@news. spartanicus.utv internet.ie:
Did you even bother to look at the code, or read the article?
Yes, I did, and I'm dropping this right now, as it seems we are
constantly misunderstandin g each other :/
You can't just plonk other images into my code, my code contains the
width suitable for *my* 172px wide images. If you want to use it with
other images you'll have to change that.


I'm *aware* of that, I was merely using your code as a template to see if
I could make something out of it that worked for my uses. As I said I did
not want to specify the widths per image, and your demo only works with
images of the same width. If I have offended you by utilizing your code
this way I am sorry.

Here's what I've found:

With display: inline-block Opera needs to have width of the image set
explicitly while FF and MSIE apparently don't need to. I suspect that
Operas behaviour is the *correct* one though. Luckily, Opera supports
inline-table as well and it works the way I want it, while MSIE does not,
so I just need to use the inline-block hack to make IE display it like I
want.

Working on it... thanks for all help!

Stian

Sep 16 '05 #8
Stian Lund <st************ ***@operamail.c om> wrote in
news:Xn******** *************@1 30.225.247.90:
1. Create a floated image with text around, with a caption centered
underneath. Image size can be varied but the caption needs to have a
fixed size to make it break correctly I think. I also need the image
to resize automatically when the browsers width gets very small, using
the 'max-width' attribute, and this is where the problem lies, since
Firefox does not seem to accept the max-width attribute and handles it
like the image is non-existent or very small. It works like expected
in MSIE 6 and Opera 8.


Still no further on this ... anyone have any ideas on how to fix it, or any
information on how FF handles max-width for images?

Stian
Sep 16 '05 #9
in comp.infosystem s.www.authoring.stylesheets, Stian Lund wrote:
With display: inline-block Opera needs to have width of the image set
explicitly while FF and MSIE apparently don't need to.
I thought it was Gecko that don't get inline-block without width...
Working on it... thanks for all help!


Here is example:
http://www.student.oulu.fi/~laurirai/www/css/gallery/

No widths or heights needed, works in big 3 (versions 6, 8, 1 tested)

I would be interested to know support in other browsers, especially KHTML
based, and new Geckos

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Sep 16 '05 #10

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

Similar topics

11
1802
by: Jeff Thies | last post by:
I'd like to place a "caption" under an image and insert both into the flow of text. I'm thinking of something like this: (Styles shown inline for readability, they would be defined as classes) <div style="float: left; padding: 10px"><img src="some_image.jpg"><div>my caption/credit</div></div> <p> enough content to flow around the image....</p>
5
12345
by: Applebrown | last post by:
Hello, basically, I'm just learning intermediate CSS and trying to convert my old table webpage completely to CSS. Hoorah, right? Well, it's not quite going as planned. It's an extremely simple layout, and I'm finding myself stuck with small white space in between my images where I planned for the graphics to be stacked up right on top of one another. Here's the simple vertical layout: width is 640px, centered with a CSS border. I'd...
11
4202
by: mercurius_1 | last post by:
I need some help with this page: http://www.sarahpollock.com/new/x.php I stole much of this layout from "A List Apart," but I'm no CSS guru and I desperately need some help with the finishing details because everything I've tried so far has flopped. I would really appreciate your insight on the following items: 1 - I would like to get the four images across the top to be in the overall center of the page (Like most everything else on...
61
4732
by: phil-news-nospam | last post by:
Why does SVG need a different tag than other images? IMHO, SVG should be implemented as an image type just like any other image type, allowing it to work with <img> tags, and ... here is the important part ... also work with backgrounds in other tags. I fail to see any wisdom in making SVG different than say PNG (of course the implementation of the rendering code would obvious be different). --
9
2518
by: Troy Piggins | last post by:
If I use the code: ----- <div style="text-align: center;"> <a href="photos.php?img=xx1.jpg"> <img src="xx1.jpg" style="padding: 10px;" /> </a> <a href="photos.php?img=xx2.jpg">
14
1959
by: windandwaves | last post by:
Hi Folk and Gurus This may help some of you (though probably not the gurus), in changing images: http://www.sunnysideup.co.nz/j/imageChange/ Any feedback appreciated. Cheers
0
8674
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, well explore What is ONU, What Is Router, ONU & Routers main usage, and What is the difference between ONU and Router. Lets take a closer look ! Part I. Meaning of...
0
9026
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8861
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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7723
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 projectplanning, coding, testing, and deploymentwithout human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6518
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4366
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4619
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3045
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
3
2001
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.