div & menu like this design

Question

HTML5에서 메뉴를 디자인하고 있습니다. 첨부 된 이미지의 내용을 달성하는 방법을 누군가에게 알려 줄 수 있습니까? 현재 나는 녹색에서 청색 (푸른 하늘) 메뉴 이미지 (녹색) & DIV 배경색 사이의 간격

Answer 1

"BLUE BRIDGE"가 별도의 이미지라고 가정하고 각 페이지에서 해당 메뉴 탭이 margin-left 속성을 설정하여 이미지의 위치를 ​​다시 지정합니다.

자바 스크립트를 사용할 수 있습니다.

getElementByID('blue-bridge').style.marginLeft = "position px"; 

웹 사이트를 구축하기 위해 마스터 페이지를 사용하는 경우 적절한 위치를 보유하는 간단한 변수를 자바 스크립트 기능에 전달할 수 있습니다.

EX는 : 컨텐츠 페이지

:

<?php 
    $ml=5px; //10px //20px .. depending the page. 
    include('masterpage.php'); 
?> 

마스터 페이지 : PHP를 마스터 페이지에

function setMargin() 
{ 
    getElementByID('blue-bridge').style.marginLeft = "<?php echo $ml; ?>px"; 
} 

좋은 하루 되세요.

편집 1 : 잊어 버려; 특정 이미지를 담고있는 적절한 태그에 ID를 사용하십시오. :)

Answer 2

메뉴 높은 Z- 인덱스를 작성하고 배치 할 수없는 무엇입니까?