Ссылка на картинку http://pikucha.ru/i8fag
Проблема вот в чем - имеется два блока меню, сверху к ним присобачены ярлычки "Новичку" и "Полезное"
"Новичка" я еще как-то приделал, но "Полезное" никак. На картинке этот ярлычок получилось поставить, убрав из его кода в CSS параметр Float:left. Как следствие - текст его не обтекает, хотя ярлычок стоит нормально. Как только я ставлю Флоат на место, текст поднимается вверх, но ярлычок исчезает. Помогите пожалуйста разобраться. Вот код CSS
body {
font: 12pt Arial, Helvetica, sans-serif;
background: #e1dfb9; /* Цвет фона */
margin: 0px; padding: 0px;
}
h2 {
font-size: 1.1em; /* Размер шрифта */
color: #800040; /* Цвет текста */
margin-top: 0; /* Отступ сверху */
}
#container {
width: 1100px; /* Ширина слоя */
margin: 0 auto; /* Выравнивание по центру */
background: #fff; /* Цвет фона левой колонки */
}
#header {
min-height:310px; margin:0em 10px 0 10px ;
background:url(../images/personal2.png) no-repeat;
}
#sidebar {
margin-top: 10px;
width:240px; /* Ширина слоя */
margin-left: 54px; /* Отступы вокруг текста */
float: left; /* Обтекание по правому краю */
background: moccasin;
margin-top: 0px;
}
#sidebar2 {
margin-top: 0px;
width:240px;/* Ширина слоя */
margin-left: 54px; /* Отступы вокруг текста */
float:left;
clear:both;
background: lightgreen;
}
#content {
margin-left: 300px; /* Отступ слева */
padding: 10px; /* Поля вокруг текста */
background: #fff; /* Цвет фона правой колонки */
}
#footer {
background: #8fa09b; /* Цвет фона подвала */
color: #fff; /* Цвет текста */
padding: 5px; /* Отступы вокруг текста */
clear: left; /* Отменяем действие float */
}
em.bt, em.bt b, em.bb, em.bb b {
display: block; /* Блочный элемент */
height: 10px; /* Высота уголка */
font-size: 0; /* Размер шрифта */
background:url(../images/83_2.png) no-repeat; /* Путь к файлу с уголками */
position: relative; /* Относительное позиционирование */
}
em.bt {
top: -2px; /* Сдвигаем левый верхний уголок вверх */
left: -2px; /* Сдвигаем влево */
}
em.bt b {
background-position: 100% -10px; /* Рисунок сдвигается к следующему уголку */
left: 4px; /* Сдвигаем вправо */
}
em.bb { background-position: 0 -20px; top: 2px; left: -2px; }
em.bb b { background-position: 100% -30px; left: 4px; }
#ugol {
display: block;
background:url(../images/novichku1.png) no-repeat;
height: 34px;
background-position: 10% 10px;top:px;
}
#ugol2 {
background:url(../images/poleznoe1.png) no-repeat;
height: 34px;
background-position: 10% 10px;
float:let;
clear:both;
}
a { color: black ;text-decoration:none; }
a:visited { color:#red ; }
a:hover { color: #FF00FF; text-decoration:none; }
a:active { color: #009900; text-decoration:underline; }
Sidebar и Sidebar2 - это менюшки. Ugol и Ugol2 - ярлычки. В HTML я просто добавил между двумя сайдбарами (блоками меню) такой вот кодик
Заранее спасибо!!
P.S!! float:let; - специально убрана одна буква для неработоспособности, просто как я уже писал с флоатом он не пашет
27.01.2022, 13:26:44