このようなdiv＆menuをデザインするには

Question

私はHTML5でメニューをデザインしています。 誰かが添付画像にあるものを達成する方法を教えてもらえますか？ は現在、私は、メニューの画像（緑）&のdivの背景色（スカイブルー）

Answer 1

"BLUE BRIDGE"が別個のイメージであると仮定して、特定のメニュータブが有効なマージン左プロパティを設定することによって画像を再配置する各ページで。

Javascriptを使用できます。

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

あなたのウェブサイトを構築するためにマスターページを使用している場合は、あなたはJavaScript関数に適切な位置を保持する単純な変数を渡すことができます。

EX：PHPのマスターページで：マスターページ上の

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

：

コンテンツページで

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

良い一日を。

編集1：忘れてしまったこと;特定のイメージを保持している適切なタグにIDを使用します。 :)

Answer 2

のz-indexが、メニューが高い、と緑の下で青を置くの間のギャップを埋めることができないのですか？