Подскажите. Горизонтальное меню

[Игорь1234567]

Подскажите как сделать подобное горизонтальное меню

[leonardo]

ТС я так понял вам лучше начать основы изучать.
Представляю что будет продолжение тем :

Re: Подскажите. ШАПКУ
Re: Подскажите. ЛЕВЫЙ БЛОК САЙТА
Re: Подскажите. ПРАВЫЙ БЛОК САЙТА
и т.д. без обид, учитесь не плохой ресурс htmlbook.ru сам когда там начинал.

[Игорь123]

Уважаемый leonardo. Основы я знаю... уж поверьте.

А интересует меня решение не очень простой проблемы.
Если для вас это просто, то почему бы не помочь...?
Ну это вам решать.

А так для вас и для всех остальных, хочу углубиться в вопрос.
На нижеуказанном изображении видно как при наведении на ссылку блок(div) становится голубым. Если присмотреться видно как отступы блока ушли влево и вправо на 10px и немного закрыли собой, соседние блоки (за счет отсутствия белых границ хорошо видно)...

Но это происходит при наведении
 a:hover,
а когда делаю a:visited, после нажатия на ссылку, растягиваются и становятся голубыми, все блоки.

Вот вопрос, как сделать так, что-бы после прохода по ссылке, в этом меню выделялся только один блок и оставался в таком состоянии до тех пор пока не зайдешь на другую страницу?

[biohazard]

Хотелось бы поинтересоваться основы чего вы знаете...

Ну сделаете условие, мол, если мы находимся на этой страничке, то стиль элемента голубенький, ежели нет, то дефолт. В чём проблема, я не пойму вообще...

a:hover - к чему вы тут приплели псевдоклассы CSS мне чего та непонятно...

[Игорь123]

biohazard.

Сделать условие? То есть применить либо java либо php? Проблема в том, что я в этих языках еще далекооооооооооо не ас.

На счет псевдоклассов. Данное меню создано за счет html  и таблицы стилей, поэтому и включаю псевдоклассы в свой css. 

[biohazard]

т.е. сайт у вас на чистом html?
тем более, не понимаю в чём проблема...

[Игорь123]

Да. На чистом html.

Вот я и пытаюсь выяснить стоит ли прибегать к java или для этой задачи хватит обычного языка гипертекстовой разметки с применением css?
К слову на css и html пока не выходит...

[biohazard]

То есть, у вас не получается сделать так, чтобы на одной html странице был выделен один пункт меню, а на другой, соответственно, другой пункт? Вам не кажется это очевидным?

[Игорь123]

Я хочу, что-бы при нажатии на ссылку фон блока менял цвет и форму, а остальные (не активные на данный момент ссылки) оставляли первоначальный вариант. А затем при переходе на другую страницу, выделялся блок страницы на которую перешли, а предыдуще-активный блок возвращался к изначальному состоянию.
Но если ставить visited, то все посещенные страницы уже не возвращаются к первоначальному варианту, а оставляют форму посещенного блока.
Вот я и думаю, что мне делать?

[biohazard]

ну у вас ведь несколько html страниц, так?
Вот и сверстайте их так, чтобы когда вы открывали например novosti.html был подсвеченным пункт меню новости,
в файле hortfolio.html был подсвеченным пункт меню портфолио, и так далее...

ёмаё, первый класс

Думаю, вам надо читать тематические книжки, блоги, до просветления.

[Rex]

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

Это сделать довольно элементарно, если вы используете php. Скажем у вас есть такие адреса:

Код: [Выделить]

./?action=pages
./?action=info
./?action=blah
Определяете action из $_REQUEST-а и при выводе меню его учитываете:

<?php
/*  **** Какие-то инициализации и все такое ****  */
foreach ($menu as $row){
   $current = $action == $row['url'] ? " class=\"active-menu-item\"" : "";
   echo "<li{$current}><a href=\"/".$row['url']."/\">" . $row['title'] . "</a></li>";
}
/*  **** Еще что-то и сам вывод ****  */
?>

Как то вот так :-) Надеюсь сама идея понятна :-)

[biohazard]

Да. На чистом html.

Так у него статичный сайт

[Rex]

Да. На чистом html.

Так у него статичный сайт

не увидел этого.

Тогда я вообще не пойму в чем проблема. Это же основы, самое начало. Берем книгу по XHTML/CSS и читаем.

[Rex]

_http://www.cssmenumaker.com/ Конструктор для меню.
_http://anton.shevchuk.name/html-and-css/web20-css-menu/ пример.