Solved

title under image

Posted on 2004-04-21
29
343 Views
Last Modified: 2008-02-01
Using <br> creates a huge gap when placing a title under an image. I've tried line-height which has absolutely no effect. What's the solution?
<a class="gallery" href="../index.html" target="_blank"><img class="gallery" src="../img/goodwin/tn_itsabear.jpg"><br>It's a bear</a>
0
Comment
Question by:zoobie
  • 12
  • 7
  • 3
  • +3
29 Comments
 
LVL 9

Expert Comment

by:lombardp
ID: 10886024
Try specifying font in this format:

.gallery { font: 12pt/10pt sans-serif }

Try with different values of 12pt/10pt

0
 
LVL 2

Expert Comment

by:itwerx
ID: 10886722
Try replacing the <br/> tag with a <p> tag. While maybe not the solution you were after, it will solve your problem.
0
 
LVL 2

Expert Comment

by:itwerx
ID: 10886845
Sorry...my apologies, I shouldn't do this when I am tired. The <br/> is of course ok.
Try this:

<p><a class="gallery" href="../index.html" target="_blank"><img src="../img/goodwin/tn_itsabear.jpg" border="0" style="float:left; width:0px; height:0; margin:0 999 0 0;" class="gallery"></a><a class="gallery" href="../index.html" target="_blank">It's a bear</a></p>

This is assuming there is just the one picture.

You will want to adjust the height and width to suit.

Hope this helps...
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 34 total points
ID: 10889748
Create a small break style:
<style type="text/css">
.smallbr {font-size:20%; }
</style>

Then do it this way:
<a class="gallery" href="../index.html" target="_blank"><img class="gallery" src="../img/goodwin/tn_itsabear.jpg"><br class="smallbr">It's a bear</a>

Just adjust the value of the font-size  up or down to get the spacing you want.


Cd&
0
 
LVL 1

Author Comment

by:zoobie
ID: 10890294
Looks like I'll have to resort to a table as nothing is working and css really isn't able to handle this. Thanks all. :|
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10891086
Css is completely able to handle this.
Post a link to the page, or the entire code.
0
 
LVL 2

Expert Comment

by:itwerx
ID: 10895033
Yes...please post a link or more code. I can't see what the problem is.
0
 
LVL 1

Author Comment

by:zoobie
ID: 10895359
The address is http://doof.us/test/goodwin.html
I have it set up now like Cobal suggested and will need the title under each image. Thanks
0
 
LVL 1

Author Comment

by:zoobie
ID: 10896924
The address is http://doof.us/test/goodwin.html
I have it set up now like Cobal suggested and will need the title under each image. I also increased the points to 100. Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10900605
Just use a span for each image with caption:

<html>
<head>
<title>RockyMountainPrints.com</title>
<link rel="stylesheet" href="inc/style.css" type="text/css">
</head>
<body>

<img src="img/header_goodwin.gif">
<br>

<div class="bar"><span style="float: left;">PHILIP GOODWIN GALLERY</span><span style="float: right;text-align: right;margin-right:10px">Click any image</span></div>

<div class="gallery">
<span>
<a class="gallery" href="index.html" target="_blank"><img class="gallery" src="img/tn_itsabear.jpg"><br class="smallbr">It's a Bear</a>
</span>
<span>
<a class="gallery" href="index.html" target="_blank"><img class="gallery" src="img/tn_waiting.jpg"><br class="smallbr">Waiting</a>
</span>
<span>
<a class="gallery" href="index.html" target="_blank"><img class="gallery" src="img/tn_2scompany.jpg"><br class="smallbr">Two's Company</a>
</span>
<span>
<a class="gallery" href="index.html" target="_blank"><img class="gallery" src="img/tn_surprised.jpg"><br class="smallbr">Surprised</a>
</span>
<span>
<a class="gallery" href="index.html" target="_blank"><img class="gallery" src="img/tn_unexpected.jpg"><br class="smallbr">Unexpected</a>
</span>
<span>
<a class="gallery" href="index.html" target="_blank"><img class="gallery" src="img/tn_bearinmind.jpg"><br class="smallbr">Bear in Mind</a>
</span>
<span>
<a class="gallery" href="index.html" target="_blank"><img class="gallery" src="img/tn_tightcorner.jpg"><br class="smallbr">Tight corner</a>
</span>
</div>

</body>
</html>

You can let them float that way and they will adjust to screen size, or you can put in <br> between the spans to force a break.

Cd&
0
 
LVL 1

Author Comment

by:zoobie
ID: 10901292
Well, the text isn't centering under each image even though I've told the body {text-align:center}. Other than that, it's fine. http://doof.us/test/goodwin.html 
Thanks
0
 
LVL 1

Author Comment

by:zoobie
ID: 10905969
Wellllllllllllll, I've found if I remove the filter glow effect, the text aligns under the image properly. I've been making tableless sites for 8 months now but never used IE's glow effect. Anyone know of a way to include the glow so the text centers under the image? Thanks
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10906367
Take a look at this:

http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

..then just add text-align:center to the class"thumbnail".
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10914282
Here, the glowing text (IE) is centered under the image:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
 .thumbnail
{
float: left;text-align:center;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
 .clearboth { clear: both; }
</style>
</head>
<body>
 <div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><p style="filter:glow(color=red) Strength=3; width:60px;text-align:center;">caption</p>
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><p style="filter:glow(color=red) Strength=3; width:60px;text-align:center;">caption</p>
</body>
</html>
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10914315
Correction:
The filter, although it works, should be written this way:

<p style="filter:glow(color=red, Strength=3);
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10914361
..and btw the class .clearboth { clear: both; } is if you want to force a line break for another "row":
<br class="clearboth">
(see the code at the link I gave above)
0
 
LVL 1

Author Comment

by:zoobie
ID: 10915505
The filter:glow only goes on the image...Sorry...My bad.
0
 
LVL 1

Author Comment

by:zoobie
ID: 10915586
Acually, my link shows that.
Here it is again.
http://doof.us/test/goodwin.html
Like I said...This probably can't be done...but will wait and see if I'm missing anything.
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10919946
zoobie, for the filter to be on the image, the image seems to need to have some transparency and addition of the chroma filter(at least that is how I got the glow to work on the image here) and not the text.

Take a look:
http://www.xentrik.net/css/filters.php
http://www.fred.net/dhark/demos/css/css_filter_examples.html


Here I used a .gif image with transparency and achieved the glow on the image:

<div class="thumbnail">
<img src="images/image.gif" width="60" height="60" style="filter:Chroma(Color = #000000) glow(color=red, Strength=2);">
<p style="text-align:center;">caption</p>
0
 
LVL 1

Author Comment

by:zoobie
ID: 10920513
I'm not concerned with the image at all. It's the text that won't center when there's a filter on the image...hence the thread title.
0
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 33 total points
ID: 10920613
Here is a filter on the image and the text is centered under it (centered both in IE and Mozilla, filter of course, only IE):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centered caption under image with filter</title>
<style type="text/css">
 .thumbnail
{
float: left;text-align:center;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
</style>
</head>
<body>
 <div class="thumbnail">
<img src="images/image.gif" width="60" height="60" style="filter:Chroma(Color=#000000) glow(color=red, Strength=2);">
<p style="text-align:center;">This caption is centered under the image</p>
</div>
 <div class="thumbnail">
<img src="images/image.gif" width="60" height="60" style="filter:Chroma(Color=#000000) glow(color=red, Strength=2);">
<p style="text-align:center;">This caption is centered under the image</p>
</body>
</html>
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10920661
One more thing: It seems you don't need the:
Chroma(Color=#000000)
..so you don't need that filter just use the glow if you want it.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 33 total points
ID: 10920872
zoobie - you've got too much going on in there, and the width you're setting (160) is incorrect. It should be 190.

This is all you really need:

#gallery { margin:auto; width:80%; border:1px solid #efcb89; background-color: #000000; margin-top:5px; padding-top:5px; }
span.img { width:190px; height:110px; display:inline;}
span.img a { font:normal 15px tahoma; color:#ffffff; display: block; padding:3px; text-decoration:none; }
span.img img { display:block; border:none; Filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff, Strength=15);}

<div id="gallery">
<span class="img"><a href="index.html" target="_blank"><img src="http://doof.us/test/img/tn_itsabear.jpg">It's a Bear</a></span><br>
<span class="img"><a href="index.html" target="_blank"><img src="http://doof.us/test/img/tn_waiting.jpg">Waiting for Something</a></span>
<span class="img"><a href="index.html" target="_blank"><img src="http://doof.us/test/img/tn_2scompany.jpg">Two's Company</a></span>
<span class="img"><a href="index.html" target="_blank"><img src="http://doof.us/test/img/tn_surprised.jpg">Surprised</a></span>
<span class="img"><a href="index.html" target="_blank"><img src="http://doof.us/test/img/tn_unexpected.jpg">Unexpected Meeting</a></span>
<span class="img"><a href="index.html" target="_blank"><img src="http://doof.us/test/img/tn_bearinmind.jpg">Bear in Mind</a></span>
<span class="img"><a href="index.html" target="_blank"><img src="http://doof.us/test/img/tn_tightcorner.jpg">In a Tight Corner</a></span>
</div>
0
 
LVL 1

Author Comment

by:zoobie
ID: 10921074
How did you arrive at the width of the image being 190?

I don't have time right now to rebuild the whole page...but it looks like you've done most of it for me...and I thank you. I'll get to it tonight.

I'm too pissed off at the changes at eBay that's kicking the little guy out that made them what they are today. I'm sure it will be on the news soon...if not already.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10921087
Your image is 160, plus 2x15 for the filter.
Because you were setting the "a" delcaration at only 160, it was not centering over the entire block.
0
 
LVL 1

Author Comment

by:zoobie
ID: 10924727
I just looked at it in Netscape 7...yikes...What a mess.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10930354
Why would you be surprised that it does not render well in Netscrap when you are building the page using layout adjustments to accomodate non-standard IE only special effects?

Cd&
0
 
LVL 1

Author Comment

by:zoobie
ID: 10955554
I dropped the text under the image to make it cross-browser but am back to square one without an image title...Find this hard to believe. Thanks
0
 
LVL 1

Author Comment

by:zoobie
ID: 11056273
Well, thanks anyway. I ended up using the title/alt attributes to give them a title.  
Btw...Which is generally the best to use for an image link & SEO? The alt, the title, or both?
< a href="page.html">< img src="hat.gif" alt="My hat"></a>
or
< a href="page.html" title="My Hat">< img src="hat.gif"></a>
or both
< a href="page.html" title="My Hat">< img src="hat.gif" alt="My hat"></a>
Thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question