・ホームページのヘッダー部分(プルダウンメニュー)の背景色(background-color)が上手く表示できません。
現在の状況が以下の画像の通りです。
理想は以下のようにしたいです。
関連のHTMLファイル及びCSSのスクリーンショットは以下の通りになります。
ファイル名:index.php
<div id="hpb-container"> <!-- ヘッダー --> <?php //ヘッダーを表示する headershow($projectName); ?> <!-- inner --> <!-- content -->
ファイル名:style.css
#hpb-main-nav{ width: 100%; min-width: 900px; font-size: 1.4em; margin-top: 1.6em; background-color: #022e5b; overflow:auto; } #hpb-main-nav ul{ width: 900px; margin-left: auto; margin-right: auto; } #hpb-main-nav li{ white-space: nowrap; padding-left: 2px; padding-right: 2px; float: left; background-color: #022e5b; display: block; } #hpb-main-nav li a{ color: #FFFFFF; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 16px; display: block; } #hpb-main-nav li a:hover, #hpb-main-nav li.current-menu-item a, #hpb-main-nav li.current-menu-ancestor a, #hpb-main-nav li.current-menu-item:hover a:hover, #hpb-main-nav li.current-menu-ancestor:hover a:hover{ background-image: url('img/nav-hover-back.png'); } #hpb-main-nav li:hover{ position: relative; }
ファイル名:header.php
* ヘッダーを表示する */ function headershow($projectName){ include 'pullDownMenu.php'; echo "<header id=hpb-grobal-header>"; echo "<hgroup id=hpb-header-main>"; echo "<div id=headlogo>ヒト、組織、会社を 資源を “生かし 活かす”</br>"; echo "<span class=headtitle>有限会社JPG(ジェイ・ピー・ジー)</span></br>"; echo "      <span class=cmpname>Just Profit Guide</span>"; echo "</hgroup>"; echo "<div id=hpb-header-extra1><span> TEL.</span>052-○○○-△△△△"; echo "<p class=address>〒○○○-△△△△ 愛知県名古屋市□□□□</p>"; echo "</div>"; echo "<nav id=hpb-main-nav>"; echo "<div class=menu-mainnav-container>"; //メニューを表示する menushow($projectName); echo "</div></nav></header>"; }//headershow() コード
ファイル名:pullDownMenu.php
* プルダウンのヘッダーメニューを表示する * */ function menuShow($projectName){ echo "<ul id=normal class=dropmenu>"; switch ($projectName){ case "jpg": //メインメニュータイトル $menuName = jpg_menu_title(); //サブメニューの配列 $submenu = jpg_submenu(); break; }//switch menuListShow($menuName,$projectName,$submenu); echo "</ul>"; }//menuListShow() /** * メニューリストを表示する */ function menuListShow($menuName,$projectName,$submenu){ foreach ($menuName as $key => $val){ //初期化 $cnt=0; for($i = 1; $i < count($submenu); $i++){ $row = count($submenu[$i]); //$i行目の要素を$rowにコピーする //メインメニュー名を表示するfor文の二重ループ for($j = 0; $j < $row; $j++){ //count($row)は列数となる。 $key1 = $submenu[$i-1][$j]; if($key == $key1 && $cnt<=0){ switch ($projectName){ //プロジェクトによって処理を分ける case "jpg": if ($key == "index") { //パスを取得する $filepath = PathReturn($key,$projectName); echo "<li><a href=". $filepath .">" . $val . "</a>"; echo "<ul>"; $cnt++; break; }else{ echo "<li><a href=#>" . $val . "</a>"; echo "<ul>"; $cnt++; break; }//if }//switch }elseif($j >= $row - 1 && $cnt <= 0){ //サブメニューがない場合 switch ($projectName){ //プロジェクトによって処理を分ける case "jpg": //パスを取得する $filepath = PathReturn($key,$projectName); echo "<li><a href=". $filepath .">" . $val . "</a>"; echo "<ul>"; break; }//switch }//if }//for }//for //}//foreach //foreach ($menuName as $key => $val){ for($i = 1; $i < count($submenu); $i++){ $row = count($submenu[$i]); //$i行目の要素を$rowにコピーする $cnt = 0;//キー数カウント //for文の二重ループ for($j = 0; $j < $row; $j++){ //count($row)は列数となる。 $key1 = $submenu[$i-1][$j]; if($key == $key1){ $page = $submenu[$i][$j]; //<li>属性を表示する listshow($page,$projectName); $cnt++; //echo "</ul></li>"; }//if }//for }//for echo "</ul></li>"; }//foreach }//menuListShow() /** * <li>属性を表示する */ function listshow($page,$projectName){ $filepath = PathReturn($page,$projectName); $path = basename($filepath); $title = titleShow($path,$projectName); if($filepath == $_SERVER['PHP_SELF']){ //現在いるページ echo "<li class=current-menu-item>"; }else{ echo "<li>"; }//if echo "<a href=" . $filepath . ">" . $title . "</a></li>"; }//listshow() コード
ファイル名:array.php
* ページのパスとページタイトルを返す * */ function jpg_page_array(){ $pageArray = array("index.php"=>"トップページ","concept.php"=>"会社方針","company.php"=>"企業概要","reuse_recycle.php"=>"リユース・リサイクル","lubricant.php"=>"特殊潤滑油", "contact.php"=>"お問い合わせ","contactsure.php"=>"お問い合わせ内容確認","newsContent.php"=>"更新情報内容" ,"newsList.php"=>"更新情報一覧","informationTreat.php"=>"個人情報の取り扱いについて","productInf.php"=>"引取可能商品について","lubproductInf.php"=>"Tacbecon取り扱い商品について" ,"productDetail.php"=>"引取可能商品詳細","lubproductDetail.php" => "取り扱い商品詳細","itsolution.php"=>"ITソリューション事業" ); return $pageArray; }//jpg_page_array() /** * メニュータイトルを返す */ function jpg_menu_title(){ $pageArray = array("index"=>"トップページ","jpg"=>"ジェイ・ピー・ジーについて","jigyou"=>"事業内容","contact"=>"お問い合わせ"); return $pageArray; }//jpg_menu_title() /** *プルダウンメニュー表示用 */ function jpg_submenu(){ $mainmenu = array("index","jpg","jpg","jigyou","jigyou","jigyou","jigyou","jigyou"); $submenu = array("newsList","concept","company","reuse_recycle","productInf","lubricant","lubproductInf","itsolution"); $pageArray = array($mainmenu,$submenu); return $pageArray; }//jpg_submenu() コード
自分でいろいろ原因を探ってみたところ、
CSSの#hpb-main-nav liで「float:left;」と設定していると
現在の状況になってしまうことが分かりました。
そこで、解決策をいろいろ調べたところCSSの410行目で「overflow:auto;」と設定すると、
理想通りに表示されました。しかし、今度は以下のようにプルダウンメニューが
上手く表示されなくなってしまったのです。
どうすればこの問題を解決できるでしょうか?お力添えを頂けると幸甚に存じます。
恐れ入りますが、よろしくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー