VPF::Аналог фреймов Html на Css - Форум программистов

yerdnA

Дата 23.6.2004, 14:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 16.6.2004

Репутация: нет
Всего: нет

Как создать аналог фреймовой структуры HTML на CSS. Если можно на простеньком примере и с подробными объяснениями (стиль изложения - для начинающих).

IZ@TOP

Дата 23.6.2004, 16:17 (ссылка)

(нет голосов)

Загрузка ...

Панда-бир!

Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: нет
Всего: 73

Попробуй найти что ни будь тут: http://loc.stack.ru/projects/CSS2/cover.html .

--------------------

Один из розовых плюшевых-всадников апокалипсиса... очень злой...

Семь кругов ада для новых элементов языка
Мои разрозненные мысли

yerdnA

Дата 24.6.2004, 05:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 16.6.2004

Репутация: нет
Всего: нет

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

Gold Dragon

Дата 24.6.2004, 09:49 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71

Не совсем понятно что нужно. Посмотри вот это. Не помню где надыбал.. можть пригодиться

Код

<html>
<head>
<style type="text/css"> 
BODY { /* Стиль основных элементов веб-страницы */
text-align: center; /* 1 */
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Verdana, Arial, sans-serif; 
}
#container { /* Основной каркас страницы */
width:750px;
margin-right:auto; /* 1 */
margin-left:auto; /* 1 */
}
#column { /* Основа для меню и контента */
background: #008000; 
width: 750px;
}
#top { /* Верхняя часть с заголовком страницы */
text-align: left; 
width: 750px; 
background-color: #800000; 
padding: 0px;
height: 50px;
}
#menu { /* Навигация по сайту */
width: 200px;
float: left;
color: white; 
padding: 0px;
}
#content { /* Основное содержание страницы */
background-color: #e0e0e0;
padding: 0px;
margin-left: 200px;
}
#bottom { /* Нижняя часть */
width: 750px; 
background-color: #000080; 
}
#contact { /* Контактная информация */
float: left;
padding: 0px;
width: 500px;
text-align: left;
}
#button { /* Всякие кнопочки */
padding: 0px;
text-align: right;
}
H1 { /* Заголовок страницы */ 
text-align: center;
font-size: 220%;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
color: black;
padding: 0px;
margin: 0px;
}
#menu P { /* Разделы меню */
font-size: 100%; 
font-weight: bold;
text-align: left;
padding: 10px;
margin: 0px;
}
#menu A { /* Ссылки в меню */
color: #ccffcc; 
font-size: 90%;
font-weight: normal;
}
#menu A:visited { /* Ссылки в меню */
color: #c0c0c0;
}
#menu A:hover { /* Ссылки в меню */
background-color: #ffffc0;
width: 150px;
color: black;
}
#content P { /* Стиль основного текста */
font-size: 90%; 
text-align: justify;
padding: 10px;
margin: 0px;
}
#contact P { /* Стиль контактов */
font-size: 80%;
padding: 5px;
color: #fffff0;
margin-top: 0px
}
#button P { /* Стиль размещения кнопочек */
text-align: right;
padding: 5px;
margin: 0px;
}
.title { /* Заголовок сайта */
font-size: 24px; 
font-weight: bold;
color: white; 
padding-top: 10px;
padding-bottom: 10px; 
}
</style>
</head>
<body>
<div id=container>
<div id=top><span class=title>Заголовок сайта</span></div>
<div id=column>
<div id=menu>
<p>Раздел 1<br>
<a href=#>Ссылка 1.1</a><br>
<a href=#>Ссылка 1.2</a><br>
<a href=#>Ссылка 1.3</a><br>
</p>
<p>Раздел 2<br>
<a href=#>Ссылка 2.1</a><br>
<a href=#>Ссылка 2.2</a><br>
<a href=#>Ссылка 2.3</a><br>
</p>
<p>Раздел 3<br>
<a href=#>Ссылка 3.1</a><br>
<a href=#>Ссылка 3.2</a><br>
<a href=#>Ссылка 3.3</a><br>
</p>
</div>
<div id=content>
<h1>Заголовок статьи</h1>
<p>Какая-то ерунда, содержание и так далее  длоыф лодоыл лыфво лд вдл выдлодывф длфволдо выдл фдло вылдо длфодло вдло лоыы лрвыфр олыр лорвыр уцйщозц йщлщз цв9ш094 3гощв ыощшоуц0 вцш0о вц 0шцуо .</p>
<p>Какая-то ерунда, содержание и так далее  длоыф лодоыл лыфво лд вдл выдлодывф длфволдо выдл фдло вылдо длфодло вдло лоыы лрвыфр олыр лорвыр уцйщозц йщлщз цв9ш094 3гощв ыощшоуц0 вцш0о вц 0шцуо .</p>
<p>Какая-то ерунда, содержание и так далее  длоыф лодоыл лыфво лд вдл выдлодывф длфволдо выдл фдло вылдо длфодло вдло лоыы лрвыфр олыр лорвыр уцйщозц йщлщз цв9ш094 3гощв ыощшоуц0 вцш0о вц 0шцуо .</p>
<p>Какая-то ерунда, содержание и так далее  длоыф лодоыл лыфво лд вдл выдлодывф длфволдо выдл фдло вылдо длфодло вдло лоыы лрвыфр олыр лорвыр уцйщозц йщлщз цв9ш094 3гощв ыощшоуц0 вцш0о вц 0шцуо .</p>
<p>Какая-то ерунда, содержание и так далее  длоыф лодоыл лыфво лд вдл выдлодывф длфволдо выдл фдло вылдо длфодло вдло лоыы лрвыфр олыр лорвыр уцйщозц йщлщз цв9ш094 3гощв ыощшоуц0 вцш0о вц 0шцуо .</p>
</div>
</div>
<div id=bottom>
<div id=contact><p><b>Контактная информация</b><br>E-mail: <u>[email protected]</u></div>
</div>
</div>
</body>
</html>

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

Gold Dragon

Дата 24.6.2004, 10:01 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71

Вот ещё вариант (если хост поддерживает SSI)

Код

<html>
<head>
<script>
function qqq(a) {
var b
IE = (document.all)
NC = (document.layers)
Op = (document.getElementById)
for (var i=0; i<6; i++){
if(IE) b = document.all["q"+i]
if(NC) b = document.layers["q"+i]
if(Op) b = document.getElementById("q"+i)
if (a!=i){b.style.display = "none"}
else {b.style.display = "inline"}
}
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td width="20%">
<a href="#" onclick="qqq(1)">Страница 1</a><br>
<a href="#" onclick="qqq(2)">Страница 2</a><br>
<a href="#" onclick="qqq(3)">Страница 3</a><br>
<a href="#" onclick="qqq(4)">Страница 4</a><br>
<a href="#" onclick="qqq(5)">Страница 5</a>
</td>
<td>
<DIV id="q0" style="DISPLAY: inline">Текст при загрузке</div>
<DIV id="q1" style="DISPLAY: none"><!--#include virtual="ind_01.html"--></div>
<DIV id="q2" style="DISPLAY: none"><!--#include virtual="ind_02.html"--></div>
<DIV id="q3" style="DISPLAY: none"><!--#include virtual="ind_03.html"--></div>
<DIV id="q4" style="DISPLAY: none"><!--#include virtual="ind_04.html"--></div>
<DIV id="q5" style="DISPLAY: none"><!--#include virtual="ind_05.html"--></div>
</td>
</tr>
</table>
</body>
</html>

--------------------

Гость_DeathStorm

Дата 24.6.2004, 11:35 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

используй overflow:scroll (auto)

yerdnA

Дата 28.6.2004, 08:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 16.6.2004

Репутация: нет
Всего: нет

Всем огрмное спасибо!!!

Ученье - свет, а неученье - чуть свет так на работу.

Guest

Дата 15.7.2004, 14:05 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

[i]fgfg[b]fgfdg[size=8][/size]

[color=crimson][/color][list][quote]fdfgdfgdgdfgfg[move]
fdfgh

FeD38

Дата 28.8.2014, 06:58 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 28.8.2014
Где: Иркутск

Репутация: нет
Всего: нет

Цитата(yerdnA @ 24.6.2004, 05:57)

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

Кстати очень полезная ссылка smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »