Проблемка с id в CSS

[wangog]

Делаю меню для сайта одно вертикальное другое горизонтальное !
Вертикальное работает на ура , это hp,bl,pr
Но вот горизонтальное отображаются неправильно , а точнее отображается только одно из двух , а вернее house,email

Мой CSS :

Спойлер: Показать +

Код: Выделить всё

#hp {display: block;background-image: url(/template/buton/hp1.png);width: 40px;height: 104px;}
#hp:active {display: block;background-image: url(/template/buton/hp3.png);width: 40px;height: 104px;}
#hp:visited {display: block;background-image: url(/template/buton/hp3.png);width: 40px;height: 104px;}
#hp:hover {display: block;background-image: url(/template/buton/hp2.png);width: 40px;height: 104px;}

#bl {display: block;background-image: url(/template/buton/bl1.png);width: 40px;height: 104px;}
#bl:active {display: block;background-image: url(/template/buton/bl3.png);width: 40px;height: 104px;}
#bl:visited {display: block;background-image: url(/template/buton/bl3.png);width: 40px;height: 104px;}
#bl:hover {display: block;background-image: url(/template/buton/bl2.png);width: 40px;height: 104px;}

#pr {display: block;background-image: url(/template/buton/pr1.png);width: 40px;height: 104px;}
#pr:active {display: block;background-image: url(/template/buton/pr3.png);width: 40px;height: 104px;}
#pr:visited {display: block;background-image: url(/template/buton/pr3.png);width: 40px;height: 104px;}
#pr:hover {display: block;background-image: url(/template/buton/pr2.png);width: 40px;height: 104px;}



#house {display: block;background-image: url(/template/otherimg/house.png);width: 16px;height: 16px;}
#house:active {display: block;background-image: url(/template/otherimg/house_link.png);width: 16px;height: 16px;}
#house:visited {display: block;background-image: url(/template/otherimg/house_link.png);width: 16px;height: 16px;}
#house:hover {display: block;background-image: url(/template/otherimg/house_go.png);width: 16px;height: 16px;


#email {display: block;background-image: url(/template/otherimg/email.png);width: 16px;height: 16px;}
#email:active {display: block;background-image: url(/template/otherimg/email_edit.png);width: 16px;height: 16px;}
#email:visited {display: block;background-image: url(/template/otherimg/email_open.png);width: 16px;height: 16px;}
#email:hover {display: block;background-image: url(/template/otherimg/email_go.png);width: 16px;height: 16px;

Уже все переправил по несколько раз , пробовал и так и сяк , но всё ровно отображаются только то горизонтальное меню что идет первое в CSS
Народе помогите очень прошу !

[Youzer]

а код где? и стили для пунктов меню тоже дайте, а не только для ссылок (т.е. те, что отвечают за расположение на странице).

вот смотрю у вас стили для разных типов меню абсолютно идентичны. подозреваю, что проблема может быть в этом

Код: Выделить всё

display: block;

такой параметр используется для блочного отображения встроенных элементов (т.е. "один под другим").
попробуйте его убрать совсем. либо заменить на

Код: Выделить всё

display: inline;

з.ы. это только предположения, пока кода не увижу - точнее не скажу

[wangog]

У меня на сайте два файла с CSS , вот второй

Спойлер: Показать +

Код: Выделить всё

body {background:#000000; margin:0px; padding:0px;text-align:center;}
td {font-family:verdana,arial,helvetica; font-size:8pt; color:#282828}
.footer { color:#a9a9a9;}
.footer a:hover { color:#8e8eac;}
.footer1 { color:#383838;padding:30px 0px 0px 0px;text-align:center;}
.copy {font-size:8pt;}
a:link {text-decoration:underline; color:#cccccc;}
a:active {text-decoration:underline; color:#cccccc;}
a:visited {text-decoration:underline; color:#cccccc;}
a:hover {text-decoration:underline; color:#000000;}

.eDetails {background-image: url(/template/otherimg/detlais.png) no-repeat scroll center top;font-family:Verdana,Tahoma,Arial,Sans-Serif;color:#ffffff;padding-bottom:5px;padding-top:3px; text-align:center;font-size:7pt;}

.eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:12px;font-weight:bold;color:#9C080D; padding: 3px; background:url('/template/otherimg/bgetitle.gif') center #FFC2D1;}
.eTitle a:link {text-decoration:none; color:#9d4f52;}
.eTitle a:visited {text-decoration:none; color:#9d4f52;}
.eTitle a:hover {text-decoration:none; color:#000000;}
.eTitle a:active {text-decoration:none; color:#9d4f52;}

А вот html

Спойлер: Показать +

Код: Выделить всё

<html>
  <head>
  <title></title>
 <link type="text/css" rel="StyleSheet" href="/template/css.css" />
 <link type="text/css" rel="StyleSheet" href="/template/link.css" />
  </head>
  <body>
  
<table style="width: 100%; border-collapse: collapse; height: 100%;" align="" width="">
  <tbody>
    <tr>
      <td style="vertical-align: top;">
      </td>
      <td style="vertical-align: top; width: 1024px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
        <table style="width: 1024px; height: 1000px; border-collapse: collapse;" align="center" cellpadding="0" cellspacing="0" width="">
          <tbody>
            <tr>
              <td style="background: transparent url(http://wangog.ucoz.lv/template/images/1.png) no-repeat scroll right top; vertical-align: top; text-align: left; letter-spacing: 0pt; word-spacing: 0pt; width: 238px;">
              </td>
              <td style="vertical-align: top; width: 528px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                <table style="width: 528px; height: 1000px; border-collapse: collapse;" align="center" cellpadding="0" cellspacing="0" width="">
                  <tbody>
                      <tr>
                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-1.png) no-repeat scroll center top; vertical-align: top; height: 285px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                        </td>
                      </tr>
                      <tr>
                        <td style="vertical-align: top; height: 40px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                          <table style="width: 528px; height: 40px; background-image: url(http://wangog.ucoz.lv/template/images/2-2-0.png); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; border-collapse: collapse;" align="" width=""><tbody><tr>
                          <td style="vertical-align: top; width: 50px; height: 40px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">&nbsp;</td>
                          <td style="vertical-align: top; width: 452px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">&nbsp;</td>
                          <td style="vertical-align: top; width: 30px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">&nbsp;</td></tr></tbody></table>
                        </td>
                      </tr>
                      <tr>
                        <td style="vertical-align: top; height: 520px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                          <table style="width: 528px; height: 520px; border-collapse: collapse;" align="center" cellpadding="0" cellspacing="0" width="">
                            <tbody>
                              <tr>
                                <td style="vertical-align: top; width: 528px; height: 70px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                                  <table style="width: 528px; height: 30px; border-collapse: collapse;" align="" cellpadding="0" cellspacing="0" width="">
                                    <tbody>
                                      <tr>
                                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-1-1.png) no-repeat scroll right top; vertical-align: top; width: 70px; height: 30px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                                        </td>
                                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-1-2.png) repeat-x scroll right top; vertical-align: top; height: 30px; text-align: right; letter-spacing: 0pt; word-spacing: 0pt;padding: 0px 0px 0px 0px;">
 <a id="email" title="Связь со мной " href="/index/2"></a>&nbsp;<a id="house" title="Главная страница" href="$HOME_PAGE_LINK$"></a>

</td>
                                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-1-3.png) no-repeat scroll left top; vertical-align: top; width: 50px; height: 30px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <table style="width: 528px; height: 40px; background-image: url(http://wangog.ucoz.lv/template/images/2-3-1-0.png); background-repeat: repeat-y; background-attachment: scroll; background-position: left top; border-collapse: collapse;" align="" cellpadding="0" cellspacing="0" width="">
                                    <tbody>
                                      <tr>
                                        <td style="vertical-align: top; width: 40px; height: 40px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;"></td>
                                        <td style="vertical-align: top; width: 468px; height: 40px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                                        <script type="text/javascript"><!--
google_ad_client = "pub-9662705147858988";
/* 468x15, для wangog.ucoz.lv */
google_ad_slot = "8276353241";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                                        </td>
                                        <td style="vertical-align: top; width: 20px; height: 40px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;"></td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                              <tr>
                                <td style="vertical-align: top; width: 528px; height: 380px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                                  <table style="width: 528px; height: 380px; border-collapse: collapse;" align="center" cellpadding="0" cellspacing="0" width="">
                                    <tbody>
                                      <tr>
                                      <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-2-1-1.png) repeat-y scroll left top; vertical-align: top; width: 40px; height: 380px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                                        <a id="hp" title="Главная страница"  href="$HOME_PAGE_LINK$"></a>
                                        <a id="bl" title="Мой Блог"  href="/blog/"></a>
                                        <a id="pr" title="Моё Портфолио"  href="/publ/"></a>
                                      </td>
                                      <td style="background: rgb(255, 255, 255) url(http://wangog.ucoz.lv/template/images/2-3-2-2.png) repeat scroll left top; vertical-align: top; width: 468px; height: 380px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;padding: 2px 1px 3px 10px; ">[BODY]</td>
                                      <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-2-3.png) repeat-y scroll left top; vertical-align: top; width: 20px; height: 380px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;"></td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                              <tr>
                                <td style=" vertical-align: top; width: 528px; height: 70px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                                  <table style="width: 528px; height: 50px; border-collapse: collapse;" align="center" cellpadding="0" cellspacing="0" width="">
                                    <tbody>
                                      <tr>
                                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-3-1.png) no-repeat scroll right top; vertical-align: top; width: 40px; height: 50px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;"></td>
                                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-3-2.png) no-repeat scroll center top; vertical-align: top; width: 468px; height: 50px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;"><div class="footer1">Версия № 1.0.0  | $SITE_NAME$ </div></td>
                                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-3-3.png) no-repeat scroll left top; vertical-align: top; width: 20px; height: 50px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;"></td>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <table style="border-collapse: collapse;" align="" cellpadding="0" cellspacing="0" height="20" width="528">
                                    <tbody>
                                      <tr>
                                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-3-4.png) no-repeat scroll left top; vertical-align: top; width: 40px; height: 20px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;"></td>
                                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-3-5.png) no-repeat scroll left top; vertical-align: top; width: 468px; height: 20px; text-align: center; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt;"><div class="footer">$POWERED_BY$ и Я этим горжусь ! </div></td>
                                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-3-3-6.png) no-repeat scroll left top; vertical-align: top; width: 20px; height: 20px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;"></td>
                                      </tr>
                                    </tbody>
                                  </table>  
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td style="background: transparent url(http://wangog.ucoz.lv/template/images/2-4.png) no-repeat scroll center top; vertical-align: top; height: 155px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;">
                        </td>
                      </tr>
                  </tbody>
                </table>
              </td>
            <td style="background: transparent url(http://wangog.ucoz.lv/template/images/3.png) no-repeat scroll left top; vertical-align: top; width: 258px; text-align: left; letter-spacing: 0pt; word-spacing: 0pt;"></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="vertical-align: top;">
      </td>
    </tr>
  </tbody>
</table>


  </body>
</html>
<!-- <popup> --><!-- </popup> -->

[wangog]

чё некто помочь неможет ?!

[Youzer]

для начала нужно ошибки подправить:

#house {display: block;background-image: url(/template/otherimg/house.png);width: 16px;height: 16px;}
#house:active {display: block;background-image: url(/template/otherimg/house_link.png);width: 16px;height: 16px;}
#house:visited {display: block;background-image: url(/template/otherimg/house_link.png);width: 16px;height: 16px;}
#house:hover {display: block;background-image: url(/template/otherimg/house_go.png);width: 16px;height: 16px;}


#email {display: block;background-image: url(/template/otherimg/email.png);width: 16px;height: 16px;}
#email:active {display: block;background-image: url(/template/otherimg/email_edit.png);width: 16px;height: 16px;}
#email:visited {display: block;background-image: url(/template/otherimg/email_open.png);width: 16px;height: 16px;}
#email:hover {display: block;background-image: url(/template/otherimg/email_go.png);width: 16px;height: 16px;}

а для горизонтального отображения... тут подумать надо. пока не соображу

[BL_AF]

wangog, код жестокий.

[wangog]

я вот слаб в этом вот и практекуюсь !

[Task]

Жесть
Так вообще никто горизонтальные меню не делает.
<li>

[Youzer]

почему-то многие из начинающих так боятся списков, предпочитая просто выводить ссылки, прописывая их в одну строку (ну или в столбик, если нужно).

как правильно заметил предыдущий оратор, меню принято создавать используя <ul> как контейнер и <li> для элементов. если будут трудности, можно взять код готового меню и на его примере сделать по-своему.