How can I make the table-cell as small as the text inside it? I tried to set margin, padding and white-space as well, but none of them works:
HTML
<table class='header_left'>
<tr>
<td><a href='/index.php' class='title1'>somewebsite.com</a></td>
</tr>
<tr>
<td class='vonal'><a href='/index.php' class='title2'>Check something and do it faster than your competitors</a></td>
</tr>
</table>
CSS
table.header_left {
float:left;
text-align:left;
margin:0;
padding:0;
border-collapse: collapse;
}
table.header_left a.title1 {
color: #e6e8ea;
font-size: 39px;
text-decoration:none;
margin:0;
padding:0;
}
table.header_left a.title2 {
color: #c1c2c4;
font-size: 14px;
text-decoration:none;
margin:0;
}
table.header_left td.vonal {
border-bottom:1px solid #c1c2c4;
text-decoration:none;
}
table.header_left td {
border:1px solid;
white-space: nowrap;
padding:0;
margin:0;
}
http://jsfiddle.net/RZHPD/
As you see, there is padding around the text "somewebsite.com". I want it to be removed.
Thanks
This is because of the default padding of text/ font. you can try adding in your css :
table.header_left a.title1 {
line-height:15px;
float: left;
}
Related
I'm creating a website for a school project using HTML and CSS. In the header there is a table and I need a text (which is inside a cell) to be aligned on the vertical center and on the horizontal right.
This is the HTML code
<table id="intestazione">
........
<tr>
<td class="centerV"><h1>Text</h1></td>
<td><img src="Logo.jpg"></td>
</tr>
</table>
and this is the CSS code
h1
{
font-family:Arial;
font-size:50px;
color:#009ED9;
text-align:right;
}
.centerV
{
display:table-cell;
vertical-align:middle;
}
but it doesn't work as I want, so I changed the CSS code into
h1
{
font-family:Arial;
font-size:50px;
color:#009ED9;
display:table-cell;
vertical-align:middle;
text-align:right;
}
and the text is vertically centered, but not on the right (it is on the left). I've read that I can use line-height or a padding on the top, but in my opinion it is more clean and elegant to use vertical-align (tell me if I am wrong).
I tried also other code from suggestions on the web but I don't write it otherwise the question will be too long.
you can use :
position : relative;
right : value%;
(or left:value%)
as you like ..
check this
<table id="intestazione" border="1">
<tr>
<td class="centerV"><h1>Text</h1></td>
<td><img src="http://www.sec4ever.com/home/images/misc/noavatar.gif"></td>
</tr>
h1{
font-family:Arial;
font-size:50px;
color:#009ED9;
display:table-cell;
padding:100px;
vertical-align:middle;
position:relative;
right:30%; }
Take out display:table-cell from your h1 headings and simply apply a text-align:right to your td elements.
h1 {
font-family: Arial;
font-size: 50px;
color: #009ED9;
text-align: right;
}
.centerV {
vertical-align: middle;
}
tr {
border: solid red;
}
td {
border: solid green;
width: 100%;
}
h1 {
font-family: Arial;
font-size: 50px;
color: #009ED9;
vertical-align: middle;
text-align: right;
}
h1 {
border: solid red;
}
table {
text-align: right;
}
<table id="intestazione">
........
<tr>
<td class="centerV">
<h1>Text</h1>
</td>
<td><img src="Logo.jpg"></td>
</tr>
</table>
You can use align="right" in td by default content is vertically aligned in td.
<table id="intestazione" width="100%" bgcolor="green">
<tr>
<td align="right" valign="middle" ><h1>Text</h1></td>
<td><img src="Logo.jpg"></td>
</tr>
</table>
try this
h1 {
font-family:Arial;
font-size:50px;
color:#085ED9;
display:table-cell;
vertical-align:middle;
float: right;
}
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 wish to make cell d with full yellow background.
How can I do that?
I am targeting the html in outlook display.
http://jsfiddle.net/f2pb227a/
Update 1: actually, I am using agility html pack to change the cell d at runtime and the table is already well formatted, for some reasons, I just wish change the cell d at last step, therefore, I want to use div to insert yellow bg without change it parent td class.
Final solution: https://jsfiddle.net/0khjqdh0/
<table class="XXX" >
<tr class="header">
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="d1">
<td>a</td>
<td>b</td>
</tr>
<tr class="d0">
<td>c
</td>
<td>
<div class="special_class"> d </div>
</td>
</tr>
</table>
.XXX table{
border:0px;
border-collapse:collapse;
padding:0px;
}
.XXX tr.header td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
font-weight: bold;
border:1px solid #C0C0C0;
color:#FFFFFF;
background-color:#4F81BD;
border-collapse:collapse;
padding:5px;
}
.XXX tr.d0 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
background-color:#E1EEF4;
border:1px solid #C0C0C0;
padding:5px;
white-space:nowrap;
}
.XXX tr.d1 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
background-color:#FFFFFF;
border:1px solid #C0C0C0;
padding:5px;
white-space:nowrap;
}
.XXX div.special_class {
background-color:yellow;
}
Buddy, please check this - http://jsfiddle.net/afelixj/f2pb227a/4/
.XXX div.special_class {
background-color:yellow;
padding: 5px;
margin: -5px;
}
You can put the class on the cell:
<td class="special_class">
<div> d </div>
</td>
Then set the style on the cell and make it specific enought to override the existing style:
.XXX tr.d0 td.special_class {
background-color:yellow;
}
Demo: http://jsfiddle.net/f2pb227a/1/
try to apply background-color:yellow; to parent td or remove padding from td cell and give that padding to child div
You just need to give class not to child element of the td, but to exact td who's background-color you want to change:
<td class="special_class">
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 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;