Помогите с css

[IOzer]

Подскажите пжалста как реализовать в css чтоб при наведении курсора на отдельную таблицу она выделялась другим цветом? в общем также как на этом сайте

_http://mon1toring.ru/

как я понял что тут это делается two-tiers.css :

/*
	"Two Tiers"
	for BF2S.com
	by Jeff Minard
*/


a {
color: #a9a89c;
text-decoration: none;
border-bottom: 1px dotted #595853;
}

A:hover {
 color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */
 text-decoration: underline; /* Добавляем подчеркивание */
}

a img {
border: 0;
vertical-align: middle;
}

hr {
display: none;
}

a img {
border: 0;
vertical-align: middle;
}

hr {
display: none;
}

html, body {
margin: 0;
padding: 0;
color: #c0bcb0;
font: normal 11px Verdana;
}

body{
text-align: center;
}


/*
* home page everytrhing
*/

body.home #secondhome {
display: none;
}

body.home {
background: #474642 url('../images/bg.gif') top center repeat-y;
}

body.home #page-1 {
width: 980px;
margin: 0 auto;
text-align: left;
position: relative;
}

body.home #page-3 {
}

body.home h1 {
display: none;
}

body.home #stats-col {
float: left;
margin-top: 70px;
width: 400px;
}

body.home #community-col {
float: left;
width: 400px;
margin-top: 70px;
margin-left: 180px;
}

body.home .col-section {
padding: 0 20px;
}

body.home table.stat {
width: 100%;
}

body.home table.statt {
width: 48%;
}

body.home #navitems {
position: absolute;
text-align: center;
top: 240px;
left: 406px;
line-height: 14px;
_line-height: 7px;
margin: 0;
padding: 0;
list-style: none;
width: 169px;
}

body.home #navitems a {
display: block;
padding: 4px 0;
border: 0;
padding-left: 2px;
_line-height: 0px;
}

body.home #navitems a:hover {
color: #f2efe6;
background: #32312d;
}

body.home h2 {
font: normal 28px/.8em Slyphaen, Times, serif;
letter-spacing: -.025em;
border-bottom: 1px solid #c2bfb6;
margin: 1em 0 0 0;
padding: 0;
clear: both;
}

body.home .id p {
margin: .2em 0 1em 0;
padding: 0;
line-height: 14px
}


body.home #getstats{
display: none;
}

body.home #donatenow {
position: absolute;
top: 430px;
left: 460px;
}


#donatenow a,
#donatenow form,
#donatenow input {
margin: 0;
padding: 0;
font-size: 9px;
}


#footer {
clear: both;
text-align: center;
padding: 30px 0;
}

body.home #footer {
padding: 30px 430px;
}

body.home #wiki img,
body.home #ubar-home img,
body.home #irc img {
float: right;
}

body.home #get-stats form {
margin: 0;
padding: 0;
}

.input, body.home #get-stats form input,
body.home #find-player form input {
font: bold 10px Verdana;
border: 1px solid #000;
border-bottom: 1px solid #555;
border-right: 1px solid #555;
background: #555555;
padding: 4px 6px;
margin: 0;
color: #fff;
}

.button, body.home #get-stats form input.btn,
body.home #find-player form input.btn {
font: bold 10px Verdana;
padding: 3px 6px;
width: auto;
background: #666666;
border: 1px solid #555555;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
color: #fff;
}


body.home #top-players,
body.home #mlb-short {
float: left;
width: 50%;
padding: 0;
margin: 0;
}

body.home #top-players {
width: 55%;
}

body.home #mlb-short {
width: 45%;
}

body.home #top-players h2,
body.home #mlb-short h2 {
font-size: 21px;
}

body.home #top-players .id,
body.home #top-players h2 {
margin-left: 20px;
}

body.home #mlb-short .id, 
body.home #mlb-short h2 {
margin-left: 10px;
margin-right: 20px;
}

body.home #top-players ol,
body.home #top-players li,
body.home #mlb-short ul,
body.home #mlb-short li {
margin: 0;
padding: 0;
}

body.home #top-players ol {
margin-top: 2px;
margin-left: 30px;
line-height: 14px;
}

body.home #mlb-short ul {
margin-top: 2px;
list-style: none;
}

body.home #mlb-short ul .oo {
float: right;
position: relative;
top: 6px;
}

body.home #mlb-short p {
float: right;
}

body.home #server{
clear: both;
padding-top: 1px;
}

body.home #find-player {
padding-bottom: 15px;
}

body.home #branzone-ad {
text-align: center;
}

/* 
* inner pages basic
*/


body.inner #page-1 {
background: #3c3a36 url('../images/inner-body-bg.gif') 0 0 repeat-y;
}

html.inner {
background: #3c3a36 url('../images/background.jpg') repeat;
}

body.inner  {
background: #3c3a36 url('../images/background.jpg') repeat;
}

body.inner #page-1 {
width: 997px;
margin: 0 auto;
text-align: left;
position: relative;
}

body.inner #page-2 {
background: url('../images/inner-header.gif') top center no-repeat;
}


#secondhome {
position: absolute;
top: 0px;
right: 90px;
display: block;
width: 70px;
height: 85px;
border: 0;
}


body.inner #navitems {
position: absolute;
top: 10px;
left: 10px;
margin: 0;
padding: 0;
list-style: none;
}

body.inner #navitems li {
float: left;
}

body.inner #navitems li a {
padding: 0 4px;
font-weight: bold;
font-size: 10px;
}

body.inner #getstats {
position: absolute;
top: 33px;
left: 14px;
}


body.inner #getstats form,
body.inner #getstats input,
body.inner #getstats label {
margin: 0;
padding: 0;
border: 0;
float: left;
margin-right: 5px;
}

body.inner #getstats label {
color: #c2bfb6;
font: bold 10px Verdana, sans-serif;
display: block;
border: 0;
padding-top: 1px;
}


body.inner #getstats input {
background: transparent;
color: #fff;
font: bold 10px Verdana, sans-serif;
width: 100px;
padding: 1px;
height: 11px;
border-bottom: 1px dotted #c2bfb6;
}

body.inner #getstats input.btn {
background: transparent;
color: #fff;
font: bold 10px Verdana, sans-serif;
border: 1px solid #bbb;
width: 30px;
padding: 0;
height: 16px;
}

body.inner #getstats input:hover,
body.inner #getstats input:active,
body.inner #getstats input:focus {
}



body.inner #donatenow {
position: absolute;
top: 7px;
right: 6px;
_right: 10px;
}



body.inner h1 {
margin: 0;
color: #f0f0f0;
display: block;
height: 55px;
width: 960px;
padding: 65px 0 0 10px;
font: normal 32px Sylfaen, "Times New Roman", Times, serif;
letter-spacing: .02em;
}

body.inner h1 img {
float: left;
margin:0;
padding:0;
margin-top: -15px;
margin-left: -15px;
}

body.inner h1 small {
font-size: 14px;
}

body.inner #content {

padding: 10px;
}




/*
* 'tables' of interest
*/


table.stat,
table.stat td,
table.stat a {
color: #fff;
}

table.stat {
border: 1px solid #111;
border-bottom: 0;
margin: 4px;

}

table.stat th {
padding: 4px 4px;
background: #0e1a26 url('../images/nav-slice.jpg');
border: 0;
border-bottom: 1px solid #111;
text-align: left;
}

table.stat tr > th {
font: normal 16px Verdana;
}

table.stat th + th {
padding: 8px 4px 4px 4px;
font: bold 11px Verdana;
}

table.stat td {
padding: 4px 4px;
border: 0;
background: #5c5f52;
border-bottom: 1px solid #000000;
}

table.stat tr > td {
background: #0e1a26;
border-right: 1px solid #333;
font-weight: bold;
}

table.stat td + td {
background: #474642;
border-right: 0;
font-weight: normal;

}

table.stat tr.favorite > td,
table.stat tr.favorite > td + td {
background: #676a5e;
border: 2px solid #333;
border-top: 1px solid #999;
border-right: 0;
border-left: 0;
padding: 5px 4px;
}


table.stat tr.totals> td,
table.stat tr.averages> td {
background: #3d4334;
}

table.stat tr.totals> td + td,
table.stat tr.averages> td + td {
background: #4f5546;
}

table.stat tr th,
table.stat tr td{
}



table.basic-stat {
border: 1px solid #111;
margin: 5px;
width: 960px;
}

table.basic-stat th {
padding: 4px 4px;
background: #383c33;
text-align: left;
border-bottom: 1px solid #111;
}

table.basic-stat tr > th {
font: normal 17px Verdana;
color: #fff;
}

table.basic-stat th + th {
}

table.basic-stat td {
padding: 2px 4px;
border: 0;
background: #474642;
}

table.basic-stat tr > td {
}

table.basic-stat td + td {
}



div.basic-stat {
border: 1px solid #111;
border-bottom: 0;
margin: 5px;
width: 960px;
}

div.basic-stat h2 {
font-size: 18px;
padding: 4px 4px;
background: #383c33;
border: 0;
border-bottom: 1px solid #666;
text-align: left;
}

div.basic-stat .id {
padding: 2px 4px;
border: 0;
border-top: 1px solid #555;
border-bottom: 1px solid #444;
background: #5c5f52;
}



/*
* player profile
*/


#prefers {
float: left;
width: 230px;
height: 285px;
position: relative;
}

#prefCol {
float: left;
width: 230px;
height: 100px;
position: relative;
text-align: center;
}

#prefers img {
position: absolute;
}

#prefers img {
border: 1px solid #666;
margin: 3px;
right: 2px;
}

#prefers img.weapon{
top: 3px;
}
#prefers img.vehicle{
top: 73px;
}
#prefers img.kit{
top: 143px;
}
#prefers img.map{
top: 213px;
}

#prefers img#flag{
top: 2px;
left: 2px;
}

#prefers img.solider {
top: 0px;
left: 0;
right: auto;
width: 190px;
height: 280px;
}

#prefCol p {
}


#profile {
width: 740px;
border-top: 2px solid #474642;
}

/* the following selector is Opera only */
@media all and (min-width: 0px){
	#profile { width: 740px; }
}



#profile td {
width: 33%;
border-right: 6px solid #474642;
}

#profile th {
width: 33%;
background: #070602;
border-bottom: 2px solid #474642;
border-right: 6px solid #474642;
padding: 10px 0;
text-align: center;
}

#profile tr > td,
#profile tr > th  {
width: 28%;
}





#profile table,
#profile td,
#profile th,
#profile a {
color: #fff;
}
#profile table {
width: 100%;
margin: 0;
}

#profile table {
border: 1px solid #111;
border-top: 0;
}

#profile table td {
width: 65%;
padding: 3px 4px;
border: 0;
border-top: 1px solid #222c22;
background: #5c5f52;
}

#profile table th {
padding: 4px 0;
background: #383c33;
border: 0;
border-top: 1px solid #222c22;
}

#profile table td + td {
text-align: right;
}

.awards-row img { border: 0; padding: 0; margin: 0; }
.extra-space div.award-inline { margin-right: 5px; }




#buddy {
position: absolute;
top: 90px;
right: 385px;
_right: 395px;
}

#buddy img,
#buddy a {
border: 0;
}

/*
* little fixes
*/


.col {
width: 50%;
margin: 0;
padding: 0;
float: left;
}


.col table {
width: 98%;
}



#ubar img.border {
border: 1px solid #111;
}

#ubar a:hover {
text-decoration: none;
}

#ubar {
width: 835px;
margin-left: auto;
margin-right: auto;
}

#ubar table {
width: 100%;
margin-left: 0;
margin-right: 0;
}

#ubar .basic-stat {
border: 0;
margin: 20px 0;
}

#ubar .basic-stat tr th {
padding: 6px 10px;
margin: 0;
border: 1px solid #111;
background: #1f241a;
}

#ubar .basic-stat tr + tr th {
border: 0;
background: transparent;
}

#ubar .basic-stat tr + tr th {
}


#ubar .basic-stat tr td {
background: transparent;
border: 0;
}


#ubarnav {
margin: 3px 0 0 0;
padding: 0;
list-style: none;
width: 835px;
margin: 0px auto;
height: 30px;
}

#ubarnav li {
float: left;
width: 119px;
background: #d8d8d8;
}

#ubarnav li.li1 {
width: 121px;
}

#ubarnav li a {
display: block;
_height: 1px;
margin: 0;
border: 0;
padding: 3px;
text-align: center;
color: #666;
font-weight: bold;
}

#ubarnav li a.current,
#ubarnav li a:hover  {
background: #1f241a;
color: #fff;
}

#ubar table.stat ul ,
#ubar table.basic-stat ul {
padding: 0 0 0 15px;
margin: 0;
}

#ubar img.badge {
float: left;
margin: 0 20px 0 0;
border: none;
}

#ubar h3 {
font: bold 16px Verdana;
margin: 0;
padding: 0;
}





/*
* comparison page
*/

.p1 { color: #3ff; }
.p2 { color: #ff3; }
.pe { color: #fff; }

#pc #profile {
width: 970px;
margin: 5px;
}

#pc-header {
width: 360px;
margin: 10px 70px;
}




#pgad {
position: absolute;
top: 425px;
right: 30px;
}

#gadhome {
position: absolute;
top: 350px;
left: 14px;
}




.poof {
font-size: 0px;
color: #474642;
}


/*
* TTA
*/

.clear { clear: both; }

.progressbar {
background: #474642;
float: left;
border: 1px solid #333;

width: 98%; 
margin: 0; 
padding: 0;
margin-top: 2px;
}

#tta .progressbar {
width: 800px; 
}

.progressbar div {
background: #476642;
font-size: 10px;
}

.progressbar div span {
padding: 0 5px;
}

.stat-need {
font-style: italic;
}


.qaa {
margin: 20px 20%; padding: 0;
}


.qaa dt {
margin: 0; padding: 0;
font-size: 14px;
font-weight: bold;
color: #e2dfd6;
}

.qaa dd {
margin: 0; padding: 0 0 30px 0;
}

#trend {
border: 1px solid #000;
width: 970px;
margin: 5px auto;
}

#trendmenu {
text-align: center;
}

strong.achieved {
color: #3f3;
}

strong.notachieved {
color: #a00;
}



div.award-inline {
float: left;
width: 42px;
height: 42px;
position: relative;
}

div.award-inline2 {
float: left;
position: relative;
}

div.award-inline b {
display: none;
}

div.award-pop {
display: none;
position: absolute;
top: 40px;
left: 0;
z-index: 50;
width: 420px;
background: #444643;
border: 4px solid #383c33;
min-height: 140px;
_height: 140px;
_line-height: 10px;
}

div.award-pop2 {
display: none;
position: absolute;
top: 20px;
left: 0;
z-index: 50;
background: #444643;
min-height: 140px;
_height: 140px;
_line-height: 10px;
}

div.award-pop li {
_padding-top: -5px;
line-height: 9px;
}

div.dir-left {
left: 30px;
right: auto;
}

div.dir-right {
left: auto;
right: 30px;
}


div.award-inline:hover div.award-pop {
display: block;
}

div.award-inline2:hover div.award-pop2 {
display: block;
}

div.award-pop p,
div.award-pop ul {
padding: 5px;
margin: 0 0 0 132px;
list-style: none;
}

div.award-pop p.stat-need {
clear: none;
margin: 0;
padding: 0 0 5px 2px;
font-size: 10px;
}

div.award-pop img {
position: absolute;
top: 0;
left: 0;
border-right: 4px solid #383c33;
border-bottom: 4px solid #383c33;
}

div.award-pop2 img {
position: absolute;
top: 0;
left: 0;
}

#history-menu ul {
padding: 0;
margin: 0;
list-style: none;
}

#history-menu ul li {
float: left;
width: 108px;
}

#history-menu ul li a {
display: block;
_height: 1px;
border: 0;
text-decoration: none;
padding: 5px 0;
margin: 1px;
border: 1px solid #232826;
border-bottom: 1px solid #585754;
border-right: 1px solid #585754;
background: #3c3a36;
text-align: center;
color: #fcfcfc;
}


#history-menu ul li a:hover,
#history-menu ul li.selected a {
background: #4c4a46;
}

.award-inline div ul li {
padding-bottom: 4px;
font-weight: normal;
}








.eligible img { border-bottom: 4px solid #333; }

#wide-google-ad {
float: right;
margin: 5px;
margin-right: 13px;
}

#stats-nav {
position: absolute;
top: 96px;
right: 20px;
}

#stats-nav,
#stats-nav li {
margin: 0;
padding: 0;
list-style: none;
}

#stats-nav li {
float: left;
}

#stats-nav li a {
display: block;
_height: 1px;
padding: 1px 3px;
width: 109px;
text-align: center;
margin: 0 3px;
border: 1px solid #000;
border-bottom: 1px solid #171612;
background: #373632;
color: #999;
font-weight: bold;
}

#stats-nav li a:hover,
#stats-nav li.current a {
border: 1px solid #000;
background: #474642;
color: #fff;
border-bottom: 1px solid #474642;
}

#mlb-instructions {
padding-left: 20px;
padding-right: 20px;
}

span.px24 {
font: normal 16px Verdana;
letter-spacing: 1px;
font-weight: bold;
}

span.score {
font: normal 32px Verdana;
letter-spacing: 1px;
font-weight: bold;
}

span.mgold {
padding-top: 7px;
padding-bottom: 2px;
border-left: 5px solid gold;
}

span.msil {
padding-top: 7px;
padding-bottom: 2px;
border-left: 5px solid silver;
}

span.mbron {
padding-top: 7px;
padding-bottom: 2px;
border-left: 5px solid #A67D3D;
}
span.zvanie {
position: relative;
top: -16px;
left: 10px;
font-size: 14px;
}
#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: -16px;
background-color: #1E1C18;
width: 150px; /*Default width of hint.*/ 
padding: 3px;
color: #CCC;
border:2px solid #3C3A36;
font:normal 11px Verdana;




}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
margin: 3px 8px;
CURSOR: help;
}


.textbox {
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size : 10px;
	color : #000;
	background-color : #f8f8f8;
	border : 1px solid #ccc;
}

Edited December 14, 2009 by IOzer

[Игорь Ермаков]

Ну извращения никто не отменял) Почему бы к примеру неприсваивать ссылкам релятивское или абсолютное позиционирование и менять координаты?)

Для ИЕ в теории можно в экспешнах намутить многое…

Эй, тут челу бы с элементарщиной разобраться какие к чёрту экспрешенлы? Ясен пень с помощью CSS можно столько иллюзий наделать даже на спор можно кто больше способов придумает, но зачем когда можно просто поменять разметку?

[hf3]

Сам сталкивался, когда попросили поколдовать над форумом) А доступ только к КСС…

[121990]

hf3 :)

Я вообще-то твореческа личность, и в высшей матемитике ничего не соображаю.

Какой движок то у блога?

Я же выложил, где мой блог....

Я вообще без понятия что такое движок.

Где поменять разметку?

Edited December 15, 2009 by 121990

[Игорь Ермаков]

Короче либо навсегда забей на это дело, либо запасись терпением и иди сюда: http://stepbystep.htmlbook.ru/

[121990]

Я так понял сам не знаешь, как сделать. Тебе же не тяжело было бы объянить, такую простую для тебя вещь.

[Игорь Ермаков]

Ога, привыкай к прелестям жизни, тут никто ничего не знает, все только набивают по 1000 постов, а потом имеют мозги новичкам, чтобы те в конец запутались и потеряли веру в себя, от гад раскусил цель нашего форума.

[121990]

Ога, привыкай к прелестям жизни, тут никто ничего не знает, все только набивают по 1000 постов, а потом имеют мозги новичкам, чтобы те в конец запутались и потеряли веру в себя, от гад раскусил цель нашего форума.

Отговорка Вассерман!

[Justnewone]

Отговорка Вассерман!

Все именно так. Готового кода не будет.

Хотя, бывают альтруисты, но я в гуголь не посылал, заметьте )))