标题在960gs的位置

Question

Hy。我使用了960gs（12列），我试图将标题放在底部的标志之后。我找到的解决方案不太好，因为它将标题放在标志下。

HTML: 
    <div id="header" > 
    <div class="container_12"> 
     <header> 
     <div class="grid_4"> 
      <a href="index.html" title="Pagina principala - CRCE" rel="home"> 
       <img src="images/CRCE_logo.png" alt="logo CRCE"/> 
      </a> 
     </div> 
     <div id="titlePosition"class="grid_10"> 
      <a href="index.html" title="" rel="home"> 
       <img src="images/titlu_crce.png" alt=""/> 
      </a> 
     </div> 

</header> 
</div> 
</div> 

CSS: 
    #header{ 
    background: #798AF7; 
    background-repeat: repeat-x; 
    height: 205px; 
    overflow: visible; 
    border-bottom: 30px solid #37459D; 
    display: block; 
    } 
    #titlePosition{ 
    position: bottom; 
    } 

该徽标是在4列和10列的标题。此外，我会将语言选择器（选择器）和FB徽标放在右上角，所以我认为这是一个挑战。我们已经附上了详细的图像也一样，看我怎么想看看最终header

Answer 1

我不认为你可以在方式使用的列，其总和应为12

因为第一列的标识与第二列的标识重叠。将您的徽标列设置为2列，并将您的标题设置为10列。

<div class="grid-container"> 
<div class="grid-2 logo-wrapper"> 
    <img class="logo" src="logo.jpg"> 
</div> 
<div class="grid-10"> 
    <!-- Look how the grids can be nested further--> 
    <div class="grid-container"> 
    <div class="grid-10 text-right"> Language selector</div> 
    <div class="grid-10 text-right"> Facebook </div> 
    <!-- You can use top margin --> 
    <div class="top30px grid-12"> Title</div> 
    </div> 
</div> 
</div> 

现在徽标图像设置为绝对位置

.logo 
{ 
position:absolute; 
left:0; 
right:0; 
} 

然后周围的家长.logo将其设置为相对的。

.logo-wrapper 
{ 
    position:relative; 
} 

我已经给出了我的解决方案考虑伪网格系统，因为我没有使用960gs - 网格系统。

一般的思想：

您可以考虑以下3个因素是占据10列

1. 语言选择

2. 的Facebook图标，并

3. 网站不同行标题

温馨提示：为标题，你可以通过 嵌套网格实现它在上面HTML显示

使用上边距，进一步推低到 标题

• 避免绝对位置所需的位置。