标题的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”像素位置固定在顶部（与顶部顶部对齐）