Должность: в 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 cols и получите название 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
• Используйте верхнее поле, чтобы подтолкнуть название ниже в требуемое положение.