標題的CSS代碼Joomla

Question

我一直試圖編輯我的標題在Joomla。我已經添加下面的類，以我的模板圓角落，並添加背景：

.holola { 
background: #FFF!important; 
border-top-left-radius: 15px; 
border-top-right-radius: 15px; } 

我怎樣才能把標誌起來，使它看起來越位頭，就像在附加的圖像。我知道如何使用標題中的圖像來實現這一點，但我想使它成爲純粹的CSS，以使頁面在移動版本中看起來更好。

我試圖添加填充，但我認爲它應該是更復雜的代碼來使用？

Answer 1

嘗試增加這些也

#zo2-header{ 

    margin-top: 50px; 
} 

#header_logo .logo_normal{ 
    position: absolute; 
    top: -103px; 
} 

Answer 2

刪除您添加填充。

然後向.wrapper添加一些頂部邊距以將主要內容向下推。

body.boxed .wrapper { 
    margin: 60px auto 0 auto 
} 

現在，將徽標頂端添加到徽標以將其向上移動。

#header_logo { 
    margin-top: -60px 
} 

Answer 3

刪除您padding: 60px 0;從＃ZO2頭，並與margin-top: 60px;取代。

添加 #header_logo { position: relative; top: -60px; }

Answer 4

您可能需要使用position relative。看到這個jsfiddle爲一個簡單的例子，應該適合你的情況。

#img { 
    background-color:red; 
    height: 80px; 
    width: 80px; 
    position:relative; 
    top: -40px; 
} 

基本上這裏的重要部分是position：relative和top：-40px的組合。這表示元素相對於父元素的位置，並將它的頂部「-40」像素位置固定在頂部（與頂部頂部對齊）