ここ数週間、HTML/CSS の知識を更新するのに時間がかかりました。その結果、以前はテーブルで行っていたレイアウトを、代わりに DIV で実現する方法を学んでいます。
ほとんどの場合は問題ありませんが、次のコードをテーブルとして使用するナビゲーション メニューのスタイルを複製しようとして、いくつかの問題に遭遇しました。
HTML:
<div class="navigation">
<table>
<tr>
<td><a href="index.php">home</a></td>
<td> </td>
<td><a href="about.php">about</a></td>
<td> </td>
<td><a href="music.php">music</a></td>
<td> </td>
<td><a href="geeking.php">geeking</a></td>
<td> </td>
<td><a href="contact.php">contact</a></td>
</tr>
</table>
</div>
CSS:
div.navigation{
text-align: center;
color: hsla(200,50%,45%,0.6);
margin: auto;
font-family: monospace;
letter-spacing: 2px;
position: relative;
top: -13px;
margin: 20px auto 20px auto;
width: 60%;
}
.navigation table{
height: 70px;
}
th{
text-align: center;
color: hsla(180,50%,45%,0.4);
font-size: 1.1em;
}
table{
border-collapse: collapse;
margin: auto;
margin-top: 0px;
}
table,th{
border: 0px solid black;
padding: 5px;
}
.navigation a{
text-decoration: none;
color: hsla(200,50%,45%,0.6);
background-color: transparent, white;
text-transform: lowercase;
font-size: 1.2em;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
letter-spacing: 0px;
width: 50px;
height: 100px;
}
.navigation a:hover{
color: white;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
width: auto;
height: auto;
font-size: 2em;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 0 0 20px hsla(180,50%,40%,.6),
0 0 40px hsla(200,50%,45%,.8);
}
このページをここでライブで見ることができます: http://benjaminsherwood.co.uk/index.php 明確にするために - これは私がメニューに望む動作です - ホバーされた要素のサイズと文字間隔を大きくします、他の要素を左右に押しますが、同じ垂直面にとどまります。私がこだわっているのが縦無地の部分です。
DIV を使用して同じメニューを作成しようとするために使用しているコードは次のとおりです。
HTML:
<div class="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Music</a></li>
<li><a href="">Geeking</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS:
.menu{
position: fixed;
left:0;
right:0;
top:0;
margin: auto;
text-transform: lowercase;
text-align: center;
}
.navigation table{
height: 70px;
}
.menu li{
list-style: none outside none;
display: inline;
}
.menu a{
text-decoration: none;
color: hsla(200,50%,45%,0.6);
font-size: 1.2em;
letter-spacing: 0px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.menu a:hover{
color: white;
font-size: 2em;
font-weight: 600;
letter-spacing: 2px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
text-shadow: 0 0 20px hsla(180,50%,40%,.6),
0 0 40px hsla(200,50%,45%,.8);
}
このページをライブで見ることができます: http://benjaminsherwood.co.uk/test.php
私は週末中ずっとこれを理解しようとしてきました - 私は解決策を高低で検索し、その水平メニューレイアウトを作成するさまざまな方法を適用し、CSS に非常に精通している友人に行くことさえしました - しかし、何を試しても、TABLE レイアウトと同じように動作する DIV ベースのレイアウトを実現する方法がわかりません。
これはまるで、TABLE ベースのレイアウトが TD 要素の中心から要素に変更を適用しているのに対し、DIV ベースのレイアウトは上隅から変更を適用しているようなものです。その結果、DIV ベースのレイアウトは広がるのではなく、下方向にのみ成長するように見えます。その結果、その両側の要素は、同じ水平面上で左右に流れません。 TABLE レイアウトではなく、左または右に押され、下にも押されます。
正直に言うと、DIVスタイルでの動作の違いを受け入れるか、TABLEスタイルを使い続けることが解決策になることはわかっていますが、それが可能であると確信しています.何かが足りないだけです。
私が定義するまで、TABLEスタイルは似たようなことをしていました：
.navigation table{
height: 70px;
}
その後、動作を開始しました。DIV レイアウトのどこかで同じことを行うと問題が解決するかどうかわかりません...さまざまな要素の高さを設定しようとしましたが、何も違いがないようです。
超長文ですみません。私は自分で質問することを本当に避けてきましたが、本当にレンガの壁にぶつかっただけです.