Have been using a simple CSS only tooltip.
Working Example
css:
.tip
{
position:relative;
}
.tip span.tooltip
{
display:none;
background:#ff5112;
border:1px solid #9C0;
}
.tip:hover span.tooltip
{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center
}
html:
<span class="tip">
<table><tr>
<td>Working Tip</td><span class="tooltip">Tip</span>
</tr></table>
</span>
Not working example:
html:
<table><tr>
<span class="tip"><td>Not working TIP</td><span class="tooltip">Tip</span></span>
</tr></table>
And a Live example
Your problem is the table element - you cannot have a span that wraps <td>. Get rid of the table and everything will work.
I don't see your tooltip css class, try adding one
table within a span is not allowed, try fixing that
I think that maybe I see your question but since the question is omitted, I'll take a shot. The second example is mal-formatted if you really wanted something to that extent it should be more like:
<span class="tip">
<table>
<tr>
<td>Working Tip</td>
</tr>
</table>
<span class="tooltip">Tip</span>
</span>
If you are going to wrap the entire table the "tip" should be after the table tag.
<span class="tooltip"> needs to go inside of <td class="tip"> for your current CSS to work as expected...
<table><tr>
<td class="tip">
Working Tip
<span class="tooltip">Tip</span>
</td>
</tr></table>
The solution that worked for me:
<table><tr><td>
<a href="blah.php" class="tip">
Blah Blah Text
<span class="tooltip">Blah Blah Tip</span>
</a>
</td></tr></table>
But this looks really bad with css turned off, so the way to go will be using the title attribute and then adding mootools or such libs on the top.
Thank you guys.
Related
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
I am writing my first CSS lines. I want to align all rows of the same block together but I am not sure how to do this. This is what I am trying to do:
Using regular HTML I would have created a table with as many rows as days and 2 columns. However since CSS is about separating content from presentation I think this violates the principles of CSS. I am thinking that the needed code will have the form:
<div>
<div>days</div><div>hours</div>
</div>
but I am not sure how the CSS should look like. I don't even understand the CSS defines exactly where to load the different areas.
Thank you
Always use table for table structured data, so that it can be easily styled using css like the way you wanted.
Also Table will be easier to understand when one looks at the source!
What if the developer later wants to have a striped row or a hover over effect on a row or a column? so use table and leave all the styling part to be dealt in CSS.
here is a typical html and CSS for your need, view it in jsfiddle
HTML
<table id="schedule">
<tbody>
<tr>
<td>monday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>tuesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>wednesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>thursday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>friday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>saturday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>sunday</td>
<td>closed</td>
</tr>
</tbody>
</table>
CSS
#schedule td:first-of-type
{
text-transform: capitalize;
text-align: left;
padding-right: 10px;
}
#schedule td:last-of-type
{
text-align: center;
padding-left: 10px;
}
I have created a fiddle that should solve your problem.
Here is the link to the fiddle
Below is the HTML and CSS Code
HTML
<div id="outer">
<div class="push-left">Monday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Tuesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Wednesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Thursday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
</div>
CSS
#outer{
width:170px; //width of the container
}
.push-left{
float:left; //pushes the element to the left
}
.push-right{
float:right; //pushes the element to the right
}
.clearfix{
clear:both; //clears any applied floats
}
Hope this solves your problem!
Try
dayshours
Then CSS
.holder{
clear:both;
}
.test{
width:200px;
}
The holder will keep the lines separate
And the test will define 200px or what ever width you want to each field
Either that or use tables
I have a problem in my div elements I can not show them in one line:
<div>
<table>
<tr>
<td>hellow world</td>
</tr>
</table>
<ul>
<li>hi world</li>
</ul>
</div>
the table shown above the the ul and I want the tow elements to shown in one line next to each other.
I tried to use:
div
{
display:inline;
}
or :
div
{
display:block;
}
But it did not work . any body can help me on this??
If you want to show the table and the ul side by side, those are the two elements you should target, not the container they happen to be in.
If they are the same height, simply writing
table {float:left; margin-right:40px}
will do the trick. (You will need the margin, because lists also work with margins to show the bullets, and the bullet would end up inside the table if you didn't provide for that.)
See fiddle
If the table is higher, you will also have to clear the float afterwards, else subsequent content may also end up to the right of the table:
div::after {content:''; display:block; clear:both}
See updated fiddle
Float your content:
div
{
float: left;
}
You can apply display:inline-block, but the key is making sure you apply it to the correct elements...
table, ul
{
display:inline-block;
}
Here is a working example
you can just use table,ul{display: inline-block;} demo
Try this
<div>
<table style="float: left;">
<tr>
<td width="100">
hellow world
</td>
</tr>
</table> <ul>
<li>hi world</li>
</ul>
</div>
I am doing this on my own personal browser, viewing a pbulic website. as such, I can't change their html. I am using chrome, and stylebot to apply the CSS style. I need a CSS solution to the following:
<tr class="bg_small_yellow">
<td class="row1" valign="middle" align="center" width="20">
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
</td>
<td class="row1" width="100%">
<span class="topictitle">
<a href="/eaforum/posts/list/9578017.page" id="topic_link_9578017" title="SimCity Traffic">
SimCity Traffic
</a>
</span>
</td>
How can I apply color: gray; to the <a> link if and only if the <img> is class .icon_folder ?
Here is a jsFiddle page to play with. I want a solution only in the CSS pane. http://jsfiddle.net/hZr9b/
I am looking for something like this, but that actually works:
(td > img.icon_folder) + td a:link { color: gray; }
If the markup cannot be changed, then it is not possible using only CSS because the image and anchor aren't siblings, and there is no parent selector in CSS2/3 to help navigate between these two elements.
If they were siblings, it could be as easy as this:
HTML:
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
SimCity Traffic
CSS:
img[class="icon_folder"] + a {
color:grey;
}
But as you mentioned you cannot change the markup in this instance, unfortunately you'll have to use JavaScript.
I have a site that generates related video's to a topic. I have 4 thumbnails and I want to add a css play button on the thumbnails, which can be done with this code: ► | It will be like this: http://i47.tinypic.com/250qis9.png
Here is a demo: http://jsfiddle.net/vtPhZ/2/
The problem is that it won't recognize the a:before tags that I gave it to. What am I doing wrong?
The HTML snippet which generates the list:
<div id="youtubeThumbs">
<ul class="ytlist">
<li>
<table cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td valign="top" rowspan="2">
<a class="clip" style="cursor: pointer;">
<span>
<img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg">
<em></em>
</span>
</a>
</td>
<td valign="top">
</tr>
</tbody>
</table>
</li>
And the CSS I tried to use (without success):
.ytlist li > a:before {
content: "►";
}
How can I make it work?
I can't explain why but for some reason your change of methods for declaring a child element is causing the problem. Using my first two recommendations of using the unicode entity for the content and using the pseudo element rather than the pseudo class, the CSS should work. However, it did not initially work. When I removed > from the first line the CSS worked.
Here's a demo: http://jsfiddle.net/vtPhZ/4/
Your method was strange but the fact that it didn't work was even more strange...