コーディングしている Web サイトにいくつかの問題があり、それらに対する答えが見つかりません。まず、問題のあるページの HTML コードと、それにリンクされている CSS のコードを次に示します。
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../CSS/test.css"> <title>Capturing Life - Kim Chaffin Photography</title> </head> <body> <div id="bg2"> <center> <div id="logo"> <img src="../Pictures/logo.png" width="511" height="207" alt="Load Error"> </div> </center> <center> <div id="flourish"> <img src="../Pictures/flourish2.png" width="462px" height="329px" alt="Load Error"> </div> </center> <center> <div id="header"> <svg> <rect x="100" y="100" rx="20" ry="20" width="1096" height="230" style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/> </svg> </div> </center> <center> <div id="headerfix"> <svg> <rect x="100" y="300" width="1096" height="100" style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/> </svg> </div> </center> <center> <div id="tabbox"> <svg> <rect x="100" y="300" width="1096" height="50" style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/> </svg> </div> </center> <center> <div id="tabs"> <ul type=none> <table width="80%"> <tr> <td> <ul> <a href="Home.html"><img src="../Pictures/Kim Photography_1.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_1.png'" onmouseout="this.src='../Pictures/Kim Photography_1.png';" alt="Load Error" /></a> <script type="text/javascript"> img=new Image(); img.src= "../Pictures/Kim Photography on mouseover_1.png"; </script> </td> <td> <a href="About Kim.html"><img style="border:0px;" src="../Pictures/Kim Photography_2.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_2.png'" onmouseout="this.src='../Pictures/Kim Photography_2.png';" alt="Load Error" /></a> <script type="text/javascript"> img=new Image(); img.src= "../Pictures/Kim Photography on mouseover_2.png"; </script> </td> <td onmouseover="showmenu('portfolios')" onmouseout="hidemenu('portfolios')"> <a href="Portfolios.html"><img style="border:0px;" src="../Pictures/Kim Photography_3.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_3.png'" onmouseout="this.src='../Pictures/Kim Photography_3.png';" alt="Load Error" /></a> <script type="text/javascript"> img=new Image(); img.src= "../Pictures/Kim Photography on mouseover_3.png"; </script> <br> <table class="menu" id="portfolios" width="124px" rules="cols"> <tr><td class="menu"><a href="portfolios/maternity.html"><center><b>Maternity</b> </center></a></td></tr> <tr><td class="menu"><a href="portfolios/little ones.html"><center><b>Little Ones</b> </center></a></td></tr> <tr><td class="menu"><a href="portfolios/teens.html"><center><b>Teens</b></center></a> </td></tr> <tr><td class="menu"><a href="portfolios/families.html"><center><b>Families</b> </center></a></td></tr> <tr><td class="menu"><a href="portfolios/events.html"><center><b>Events</b></center> </a></td></tr> <tr><td class="menu2"><a href="portfolios/pets.html"><center><b>Pets</b></center></a> </td></tr> </table> </td> <td onmouseover="showmenu('sessions')" onmouseout="hidemenu('sessions')"> <a href="Sessions.html"><img style="border:0px;" src="../Pictures/Kim Photography_4.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_4.png'" onmouseout="this.src='../Pictures/Kim Photography_4.png';" alt="Load Error" /></a> <script type="text/javascript"> img=new Image(); img.src= "../Pictures/Kim Photography on mouseover_4.png"; </script> <br> <table class="menu" id="sessions" width="121px" rules="cols"> <tr><td class="menu"><a href="sessions/mini.html"><center><b>Mini-Sessions</b></center> </a></td></tr> <tr><td class="menu"><a href="sessions/full.html"><center><b>Full Sessions</b></center> </a></td></tr> <tr><td class="menu"><a href="sessions/newborns.html"><center><b>Newborns</b></center> </a></td></tr> <tr><td class="menu2"><a href="sessions/slice.html"><center><b>Slice of Life</b> </center></a></td></tr> </table> </td> <td onmouseover="showmenu('workshops')" onmouseout="hidemenu('workshops')"> <a href="Workshops.html"><img style="border:0px;" src="../Pictures/Kim Photography_5.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_5.png'" onmouseout="this.src='../Pictures/Kim Photography_5.png';" alt="Load Error" /></a> <script type="text/javascript"> img=new Image(); img.src= "../Pictures/Kim Photography on mouseover_5.png"; </script> <br> <table class="menu" id="workshops" width="143px" rules="cols"> <tr><td class="menu"><a href="workshops/slr.html"><center><b>SLR</b></center></a></td> </tr> <tr><td class="menu"><a href="workshops/quick tips.html"><center><b>Quick Tips</b> </center></a></td></tr> <tr><td class="menu2"><a href="workshops/documenting life.html"><center><b>Documenting Life</b></center></a></td></tr> </table> </td> <td> <a href="Client Galleries.html"><img style="border:0px;" src="../Pictures/Kim Photography_6.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_6.png'" onmouseout="this.src='../Pictures/Kim Photography_6.png';" alt="Load Error" /></a> <script type="text/javascript"> img=new Image(); img.src= "../Pictures/Kim Photography on mouseover_6.png"; </script> </td> <td> <a href="Contact.html"><img style="border:0px;" src="../Pictures/Kim Photography_7.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_7.png'" onmouseout="this.src='../Pictures/Kim Photography_7.png';" alt="Load Error" /></a> <script type="text/javascript"> img=new Image(); img.src= "../Pictures/Kim Photography on mouseover_7.png"; </script> </td> </tr> <li> </ul> </table> </ul> </div> </center> </div> </body> </html>CSS:
body { background-image:url('../Pictures/Black dot 2.png'); background-attachment:fixed; font-family:Arial,Helvetica,sans-serif; } table a { color:black; text-decoration:none; } a:hover { color:#FFFFFF; } td.menu { background-color:#625D5D; } td.menu2 { background-color:#625D5D; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } table.menu { font-size:100%; position:absolute; visibility:hidden; } #bg2 { background:#FFFFFF; background:rgba(255,255,255,1); width:90%; height:90%; margin:4em auto; } #header { position:relative; top:-545px; } #headerfix { position:relative; top:-1265px; } #tabbox { position:relative; top:-1770px; } #tabs { position:absolute; } #flourish { position:relative; top:-150px; right:340px; z-index:+1; } #logo { position:relative; top:113px; right:-240px; z-index:+1; }
これらは私が抱えている問題です:
- このコードでは、ナビゲーション タブ ( ) を移動できません。これらのタブ
div id="tabs"はページの下部に固定されています。移動プロパティ ( ) を適用するi.e. "top:-1000px;"と、タブが移動したい場所に移動するのではなく、完全に消えてしまいます。- 白い背景 (
div id="bg2") により、要素div id="header"、div id="headerfix"、div id="logo"、div id="flourish"、およびdiv id="tabbox"が下に押し下げられ、右に移動します。これは、私が望む上と中央の位置とは対照的です。- ナビゲーション タブ
Portfolios、Sessions、およびWorkshopsには、その下にドロップダウン メニューがあるはずです。ただし、何らかの理由でメニューが表示されません。
それらが私が現在抱えている唯一の問題だと思います。ただし、誰かが私のコードに他の問題を見つけた場合は、教えていただければ幸いです。