...

View Full Version : Aligning titles of thumbnails to bottom



Mad_Griffith
11-10-2011, 07:58 PM
Here (http://fondazionetoscanini.it/it/fondazione-arturo-toscanini/produzioni-in-vendita/menu-id-133.html) is the slideshow I am building. I would like to have those titles you see there ("Blue Moon", "L'Uomo sinfonico", "Favole sotto le Stelle", ecc.) at the bottom margin inside the thumbnail. Now they are in the middle. I have trouble with CSS positioning. Here is my CSS:


/* --- Slideshow Containers --- */
#fpss-outer-container {overflow:hidden;width:<?php echo $width; ?>px;}
/* This element controls the slideshow spacing and border */
#fpss-container {position:relative; clear:both;width:<?php echo $width+$sidebarWidth; ?>px;}
#fpss-slider {float:left; background:none;overflow:hidden;width:<?php echo $width; ?>px;height:<?php echo $height; ?>px;}
#slide-loading {background:#FFF url(../images/loading_black.gif) no-repeat center center;width:<?php echo $width; ?>px;height:<?php echo $height; ?>px;}
#slide-wrapper:hover {opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90);}
#slide-wrapper {display:none;width:<?php echo $width; ?>px;height:<?php echo $height; ?>px;}
#slide-wrapper #slide-outer {height:<?php echo $height; ?>px;}
#slide-wrapper #slide-outer .slide {right:<?php echo $sidebarWidth; ?>px;width:<?php echo $width; ?>px;height:<?php echo $height; ?>px;}

/* --- Slideshow Block --- */
#slide-wrapper #slide-outer .slide {position:absolute;overflow:hidden;}
#slide-wrapper #slide-outer .slide .slide-inner {color:#fff;overflow:hidden;background:#FFF;text-align:left;z-index:8;height:<?php echo $height; ?>px;}
#slide-wrapper #slide-outer .slide .slide-inner a.fpss_img span span span {background:none;}

/* --- Content --- */
.fpss-introtext {width:50%;height:auto;margin:0;padding:0;position:absolute;top:0;bottom:0; right: 0; background:url(../images/transparent_bg.png);}
.fpss-introtext .slidetext {margin:0;padding:0 8px;}

/* --- Navigation Buttons --- */
#navi-outer {clear:both;background:url(../images/black_stripes.gif) repeat top;overflow:hidden;width:<?php echo $width; ?>px;}
#navi-outer ul {list-style:none;background:none;}
#navi-outer li {border:none;list-style:none;display:inline; margin: 0; padding: 0;}
#navi-outer li.noimages {display:none;}

#navi-outer li a {float:left; max-height: 90px; margin: 5px; text-decoration:none;font-size:11px;color:#444;overflow:hidden;}
#navi-outer li a:hover,
#navi-outer li a.navi-active {float: left; display:block;text-decoration:none;font-size:11px;color:#000;overflow:hidden;}

.ul_container {text-align: center; position: relative; left: -15px;}

#navi-outer li a span.navbar-img,
#navi-outer li a:hover span.navbar-img,
#navi-outer li a.navi-active span.navbar-img {overflow:hidden;}
#navi-outer li a span.navbar-img img {display:block;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);width:120px;height:90px;}
#navi-outer li a:hover span.navbar-img {display:block;opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90);width:120px;height:90px;}

#navi-outer li a span.navbar-key, #navi-outer li a navbar-tagline {display:none;}

#navi-outer li a span.navbar-title {width: 120px; display: block; position: relative; bottom:70px; line-height: 12px; background:url(../images/transparent_bg.png); font-family:'OldStandard', serif; font-size:11pt; padding: 2px 0 2px 0; font-style: italic; font-weight: bold; color:#FFF; text-shadow: 1px 1px 0 #000;}
span.navbar-clr {display:block;clear:both;}

/* --- Notice: Add custom text styling here to overwrite your template's CSS styles! --- */
.fpss-introtext .slidetext h1 {margin:0;padding:25px 0 8px 0; border: 0;;
}
.fpss-introtext .slidetext h1 a {font-family:'OldStandard', serif;font-size:26pt;line-height:28px; color:#fff; text-shadow: 1px 1px 0 #000;
}
.fpss-introtext .slidetext h1 a:hover {color:#FFF; text-shadow: 1px 1px 0 #000;}
.fpss-introtext .slidetext h2 {font-size:11px;margin:0;padding:0;color:#bbb;font-weight:normal;}
.fpss-introtext .slidetext h3 {font-size:11px;margin:0 0 4px 0;padding:0;display:none;}
.fpss-introtext .slidetext p {font-family: Arial, Helvetica, Sans-serif; font-size:10pt; margin:0;padding:2px 0; color:#fff;text-shadow: 1px 1px 0 #000}
.fpss-introtext .slidetext a.readon {position:absolute;left:8px;bottom:12px;width:100px;margin:0;padding:6px 0 6px 12px;background:url(../images/readmore.png) no-repeat;color:#fff;border:none;}
.fpss-introtext .slidetext a.readon:hover {position:absolute;left:8px;bottom:12px;width:100px;margin:0;padding:6px 0 6px 12px;background:url(../images/readmore-hover.png) no-repeat;color:#fff;border:none;}

/* --- Generic Styling (highly recommended) --- */
#fpss-outer-container a:active,
#fpss-outer-container a:focus {outline:0;}
#fpss-container img {border:none;}
.fpss-introtext .slidetext img,
.fpss-introtext .slidetext p img {display:none;} /* this will hide images inside the introtext */
.fpss-clr {clear:both;height:0;line-height:0;}

Excavator
11-10-2011, 08:24 PM
Hello Mad_Griffith,
Have you tried playing around with the positioning at all?

Try this once -
#navi-outer li a span.navbar-title {
width: 120px;
display: block;
position: relative;
bottom: 15px;
line-height: 12px;
background:url(../images/transparent_bg.png);
font-family:'OldStandard', serif; font-size:11pt;
padding: 2px 0 2px 0;
font-style: italic;
font-weight: bold;
color:#FFF; text-shadow: 1px 1px 0 #000;
}

Excavator
11-10-2011, 08:34 PM
Or, to put that text at the bottom of the picture instead of overlayed, you could make a little more room in the anchor for it like this -

#navi-outer li a {
float:left;
height: 105px;
margin: 5px;
text-decoration:none;
font-size:11px;
color:#444;
overflow:hidden;
}

Then position the title with this -
#navi-outer li a span.navbar-title {
width: 120px;
display: block;
position: relative;
bottom: 0px;
line-height: 12px;
background:url(../images/transparent_bg.png);
font-family:'OldStandard', serif; font-size:11pt;
padding: 2px 0 2px 0;
font-style: italic;
font-weight: bold;
color:#FFF;
text-shadow: 1px 1px 0 #000;
}

Mad_Griffith
11-10-2011, 08:36 PM
Unfortunately it doesn't seem to be so easy. I've applied the mod you say (which was my first attempt as well), but since the titles can be in multiple lines it doesn't work well. See it (http://www.fondazionetoscanini.it/it/fondazione-arturo-toscanini/produzioni-in-vendita/menu-id-133.html).

Mad_Griffith
11-10-2011, 08:42 PM
I was replying to your first post of the two. I prefer the title overlayed for space reasons...

I found a trick here (http://askville.amazon.com/vertically-bottom-align-block-element-css/AnswerViewer.do?requestId=5310616)but couldn't apply it on my layout and I don't know why it doesn't work. Everything gets messy.

Excavator
11-10-2011, 08:47 PM
Unfortunately it doesn't seem to be so easy. I've applied the mod you say (which was my first attempt as well), but since the titles can be in multiple lines it doesn't work well. See it (http://www.fondazionetoscanini.it/it/fondazione-arturo-toscanini/produzioni-in-vendita/menu-id-133.html).

Ah, I see.
Since you are styling all the titles the same, whether they are one or two lines, one will not look right and one will.
To accomodate the double lines, try this -
#navi-outer li a span.navbar-title {
width: 120px;
display: block;
position: relative;
bottom: 28px;
line-height: 12px;
background:url(../images/transparent_bg.png);
font-family:'OldStandard', serif; font-size:11pt;
padding: 2px 0 2px 0;
font-style: italic;
font-weight: bold;
color:#FFF; text-shadow: 1px 1px 0 #000;
}

Maybe try a little addition to your markup as well -
<span class="navbar-img">
<img src="/components/com_fpss/images/thumbs/gazze.jpg" alt="Navigate to L'Uomo Sinfonico">
</span>
<span class="navbar-key">02</span>
<span class="navbar-title"><br />L'Uomo Sinfonico</span>
<span class="navbar-tagline"></span>

<span class="navbar-clr"></span>
</a>
</li>

Excavator
11-10-2011, 08:50 PM
I was replying to your first post of the two. I prefer the title overlayed for space reasons...

I found a trick here (http://askville.amazon.com/vertically-bottom-align-block-element-css/AnswerViewer.do?requestId=5310616)but couldn't apply it on my layout and I don't know why it doesn't work. Everything gets messy.

Vertical-align is not what you think it is... http://phrogz.net/css/vertical-align/index.html

Mad_Griffith
11-10-2011, 09:15 PM
Ah, I see.
Since you are styling all the titles the same, whether they are one or two lines, one will not look right and one will.
To accomodate the double lines, try this -
#navi-outer li a span.navbar-title {
width: 120px;
display: block;
position: relative;
bottom: 28px;
line-height: 12px;
background:url(../images/transparent_bg.png);
font-family:'OldStandard', serif; font-size:11pt;
padding: 2px 0 2px 0;
font-style: italic;
font-weight: bold;
color:#FFF; text-shadow: 1px 1px 0 #000;
}

Maybe try a little addition to your markup as well -
<span class="navbar-img">
<img src="/components/com_fpss/images/thumbs/gazze.jpg" alt="Navigate to L'Uomo Sinfonico">
</span>
<span class="navbar-key">02</span>
<span class="navbar-title"><br />L'Uomo Sinfonico</span>
<span class="navbar-tagline"></span>

<span class="navbar-clr"></span>
</a>
</li>

Done it, still not working well unfortunately.

Mad_Griffith
11-10-2011, 09:18 PM
Vertical-align is not what you think it is... http://phrogz.net/css/vertical-align/index.html

Sorry... Why not?

Excavator
11-10-2011, 09:25 PM
Done it, still not working well unfortunately.

Uhh, check those breaks you put in. <br=""> is invalid. A line-break looks like this <br />

Mad_Griffith
11-11-2011, 02:08 AM
Uhh, check those breaks you put in. <br=""> is invalid. A line-break looks like this <br />


I had deleted a ">" accidentally. I've corrected it, but to no avail unfortunately...

Excavator
11-11-2011, 02:30 AM
I had deleted a ">" accidentally. I've corrected it, but to no avail unfortunately...

The break only goes on the titles that are two lines. The break takes the place of the first line of text...

Mad_Griffith
11-11-2011, 02:52 AM
The break only goes on the titles that are two lines. The break takes the place of the first line of text...

The thumbnails are dynamically generated, I can't (since I am no coder) edit it. But I'll keep on working with the CSS. The absolute/relative position trick I've posted before actually worked for me in the past. This time it's not working whereas it should.

Thanks for your time,
Niccolò

Excavator
11-11-2011, 03:02 AM
Like you have it now, positioned bottom: 10px; ...but add a height to the anchor so your floats can flow like they should, instead of bumping up against the longer ones.

Like this -
#navi-outer li a {
color: #444444;
float: left;
font-size: 11px;
height: 120px;
margin: 5px;
overflow: hidden;
text-decoration: none;
}

Mad_Griffith
11-11-2011, 03:07 AM
Like you have it now, positioned bottom: 10px; ...but add a height to the anchor so your floats can flow like they should, instead of bumping up against the longer ones.

Like this -
#navi-outer li a {
color: #444444;
float: left;
font-size: 11px;
height: 120px;
margin: 5px;
overflow: hidden;
text-decoration: none;
}


#navi-outer li a has a height now (it had a height before you checked as I removed it temporarily) and the navbar-title is "bottom: 10px" positioned. Doesn't work either... :(

Excavator
11-11-2011, 03:17 AM
#navi-outer li a has a height now (it had a height before you checked as I removed it temporarily) and the navbar-title is "bottom: 10px" positioned. Doesn't work either... :(

No, at 86px with overflow: hidden; you still lose some of your title.
I suggested 120px which is higher than it needs to be. Play with that number and see what you come up with...

Mad_Griffith
11-11-2011, 03:45 AM
No, at 86px with overflow: hidden; you still lose some of your title.
I suggested 120px which is higher than it needs to be. Play with that number and see what you come up with...

Done. It just enables me to position the title below the thumbnail. See it...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum