제목 위치는 960gs입니다.

Question

Hy. 저는 960g (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 로고를 오른쪽 상단에 넣으므로 문제가 될 것입니다. 나는, 그것은 때문에 12

에 요약한다 나는 당신이 그 방식으로 열을 사용할 수 있다고 생각하지 않습니다 최종 header

Answer 1

보고하는 방법을 참조하십시오 너무 자세한 내용은 이미지를 첨부했습니다 첫 번째 열의 로고가 두 번째 열에 겹칩니다. 로고 열을 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 주위에 대해 부모

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

이어서 절대 위치 로고 이미지를 설정.

.logo-wrapper 
{ 
    position:relative; 
} 

960gs - 그리드 시스템을 사용하지 않았기 때문에 pseudo grid system을 고려한 해결책을 제시했습니다.

일반 아이디어 :

당신은 3 요소 다음 10 열

에게

1. 언어 선택

2. 페이스 북 아이콘을

3. 사이트를 점령 다른 행에있는 것을 고려할 수

   제목 :

팁 : 위의 HTML에에 아래 더 제목을 밀어

를 사용하여 위쪽 여백을 같이 당신이 중첩 격자를 통해 달성 할 수있는 제목에 대한

• 피 절대 위치 필요한 위치.