Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

title under image

Posted on 2004-04-21
29
Medium Priority
?
348 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 136 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 132 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 132 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

715 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