CSS Gurus, need your help.

[Biology Forums]

Currently the headers have an opacity of 0.7.

I want it so that you hover over the row below it (the white links), the header becomes opacity 1.0 (normal).

Here is my CSS at the moment:

Code Select Expand

#footer {border-top: 2px solid #33587a; padding: 10px 0 12px 0; font-family: Verdana, Arial, sans-serif; background:url(images/footer_bg.png) #88A6C0;}

#footer table {width: 75%; margin: 0 auto;}

#footer table tr:first-child {text-transform: uppercase; font-weight: bold; cursor: default;}
#footer table tr:first-child td {color: white; padding: 1ex; width: 25%; font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-size: 14px; opacity: 0.7;}

#footer td div {background-repeat: no-repeat; background-position: 1ex center; background-color: #33587A; display: inline; padding: 1ex 1ex 1ex 4ex;}

#footer td {font-size: 90%; text-align: center;}

#footer ul {padding: 0; margin: 0; list-style-type: none;}
#footer li {padding: 4px;}
#footer li a:hover{color: #444 !important;}
#footer td{vertical-align: top;}

#footer table tr:last-child td {color: white; font-size: x-small; height: 30px; vertical-align: middle; text-align: right; line-height: 12px; padding: 0 2em; text-shadow: 0 1px 0 #444;}

#footer a, #footer a:visited, #footer a:hover, #footer table tr:last-child td a {color: #fff !important; text-decoration: none;}

How do I do this?

[ARG01]

I am not at my comp to try but maybe add this to index.css

Code Select Expand

#footer td div a {
    opacity: 1.0;
}

or possibly;

Code Select Expand

#footer td div a:hover {
    opacity: 1.0;
}

Same principle for the text hover. But, I am sure that you would want to adjust the opacity to something like 0.5 if you are looking to fade.

If not I will have to test it later. 

[Biology Forums]

Thanks, Arg. Neither worked.

Remember, the first-child tr is opaque to begin with, at 0.7.

When I hover over each column, I want the header of that column to become 1.0.

Would it help if I provided the html template?

[Deaks]

would help alot 

[Hj Ahmad Rasyid Hj Ismail]

Aren't you using image for the header?

[Biology Forums]

Aren't you using image for the header?

Yes, but I have set them use background-image in CSS. Only the icon is an icon, not the text.

Code Select Expand

<div id="footer">
<table>
<tr>
<td><div style="background-image: url(' . $settings['default_images_url'] . '/footer_home.png);">Home</div></td>
<td><div style="background-image: url(' . $settings['default_images_url'] . '/footer_links.png);">Quick Links</div></td>
<td><div style="background-image: url(' . $settings['default_images_url'] . '/footer_share.png);">Social</div></td>
<td><div style="background-image: url(' . $settings['default_images_url'] . '/footer_help.png);">Help</div></td>
</tr>
<tr>
<td>
<ul>
<li><a href="', $scripturl, '?action=search">Search</a></li>
<li><a href="#" data-reveal-id="myCategories" data-animation="none">Categories</a></li>
<li><a href="', $scripturl, '?action=arcade">Arcade</a></li>
<li><a href="', $chatPath, '"', empty($modSettings['chatPopUp']) ? 'target="_blank"' : ' onclick="openWindow(this.href);this.blur();return false;"', '>', $txt['chat'], '',$num > 0?'&nbsp;<span class="round5px red_capsule">'.$num.'</span>':'','</a></li>
<li><a href="', $scripturl, '?blog=1.0">Blog</a></li>
<li><a href="', $scripturl, '?action=gallery">Gallery</a></li>
<li><a href="http://biology-forums.com/definitions">Dictionary</a></li>
</ul>
</td>
<td>
<ul>
<li><a ',!$context['user']['is_logged']?'href="#" data-reveal-id="login_popup" data-animation="none"':'href="#" data-reveal-id="myModal" data-animation="none"','>Start a Topic</a>
</li>
<li><a href="', $scripturl, '?action=todayspost">Today\'s posts</a></li>
<li><a href="', $scripturl, '?action=unanswered">Unresolved</a></li>
<li><a href="', $scripturl, '?action=unreplied">Unreplied</a></li>
<li><a href="', $scripturl, '?action=trending">Trending</a></li>
<li><a href="', $scripturl, '?action=stats">Stats</a></li>
<li><a href="', $scripturl, '?action=who">Who\'s Online</a></li>
</ul>
</td>
<td>
<ul>
<li><a href="https://www.facebook.com/BiologyDiscussionForums">Facebook Page</a></li>
<li><a href="https://twitter.com/BioForumsBlog">Twitter Page</a></li>
<li><a href="', $scripturl, '?action=linkus">Link to Us</a></li>
<li><a href="', $scripturl, '?action=treasury">Donate</a></li>
<li><a href="', $scripturl, '?action=staff">Staff</a></li>
</ul>
</td>
<td>
<ul>
<li><a href="', $scripturl, '?action=help;page=rules">Rules</a></li>
<li><a href="', $scripturl, '?action=help;page=guidelines">Posting Guidelines</a></li>
<li><a href="', $scripturl, '?action=help;page=terms">Terms and Policies</a></li>
<li><a href="', $scripturl, '?action=help;page=faq">Frequently Asked Questions</a></li>
<li><a href="', $scripturl, '?action=contact">Contact Us</a></li>
</ul>
</td>
</tr>
<tr>
<td colspan="4">
',theme_copyright(),'<!--Show the load time?-->', $context['show_load_time'] ? ' | '.$txt['smf301'] . $context['load_time'] . $txt['smf302'] . $context['load_queries'] . $txt['smf302b']:'','<br/>
<a target="_blank" href="http://biology-forums.com" title="Free Online Homework Help Forum">Biology-Forums.com - For All Your Science Needs &copy; 2010-'.date("Y").'</a> | <a href="#top">Top (&uarr;)</a>
</td>
</tr>
</table>
</div>';

[Deaks]

it will never work while you have it coded like that ... move the background-images into your css directory for 1 ... also should use "background" not "background-image"

[Gwenwyfar]

it will never work while you have it coded like that ... move the background-images into your css directory for 1 ... also should use "background" not "background-image"

^

Can't select backwards in CSS. Maybe you could try adding opacity to the elements you want to change, instead.

I'd also go for a div base instead of a table...

[Antechinus]

The problem is that your ul's aren't nested in the same parent element as your header text. If they were (a la standard drop menus, for instance) this would be a piece of cake. I would advise rewriting your markup since it's terrible. Using tables for laying out something like this will cause the downfall of western civilisation and the death of millions of cute fluffy kittens.

The next question is why do you want the headers lighting up anyway? There are no functioning links or anything in the headers. They are just plain text. Why do they need a hover indication if they provide no function?

[Antechinus]

Meh. Suppose I should give you a helpful markup suggestion, in the interest of saving civilisation and stuff.

Inside your footer div stick three (or however many you want) ul's to make your columns. Set these to a percentage width to match the desired number of columns. Use zero margin and padding.

Inside each of those ul's you put your li's, with the li's that contain the header text having a different class to the rest of the list.

This makes it all easy. You can do it like this:

Code Select Expand

<div id="footer">
<ul class="saviour_of_civilisation">
<li class="ZOMFG_save_teh_kittenz">Home</li>
<li class="oh_hai_we_haz_semantix"><a href="', $scripturl, '?action=search">Search</a></li>
<li class="oh_hai_we_haz_semantix"><a href="#" data-reveal-id="myCategories" data-animation="none">Categories</a></li>
<li class="oh_hai_we_haz_semantix"><a href="', $scripturl, '?action=arcade">Arcade</a></li>
<li class="oh_hai_we_haz_semantix"><a href="', $chatPath, '"', empty($modSettings['chatPopUp']) ? 'target="_blank"' : ' onclick="openWindow(this.href);this.blur();return false;"', '>', $txt['chat'], '',$num > 0?'&nbsp;<span class="round5px red_capsule">'.$num.'</span>':'','</a></li>
<li class="oh_hai_we_haz_semantix"><a href="', $scripturl, '?blog=1.0">Blog</a></li>
<li class="oh_hai_we_haz_semantix"><a href="', $scripturl, '?action=gallery">Gallery</a></li>
<li class="oh_hai_we_haz_semantix"><a href="http://biology-forums.com/definitions">Dictionary</a></li>
</ul>
<ul>
etc etc etc
</ul>
</div>';


Then your CSS can be like this:

Code Select Expand

.saviour_of_civilisation:hover>.oh_hai_we_haz_semantix {ooh: shiny;}