元素對齊問題 - 負邊距，圖像等

我正在嘗試製作一個標題，它超出了我的側邊欄邊界，並具有使其看起來像書籤的陰影圖像。元素對齊問題 - 負邊距，圖像等

事情與此類似：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

來源

2011-08-27 Ilja

是您在使用正確的html5文檔類型？另外，您的瀏覽器是否支持預留元素？ –

是的，我使用的是正確的！doctype和現代瀏覽器+ IE5的HTML5支持包括在內，我非常有信心，這不是什麼原因造成的問題，但我不明白爲什麼這不起作用的意圖，它可以是#sidebar的填充嗎？不知道... – Ilja

呃...我們沒有圖像文件？這是非常困難的工作這樣的東西沒有所有的部分;） –

這裏是一個純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}

來源

2011-08-27 18:44:24 imsky

元素對齊問題 - 負邊距，圖像等

回答

相關問題