Не применяются стили CSS в динамически загружаемом блоке.

[alextrof94]

index.php

...
	<div id="main">
		<div id="content">
			/*dinamic loading with jquery*/
		</div>
	</div>

	<script> 
		function ClickGmenu(num){ /*horisontal menu for special*/
			if (num==1) {
				$.ajax({  
					url: "/pages/page1.php",
        	        		cache: false,  
        	        		success: function(html){  
        	        			$("#content").html(html);  
        	            		}
				});
			}
        	        $.ajax({
        	        	url: "/gmenu.php",
				data: "id="+num,
	                	cache: false,  
	                	success: function(html){  
	                		$("#gmenu .items").html(html);  
	                	} 
	                });
		};    
		$(document).ready(function(){
			$('#gmenu .item1').live('click', function(){ ClickGmenu( 1 ) } );
        	});  
	</script>
...

/pages/page1.php

<div id='pages' class='title'>
	Title
</div>

style.css

#content {
 min-height: 500px;
 margin-left:200px;
 padding: 20px;
 width: 740px;
 height: 100%;
 color:#ff7f00;
 opacity: 1;
 background-color: #111111;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.8); /* Для Safari 3.0 */
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.8); /* Для Firefox 3.5 */
box-shadow: 0px 0px 8px rgba(0,0,0,0.8); /* Для современных браузеров */
 z-index: 2;
 position:relative;
}

#pages .title {
 width: 100%;
 color: #ffffff;
 text-align: center;
 font-size: 2em;
}

А в итоге в блок <div id='content'></div> влезает текст оформленный как #content, но не как #pages.title, при том что текст правильный и даже картинки грузятся (для примера вырезаны). Но без стиля...

[alextrof94]

Везде #pages.title исправил на #content.title и сразу все заработало... Хз почему не работало. Даже хромовский отладчик не видел в css #pages...

[grominfo]

<div id='pages' class='title'>

Конечно так не будет работать, потому что объявленные стили #pages .title будут работать только для такой структуры:

<div id="pages">
 <div class="title">
    <!--HTML CODE-->
 </div>
</div>

#pages .title ищет блок с идентификатором pages, затем ищёт потомка с классом title. <div id='pages' class='title'> является одним блоком, и он не может быть родителем и потомком одновременно

[alextrof94]

	<div id="header">
		<div id='header' class='logo'>
		</div>
	</div>

да, действительно работают только такие конструкции, сначала надо вызвать предка.
Сори за криворукость. Второй день в вебе

[grominfo]

Сообщение от alextrof94

	<div id="header">
		<div id='header' class='logo'>
		</div>
	</div>

да, действительно работают только такие конструкции, сначала надо вызвать предка.
Сори за криворукость. Второй день в вебе

На одной странице не должно быть два одинаковых идентификатора.

[alextrof94]

Сообщение от grominfo

На одной странице не должно быть два одинаковых идентификатора.

Тогда почему же

	<div id="header">
		<div id="header" class='logo'>
		</div>
		<div id="header" class='title'>
			<a href="http://mysite.ru/">mysite</a>
		</div>
	</div>

работает правильно, а

	<div id="header">
		<div class='logo'>
		</div>
		<div class='title'>
			<a href="http://mysite.ru/">mysite</a>
		</div>
	</div>

неправильно?

#header {
 background-image: url('/../images/header.jpg');
 width: 100%;
 height: 65px;
}
#header .logo {
 background-image: url('/../images/logo.png');
 background-repeat: no-repeat;
 float:left;
 position:relative;
 left:140px;
 top:10px;
 width: 65px;
}
#header .title a {
 font-size: 2em;
 line-height: 65px;
 vertical-align: middle;
 text-decoration: none;
 color: #ff9900;
 height: 65px;
 position:relative;
 left: 140px;
}

Что я делаю не так?
P.S.: ну кроме <div class='logo'></div> , чтобы просто лого отобразить.

[grominfo]

Одинаковые идентификаторы элементов не приводят к ошибкам отображения HTML кода. Это приводит к ошибкам java-скриптов, и делает страницу невалидной, а также говорит о некомпетентности вебматера, который не имеет базовых знаний. Если из ява-скрипта будет обращение к элементу по id, то в лучшем случае будет обработан первый из одинаковых.

Да что тут говорить, одинаковые id - это наигрубейшая ошибка с точки зрения программиста. Настоящий программист даже близко такого не допустит

[alextrof94]

(капс) В ТОМ ТО И ДЕЛО, ЧТО ОТСУТСТВИЕ "ОДИНАКОВЫХ" ИДЕНТИФИКАТОРОВ И ВЫЗЫВАЕТ НЕПРАВИЛЬНОЕ ОТОБРАЖЕНИЕ.
Когда имеется структура (ниже), все отображается как надо.

<div ID>
  <div ID CLASS1>
  </div>
  <div ID CLASS2>
  </div>
</div>

А стоит убрать ID во внутренних блоках, как CLASS1 перестает отображаться, а CLASS2 съезжает на его место.

А в скриптах обратиться можно и к '#ID .CLASS'

[grominfo]

alextrof94, делай как хочешь. Я не собираюсь тебя учить. Потом со временем поймёшь как ты был неправ. Просто не говори так больше, как написал выше, а то люди уже смеются над тобой

[Naive]

Сообщение от alextrof94

Тогда почему же

	<div id="header">
		<div id="header" class='logo'>
		</div>
		<div id="header" class='title'>
			<a href="http://mysite.ru/">mysite</a>
		</div>
	</div>

работает правильно

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

Сообщение от alextrof94

а

	<div id="header">
		<div class='logo'>
		</div>
		<div class='title'>
			<a href="http://mysite.ru/">mysite</a>
		</div>
	</div>

неправильно?

Тут отображается правильно, #header .logo не имеет высоты, следовательно не отображается, а поскольку является плавающим элементом, его некому обтекать, вот ссылка и сползает на его место.

Сообщение от alextrof94

#header {
 background-image: url('/../images/header.jpg');
 width: 100%;
 height: 65px;
}
#header .logo {
 background-image: url('/../images/logo.png');
 background-repeat: no-repeat;
 float:left;
 position:relative;
 left:140px;
 top:10px;
 width: 65px;
}
#header .title a {
 font-size: 2em;
 line-height: 65px;
 vertical-align: middle;
 text-decoration: none;
 color: #ff9900;
 height: 65px;
 position:relative;
 left: 140px;
}

Что я делаю не так?

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