Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning titles of thumbnails to bottom

    Here 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:

    Code:
    /* --- 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;}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Mad_Griffith,
    Have you tried playing around with the positioning at all?

    Try this once -
    Code:
    #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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    #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 -
    Code:
    #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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Mad_Griffith; 11-10-2011 at 07:42 PM.

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was replying to your first post of the two. I prefer the title overlayed for space reasons...

    I found a trick here but couldn't apply it on my layout and I don't know why it doesn't work. Everything gets messy.
    Last edited by Mad_Griffith; 11-10-2011 at 07:46 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Mad_Griffith View Post
    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.
    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 -
    Code:
    #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 -
    Code:
    <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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Mad_Griffith View Post
    I was replying to your first post of the two. I prefer the title overlayed for space reasons...

    I found a trick here 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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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 -
    Code:
    #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 -
    Code:
    <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.

  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Vertical-align is not what you think it is... http://phrogz.net/css/vertical-align/index.html
    Sorry... Why not?

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Mad_Griffith View Post
    Done it, still not working well unfortunately.
    Uhh, check those breaks you put in. <br=""> is invalid. A line-break looks like this <br />
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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...

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Mad_Griffith View Post
    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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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ò

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    #navi-outer li a {
        color: #444444;
        float: left;
        font-size: 11px;
        height: 120px;
        margin: 5px;
        overflow: hidden;
        text-decoration: none;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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 -
    Code:
    #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...


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •