Проблема выравнивания элемента - отрицательные поля, изображения и т. Д. - PullRequest
Новая
       63

Проблема выравнивания элемента - отрицательные поля, изображения и т. Д.

1 голос
/ 27 августа 2011

Я пытаюсь сделать заголовок, который выходит за границы моей боковой панели и имеет теневое изображение, которое делает его похожим на закладку.

Что-то похожее на это: http://inelmo.com/images/img2.png

Сейчас я старался изо всех сил, но это не выглядит правильно. Вот мой код для боковой панели и заголовка, который, я думаю, должен работать, чтобы добиться этого эффекта, но это не так.

HTML 

<!-- Sidebar -->
<aside id="sidebar">

   <!-- header div -->
   <div id="sideProfile">

      <!-- Span with image background -->
      <span id="sideHshadow"></span>

   </div>

</aside>

CSS 

#sidebar {
        padding: 15px;
        width: 400px;
}

/*Span with shadow image to make it look like a bookmark */
#SideHshadow {
height: 6px;
width: 12px;
margin: 0 0 -6px 0;
float: right;
background: url("../images/sidebar_header_shadow.png") no-repeat;
}

#sideProfile {
background:#333333;
border-bottom: 1px solid #2d2d2d;
height: 50px;
width: 400px;
margin: 0 -12px 0 0;

box-shadow: 0 1px 2px #77bee6;
-moz-box-shadow: 0 1px 2px #77bee6;
-webkit-box-shadow: 0 1px 2px #77bee6;

-webkit-border-radius: 7px 7px 0 7px;
-khtml-border-radius: 7px 7px 0 7px;
-moz-border-radius: 7px 7px 0 7px;
border-radius: 7px 7px 0 7px;


}

Кто-нибудь знает, как это выглядит в примере? Thnx

Вот файл фона #sideHshadow: http://inelmo.com/images/sidebar_header_shadow.png

1 Ответ

0 голосов
/ 27 августа 2011

Вот чистая версия CSS: http://jsfiddle.net/bcZKh/2/

Код ниже: 

<div id="list">
    <div class="item selected">Nationwide Coverage Area</div>
    <div class="shadow"></div>
</div>


body {margin:40px}
#list {width:200px;border-radius:8px;min-height:200px;background:#E6E5E0;padding:20px 0;position:relative}
.item {color:#fff;font-size:0.8em;line-height:24px;font-family:sans-serif;text-indent:24px;margin-right:-12px;margin-left:-12px;position:relative;z-index:1}
.item.selected {background:#C74312;border-radius:4px;border-bottom-left-radius:0}
.shadow {border-color:transparent #733411 transparent transparent;border-width:12px;border-style:solid;height:0;width:0;position:absolute;top:32px;left:-24px;z-index:0}
...