meinhart - CSSExample1

CSSExample1

Дизайн CSS-профи: Пример собственного дизайна

Внимание:
По профессиональному дизайну "CSS" тех. поддержка на форуме не оказывается !
Предполагаются начальные знания в области CSS / классов / HTML !

Это пособие описывает одну из многих возможностей, создания собственного дизайна с помощью CSS .
Для простоты изложения мы отказались от излишеств, поэтому нам не понадобятся адреса картинок или изображений.
Их вы сможете добавить сами.
Содержание вашего сайта естественно сохранится, но правые поля показываться не будут. Вы можете в любое время вернуться к вашему старому дизайну, убрав все изменения.

Примерно так это будет выглядеть :

1 шаг: Выбор дизайна
- войти в систему
- перейти в раздел "Выбор дизайна"
- выбрать "CSS дизайн"

2 шаг: Поле "CSS-Код без тэгов стиля"

- Перейдите в "Расширенные установки"
В отличие от других дизайнов здесь имеются три поля для вставки CSS кодов:
- текст над дизайном
- текст под дизайном
- и CSS-Код без тэгов стиля.
"Без тэгов стиля" означает, что вставляемый здесь код не должен содержать тэги

--> </style>

Вначале полностью удалим некоторые "классы" дизайна.
Для этого вставим следующее в поле "CSS-Код без тэгов стиля" :

div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}

Форматирование ссылок:
Размеры шрифтов и цвет можно изменить
Вставляем в поле "CSS-Код без тэгов стиля":

a{color:#FFFFA8; font-size: 14px; text-decoration: none;}
a:hover {color: #FFFFA8; font-size: 14px; text-decoration: none;}
a:link {color: #FFFFA8; font-size: 14px; text-decoration: none;}
a:active {color: #FFFFA8; font-size: 14px; text-decoration: none;}
a:visited {color: #FFFFA8; font-size: 14px; text-decoration: none;}

Цвет фона :
Вставляем в поле "CSS-Код без тэгов стиля":

body {background-color:#c1c1c1;}

Теперь вставим дизайн тоже в поле "CSS-Код без тэгов стиля"

* { padding: 0; margin: 0; }
#Testdesign {
margin: 0 auto;
width: 922px;}

#oben {
color: #FFFFFF;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #07417C;
height: 60px;
margin: 10px 0px 0px 0px;
background-image: none;
background: #07417C;}

#feld_links {
color: #000000;
border: 1px solid #07417C;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 160px;
float: left;}

#content {
float: right;
color: #000000;
border: 1px solid #07417C;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 718px;
display: inline;
overflow:auto;}

#sockel {
width: 900px;
clear: both;
color: #000000;
border: 1px solid #07417C;
background: #07417C;
margin: 0px 0px 10px 0px;
padding: 10px;}

/* Навигация в CSS */

#navi {
margin: 0;
padding: 0;
width: 150px;}

#navi ul, #navi li{
list-style-type: none;
padding-top: 2px;
font-weight: bold;}

#navi li a {
text-decoration: none;
display: block;
width:100%;
padding: 5px;}

#navi a:link, #navi a:visited {
color: #FFFFFF;
background-color: #07417C;}

#navi #akt {
color: #FFFFFF;
background-color: #7F0000;}

#navi a:hover, #navi a:hover#akt {
color: #FFFFFF;
background-color: #000080;}

Вы можете изменить ширину и высоту, а также цвет фона.
overflow:auto; создает текстовое поле с прокруткой.
Обратите внимание:
Если вы увеличите ширину текстового поля (content), то на столько же надо уменьшить ширину поля навигации (feld_links). И наоборот.
Например: Если вы увеличили параметр "width" для feld_links на 20 пикселей , то уменьшите параметр "width" для content тоже на 20 пикселей.
С полем "CSS-Код без тэгов стиля" мы закончили.

3 шаг: Поле "текст над дизайном"

Теперь вставим код навигации в поле "текст над дизайном":

<div id="Testdesign">
<div id="oben">Здесь область хидера</div>

<div id="feld_links">
<ul id="navi">
<li>
<a href="http://Home.htm" id="akt">Home</a>
</li>
<li>
<a href="http://Seite1.htm">Seite 1</a>
</li>
<li>
<a href="http://Seite2.htm">Seite 2</a>
</li>
<li>
<a href="http://Seite3.htm">Seite 3</a>
</li>
<li>
<a href="http://Seite4.htm">Seite 4</a>
</li>
<li>
<a href="http://Seite5.htm">Seite 5</a>
</li>
<li>
<a href="http://Гостевая книга.htm">Гостевая книга</a>
</li>
<li><a href="http://Контакт.htm">Контакт</a>
</li>
</ul>
</div>

Естественно между <div id="feld_links"> и </div> вы должны вставить вашу собственную навигацию.
Если вы хотите иметь навигацию вверху, вставьте ваш код для навигации между <div id="oben"> и </div>.

3 шаг: Поле "текст под дизайном"

Теперь добавим еще один класс для "footera" и закроем открытый тэг </div>.
Для этого вставим следующий код в поле "текст под дизайном":

Внизу страницы вы можете разместить текст или любой HTML-код. Для этого вставьте его между <div id="sockel"> и </div>.

Вставить хидер:
Собственный хидер вы можете вставить так:

background-image: url(http://URL-картинки.jpg);

Обратите внимание:
В этом примере размер хидера должен быть 900 x 60.
Вы можете использовать хидер и большей высоты.
Для этого измените значение height в этом месте кода:

#oben {
color: #FFFFFF;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #07417C;
height: 60px;
margin: 10px 0px 0px 0px;
background: #07417C;}

Тема http://www.homepage-baukasten.de/forum/viewtopic.php?t=62368
Автор: Wolle
Перевод с немецкого meinhart