Solved

title under image

Posted on 2004-04-21
29
344 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change box shadow 1 44
Javascript 2 53
Responsive Font Size 6 66
Global version website variable for clearing cache 10 33
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

752 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