Моя верхняя панелька

У меня щас так


<?

echo '<nav class="fixed">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr valign="top">
<td width="20%"><a style="text-align:center;" class="re" href="'.ROOT.'"><img src="'.ROOT.'styles/'.STYLE.'/images/9.png" alt="Я"></a></td>
<td width="20%"><a style="text-align:center;" class="pa" href="'.ROOT.'mail"><img src="'.ROOT.'styles/'.STYLE.'/images/2.png" alt="Почта"> '.$sms.'</a></td>
<td width="20%"><a style="text-align:center;" class="re" href="'.ROOT.'my/lenta.php?id='.$ya['id'].'"><img src="'.ROOT.'styles/'.STYLE.'/images/5.png" alt="Лента">'.$lenta.'</a></td>
<td width="20%"><a style="text-align:center;" class="pa" href="'.ROOT.'aut.php?do=off"><img src="'.ROOT.'styles/'.STYLE.'/images/3.png" alt="Выход"></a></td></tr></table></nav>';

?>

Как сделать правельно

А стиль ?
Добавлено 02.05.16 в 13:04:46:
Класса fixed

.re{
background:#2c97dd;
color: #fff;
border-bottom:4px solid #e4dddd;
padding:1px;
display:block;
}
.re:hover{
border-bottom:2px solid #2c97dd;
}
.pa{
background:#2c97dd;
color: #fff;
border-bottom:4px solid #e4dddd;
padding:1px;
display:block;

}
.pa:hover{
border-bottom:2px solid #2c97dd;
}

Korsakov, ясно, сейчас сделаю.

.fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
display: block;
width: 100%;
height: 50px;

}

<?

echo '<div class="panel"><nav class="fixed">

<table cellspacing="0" cellpadding="0" border="0" width="100%">

<tr valign="top">

<td width="20%"><a style="text-align:center;" class="re" href="'.ROOT.'"><img src="'.ROOT.'styles/'.STYLE.'/images/9.png" alt="Я"></a></td>

<td width="20%"><a style="text-align:center;" class="pa" href="'.ROOT.'mail"><img src="'.ROOT.'styles/'.STYLE.'/images/2.png" alt="Почта"> '.$sms.'</a></td>

<td width="20%"><a style="text-align:center;" class="re" href="'.ROOT.'my/lenta.php?id='.$ya['id'].'"><img src="'.ROOT.'styles/'.STYLE.'/images/5.png" alt="Лента">'.$lenta.'</a></td>

<td width="20%"><a style="text-align:center;" class="pa" href="'.ROOT.'aut.php?do=off"><img src="'.ROOT.'styles/'.STYLE.'/images/3.png" alt="Выход"></a></td></tr></table></nav></div>';

?>

/* CSS */

.panel {
height: 25px;
}

.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
}

.re, .pa {
background-color: #2c97dd;
font-weight: bold;
display: block;
border-bottom: 2px solid transparent;
color: #fff;
}

.re:hover, .pa:hover {
border-bottom: 2px solid #2c97dd;
}

Изм. 3 раз. / Посл. изм.

Cat 22.38

(2 май 2016, 13:23)

Korsakov, чуть подправил код.

Кот, спасибо тебе ,все теперь все четко !

Просто дивы re и pa были разные немного , щас одинаковые и руки не доходят исправить

Korsakov, так подправь сейчас, либо .re либо .pa, и я в коде исправлю.