473,716 Members | 2,438 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Image With Caption, stylized

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, aligned on the left.
There should be a black keyline around the image, and the caption
underneath, and the caption needs a grey background color with white
text. Furthermore, the object (image and caption together) needs to
have a margin on the top, right, and bottom so the body text can wrap
around it.

Here is my current HTML:

<div style="float: left; width: 436px;"><!-- width=image width(414)
+ right-margin(20)
+ img border(1+1) = 436
-->
<div class="image_le ft"><img src="../images/some_pic.jpg"
width="414"></div>
<div class="caption_ left"><b>image caption</b> - Blah, blah,
blah...</div>
</div>

Here is my external stylesheet:

DIV.image_left
{ BORDER: 1px solid #000000;
MARGIN-TOP: 10px;
MARGIN-RIGHT: 20px; }

DIV.caption_lef t
{ BORDER-TOP: 0px;
BORDER-LEFT: 1px solid #000000;
BORDER-RIGHT: 1px solid #000000;
BORDER-BOTTOM: 1px solid #000000;
MARGIN-RIGHT: 20px;
MARGIN-BOTTOM: 5px;
PADDING: 3px;
BACKGROUND-COLOR: #666666;
COLOR: #ffffff;
FONT-SIZE:80%;
WHITE-SPACE: wrap; }

It all works and look ok, but like I said, I hate having to hard code
the main DIV ("width: 436px"). Is there a way to get it to work
without this hard-coding, based on the width of the image (which is
dynamically pulled from a database.) And can someone do it so there is
less HTML (CSS size does not matter)?

Thanks! I am an ASP/PHP programmer, and my CSS knowledge is not my
strength...

aqualizard

Jul 21 '05 #1
2 5265
aq********@gmai l.com writes:
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.


I'm not sure if this is what you want. I use an external style sheet
for generic definitions, and the local style for the image width and
height (indicated below as "XXX") because these tend to be unique to
each page, and use the page body for the caption text:
In the style sheet (I leave in some irrelevant petty details):

div.image-container {
margin-top: 0.3em;
margin-left: 0.3em;
float: right;
}
div.image-container img {
background-color: transparent;
}
div.image-container div {
text-align: center;
margin-top: 0.3em;
line-height: 9pt;
}
div.image-container span {
font-size: smaller;
font-family: sans-serif;
}

You have to specify the width and height of the image, so I assume
that information does not fall under you "hand coding." Since this
information, and the float definition, tends to be different on each
page, I leave that style definition for in the document head::

div.image-container { width: XXXpx; }
#image-name { width: XXXpx; height: XXXpx; }
div.image-container {float: right;}
And in the body itself:

<div class="image-container">
<img id="image-name" src="image.png" alt="[image identifier]" />
<div>
<span>
Caption text
</span>
</div>
</div>

--

Haines Brown
KB1GRM
Jul 21 '05 #2
Thanks for the response, Haines.

That is an interesting approach, the way you have an external sheet
for most of the stuff, and then add a couple properties to its styles
in the HEAD section. Gave me a couple new ideas for other stuff!

BUT...

I really am hoping I can get the effect I have above, but without
having to hard-code the image or div widths. So the EXACT same HTML
and style will work for my "Image/Caption" Objects with various-sized
images that "adapt" on the fly to fit the image. I want to avoid
writing any widths altogether...

Thanks,
aqualizard

Jul 21 '05 #3

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

Similar topics

8
3946
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
2644
by: Chris Leipold | last post by:
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 :-(
53
4953
by: Kerberos | last post by:
I followed Dan Cederholm's image replacement tutorial, to replace a header tag by a logo. The h1 is clickable if no CSS is applied but it I replace it by the logo, the area isn't clickable anymore when I pass the mouse over the logo. Is there a way to replace a link by an image that will still be clickable? Thanks, -- Kerberos.
2
6931
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 dimensions of an <img>? <table> <tr><td><img src="someimg.jpg"></td></tr> <tr><td>Here we have some text that we'd like to have in a column whose
1
2691
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 research is a graph that I want to display as Figure 1. +---------------------+ | | | |
11
4207
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
4996
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' means: - Works as well as the example above, but is simpler. OR
7
5815
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.
5
2410
by: Roderik | last post by:
Hi, I guess I am missing something. I tried to put a caption on my photo (on the bottom) but the caption appears to be a bit higher and overshooting the area of the image with a few pix. You can see it on: http://www.roderik.net/caption.php
0
8718
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9344
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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9200
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
9047
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
7980
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, and deployment—without 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
6647
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
4477
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...
1
3177
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
2
2543
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.