Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 349
  • Last Modified:

title under image

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
zoobie
Asked:
zoobie
  • 12
  • 7
  • 3
  • +3
3 Solutions
 
lombardpCommented:
Try specifying font in this format:

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

Try with different values of 12pt/10pt

0
 
itwerxCommented:
Try replacing the <br/> tag with a <p> tag. While maybe not the solution you were after, it will solve your problem.
0
 
itwerxCommented:
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.

 
COBOLdinosaurCommented:
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
 
zoobieAuthor Commented:
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
 
seanpowellCommented:
Css is completely able to handle this.
Post a link to the page, or the entire code.
0
 
itwerxCommented:
Yes...please post a link or more code. I can't see what the problem is.
0
 
zoobieAuthor Commented:
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
 
zoobieAuthor Commented:
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
 
COBOLdinosaurCommented:
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
 
zoobieAuthor Commented:
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
 
zoobieAuthor Commented:
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
 
DaydreamsCommented:
Take a look at this:

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

..then just add text-align:center to the class"thumbnail".
0
 
DaydreamsCommented:
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
 
DaydreamsCommented:
Correction:
The filter, although it works, should be written this way:

<p style="filter:glow(color=red, Strength=3);
0
 
DaydreamsCommented:
..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
 
zoobieAuthor Commented:
The filter:glow only goes on the image...Sorry...My bad.
0
 
zoobieAuthor Commented:
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
 
DaydreamsCommented:
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
 
zoobieAuthor Commented:
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
 
DaydreamsCommented:
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
 
DaydreamsCommented:
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
 
seanpowellCommented:
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
 
zoobieAuthor Commented:
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
 
seanpowellCommented:
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
 
zoobieAuthor Commented:
I just looked at it in Netscape 7...yikes...What a mess.
0
 
COBOLdinosaurCommented:
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
 
zoobieAuthor Commented:
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
 
zoobieAuthor Commented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 12
  • 7
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now