Aiso, по порядку.
1. Картинка слева:
Создаем див-блок, для этого прописываем в Администрирование - Свой стиль - Структура стиля (А-СС-СС):
#logo_pic {
position: absolute;
height: 210px; /*высота создаваемого блока*/
width: 210px; /*ширина создаваемого блока*/
top: 280px; /*отступ от верха экрана до верха блока*/
background: url("http://uploads.ru/i/8/W/w/8Ww2e.png") no-repeat center top transparent; /*настройки картинки*/
}
Называется этот блок #logo_pic и у него есть ответная часть, которую нужно прописать в html-верхе
<div id="logo_pic"></div>
2. Блок текста с прокруткой
Создаем еще один див-блок, для этого даем ему имя и задаем параметры в А-СС-СС:
#logo_text {
position: absolute;
z-index: 2;
color: #ee1; /*цвет текста*/
height: 210px; /*высота создаваемого блока*/
width: 350px; /*ширина создаваемого блока*/
top: 280px; /*отступ от верха экрана до верха блока*/
margin-left: 230px; /*отступ от левой стороны экрана до левой границы блока*/
overflow: auto;
}
У этого блока тоже есть ответная часть и она тоже прописывается в html-верхе:
<div id="logo_text">
Тут много вашего текста <br/>Тут много вашего текста
</div>
Тег <br/> - перенос строки.
3. Навигационная панель.
Преобразуем элементы из линейных в блочные, чтобы ссылки-картинки выстроились в столбик, и задаем высоту строки под каждую картинку, поскольку в предназначенное место столбец не помещается (А-СС-СС) (заодно добавьте пропущенную цифру в нумерации кода):
/* D3.3 */
#pun-navlinks li {
display: block;
margin: 0.3%;
padding: 5px 0px 5px 10px;
height: 30px;
}
Теперь задаем блоку ссылок навигационной панели абсолютную позицию, чтобы не конкурировала с остальными элементами, и передвигаем на предназначенное ей место (А-СС-СС) (заодно соберите все задаваемые параметры к этому селектору в один список):
#pun-navlinks .container {
border: none;
margin: -200px 0px 0px 570px;
position: absolute;
}
/* D3.2 */
#pun-navlinks .container {
padding-top: 0px;
height: 10px;
width: 120px;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
}
Должно получится так:
/* D3.2 */
#pun-navlinks .container {
padding-top: 0px;
height: 10px;
width: 150px;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
border: none;
margin: -290px 0px 0px 555px;
position: absolute;
}
4. Пользовательские ссылки
Преобразуем элементы из линейных в блочные, чтобы ссылки выстроились в столбик, и задаем высоту строки под каждую ссылку, чтобы они располагались не слишком кучно (А-СС-СС):
/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
display: block;
white-space: nowrap;
height: 25px;
}
Осталось подвинуть блок ссылок пользовательского меню на предназначенное место (А-СС-СС):
/* D4.2 */
#pun-ulinks .container {;
text-align: center; /*(можно изменить на left, чтобы ссылки выровнялись по левому краю своего блока)*/
border: none;
padding-top: 5px;
height: 5px;
margin: -215px 0px 0px 690px;
}
В итоге должно получится вот так:
Отредактировано Remus John Lupin (Вт, 11 Июн 2013 19:35:40)
