Solved

title under image

Posted on 2004-04-21
29
340 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

744 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now