So, Im currently trying to do this:
<table class ="tablez">
<tr>
<th>Table Title </th>
</tr>
<tr>
<td>
<a tabindex="0" class="clickable">Click Me!</a>
<div id="showedClickable">
<p>This is showed when Click Me! is clicked.</p>
</div><!--EO showedClickable -->
</td>
</tr>
</table>
Heres the class
#showedClickable {
position:absolute;
display:none;
width:auto;
height:auto;
}
Heres what happens when you click.
a.clickable:focus + #showedClickable {
display:block;
}
It works fine on chrome on a laptop but when I try this on a mobile(iPhone) this doesn't work....What's the issue here?? How can I work around this,solve this?
Thank you for your time!
I had simillar trouble to this. The problem is that the iPhone doesn't redraw siblings based on events in CSS.
Try nesting your elements like this and using a child selector rather than a sibling selector. It is also generally more semantic as the item you click is often a heading for what is shown.
Oddly enough the iPad supports hover as a click event,
<ul>
<li>Click me
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
li:hover ul {display: block;}
Related
I've got a quick question:
I've got a quick table, in which there's something clickeable.
<table class ="tablez">
<tr>
<th>Table Title </th>
</tr>
<tr>
<td>
<a class="clickable">Click Me!</a>
<div id="showedClickable">
<p>This is showed when Click Me! is clicked.</p>
</div><!--EO showedClickable -->
</td>
</tr>
</table>
What I want to accomplish is:
#showedClickable {
position:absolute;
display:none;
width:auto;
height:auto;
}
This is the part I don't know how to 'phrase'...How do I do so that
a.clickable:focus + #showedClickable {
display:block;
}
The problem is that an a element without a href does not receive focus by default. This is why your code is not working. You should give it a tabindex to make it focusable.
<a tabindex="0" class="clickable">Click Me!</a>
jsFiddle Demo
If you want to show the div on click of a like your title indicates, you can do it by modifying the code as below:
HTML:
Click Me!
CSS:
#showedClickable:target {
display:block;
}
Fiddle
EDIT:
:target is a pseudo-class which matches an element whose id is the same as that of the fragment identifier of the URI.
URIs with fragment identifiers link to a certain element within the document, known as the target element. In this case, the target (href of anchor) is an element with id as showedClickable. Hence when the anchor is clicked, the content gets displayed.
You can find more details about :target pseudo-class here
Note: As bažmegakapa has pointed out in the comments, this method will not work in IE 8 and lower.
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'm designing my first website (for a start-up IT support company) and I have run into some issues in my learning. Problems are:
When I try to put a border around my nav element, it moves the nav box down the side to where it's still on the left, but below the the main (article?) section of the webpage. It also makes the border around my main header part thicker (only the side where the nav box is).
I cannot get the footer to align with the article section (even though both are supposed to be aligned to the center. I suspect the footer is not aligning because the nav box is changing the "center" alignment of the article).
P.S. I don't understand why this post is being downvoted into oblivion... I haven't found the answer to this question anywhere else, nor do I think it is a senseless one.
Here is the jsfiddle for my site: http://jsfiddle.net/EchoedTruth/a4CLL/
`$` <nav style="background-color: red">
<table>
<ul>
<tr>
<td><li><b>Home</b> </li></td>
</tr>
<tr>
<td> <li><b>Services We Offer</b></li>
</td>
</tr>
<tr>
<td>
<li><b>About Our Company</b></li>
</td>
</tr>
<tr>
<td>
<li><b>Testing Page</b></li>
</td>
</tr>
<tr><td><li><b>Testing Page 2</b></li></td></tr>
</ul>
</table>
</nav>
`$`
The code within your NAV element is invalid HTML.
You have this which is just all sorts of wrong:
<table>
<ul>
<tr>
<td><li><b>Home</b> </li></td>
</tr>
<tr>
<td> <li><b>Services We Offer</b></li>
</td>
</tr>
<tr>
<td>
<li><b>About Our Company</b></li>
</td>
</tr>
<tr>
<td>
<li><b>Testing Page</b></li>
</td>
</tr>
<tr><td><li><b>Testing Page 2</b></li></td></tr>
</ul>
</table>
Try changing it to this:
<nav>
<ul>
<li>Home</li>
<li>Services We Offer</li>
<li>About Our Company</li>
<li>Testing Page</li>
<li>Testing Page 2</li>
</ul>
</nav>
The reason your NAV element is moving out of place when you add a border will probably be because adding the border gives the NAV element a larger width.
e.g if your NAV element is 300px wide and you give it a border of 1px that will make the NAv element 302px.
Read up on the HTML Box Model to understand this better.
Your HTML structure is not correct, you have <li> within a <table>? <li> elements are only allowed withing a <ul> or <ol> elements. So I would fix your nav first before trying to style:
CSS:
ul {
border:1px solid #000; // border around all li elements
}
ul li {
border:1px solid #666; // border around each li element
}
HTML:
<nav style="background-color:red;">
<ul>
<li><b>Home</b></li>
<li><b>Services We Offer</b></li>
<li><b>About Our Company</b></li>
<li><b>Testing Page</b></li>
<li><b>Testing Page 2</b></li>
</ul>
</nav>
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...
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.