I hover a thumbnail image using CSS-only:
<style type='text/css'>
#like_table td a{z-index:2;}
#like_table .tooltip
{
position: relative;
z-index:1;
}
#like_table .tooltip a
{
z-index:2;
}
#like_table .tooltip span
{
z-index:9999;
display:none;
}
#like_table .tooltip:hover span
{
position:absolute;
display:block;
top:1.5em;
left:2em;
border:1px solid black;
background-color:white;
padding:0.2em;
}
#like_table td .tooltip .tooltip_thumb{
z-index:99999;
}
</style>
<table id='like_table' class='smallfont' border='0' cellpadding='0' cellspacing='0'><tr><td>
<div class='like_row'>
<a href='#user1' class='nul'>User 1</a> liked <a href='#link' class='tooltip'>forum post<span><img src='image.jpg' class='tooltip_thumb' alt='' /></span></a>
<span class='by_user'>by <a href='#user2' class='nul'>User 2</a></span>
</div>
</td>
</tr>
Unfortunately, the z-index on the span and the hover image does not seem to work.
The image is shown "below" the username (with class by_user), but above the normal text.
How can I make the overlay / tooltip show on top?
Your z-index will not work because all these items are not on the same level. They are all nested in each other. Z-index only works on elements on same level in DOM like this:
<div class="level1">
<span class="level2"> 1 </span>
<span class="level2"> 2 </span>
<span class="level2"> 3 </span>
</div>
that will work if you set z-index on the spans, but if you put on it will have no effect because it is "upper" element.
edit: and in your css you have written .tooltip a but you have no <a> in .tooltip, so you ment a.tooltip i suppose.
Remove all your current z-index and just leave the z-index: 9999 on .tooltip
Related
I have a third party plugin and I need to change a word. They only give me access to CSS:
<span class="apple">This is some words</span>
Changed to:
<span class="apple">This is some text</span>
How would I do that with pure CSS?
You could try as below using pseudo selector :after,
span{
position:relative;
color:transparent;
}
span:after{
content:'This is some text';
position:absolute;
right:10px;
color:#111;
}
<span class="apple">This is some words</span>
If you have access to the HTML then you can hide the wrapper of the unwanted text:
p.old-text-class { diplay: none;}
And insert the new text at the same place in HTML:
<p class="new-text-class">This is some text</p>
Try using a pseudo element with content.
.apple {
visibility: hidden;
}
.apple:before {
content: "This is NEW text";
visibility: visible;
}
<span class="apple">This is OLD text</span>
I have a bunch if <a> tags that have unique ids associated with them and children elements that are <img>. I would like to have the images hidden (display:none) by default and have them become visible when you hover over the <a> tag to which they belong. However, currently when I try this behavior using the #a-tag-id:hover selector in my css, the image does not become visible in the event of hovering.
Not really sure what I am doing wrong.
here is a fiddle with the same behavior.
http://jsfiddle.net/ebbnormal/bobmrud0/1/
Here is the original haml/css:
#map
%a#saddleback_point
=image_tag('saddleback_college.png', width:'300px')
%a#citrus_point
=image_tag('citrus_college.png', width:'300px')
%a#sonrise_point
=image_tag('sonrise.png', width:'300px')
%a#vegas_point
=image_tag('vegas.png', width:'300px')
%a#tennessee_point
=image_tag('tennessee.png', width:'300px')
%a#chestnut_point
=image_tag('chestnut.png', width:'300px')
%a#saint_point
=image_tag('saint.png', width:'300px')
%a#boston_point
=image_tag('boston.png', width:'300px')
%a#fisher_point
=image_tag('fisher.png', width:'300px')
#citrus_point img{
top:360px;
bottom:0px;
left:240px;
position:absolute;
display:none; //TODO This is broken!
}
#citrus_point:hover img{
display:block;
}
To achieved this on hover your element need to be the child of the element that is hovered.
The element whoes styles are needed to be changed must be the descendent of the hovered element to work
Example
See the example below
img{
display:none; //TODO This is broken!
}
#my_a:hover img{
display:block;
}
#my_a_withoutext{
display:block;
min-height:10px;
min-width:10px;
background:pink;
}
#my_a_withoutext:hover img{
display:block;
}
<div id="unique_container">
<a id="my_a">
test
<img src='http://0.tqn.com/y/altreligion/1/S/W/1/-/-/ouro-eliphas1947992_f248.jpg'/>
</a>
<a id="my_a_withoutext">
<img src='http://0.tqn.com/y/altreligion/1/S/W/1/-/-/ouro-eliphas1947992_f248.jpg'/>
</a>
</div>
In your case if no other elements are there in container and only the achor tag that you want to hover(that is child of the container) is visible than when you hover over it you are hovering parent. so you can generalize it for your specific condition this hack can work
#my_a img{
display:none;
}
#my_a:hover img{
display:block;
}
#test{
}
#test:hover{
display:normal;
}
#unique_container:hover img{
display:block;
}
<div id="unique_container">
<a id="my_a">
<img src='http://0.tqn.com/y/altreligion/1/S/W/1/-/-/ouro-eliphas1947992_f248.jpg'/>
</a>
<a id="test">
Hello Can you See Me?
</a>
</div>
I have a sentence composed of multiple span elements:
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
When a span gets clicked (:active), I want it to have an increased font but without moving the elements around it horizontally.
Idle
Second word :active
I don't want any Javascript involved (to compute the :active width of the element, or some hack like this), only CSS. A solution would be to add right/left padding by default and suppress it when a word is :active, but it doesn't work for all word lengths: http://jsfiddle.net/Ampwt/1/
Any idea of how I could achieve this?
Apply width and height to your span. Please see sample css.
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
width: 170px;
height:30px;
}
.sentence span:active {
font-size:2em;
}
Use transform: scale(): http://jsfiddle.net/Ampwt/2/.
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
<br />
<span class="sentence">
<span>First</span>
<span>very long word</span>
<span>third.</span>
</span>
CSS:
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
padding:0 1em;
}
.sentence span:active {
-webkit-transform: scale(2);
transform: scale(2);
}
img moved to bottom after float:right;
see to footer: http://qass.im/thestandard/
this footer code:
footer{
display:block;
margin:0 auto;
margin-bottom:50px;
width:800px;
height:100%;
clear:both;
}
.footer-content{
padding:80px;
padding-top:0;
padding-bottom:0;
}
footer p{
line-height: 1.714285714;
font-size:14px;
color:#555;
}
footer p a{
color:#555;
border-bottom:1px dotted #555;
}
.social-icon{
font-size:0;
float:right;
}
Do it this way.
The Code Changes:
<div class="footer-content">
<div class="social-icon">
<a target="_blank" href="#"><img src="http://qass.im/thestandard/wp-content/themes/thestandard/images/twitter-footer.png"></a>
<a target="_blank" href="#"><img src="http://qass.im/thestandard/wp-content/themes/thestandard/images/facebook-footer.png"></a>
<a target="_blank" href="#"><img src="http://qass.im/thestandard/wp-content/themes/thestandard/images/google-footer.png"></a>
</div>
<p>
Powered by <a target="_blank" href="http://wordpress.org">WordPress</a> ©2013 The Standard, The Standard theme by <a target="_blank" href="http://qass.im/thestandard">Qassim.Dev</a>
</p>
</div>
This will make your image not to jump to the bottom.
They are rendered under the paragraph. As a p tag is block-level - so it occupies the full width.
What you can do:
variant 1: make .footer-content p {float: left;}
variant 2: change the order in your html. Make the div with a class of social-icon go before the paragraph.
delete the .social-icon's float
and use display:inline; for .social-icon and footer p
i have visited your page it isnt on the bottom because of float:right; (use a debugger - like firebug - and disable float:right; to check), its there because of the fact that it is a block element under another block element use display:inline-block; in your .social-icon and footer p css.
in conclusion
footer p{
display:inline-block;
}
.social-icon{
display:inline-block;
font-size:0;
float:right;
}
and BOOM! i did this in firebug on your site and it worked fine.
I have tried all sorts to find an answer to this, but what I want to do is have some text centered under two images.
I have tried using a turned into a line, but I cannot get the text to be under the centre of the image. Can any one help me ?
The web page is www.c5d.co.uk/captain.php
The HTML is:
<img class="social" src="http://www.c5d.co.uk/captain.png" alt="Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
<div><ul class="captain"><li><p>John Lewis: Captain</p><p>Bill Wrigley: President</p> </li></ul></div>
<img class="social" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain">
<div><ul class="ladycaptain"><li><p>Beryl Harrison: Lady Captain</p><p>Kieran Metcalf: Junior Captain</p></li></ul></div>
The relevant CSS is
.captain, .ladycaptain { /* ul - controls normal comp results& junior open*/
list-style-type:none;
display:table;
padding:0;
margin:0 auto;
}
.captain li, .ladycaptain li {
display:table-row;
text-align:left;/* ul - controls normal comp results& junior open*/
padding:0;
margin:0;
}
.ladycaptain p {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 10px 3px 0; /* padding-right visually separates "columns" */
}
.captain p {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 10px 3px 0; /* padding-right visually separates "columns" */
}
.ladycaptain p {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 20px 3px 0; /* padding-right visually separates "columns" */
}
.captain p + p {
padding-left:225px; /* padding-left visually separates "columns" */
}
.ladycaptain p + p {
padding-left:180px; /* padding-left visually separates "columns" */
}
Right now you have more HTML and CSS than you need, which is making your code harder to read and fix than it needs to be. Putting the text for each image in their own div will make it easier to center them, and be closer semantically to what you're trying to achieve. Then you can also use far less CSS to make it behave as you want.
Restructuring your HTML and CSS should do the trick:
<html>
<head>
<style>
#officers {
width:554px;
}
.officer {
width:267px;
position:relative;
float:left;
text-align:center;
margin:3px 10px 3px 0;
}
</style>
</head>
<body>
<div id="officers">
<div class="officer">
<img src="http://www.c5d.co.uk/captain.png" alt="Captain" />
<span class="caption">John Lewis: Captain</span>
</div>
<div class="officer">
<img src="http://www.c5d.co.uk/president.png" alt="President" />
<span class="caption">Bill Wrigley: President</span>
</div>
<div class="officer">
<img src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain" />
<span class="caption">Beryl Harrison: Lady Captain</span>
</div>
<div class="officer">
<img src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain" />
<span class="caption">Kieran Metcalf: Junior Captain</span>
</div>
</div>
</body>
</html>
Remove the margin-bottom of the images.
Increase the height of the ul containing the text.
Set the line-height of that li ( or a group of 'em ) to that height. It will be perfectly centered. Well of course it will be centered vertically, if that's what you want to achieve. Otherwise just setting the text-align to center should do the trick.
Try something like this:
<ul>
<li>
<img class="img1" src="" alt="">
<div>image 1</div>
</li>
<li>
<img class="img2" src="" alt="">
<div>image 2</div>
</li>
<li>
<img class="img3" src="" alt="">
<div>image 3</div>
</li>
....
</ul>
with css
li
{
display: inline-block;
margin: 20px;
}
div
{
text-align: center;
}
Here's a LIVE DEMO
Suggested by #Rob Grzyb :
Try grouping the image and caption into a single container/div and centering the contents. It will be much easier to do if you can restructure the HTML.
Suggested by #Pow-Ian : jsfiddle.net/KV7zT
Edited by me : jsfiddle.net/KV7zT/1 or jsfiddle.net/KV7zT/2/
html
<div style='text-align:center;width:50%;float:left;'>
<img src="http://www.c5d.co.uk/president.png" alt="President" />
<div style="clear:both"> Text Goes Here</div>
</div>
css
.none-needed {css:not needed 'yet';}
I gave up ! and tried something different.
Just have a text spacing error now !
Thanks for all your suggestions
Antony