I have a UL with several LI's.
In these li's there are tables (1 in every li).
I use mootools to make my li's draggable / sortable.
I'll leave the JavaScript out of here though, since it's not part of the problem.
All is well, except I don't want my entire li (and thus child table) to be draggable. Just a small portion so to speak.
I then tried to 'relative and absolute' my way out of this one, but the 'hover' effect of the li remains... So when I hover my (child) table, the (parent) li always shows its: hover effect. Which it shouldn't!
<ul>
<li>
<table cellpadding="0" cellspacing="0">
<tr>
<td>...</td>
<td>foobar</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
</li>
</ul>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
li {
background-color: red;
width: 25px;
height: 25px;
float: left;
clear: both;
}
li:hover {
background-color: green;
cursor: move;
}
li table {
border: 1px solid #eee;
width: 850px;
position: absolute;
}
</style>
If you apply this, you'll see that the actual li is 25x25. But when you hover the table, the li turns green (just that 25x25 part)...
Only that 25x25 part should respond to the hover!
The problem is with your markup.
You have the table within (sibling of) the List item (li) therefore whatever effect/styling you apply to the li will apply to all that within it; hence why when you hover over the table the li is turning green.
When you hover over the table, which is a child of li, you trigger the :hover pseudo-class also for the li.
A solution could be to apply a class to all the li with a table inside:
<li class="withTable">
<table cellpadding="0" cellspacing="0">
<tr>
<td>...</td>
<td>foobar</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
</li>
and add this rule to your CSS:
li.withTable:hover {
background-color:transparent;
cursor:default;
}
Obviously you can set another color if you want
li.withTable:hover {
background-color:blue;
cursor:default;
}
Related
For example I have some kind of table:
<table>
<tr>
<th><div>Title1</div></th>
<th><div>Title2</div></th>
</tr>
<tr>
<td><div>Body1</div></td>
<td><div>Body2</div></td>
<tr>
</table>
I want every th column be resizeable, so I add some CSS:
th > div {
resize: horizontal;
overflow: hidden;
}
Everything working fine, every column can be resized horizontally.
Problem is that in every <th> I have an icon for resizing. I want it to be hidden. Is there anyway to do this?
Here are three possible solutions:
Use the ::webkit-resizer psuedo selector to style the resizer
Use a :after psuedo element to 'hide' the resizer (and add a custom cursor)
Use the :hover psuedo class to add the resize only on :hover
1. It's not cross-browser compliant, but might work for you - the ::-webkit-resizer selector. This allows some basic control over the styling of the resizer icon. We can make it transparent with the following:
(this will only work in Safari)
th > div,
td > div {
resize: horizontal;
overflow: hidden;
text-align: left;
}
td > div::-webkit-resizer {
background-color: transparent;
}
<strong>The `::-webkit-resizer` selector only works in Safari</strong>
<br/><br/>
<table>
<tr>
<th><div>Title1</div></th>
<th><div>Title2</div></th>
</tr>
<tr>
<td><div>Body1</div></td>
<td><div>Body2</div></td>
<tr>
</table>
2. As a more cross-browser solution, we can 'hide' the resizer icon behind a :after psuedo element. The idea here is to create an :after element that sits in the bottom-right corner of the td > div elements (on top of the resizer icon) with a background color that matches the table cell background color. The only remaining change is to add a small amount of padding to the right-side of the cells so the :after psuedo element doesn't also cover the cell contents.
The main advantage of this option is we can add the custom cursor you mentioned you wanted. Using the td > div:hover:after selector we can apply a cursor when the right-side of the resizable table cells is on :hover. Like this:
Like this:
th > div,
td > div {
resize: horizontal;
overflow: hidden;
text-align: left;
position: relative;
padding: 0 8px 0 0;
min-width: 45px;
}
td > div:after {
content: "";
display: block;
position: absolute;
bottom: 0px;
right: 0px;
background-color: white;
width: 8px;
height: 100%;
}
td > div:hover:after {
cursor: col-resize;
}
<table>
<tr>
<th>
<div>Title1</div>
</th>
<th>
<div>Title2</div>
</th>
</tr>
<tr>
<td>
<div>Body1</div>
</td>
<td>
<div>Body2</div>
</td>
<tr>
</table>
3. If we want the cells to be resizable, hide the resize element, and make it obvious the elements are resizable, we can use the :hover psuedo class.
Through some experimenting I found this solution works best if you use both :hover and :active pseudo classes, or the handle on the resize is lost if the cursor is dragged too quickly.
th > div {
resize: horizontal;
overflow: hidden;
text-align: left;
}
td > div {
padding-right: 10px;
min-width: 40px;
}
td > div:hover,
td > div:active {
resize: horizontal;
overflow: hidden;
}
<strong>The `::-webkit-resizer` selector only works in Safari</strong>
<br/><br/>
<table>
<tr>
<th><div>Title1</div></th>
<th><div>Title2</div></th>
</tr>
<tr>
<td><div>Body1</div></td>
<td><div>Body2</div></td>
<tr>
</table>
If you want to remove the icon from each and every td just use th > div selector.
See the example below:
If you want to play with that resize icon: Here
th > div{
resize: horizontal;
overflow: hidden;
}
<table>
<tr>
<th><div>Title1</div></th>
<th><div>Title2</div></th>
</tr>
<tr>
<td><div>Body1</div></td>
<td><div>Body2</div></td>
<tr>
</table>
jsfiddle at http://jsfiddle.net/Sapphireblue/781rrymp/39/ & code at bottom
I have four nav elements, each text in LIs side-by-side via float:left, in a UL, in a DIV, in a NAV, in a DIV whose width is a percentage of its parent element(s). (I am using a responsive grid layout and these LIs are populated by a WordPress menu, so there may well be a more efficient way to achieve this with less overhead, but that efficiency is not part of the spec for this project.)
What I want to do is to keep the left edge of the left-most LI at the left edge of all its parents; the right edge of the right-most LI at the right edge of all its parents; and have the other two LIs evenly spaced between the outer two. So kind of like a fully justified line of text.
Turns out, this is hard. Between the percentage-width div, which means that any margin I specify for the LIs is unsuitable as soon as you resize, and the fact that the text items in the LIs are of different widths so, and etc etc, I can't get the last LI flush right in a way that stays there for any resize (not even setting LI last-child margin-right to 0}.
I've played with various units for my LIs and none is right. I tried media queries for small adjustments to font sizes on the LIs as you resize the browser window and that parent div shrinks, which helps, but unless I set a breakpoint every 5 pixels, this isn't workable as a solution. If I work out margins that are ~close~ to what I want and then just set float:right on the last-child LI, it looks dumb if you resize the window down to where that last LI appears on its own line.
Gotta be a way to do this. And sorry if the question has been asked; I did browse but didn't find anything quite a match.
(Note: I'm not worried about widths so small the LIs wrap onto 2 lines, I just don't want there to be a gap of whitespace to the right of the UL, at any width where the UL can be contained on the one line.)
#myDiv {
width:50%;
margin:0;
border:1px solid red;
overflow:auto;
}
#myDiv ul {
padding:0;
margin:0 0 0 0;
height:auto;
}
#myDiv li {
list-style-type: none;
float:left;
background-color:yellow;
margin-right:20px; /* this value is only good for one
specific viewport width: ugggh */
}
#myDiv li:last-child {
margin-right:0px;
}
<div id="myDiv">
<nav>
<div>
<ul>
<li>Item 1</li>
<li>Item Two</li>
<li>#3</li>
<li>Longer Item Four</li>
</ul>
</div>
</nav>
</div>
If I understand correctly, this sounds like it would be difficult to achieve and unreliable, especially given that the nav text can be edited through a CMS.
In this situation I'd be inclined to handle it a little differently, using display: inline-block on the list items.
#myDiv li {
list-style-type: none;
display: inline-block;
background-color:yellow;
margin: 0 2px;
}
http://jsfiddle.net/781rrymp/40/
How about using TABLE instead of UL. The code would be:
<style type="text/css">
#myDiv {
width:50%;
margin:0;
border:1px solid red;
overflow:auto;
}
#myDiv table {
padding:0;
margin:0 0 0 0;
height:auto;
width: 100%;
}
#myDiv td {
width: 25%;
background-color: yellow;
border-right: 20px solid white;
}
#myDiv td:last-child {
border-right: 0px;
}
</style>
<div id="myDiv">
<nav>
<table>
<tr>
<td>Item 1</td>
<td>Item Two</td>
<td>#3</td>
<td>Longer Item Four</td>
</tr>
</table>
</nav>
</div>
I have a table, which I want to hide and show using jQuery. I want to add a 'close' button to the top right.
But the close button always appears behind the table, so not able to visible
How can I make the close button appear in front of the table please (not above/to the side), and therefore available to be clicked on?
<style>
table
{
border: 3px solid #000000;
align: center;
text-align: center;
color:#000000;
}
th,td
{
border-width: 2px;
border-color: #000000;
border-style: solid;
}
#RCLPage
{
display:block;
position:absolute;
z-index:100;
}
.close_box
{
background-image:url('../tsTest2/images/close.gif');
background-repeat:no-repeat;
background-position:right top;
position:relative;
z-index:101;
//height:10px;
}
#CPSTab
{
padding:10;
width:20em;
}
</style>
<div id="RCLPage">
<div class="close_box"></div>
<table id="CPSTab">
<thead>
<tr>
<th colspan="2">The Header</th>
</tr>
</thead>
<tbody>
<tr><td>Item1</td><td>2</td></tr>
<tr><td>Item2</td><td>5</td></tr>
<tr><td>Item3</td><td>3</td></tr>
</tbody>
</table>
</div>
You need to add z-index to the divs, with a positive number for the top div and negative for the div below
example
give css like this
table{position:relative}
And for the Close Button
.closeButton{ position:absolute; top:0; right:0; z-index:999}
You need to change the top and right value according to your requirements
http://jsfiddle.net/Lubuu/5/
Set position:relative; for the close button container.
Set position:absolute for the button.
Set z-index for both (higher index for button).
Use: right: 0; top: 0; for button.
Change the position of .close_box to 'absolute'
Fiddle here: http://jsfiddle.net/9kXmq/
position:absolute;
Please see the following example:
http://jsfiddle.net/6t6hq/7/
when I use td with position relative to move it,
it only move the content but not the border.
How can I move the border with the content?
<table>
<tr>
<td id="relativeTD">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<div id="expected">expected</div>
<style>
td{
border:1px solid #000;
min-width:100px;
}
#relativeTD{
position:relative;
left:60px;
}
#expected{
border:1px solid #000;
position:relative;
left:60px;
}
</style>
TD is of display: table-cell;!
So you can't move it using relative positioning. Instead, create another <div> inside the <td> and give border and stuff.
Instead, give position: absolute for the td. It works! Also, you need to give position: relative to the table.
Fiddle: http://jsfiddle.net/6t6hq/9/
Else, you can use margin-left too to the td.
You cannot move a single td border you need to move the whole table
Demo
table {
margin-left: 60px;
}
Either what you can do is give your table border: 0;, place a div inside your td
give it some width, border and position: relative with left: 60px; and you are good to go
I have the following :
HTML
<th class="sort">
<div>
<div class="sort"></div>Last Name
</div>
</th>
css:
table.tablesorter thead th.sort
{
padding:0;
}
table.tablesorter thead th div.sort
{
margin:0;
width:15px;
height:30px;
float:left;
background: url("/Content/images/admin/sort.png") no-repeat;
background-position: 0px center;
cursor:pointer;
}
table.tablesorter thead tr th.sort a
{
cursor:pointer;
color:inherit;
vertical-align:middle;
float: left;
padding-top: 7px;
}
I want to display inner and inside vertically aligned middle and always on ONE line so that when a browser window is resized (small) it will not break and will not more underneath inner (which is what is happening now).
thanks
use the "display inline" command...
<div style="display:inline;float left;">First name</div>
<div style="display:inline;float right;">Last name</div>
Its not clear to me what "inner" and "inside" youre referring to (you mught want to update and elaborate a bit, as well as post the complete markup for the table) but it sounds like you basically want everything in the th to be in one continuous line regardless of avialable space. You can turn off the text from wrapping with whitespace: nowrap;. However your content is going to overflow the th because thats how table cells work, so you need to set overflow: hidden on something that wraps the text. Unless yo need more than one elemment inside the cells you dont need the float.
The markup might look like this:
<thead>
<th><div class="clip sort">First Name</th>
<th><div class="clip sort">Last Name</th>
</thead>
Whith the css like so:
.clip {width: 100%; overflow: hidden; whitespace: nowrap;}
th {vertical-align: middle; height: 30px;}