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
Related
I've read a lot of questions about this problem, but none of those could solve it perfectly: the cell won't be clickable at its full height.
As shown in the picture, I made a headline for my webpage using the <table> tag and colored the clickable content into blue, while the whole table is orange.
The HTML code is:
<table class="visible" id="menu" align="center">
<tr>
<td><p>Home</p></td>
...
</tr>
</table>
And the CSS code is:
#menu a {
display: block;
text-decoration: none;
}
Unfortunately, as you can see, not the whole cell is blue, therefore not the whole cell is clickable. Could anyone tell me a perfect solution for this (possibly without using JavaScript)?
Try display: flex and justify-content: center instead of display: block.
a {
background: lightblue;
display: flex;
justify-content: center;
text-decoration: none;
}
<table align="center" border="1">
<tr>
<td><p>Home</p></td>
</tr>
</table>
Do not use <p/> (block-level) inside <a/> (inline-level).
a::after {
display:block;
content:" ";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:yellow;
z-index:-1;
}
td
{
position:relative;
z-index:0;
}
delete styles for "a".
https://jsfiddle.net/1nrbL1mu/9/
This also works for IE:
a::after
{
display:block;
content:" ";
position:absolute;
top:0;
left:0;
width:100%;
height:300px; /* max possible */
background:yellow;
z-index:-1;
}
td
{
position:relative;
z-index:0;
overflow:hidden;
}
https://jsfiddle.net/1nrbL1mu/12/
Try puting it o new table of one column and one row
<table align="center" width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <a href="#" title="Conoce más" style="text-decoration: none; color: #010000;" target="_blank">
<table align="center" width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border: 1px solid #f3b946; text-align: center; padding: 10px 35px 10px 35px; font-size: 18px;">CONOCE MÁS
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
I am having issues with a large font size and weight fitting in a div tag.
I want it vertical-align bottom, so please help me.
div
{
border:1px solid black;
height:100px;
}
table
{
border:1px solid black;
height:100px;
width:100%;
}
p
{
font-size:50px;
font-family:sans-serif;
font-weight:900;
vertical-align:bottom;
}
td
{
font-size:50px;
font-family:sans-serif;
font-weight:900;
vertical-align:bottom;
}
<div>
<p>TEST</p>
</div>
<hr>
<table>
<tbody>
<tr>
<td>TEST</td>
</tr>
</tbody>
</table>
I have included a demonstration of what I can do with a but I want a div tag to do the same thing.
http://jsfiddle.net/t9m6umvd/3/
Not sure what are you looking for exactly , but margin-top could be an option here to position your text
http://jsfiddle.net/t9m6umvd/2/
and this : jsfiddle.net/t9m6umvd/5
you can also try the top:0; with relative/absolute positioning.
like this:
div
{
border:1px solid black;
height:100px;
position:relative;
}
p
{
font-size:50px;
font-family:sans-serif;
font-weight:900;
position:absolute;
top:0;
}
http://jsfiddle.net/t9m6umvd/4/
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>
How can I make the cell borders centered between the contents of the cells on either side?
I have a navigation bar I made with a table:
But I want the dividers to be centered like this:
How can I do this (without using javascript)?
JSFiddle
Html:
<table>
<tr>
<td>
<a href="something"><div>
something
</div></a>
</td>
<td>
<a href="something_else"><div>
Asdf
</div></a>
</td>
<td>
<a href="long_somthing"><div>
Extra Long Something
</div></a>
</td>
<td>
<a href="qwerty"><div>
qwerty
</div></a>
</td>
<td>
<a href="stuff"><div>
Things
</div></a>
</td>
</tr>
</table>
CSS:
table {
width:100%;
height:20px;
border-spacing:0px 0px;
background-color:#f6f6f6;
}
a {
color:#696969;
font-family:sans-serif;
text-decoration:none;
font-size:13pt;
outline:none;
}
div:hover {
color:#343434;
}
div:active, div:focus {
outline:none;
background-color:orange;
}
td {
border-left:2px groove rgba(147,147,147,0);
border-right:2px groove rgba(147,147,147,0);
text-align:center;
cursor:pointer;
}
td:hover {
border-left:2px groove rgba(147,147,147,.5);
border-right:2px groove rgba(147,147,147,.5);
color:#343434;
background-color:rgba(255,255,255,.5);
}
td:first-child {border-left:none;}
td:last-child {border-right:none;}
div {
width:100%;
height:100%;
padding:5px 0px;
}
I've been recently working on a simple web page. I would like to place almost all style info in the CSS file. The main layout of the page is a table. I looks like this:
<body>
<table class="glowna">
<tr>
<td colspan="2">...</td>
</tr>
<tr>
<td id="glowna_top" colspan="2">
<ul class="menu_gorne">
<li>..</li>
</ul>
</td>
</tr>
<tr>
<td id="glowna_menu_lewe">
<ul class="menu_lewe">
<li>...</li>
</ul>
</td>
<td id="glowna_main">
...
</td>
</tr>
</table>
</body>
and the CSS is like:
ul.menu_lewe, ul.menu_gorne {
display:block; list-style:none;margin:0;}
ul.menu_lewe {
width:200px; padding:2px 20px 2px 2px;
background-color:#9ce;border:none; vertical-align:top;}
ul.menu_lewe li {
border-bottom:1px solid #9ce; }
ul.menu_lewe a:link, ul a:visited {
display:block;width:176px;text-decoration:none;padding:7px;font- weight:bold;background-color:#27c;color:#def;border-right:10px solid #25b;border-left:5px solid #25b; }
ul.menu_lewe a:hover {
width:176px;background-color:#28e;color:#fff;border-right:20px solid #26d; }
ul.menu_gorne {
position:absolute; }
ul.menu_gorne li {
float:left;padding:2px 2px 2px 2px;background-color:#9ce;border:none; }
ul.menu_gorne a:link, ul a:visited {
text-decoration:none;display:block;width:200px;text-align:center;padding:5px 0;font-weight:bold;background-color:#27c;color:#def;border-top:10px solid #25b; }
ul.menu_gorne a:hover {
background-color:#28e;color:#fff;border-top:20px solid #26d; }
ul.lista_dostawcow {
width:800px;}
table.glowna {
background-color:#9ce;table-layout:fixed;width:1024px;margin-left:auto;margin-right:auto; }
td#glowna_top {
height:55px; vertical-align:top;}
td#glowna_main {
width:824px; text-align:left;}
td#glowna_menu_lewe {
width:200px;}
The problem is:
1. that even I set all the widths I still get table cells: "glowna_menu_lewe" and "glowna_main" divided 50%:50%. I want cell "glowna_menu_lewe" to be only 200px or sth near and the other one may fill the rest of space.
2. I would like to place list "menu_lewe" on top of its cell. Now it is vertically centered even that I set the verical-align attribute to top.
Sorry for posting so much code but I didn't know what may be causing the problem.
1 - Change that :
table.glowna {
background-color:#9ce;
table-layout:fixed;
width:1024px;
margin-left:auto;
margin-right:auto;
}
td#glowna_main {
width:824px;
text-align:left;
}
to this :
table.glowna {
background-color:#9ce;
width:1024px;
margin-left:auto;
margin-right:auto;
}
td#glowna_main {
text-align:left;
}
2- use valign="top" attribute to td tag instead of vertical-align:top;