Создать форум бесплатно: ixbb.ru :: Календарь на Март 2024 года: calendar2008.ru/2024/mart/

  Reply to this topicStart new topicStart Poll

Помогите плиз

, Срочно нужна помощ
Ser777
Отправлено: Apr 6 2007, 11:28 PM
Quote Post


  Капитан
*

Группа: Members
Сообщений: 96
Пользователь №: 549
Регистрация:
6-April 07



Мой сайт www.ser777.by.ru написан на фреймах напишите плиз скрипт css для моего сайта заранее спасибо


--------------------
user posted image
PMEmail PosterUsers WebsiteICQ
Top
Hryak
Отправлено: Apr 17 2007, 09:43 PM
Quote Post


  Генерал
*

Группа: Super moderator
Сообщений: 243
Пользователь №: 83
Регистрация:
31-October 06



Примерный элементарный css можно реализовать следующим образом (я позволил себе уменьшить общее графическое наполнение.

http://luchkinru.narod.ru/other/export/ser777/

скачать для локального изучения http://luchkinru.narod.ru/other/export/ser777/ser777.rar

комментарии по ходу.

***
файл index.htm
***


<html>
<head>
<!-- index.html -->
<!-- created by Hryak url: http://luchkinru.narod.ru -->
<!-- owned by SER777 url: http://www.ser777.by.ru-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link rel="stylesheet" type="text/css" href="style.css">
<!-- включает таблицу стилей-->

<title>сайт SER777</title>
</head>

<body>
<!-- навигация слева + реклама -->
<div class="leftnav">

<h1 class="link">Меню</h1>

<!-- класс link мною не используется, но в будущем может понадобиться-->

<p class="link">
<a href="info/main.htm"target="maintext">Главная</a>
<br> <a href="http://ser777gyestbook.borda.ru/" target=_blank>Гостевая</a>
<br> <a href="info/links.htm" target="maintext">Друзья сайта</a>

<br> <a onclick="window.open('http://ser777.by.ru/radio.html', 'newWin', 'Toolbar=0, Location=0, Directories=0, Status=0, Menubar=0, Scrollbar=0, Resizable=0, Copyhistory=1, Width=400, Height=400')" href="http://www.ser777.by.ru/content.html#1">Радио Next</a>

<br> <a href="info/mailform.htm" target="maintext">Mail Form</a>
<br> <a href="info/aboutme.htm" target="maintext">Обо мне</a>
<br> <a href="info/info.htm" target="maintext">Баннеры</a>
<br> <a href="info/probki.htm" target="maintext">Пробки</a>
<br> <a href="http://ser777forum.borda.ru/" target=_blank>Форум</a>
<br> <a href="info/games.htm" target="maintext">Игры</a>
<br> <a href="info/rep.htm"target="maintext">Реп</a>

<br> <a onclick="window.external.addFavorite('http://www.ser777.by.ru/', 'Сер777 сайт'); return false;" href="http://www.ser777.by.ru/content.html#nul">Добавить в Избранное</a>

<br> <a onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.ser777.by.ru/'); return false;" href="http://www.ser777.by.ru/content.html#nul">Сделать стартовой</a>



<!-- кнопки и рекламы -->
<h1 class="link">Ссылки</h1>

<p class="link">
<a href="href="http://porsche-info.ru/" target=_blank"><img src="graph/porsche.gif" border="1" width="88" height="38" alt="Перейти на оффициальный сайт Porshe"></a>

<br> <a href="http://www.mygif.narod.ru" title="Основы WEB графики" target="_blank"><img src="graph/mygif.gif" border="1" width="88" height="31" alt="Основы WEB графики"></a>

<br> <a href="http://www.luchkinru.narod.ru" title="Владимирский портал" target="_blank"><img src="graph/hryak.gif" border="1" width="88" height="31" alt="Владимирский портал"></a>

</div>

<!--END навигация слева -->
<!-- Здесь и далее END означает конец слоя (это комментарий для удобства)-->

<!--подложка навигации слева -->

<!-- это просто слой, который выступает справа вниз серебристым цветом (для красоты :-) -->

<div class="leftnav_bot">
</div>
<!--END подложка навигации слева -->

<!--основной текст -->
<!-- можно здесь просто написать наполнение.. но я вставил "плавающий" фрейм, а наполнение лежит в папке info-->
<div class="text">
<iframe width="100%" height="100%" frameborder="0" src="info/main.htm" name="maintext"></iframe>

<!-- данный фрейм заполнит как раз весь слой и не оставит видимой границы-->

</div>
<!--END основной текст -->

<!--подложка основной текст -->
<!-- тоже для красоты--> <div class="text_bot">
</div>
<!--END подложка основной текст -->
</body>
</html>

<!-- Разумеется это простая реализация и она накладывает определенные ограничения (в первую очередь на высоту слоя), но сперва предлагаю перейти непосредственно к файлу стилей.-->

***
файл style.css
***


/* Обрати внимание, что комментарий в css прописывается иначе */

body {background-color:#FC9600; font-family: Comic Sans MS;}
/*общий цвет, общий шрифт */


body.text {background-color:#FFE26E;}
/* цвет фона в "плавающем" фрейме */

div {position:absolute;}
/* общий параметр для всех слоев, работаем от единой системы координат */

div.text_bot {z-index: 1;}
div.text {z-index: 2;}
div.leftnav_bot {z-index: 3;}
div.leftnav {z-index: 4;}

/* порядок расположения слоев */

div.leftnav, div.text {background-color: #FFE26E;}
div.leftnav_bot, div.text_bot {background-color: silver;}

div.leftnav {width: 170px; height: 500px; margin: 10px;}
div.leftnav_bot {width: 170px; height: 500px; margin: 15px;}

div.text {width: 70%; height: 550px; margin-left: 200px; margin-top: 20px;}
div.text_bot {width: 70%; height: 550px; margin-left: 205px; margin-top: 25px;}

/* Обрати внимание, что слои в процентном отношении "подстроятся" под ширину экрана пользователя */

/* здесь часть слоев сгруппирована через "," для экономии размера файла стилей */


h1 {font-size: 17px; margin: 10px; font-weight: normal; color: navy;}

p {font-size: 14px; text-align: justify; margin: 5px;}

/* задаю параметры для всех абзацев и заголовков, если нужно разнообразие - то можно ввести классы через "." */


A {font-size:12px; Text-decoration: none; line-height: 15px;}
A:Link{Color:blue;}
A:Visited{Color:purple;}
A:Active{Color: brown;}
A:Hover{Color:#3467FA;}

/* изменение гипертекстовых ссылок */

/* Это впринципе "скелет", но на его основе вполне можно разработать собственный вариант дизайна */

PMEmail Poster
Top

Topic Options Reply to this topicStart new topicStart Poll

 



[ Script Execution time: 0.0556 ]   [ 10 queries used ]   [ GZIP выключен ]