Создать ответ 
Блоки CSS - как поместить на задний план?
Автор Сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #1
Блоки CSS - как поместить на задний план?
Что-то надо подправить, чтобы основной блок с предисловием был ЗА блоками с заголовком...

Сам код:
Код:
<style>
.Button1 {
font-family: verdana;
width:10px;
     text-decoration: none !important;
     background-color:#ae22aa;
     padding-left: 10px;
     padding-right: 10px;
     height: 38px;
     line-height: 38px !important;
     display: inline-block;
     border: 1px solid #000;}

.Button2 {
font-family: verdana;
width:400px;
     text-decoration: none !important;
     background-color:#fff;
     padding-left: 40px;
     padding-right: 40px;
     height: 38px;
     line-height: 38px !important;
     display: inline-block;
     border: 1px solid #000;}
.area {
font-family: verdana;
width:80%;
     text-decoration: none !important;
     background-color:#ffffe1;
margin-left:20px;
margin-right:20px;
margin-top:-20px;
margin-bottom:20px;
padding-top:40px;
     display: inline-block;
     border: 1px solid #000;}
</style>
<a class="Button1">1</a>
<a class="Button2">Предисловие</a>
<a class="area">ПРЕДИСЛОВИЕ — вводная статья критического, текстологического, исторического и т. п. содержания, предпосылаемая книге, чтобы сообщить читателю те или другие сведения, которые по мнению автора, редактора или издателя необходимы для лучшего понимания последней. В дальнейшем речь идет только о П. к художественным произведениям. Для литературоведения наибольшее значение имеют авторские П. Подобное П. часто является как бы авторским комментарием к произведению. Отрицательное отношение читателей к произведению вынуждало автора переделывать его и о своей работе рассказать читателям в П. Примером такого вида П. может служить предисловие И. С. Тургенева к отдельному изданию его романа "Дым" [1868]. Подобное П. представляет большую ценность для исследователя, поскольку в нем автор указывает, что он сделал в тексте своей повести при переиздании. Ценно подобное П. и для уяснения общественно-политической позиции автора в соответствующую эпоху.</a>

КАК СМОТРИТСЯ - admshel-forum.ucoz.ru/publ/menu/1-1-0-2

Ссылку сделал неактивной!
18.11.2012 17:56:35
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #2
RE: Блоки CSS - как поместить на задний план?
Это делается элементарно при помощи position и z-index.

Вот Вам готовый пример, думаю, быстро разберетесь:
Код:
<table border="0" width="100%" cellspacing="0" cellpadding="2" class="eBlock">
<tr><td class="eText" colspan="2"><style>
.Button2 {
position:relative;
z-index:2;
font-family: verdana;
width:400px;
text-decoration: none !important;
background-color:#fff;
padding-left: 40px;
padding-right: 40px;
height: 38px;
line-height: 38px !important;
display: inline-block;
border: 1px solid #000;}

.area {
position:relative;
z-index:1;
font-family: verdana;
width:80%;
text-decoration: none !important;
background-color:#ffffe1;
margin-left:20px;
margin-right:20px;
margin-top:-20px;
margin-bottom:20px;
padding-top:40px;
display: inline-block;
border: 1px solid #000;}
</style>

<a class="Button2">Предисловие</a>
<a class="area">ПРЕДИСЛОВИЕ — вводная статья критического, текстологического, исторического и т. п. содержания,
предпосылаемая книге, чтобы сообщить читателю те или другие сведения, которые по мнению автора, редактора или издателя
необходимы для лучшего понимания последней. В дальнейшем речь идет только о П. к художественным произведениям.
</a> </td></tr></table>
18.11.2012 20:43:03
Найти все сообщения Цитировать это сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #3
RE: Блоки CSS - как поместить на задний план?
Верховный, как всегда на высоте!
Спасибо большое!
19.11.2012 06:49:14
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru