I'm wondering if it's possible to have clickable links behind a css table.
When the images are 40px there is no way to select the link behind it.
Why i made it in a table is because every text block needs to be 248px (744/3)
CSS
#tabel{
position:absolute;
}
table, td, th
{
width:744px;
height:40px;
text-align:center;
}
th
{
background-color:transparent;
color:white;
}
HTML:
<div id="tabel">
<table cellspacing="0" cellpadding="0">
<tr>
<th>TXT 1</th>
<th>TXT 2</th>
<th>TXT 3</th>
</tr>
</table>
</div>
My goal is to have 3 clickable buttons (for an jquery image-slider with navigation) with text on top of it.
You may want to take the tableless approach like this: http://jsfiddle.net/t4tBt/
CSS
a.mybutton {
display:block;
width:248px;
height:30px;
float:left;
text-align:center;
vertical-align:middle;
color:#999;
text-decoration:none;
padding-top:10px;
}
a.first{
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
a.second {
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
a.last {
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
HTML
<div id="tabel">
First Button
Second Button
Third Button
</div>
Related
I read this article: How to make a vertical line in HTML
but the height style didn't work for <th> tags
My CSS is like this:
.verticalLine
{
width: 1px;
background-color: Black;
height: 10px;
}
My HTML is this:
<th class="verticalLine"></th>
Unfortunately, the vertical line spans the whole border. I have tried percentages instead of pixels, to no avail.
Edited
.navCenter
{
text-align:center;
display:table-cell;
}
<nav style="margin-left:auto; margin-right:auto; width: 70%; height:55px;">
<table>
<tr class="navCenter">
<th><h2><img src="Pictures/BartleHallToppers.jpg" height="42px" width="100px"/></h2></th>
<th class="verticalLine"></th>
<th><h2>Events</h2></th>
<th><h2>Restaurants</h2></th>
<th><h2>Hotels</h2></th>
<th><h2>Points of Interest</h2></th>
<th><h2>Public Works</h2></th>
<th><h2>Road Construction</h2></th>
<th><h2>Contact Us</h2></th>
</tr>
</table>
</nav>
using tables is not a good practice for creating a navigation
you can ul li and for border pseudo
JS Fiddle
li:not(:last-child):after {
content:"|";
position:absolute;
right:0;
top:0;
}
or
li:not(:last-child):after {
content:" ";
width:1px;
position:absolute;
border-right:1px solid;
right:0;
top:0;
bottom:0;
}
Using tables for creating nav menu is not a best practic, but your code must works, if you put th into table:
.verticalLine
{
width: 1px;
background-color: Black;
height: 10px;
}
<table>
<th class="verticalLine"></th>
</table>
`
i want to hide <th> such a way that happens when we give display:none but if i use this property i can't display it on mouse hover.i placed an up arrow inside the th to point something on hovering the table;
** When my table is not in hovered state those th remain hidden but there remain blank space which i do not want.**
I have tried using like this margin-top:-555px; and on hover margin-top:0 but does not work.
i do not want the red mark area but hover state on given link is ok for me.
please help.
jsfiddle
<div class="existing_items">
<table cellspacing="0">
<th class="pointer"colspan="2"><span>^</span></th>
<tr><th class="" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table:hover th.pointer{
visibility:visible;
}
table th.pointer{
color:red;
visibility:hidden;
font-size:20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
I add position:inherit; in your table:hover th.pointer and it works;
You can try here:
http://jsfiddle.net/gkiwi/t7eecbzp/
Or
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table:hover th.pointer{
visibility:visible;
top:-10px;
left:20px;
position:inherit;
}
table th.pointer{
color:red;
visibility:hidden;
font-size:20px;
overflow:hidden;
position:absolute;
top:-20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
<div class="existing_items">
<table cellspacing="0">
<th class="pointer"colspan="2"><span>^</span></th>
<tr><th class="" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
I would suggest to not use an extra (useless) <th> for this purpose. You could instead use a pseudo-element on your title <th>, as they seems highly related. See my example below:
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table th.with-arrow {
position: relative;
}
table:hover th.with-arrow:after{
content: "^";
position: absolute;
left: 10px;
top: 0;
color: red;
font-size:20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
<div class="existing_items">
<table cellspacing="0">
<tr><th class="with-arrow" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
Introduction
I have this portion of HTML:
<!DOCTYPE HTML>
[...]
<table class="inv">
<tr>
<td id="i_1"></td><td id="i_2"></td><td id="i_3"></td><td id="i_4"></td><td id="i_5"></td>
<td class="dt" rowspan="5">
<div style="height:460px;position:relative">
<div class="st msg"></div>
<img src="content/images/site/inv.png"><br>
<a id="nm">USER INVENTORY</a><br>
<span class="desc">Contain tradable items of the user, click on an item on the left.</span><br>
<div style="text-align:right;padding-top:15px" class="bts"></div>
</div>
<div id="bot" style="display:none"><span class="bt i_b pp"><</span> <span class="bt i_b np">></span> <span style="font-weight:bold" id="pgs"></span></div>
</td>
</tr>
<tr>
<td id="i_6"></td><td id="i_7"></td><td id="i_8"></td><td id="i_9"></td><td id="i_10"></td>
</tr>
<tr>
<td id="i_11"></td><td id="i_12"></td><td id="i_13"></td><td id="i_14"></td><td id="i_15"></td>
</tr>
<tr>
<td id="i_16"></td><td id="i_17"></td><td id="i_18"></td><td id="i_19"></td><td id="i_20"></td>
</tr>
<tr>
<td id="i_21"></td><td id="i_22"></td><td id="i_23"></td><td id="i_24"></td><td id="i_25"></td>
</tr>
</table>
[...]
Linked to this CSS:
body{
font:16px Arial, Tahoma;
background-color:#222222;
margin:auto;
width:100%;
}
table{
border-collapse:collapse;
color:#FFF;
width:100%;
}
table td{
border:1px solid #FFFFFF;
vertical-align:top;
text-align:left;
padding:0px;
}
.inv{
table-layout:fixed;
}
.inv td:not(.dt){
width:100px;
height:100px;
text-align:center;
vertical-align:middle;
}
.inv td:not(.dt) > img{
max-width:100px;
max-height:100px;
cursor:pointer;
}
.inv td:not(.dt) > img:hover{
position:absolute;
z-index:100;
width:110px;
height:auto;
margin-top:-55px;
margin-left:-55px;
box-shadow:0px 0px 2px 1px #000000;
}
.inv .dt{
width:35%;
padding:10px;
}
.inv .dt img{
width:100%;
height:auto;
}
.inv .dt #desc{
font-size:12px;
color:#B8B6B4;
max-height:60px;
overflow:hidden;
display:inline-block;
}
.bt.i_b{
color:#FFFFFF;
}
.bt.i_b:hover{
background-color:#1B1B1B;
}
.det #nm{
font-size:20px;
font-weight:bold;
}
All the TDs inside the table are filled with images with this code:
for(var i = 0; i < ((inv.length < 25) ? inv.length : 25); i++){
$("td#i_"+(i + 1)).html('<img src="content/images/albums/'+inv[i]["song_id"]+'.png" title="'+inv[i]["song_name"]+'" id="'+(i+1)+'">');
}
The problem
Everything works fine, I get what I need (the table filled), but I get some sort of padding/margin at the bottom of every td with an image in it. Even if I have set width and height of the cells to 100px, in Firebug I can see a height of 103.5px, why this happens? I've read that it can be DOCTYPE causing it, but I can't remove it, id there an alternative solution?
Thanks.
"but I get some sort of padding/margin at the bottom of every td with an image in it."
Because img is an inline element, and thats why you see white space at the bottom, use this
table img {
display: block;
}
Now this will target all the images inside table element, so if you want the specific ones, use a class instead and assign like
table img.your_class {
display: block;
}
Demo
In the first image, I've used style="display: block;" and written inline, and not for the other two, so, you will see white space for the next two images but not the first one
I've got a table with a <hr>, a title and a body text. I put the hover effect on the whole table but for the <hr>, it doesn't change the colour when mouseover the table only when mouseover the line. I need it to change colour as soon as the mouse touches the table like the rest. I tried various things but none seem to have worked.
How can I get the <hr> line to change the colour to white like the rest of the table when mouseover anywhere on the table? JSFiddle
HTML:
<body>
<table>
<thead>
<tr>
<td><hr /></td>
</tr>
</thead>
<thead>
<tr>
<td>This is the Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>some row content</td>
</tr>
</tbody>
</table>
</body>
CSS:
hr{
border:1px solid;
float:left;
align:left;
width:30%;
background-color:#991f33;
color:#991f33;
}
hr:hover{
background-color:#fff;
color:#fff;
}
table {
border:0;
background-color:#dcdcdc;
text-align:left;
text-decoration:none !important;
padding:20px;
}
thead tr a{
color: #911f33;
}
tbody tr{
font-size:10px;
line-height:19px;
color: #911f33;
}
table:hover, table:hover a{
color:#fff;
background-color:#911f33;
}
tr a{
color:#000;
}
<td><hr id="hrr"/></td>
css is
table:hover #hrr
{
border:1px solid blue;
}
I have a div called #menu which is 800px wide. Inside of it, I have 8 navigation links. The elements in it should be as long as possible and should all be of the same width, but they should, together, fill the parent div on a single row (i.e. without wrapping).
Between each element, there should be a 1px border (or perhaps a 1px side-margin). All links, except the current page link (whichever link #current is applied to) should have a 1px solid #505050 bottom border. While the current page link should not have a visible bottom border (so that the navigation tab "merges" with the content div).
My current code does almost what I want already, but it's missing the border/margin between the links... If I add borders/margins to the sides, obviously, the current 12.5% width (see CSS code below) becomes inaccurate, and I can't fine-tune it so that it does fill the #menu div cross-browser (either the elements will overflow the #menu div, or they won't fill it - in at least one browser).
CSS:
#menu {
border:1px solid #505050;
border-bottom:none;
width:800px;
}
#menu a {
display:inline-block;
outline:none;
text-align:center;
width:12.5%;
padding-top:12px;
padding-bottom:10px;
background-image:url(/img/menu.gif);
border-bottom:1px solid #505050;
color:#D9D9D9;
font-weight:bold;
font-size:13px;
font-family:Verdana, sans-serif;
text-shadow:1px 1px #505050;
}
#menu #current {
background-image:url(/img/menu_current.gif);
color:#505050 !important;
border-bottom-color:#D9D9D9;
text-shadow:none;
}
HTML:
<div id="menu">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
</div>
Two requirements:
The solution should work in IE6 and later IE versions, as well as recent versions of Firefox, Chrome, Safari and Opera
No use of JavaScript, please
It's a big plus if:
The solution works so that links can be added without having to re-adjust the width for the elements
You may of course rewrite the CSS/HTML completely. No need to re-use any of the code above, I'm just showing my own approach. Also, I am aware that the text-shadow rule isn't supported in IE6, but it isn't a requirement.
How it currently looks
The expected result
hi i think u want to this Demo
add some css in you stylesheet as like this
#menu{
font-size:0;
}
#menu a {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#menu a + a{
border-left:solid 2px black; // depent your design .
}
Live demo
Change color or border according your design .
Another way is to use a html table instead of divs.
#menu {
width:800px;
border-collapse:collapse;
}
#menu td.other {
border:1px solid black;
}
td a {
display:inline-block;
outline:none;
text-align:center;
width:100%;
padding-top:12px;
padding-bottom:10px;
background-image:url(/img/menu.gif);
color:#D9D9D9;
font-weight:bold;
font-size:13px;
font-family:Verdana, sans-serif;
text-shadow:1px 1px #505050;
}
#menu#current {
background-image:url(/img/menu_current.gif);
color:#505050 !important;
border-bottom-color:#D9D9D9;
text-shadow:none;
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
border-bottom:1px solid #D9D9D9;
}
<table id="menu" border="0">
<tr>
<td id="current">Link 1</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
</tr>