Проблема c CSS версткой

[Bismuth]

Всем доброе время суток!

Вот у меня проблема с верстой в СSS, а проблема в том, что при нажатие на верхнее меню появляется красный квадрат, а не должен там такого. А берет этот красный квадрат из бокового меню, хоть у обоих меню разные ID

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

вот код верхнего меню

<div id="menu">
		<ul id="bottom">
			<li id="index">
				<a href="index.html" title="На главную" class="corrent"></a>
			</li>
			<li id="photoshop">
				<a href="photoshop.html" title="Рhotoshop"></a>
			</li>
			<li id="html">
				<a href="html_&_css.html" title="HTML & CSS"></a>
			</li>
			<li id="php">
				<a href="php.html" title="html"></a>
			</li>
			<li id="joomla">
				<a href="cms.html" title="CMS"></a>
			</li>
			<li id="programs">
				<a href="programs.html" title="Программы"></a>
			</li>
			<li id="other">
				<a href="other.html" title="Другие программы"></a>
			</li>
			<li id="fon"></li>
	   </ul>
	</div><!-- End Menu -->

А это код правого меню

<div id="nav">
		   <ul id="navigation">
			<li id="navigation">
				<a href="index.html" title="На главную" class="correntpage">Главная</a>
			</li>
			<li id="navigation">
				<a href="photoshop.html" title="Рhotoshop">Photoshop</a>
			</li>
			<li id="navigation">
				<a href="html_&_css.html" title="HTML & CSS">HTML & CSS</a>
			</li>
			<li id="navigation">
				<a href="php.html" title="PHP">PHP</a>
			</li>
			<li id="navigation">
				<a href="cms.html" title="CMS">CMS</a>
			</li>
			 <li id="navigation">
				<a href="programs.html" title="Программы">Программы</a>
			</li>
			<li id="navigation">
				<a href="other.html" title="Другие программы">Другие</a>
			</li>
	   </ul>
	   <div id="clear_menu"></div>
							</div><!-- End Nav -->

А код CSS верхнего меню

/* MENU */
#menu {
	margin:0 auto;
	padding:0px;
	width:1000px;
	height:25px;
}

ul#bottom {
	list-style-type:none;
	margin:0px;
	padding:0px;
	position:absolute;
}

ul#bottom li {
	background:url(../images/menu.png) no-repeat;
	width:1000px;
	height:25px;
	float:left;
}

ul#bottom li a {
	display:block;
	width:100%;
	height:100%
}

ul#bottom li#index {
	background-position:0 0;
	width:60px;
}

ul#bottom li#index:hover {
	background-position:0 -25px;
}

ul#bottom li#index:active {
	background-position:0px -50px;
}

ul#bottom li#photoshop {
	background-position:-60px 0;
	width:80px;
}

ul#bottom li#photoshop:hover {
	background-position:-60px -25px;
}

ul#bottom li#photoshop .corrent, ul#bottom li#photoshop:active {
	background-position:-60px -50px;
}

ul#bottom li#html {
	background-position:-140px 0;
	width:80px;
}

ul#bottom li#html:hover {
	background-position:-140px -25px;
}

ul#bottom li#html .corrent, ul#bottom li#html:active {
	background-position:-140px -50px;
	background:url(../images/menu.png) no-repeat;
}

ul#bottom li#php {
	background-position:-220px 0;
	width:60px;
}

ul#bottom li#php:hover {
	background-position:-220px -25px;
}

ul#bottom li#php .corrent, ul#bottom li#php:active {
	background-position:-220px -50px;
}

ul#bottom li#joomla {
	background-position:-280px 0;
	width:60px;
}

ul#bottom li#joomla:hover {
	background-position:-280px -25px;
}

ul#bottom li#joomla .corrent, ul#bottom li#joomla:active {
	background-position:-280px -50px;
}

ul#bottom li#programs {
	background-position:-340px 0;
	width:80px;
}

ul#bottom li#programs:hover {
	background-position:-340px -25px;
}

ul#bottom li#programs .corrent, ul#bottom li#programs:active {
	background-position:-340px -50px;
}

ul#bottom li#other {
	background-position:-420px 0;
	width:60px;
}

ul#bottom li#other:hover {
	background-position:-420px -25px;
}

ul#bottom li#other .corrent, ul#bottom li#programs:active {
	background-position:-420px -50px;
}

ul#bottom li#fon {
	background-position:-480px 0;
	width:520px;
}

А это код CSS правого меню

/* NAVIGATION */
#nav{
	margin:0 0 0 -35px;
	padding:40px 0 0 0;
	width:100px;
	height:25px;
}

#navigation ul {
	margin:0px;
	padding:0px;	
}

#navigation li {
	font-family:Verdana;
	font-size:14px;
	line-height:28px;
	list-style-type:none;
	padding:0px;
	height:30px;
	width:200px;
	text-align:center;
	border-bottom:1px #999999 solid;
	margin-bottom:2px;
	}
#navigation li a {
	background-color:#CCCCCC;
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	color:#000000;
	}
#navigation li a:hover {
	color:#FFFFFF;
	background-color:#b00000;
	background-repeat:repeat-x;
	}
#navigation .correntpage, a:active {
	color:#FFFFFF;
	background-color:#b00000;
	background-repeat:repeat-x;
	}

можно в действии посмотреть на сайт Мой сайтик

[swetlana]

В файле navigation.css на строке 170:

#navigation .correntpage, a:active {
background-color: #B00000;
}

Так что всё справедливо. Любая ссылка в момент нажатия принимает цвет #b00000, как ей и сказано.

[Bismuth]

В файле navigation.css на строке 170:

#navigation .correntpage, a:active {
background-color: #B00000;
}

Так что всё справедливо. Любая ссылка в момент нажатия принимает цвет #b00000, как ей и сказано.

А почему это baground-color: #B0000; у верхнего меню отображается, хоть у верхнего меню, в CSS нету этого bagrounda

[swetlana]

даже код в пример приведён.

Нужно лекцию про селекторы в css прочитать?

окей, отдохнём немного от работы.

Селектор — это, простым языком говоря, то, к чему будет применён стиль. Это может быть тэг, класс или id. Могут через запятую перечисляться несколько селекторов. Например: #navigation .correntpage, a:active — такая запись означает, что описанный стиль применится к любому элементу с классом "correntpage", находящегося внутри элемента с id="navigation", а также (указано через запятую) к любому элементу "<a>" в состоянии "active", то есть с момента нажатия на данную ссылку до момента перехода на другую страницу.

…

эм… продолжать? Или уже картина слегка проясняется?