Одностраничьный сайт, небольшая проблема с навигацией

Arhidiablo · July 17, 2013

Доброго времени суток! Столкнулся в плотную с тенденцией одностраничьных сайтов, почитал информацию стал верстать, принцип прост, движение по якорям, однако возникла одна проблема:

Сайт состоит из фиксированного меню, и блоков, вся загвоздка в отображении прикрепленного меню если двигаюсь с верху в низ в одном месте закрепляется если с низу верх прохожусь по меню по другому фиксируется.

Вот код:

HTML код страницы index


<!--Блок Навигация-->
<?php include('block/rollmenu.php')?>

<body>
<!--Блок с галереей-->
<?php include('block/block_galery.php')?>
<!--Блок Продаваемая инфа-->
<?php include('modules/block_info.php')?>
<!--Блок Правила-->
<?php include('modules/block_rules.php')?>
<!--Блок Участники или клиенты-->
<?php include('modules/block_client.php')?>
<!--Блок Контакты-->
<?php include('modules/block_contact.php')?>
<!--Блок footer-->
<?php include('block/footer.php')?>

Блоки:

По своей сути состоят по такому принципу:

HTML


<!--Div блок для якоря #info-->
<div class="block_delimiter" id="info"></div>
<!--Сам информационный блок забитый информацией-->
<table align="center" class="block_info" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">
	 <h1>
	 <strong>Заголовок информационного блока (анонс)</strong>
	 </h1>
</th>
</tr>
<tr>
<td>
	 <h2>Основная информация</h2>
</td>
</tr>
<tr>
<td>
	 <h3>Вторичная информация.</h3>
</td>
</tr>
</table>

CSS


/*Скрыртый разделитель*/
.block_delimiter {
width:0%;
height:0%;
position: relative;
top:-246px;
background-color:#000000;}

Сам блок фиксированного меню имеет код:

HTML


<!--Прокручиваемое меню-->
<div class="floating">
<!--Меню-->
		 <table width="100%" border="0" cellspacing="0" cellpadding="0">
			 <tr>
			 <th scope="col"><a title="Главная страница карты" href="#">ГЛАВНАЯ</a></th>
			 <td><a title="Все о карте" href="#info">О КАРТЕ</a></td>
			 <td><a title="Правила использования картой" href="#rules">ПРАВИЛА</a></td>
			 <td><a title="Фирмы выбравшие нашу карту" href="#client">КЛИЕНТЫ</a></td>
			 <td><a title="Контактная информация карты" href="#contact">КОНТАКТЫ</a></td>
			 </tr>
		 </table>
<!--Меню-->
</div>
<!--Прокручиваемое меню-->

CSS


.floating {
z-index:190;
width: 100%;
height:123px;
background:#FFF;
color:#000000;
}

Вот так отображается в Google Chrome

Вот так отображается в IE 8

Мне кажется я задал неправильный параметры невидимого якоря (не фиксированные)?

Sign In

Одностраничьный сайт, небольшая проблема с навигацией

Question

Arhidiablo

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information