Trickky CSS text help needed

Hi,

I integrated an image slider called Zurb and made some changes to the text overlay at the bottom. However, I can’t get them tweaked just right and can’t go any farther with my CSS knowledge.

The overall height of the overlay is a little too much and I’m trying to get the margin below the text smaller and to be equal to the margin above the text. Seems simple enough, but I’m stuck.

The page with the slider is here: http://screenplayinteractive.com

The CSS is here: http://screenplayinteractive.com/sites/default/files/Orbit_Kit/orbit.css

Any ideas?

Thanks guys.

Hi Ken,

Try this

  1. On line 19 in orbit.css remove the 3px bottom padding and equal out the top and bottom padding as you desire.

div.caption { 
background: #000; 
background: rgba(0,0,0,.8); 
width: 844px; 
z-index: 1000; 
position: absolute; 
bottom:-100px; 
color: #fff; 
[COLOR=Red]/*padding: 15px 28px [B]3px[/B] 28px;*/[/COLOR]
[COLOR=DarkGreen]padding: 15px 28px;[/COLOR]
}
  1. Your <p id=“caption_super”> is picking up a bottom margin from line 34 (Content p) in your default.css. You need to override it and cancel it out with your p#caption_super on line 22 of orbit.css. Remove the bottom padding also.

#caption_super { 
float: left; 
margin-right: 15px;
[B][COLOR=DarkGreen]margin-bottom: 0 !important;[/COLOR][/B] /*override #content p*/ 
font-size: 42px; 
font-weight: bold; 
color: #fff; 
line-height: 1em; 
[COLOR=Red]/*padding-bottom:8px;*/[/COLOR]
}

That gets the top and bottom spacing the same on div.caption and allows you to control it with the padding only.

You should be using classes for styles that are found in more than one instance on the page
<p id=“caption_super”> should really be [B]<p class=“caption_super”>

[/B]

When I was looking at this a few weeks ago I had suggested that you use display:table or inline-block and vertical-align:middle for those two text containers.

The reason being was so they would stay at v-middle if the text wraps to a third line in your span (text on the right). As it is right now the fix above will work but if I zoom the text size it drops to a third line.

Thanks Ray and Happy New Year!

I’ll look at what you said a little later when I can concentrate. I had tried your previously suggested fixes and that was giving the overlay functionality trouble for some reason :frowning: screenplayinteractive.com/ray

Thanks, Happy New Year to you!

In regards to that last link you posted. Look back at the first link (the working page) and you will see that your <div id=“featured”> closes before the spans begin.

[COLOR=Blue]<div id="featured"[/COLOR] style="width: 940px; height: 450px; background: #fff url('/sites/default/files/Orbit_Kit/orbit/loading.gif') no-repeat center center; overflow: hidden;">
    <img src="/sites/default/files/Orbit_Kit/react.jpg" rel="slide1" alt="REACT" />
    <img src="/sites/default/files/Orbit_Kit/engage.jpg" alt="ENGAGE" rel="slide2" />
    <img src="/sites/default/files/Orbit_Kit/connect.jpg" rel="slide3" alt="CONNECT" />
    <img src="/sites/default/files/Orbit_Kit/control.jpg" alt="CONTROL" rel="slide4" />
    <img src="/sites/default/files/Orbit_Kit/listen.jpg" alt="LISTEN" rel="slide5" />
[B][COLOR=Blue]</div>[/COLOR][/B]

<span class="orbit-caption" id="slide1">........</span>

On the other page it does not close until after the <div class=“caption”>, I think that’s where the problem may be.

[COLOR=Blue]<div id="featured"[/COLOR] class="orbit">
     <img src="/sites/default/files/Orbit_Kit/react.jpg" rel="slide1" alt="REACT"/>
    <img src="/sites/default/files/Orbit_Kit/engage.jpg" rel="slide2" alt="ENGAGE"/>
    <img src="/sites/default/files/Orbit_Kit/connect.jpg" rel="slide3" alt="CONNECT"/>
    <img src="/sites/default/files/Orbit_Kit/control.jpg" rel="slide4" alt="CONTROL"/>
    <img src="/sites/default/files/Orbit_Kit/listen.jpg" rel="slide5" alt="LISTEN"/>
[COLOR=Red]<!-- featured should be closing here -->[/COLOR]

    <div class="caption">
        <span class="orbit-caption" id="slide1">
            <span class="caption_super">REACT</span>
            <span class="orbit-caption-text" >
                Shoppers readily respond to influences around them. Appeal to all their senses,
                get them interacting with your brand and your products, create moments they remember
                and share, and you will turn browsers into customers.
                <a href="http://screenplayinteractive.com/What-SPIA-Does-For-YOU">MORE >></a>
            </span>
        </span>
    </div>

First, Congrats on CSS Guru of the Year! Definitely deserved…

OK… I tried the quick fix - moving the closing div on the test page and that made all kinds of trouble.

Going back to what you said about changing to display:table instead of hidden, a few weeks back you put a note in the CSS saying:

.orbit-caption { display: table; } /*this is set to display:none; in the orbit CSS
(the script could set it to display:table instead of block) */

I don’t see that in the Orbit script, so this now more confusing to me than ever.

I think I got it all sorted out now, at least I do on this test page.

http://www.css-lab.com/test/spia/orbit/
http://www.css-lab.com/test/spia/orbit/test.html

I can’t remember how the script was hiding the un-appended divs but I did manage to edit the script and allow it to use display:block; on the appended .caption div.

On line 14 of your orbit.js I have made this edit -


{[B]d.append[/B]('<div class="caption" [COLOR=Blue]style="display:block"[/COLOR]><span class="orbit-caption"></span></div>');

Before the script gets a hold of it the caption is now set to display:none; in the css. That keeps the un-appended divs hidden. See line 68 of the test.html page above to find it in the internal css.

[B]div.caption[/B] { /* CAPTIONS (Orbit CSS)*/
   [COLOR=Blue] display:none;[/COLOR]/*(hide caption divs) [COLOR=DarkGreen]set to display:block; in orbit js[/COLOR]*/
    width: 844px;
    position: absolute;
    z-index: 1000;
    bottom:0; left:0;
    color: #fff;
    padding: 15px 28px;
    background: #000;
    background: rgba(0,0,0,.8);
    line-height: 1.4;/*line-height inherits to both child spans*/
}

I don’t like the way that orbit script uses the rel attribute in the img tags, it’s invalid html.

I was looking through the ZURB Site for a workaround and it looks like I found one.

Jimmy says:
@gaz & @dmr you can solve temporarily changing the attribute rel to alt or title in the script, because the rel is not supported in the img tag. Hoping the script will improved taking the caption directly from the alt attibute.
Following that advice I made the edit to the script and the html and came up with this.
http://www.css-lab.com/test/spia/orbit/test-2.html

View the page source for the changes to the html, you will also see that page links to this revised script with the edit below.

On line 14 the .attr gets changed to “alt” instead of “rel”

.addClass("orbit-caption").show(),o=function(){var c=f.eq(b)[COLOR=Blue][B].attr("alt")[/B][/COLOR],g=e("#"+c).html()

Now it’s valid.