Xpoint
   [напомнить пароль]

Не выполняются правила CSS при запуске PHP скрипта при переходе на него по ссылке

Метки: [без меток]
2012-06-13 15:31:33 [обр] lassy[досье]

Здравствуйте! Я сверстал начало фотогалереи, комбинируя HTML, PHP и внешнюю CSS.
Получилось красиво - в левой колонке скроллится бесконечное число фотоминиатюр-ссылок, вверху заголовок,
справа большой блог, в который по замыслу должны выдаваться достаточно большие наборы крупных фото при клике
по миниатюре в левой колонке. Все правила CSS при этом выполнены.
Но все эти правила летят к чертям при клике по ссылке в левой колонке: выдается набор фоток во всю страницу и скроллится вместе со страницей, несмотря на то, что в таблице CSS для него отведен только блог с абсолютным (или фиксированным) позиционированием.
Переход по ссылке отменяет все правила CSS для этого модуля и результаты его выдачи занимают полностью страницу.
Ни заголовка, ни левой колонки с каталогом миниатюр не остается.

Вопрос: где я неправильно применяю правила CSS?
Второй вопрос - такое невозможно в принципе - переход по ссылке отменяет все предыдущие правила CSS, может так?
Третий вопрос: как быть в такой ситуации - как сохранить на одной странице результаты предыдущей выдачи и добавить новую в отведенное для нее место?
Спасибо.

Надеюсь, никого не обременит, если я приведу здесь же короткий индекс и также короткую внешнюю CSS.
Объемистые PHP скрипты не поместятся, да и читать их никто не будет.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Галлерея лучших</title>
   <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
 <link rel=Stylesheet type="text/css" href="layout1.css">
    </head>
    <body>

   <div class="kat"> <?php include('katalog.php'); ?></div>
   <div class="head"> <img src="headfon-image.jpg" height="123px"></div>
   <div class="blog"> <hr align="center" size="3px" color="#00f" style="position: absolute; top:130px; left:560px";> </div>
   <div class="blog"> <?php include('show.php'); ?> </div>

   
</body>
</html

И короткая CSS:
body {
      background:#333333 ;
      }
div.kat{position: fixed; top: 0; left: 0; width:550px;height:1920px; background:#ffaa88;
   font-family : Venecia, Angelica, Gabriola, Georgia; font-size : 28pt; color:#00f;
   overflow:scroll}
div.head {position: fixed; top: 0; left: 550px; width:1360px;height: 133px;
   background: url(headfon_for_embos.jpg); overflow:auto}
div.blog {position: fixed; top: 130px; left: 550px;
   font-family : Georgia; font-size : 28pt; background:#f8d;width:1360px; height: 1790px;
   overflow:scroll}
div#show {position: fixed; top: 130px; left: 550px;
   font-family : Georgia; font-size : 28pt; background:#f8d;width:1360px; height: 1790px;
   overflow:scroll}
div#headkat{position: fixed; top: 100px; left: 0; width:550px;height:1920px; background:#fa8;
   font-family : Venecia, Angelica, Gabriola, Georgia; font-size : 28pt; color:#00f;
   overflow:scroll}
div#katalog{position: fixed; top: 0; left: 0; width:550px;height:1920px; background:#ffaa88;
   font-family : Venecia, Angelica, Gabriola, Georgia; font-size : 28pt; color:#00f;
   overflow:scroll}

спустя 3 часа 36 минут [обр] Jared(0/26)[досье]
Вопрос: где я неправильно применяю правила CSS?

Поставьте Firefox+Firebug и посмотрите, что у вас при открытии проблемной страницы подгружается, что и к каким элементам применяется.

Второй вопрос - такое невозможно в принципе - переход по ссылке отменяет все предыдущие правила CSS, может так?

При переходе по ссылке все CSS правила с предыдущей страницы, также как и скрипты и разметка выбрасываются в мусор. Обвес одной страницы к другой никакого отношения не имеет - это вообще две разные страницы. Другое дело, что как правило (читай почти всегда) все страницы с одного ресурса используют одни и те же наборы стилей и скриптов.

Третий вопрос: как быть в такой ситуации - как сохранить на одной странице результаты предыдущей выдачи и добавить новую в отведенное для нее место?

Если вам нужно без перезагрузки страницы подгрузить с сервера какой-то контент, используйте AJAX. Это не считается "переходом по ссылке". Это подгрузка новых данных с сервера. Дынные эти могут быть в любом удобном формате, например в HTML. Подгруженный кусок разметки потом вставляется в нужное место на странице. Ну или еще как-то используется.

Вообще, вам бы почитать про то, как интернеты и веб устроен. Про клиент-серверную архитектуру. Про HTTP. Про stateless протоколы (одним из которых HTTP и является). Траффик браузера посниффить - хотя бы тем же firebug'ом.

Посты на форуме, кстати, лучше форматировать. Код хотя бы.

спустя 21 час [обр] lassy[досье]
Спасибо. Буду осваивать. Отформатировать весь код не удалось - редактор воспринял как добавление и не стал форматировать.
Вы написали: "Другое дело, что как правило (читай почти всегда) все страницы с одного ресурса используют одни и те же наборы стилей и скриптов." - так каким же образом? С помощью AJAXа? Но ведь он не так давно появился, как же работали со ссылками и CSS
до него?
" Обвес одной страницы к другой никакого отношения не имеет - это вообще две разные страницы" - это я вообще не понял. Но ведь эти две разные страницы мирно уживаются на одном экране!? И что означает здесь слово "обвес"?
Еще раз спасибо.
спустя 27 минут [обр] Jared(0/26)[досье]
Отформатировать весь код не удалось - редактор воспринял как добавление и не стал форматировать.

 <<< Точка отформатирует этот фрагмент как код >>>
 <[ Точка отформатирует этот фрагмент комментарий ]>
Посмотрите справку по форматированию уже.

" Обвес одной страницы к другой никакого отношения не имеет - это вообще две разные страницы" - это я вообще не понял. Но ведь эти две разные страницы мирно уживаются на одном экране!? И что означает здесь слово "обвес"?

Cтраница - это то, что получает клиент. Она может генерироваться десятком-тремя php файлов, с запросами к БД и внешним сервисам. Но результат их работы - одна страница. Клиент не знает и знать не должен как именно сгенерилась страница. Может она просто так уже готовой html-кой лежала на сервере и он ее отдал без всяких обработок.
Про обвес ниже.

Вы написали: "Другое дело, что как правило (читай почти всегда) все страницы с одного ресурса используют одни и те же наборы стилей и скриптов." - так каким же образом? С помощью AJAXа? Но ведь он не так давно появился, как же работали со ссылками и CSS

Страницы по адресам http://example.com/page1.html и http://example.edu/directory/subdirectory/script.pl?asdf=qwer лежат на разных доменах, на разных серверах, принадлежащих разным организациям в двух разных частях мира. Но обе содержат такой код:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'><!-- --></script> 
<link rel='stylesheet' type='text/css' href='http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css'/>

То есть обе юзают JS фреймворк jQuery и CSS фреймворк bootstrap от твиттера. Точно также, как эти страницы могут использовать одни и те же избражения (img с одинаковым значением атрибута src). Никакой AJAX тут не нужен. Браузеры уже почти лет 20 (то есть практически всю свою историю) умеют загружать внешние ресурсы - то, что я назвал "обвесом".

спустя 1 день 2 часа [обр] lassy[досье]
Спасибо, просветили. Впору скопировать эту страницу, как шпаргалку.
Практический вопрос: а где на странице они размещают этот код?
В любом месте, перед ссылкой, после CSS ...?
И что означает во второй строке "href='http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"?
К самой ссылке имеет какое-то отношение или ссылается на внешний ресурс, который и помогает все организовать?
Спасибо.
спустя 16 часов [обр] Jared(0/26)[досье]

lassy[досье], вы в вашем последнем ответе задали больше непонятных вопросов, чем в первом посте.

Краткий ликбез. Может не вполне точный, но сойдет.
Раз - браузер получает HTML страницу.
Два - браузер страницу парсит.
Три - браузер подгружает внешние ресурсы:

script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'><!-- --></script> 
<link rel='stylesheet' type='text/css' href='http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css'/>
<img src='http://example.com/image.jpg' alt=''/>

Четыре - браузер отрисовывает страницу сообразно HTML коду, подгруженным CSS стилям и изображениям, исполняет скрипты.
Пять - юзер видит отрисованую страницу.

Все что находится непосредственно в теле страницы - это она сама. Остальное - внешние ресурсы. Они могут наохиться где угодно - на вашем сервере, на гугловском CDN......

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

Powered by POEM™ Engine Copyright © 2002-2005