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;
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>
I'm floating two divs side by side. I can't set the properties for the left div as they seem to be inherited from the right div. I'm guessing I"m just overlooking something here, but what do I need to do so I they aren't inherited?
div.main - content {
width: 1500 px;
}
div.left {
float: left;
width: 300 px;
overflow: hidden;
background - color: #ffffff;
}
table.;
left {
border - collapse: collapse;
width: 300 px;
}
table.left, td {
border: 1 px hidden black;
padding: 5 px;
background - color: #ffffff;
color: #000000;
}
div.right {
float:right;
width:1200px;
overflow:hidden;
}
table.right {
border-collapse:collapse;
width:765px;
}
table.right, th {
border: 1px solid black;
padding:5px;
background-color:# df1e37;
color: #ffffff;
}
table.right, td {
border: 1 px dotted# cccccc;
padding: 5 px;
background - color: #ffffff;
color: #000000;
}
<div class="main-content">
<div class="left">
<table class="left">
<tr>
<td>Left content here</td>
</tr>
</table>
</div>
<div class="right">
<table class=right>
<tr>
<td>Right content here</td>
</tr>
</table>
</div>
</div>
table.;left should be table.left, for starters. Also, as #3rror404 points out, the comma in your selectors may not mean what you think:
table.left, td
means "a table element with class left, and also td elements", whereas
table.left td
means "a table element's children tds".
After the semicolon change, though, things look OK for me. A possible change you may consider is not putting classes on the tables:
<div class="left">
<table>
<tr><td>Left content here</td></tr>
</table>
</div>
and accessing them this way:
div.left table { ... }
or
div.left > table { ... }
...which IMO would eliminate a possible source of future confusion.
There were a few typo in your code
table.;left => .left table
and a few more similar to that... here is the new snippet
div.main-content {
width:1500px;
}
.left {
float:left;
width:500px;
overflow:hidden;
background-color:rgba(123,123,123,0.1);
}
.left table {
background-color: #feade2;
border-collapse:collapse;
width:300px;
}
.left table td {
color:#000000;
}
.right {
float:right;
width:1000px;
overflow:hidden;
background-color:rgba(200,200,200,0.3);
}
.right table {
border-collapse:collapse;
width:765px;
}
.right table th {
border: 1px solid black;
padding:5px;
color:#ffffff;
}
.right table td {
background-color:blue;
color:red;
}
<div class="main-content">
<div class="left">
<table>
<tr><td>Left content here</td></tr>
</table>
</div>
<div class="right">
<table>
<tr><td>Right content here</td></tr>
</table>
</div>
</div>
I added some colors to differentiate various boundaries... you can change the css the way you want it.
you also dont need div.left or div.right . Just use .left or .right and just specify the class on the div...the table will inherit the classes of the div. Hope this helps
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
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;
}