0

ナビゲーションバーを作成する方法を理解できないようで、ページの下部にあるテーブルをページの端と同じ高さに合わせて、コンテンツと端の間に上下左右に隙間がないようにしますそれが意味がある場合は？

ページは初期段階にあるため、コードは所々少し乱雑です。あらかじめご了承ください。

HTML:

<html><html
<head>
 <title> Blog | GameHub</title>

 <link rel="icon" type="image/png" href="Pictures/favicon.ico">
 <link rel="stylesheet" type="text/css" href="new.css">


 <table class="table" cellspacing="0">
  <tr>
   <td class="blog_tops" valign="middle">
    <span>
     <div id="blog_tools">
      <ul>
       <li><a href="">New Post</a></li>
       <li><a href="">UserName</a></li>
      </ul>
   </div>
  </span>
 </td>
</tr>
<tr>
 <td colspan="2" div id="header"><a href="#"><image div id="logo" border="0" al="lt" height="30px" width="200 src=Pictures/trans_logo.png"></a>
</tr>
<tr>
 <td colspan="2" class="tops" valign="middle">
  <span>
   <div id="navbar">
    <ul>
     <li><a href="">Home</a></li>
     <li><a href="articles.html">Articles</a></li>
     <li><a href="forum/overview.php">Forums</a></li>
     <li><a href="contact_us.html">Contact</a></li>
    </ul> 
   </div>
  </span>
 </td>
</tr>
<tr>
 <td class="blog_post_title"><div style="float:left;font-size:12px;font-family:verdana;padding:0px 0px 0px 10px;">UserName</div><div style="float:right;font-size:12px;font-family:verdana;padding:0px 10px 0px 0px;">Date</div></td></tr>'    
 <td class="blog_post_content"><p>TextTextTextTextTextTextTextTextTextTextText</p>
 </td>
</tr>    
<tr>
 <td class="blog_post_title"><div style="float:left;font-size:12px;font-family:verdana;padding:0px 0px 0px 10px;">UserName</div><div style="float:right;font-size:12px;font-family:verdana;padding:0px 10px 0px 0px;">Date</div></td></tr>'    
 <td class="blog_post_content"><p>TextTextTextTextTextTextTextTextTextTextText</p>
 </td>
</tr>    
 <tr>
 <td class="blog_post_title"><div style="float:left;font-size:12px;font-family:verdana;padding:0px 0px 0px 10px;">UserName</div><div style="float:right;font-size:12px;font-family:verdana;padding:0px 10px 0px 0px;">Date</div></td></tr>'    
 <td class="blog_post_content"><p>TextTextTextTextTextTextTextTextTextTextText</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </td>

</tr>
<table class="footer">
 <tr> 
  <td class="copyright">
   <h4></h4>


 </td>
 </td>
</tr>
</table>
</table>
</body>
</html>

CSS:

   #page {
width: 2000px
height: auto;
margin: 0 auto;
background-color: #333;
padding: 0px; }


  #navbar ul {
background: #333;
float: none;
padding: 0px 0px 2px 0px;
text-align: left; 
list-style: none; 
width: 100%;
height: 0px; 
vertical-align: top;
min-width: 1046px; }


  #navbar ul li {
display: inline; 
list-style: none; 
vertical-align: top; }


 #navbar ul li a {
background: #333;
color: white;
padding: 5px 0px 5px 3px;
text-decoration: none;
display: inline;
border-width: 0px 0px 0px 0px;
border-color: #ff6000; 
border-style: solid; 
vertical-align: middle;
text-align: middle;
float: center;  }




 #navbar ul li a:hover {
background: #333;
webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;   
color: #ff6000;}

   #blog_tools ul {
background: #232323;
float: none;
padding: 0px 0px 0px 0px;
text-align: right;
list-style: none;
width 100%;
height: 25px;
vertical-align: top; }

  #blog_tools ul li {
display: inline;
list-style: none;
vertical-align: top; }

  #blog_tools ul li a {
background: #232323;
color: #fff;
text-align: right;
padding: 0px 5px 0px 3px;
text-decoration: none;
display; inlne;
border-width: 0px;
vertical-align: middle;
text-align: middle;
float: center; }

   #blog_tools ul li a:hover {
background: #232323;
webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #01c3f3; }

 .table {
border-width: 2px;
border-color: #fff;
width: 100%; 
margin: 0; 
padding: 0px 0px 0px 0px; 
text-align: center;
border-spacing: 0px;
cellspacing: 0px;
border-collapse: collapse;} 

    #header {
height: 40px;
width: 100%;
background: #333333;
border: 0px;
border-spacing: 0px; }


 #logo {
padding: 0px 0px 0px 50px; }

.tops {
height: 50px;
width: 100%; 
border-spacing: 0px;
padding: 0px 0px 0px 0px;
vertical-align: center;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ff6000; }


.blog_tops {
height: 0px;
width: 100%; 
border-spacing: 0px;
padding: 0px 0px 0px 0px;
vertical-align: center;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ff6000; }


h1 {
text-decoration: underline;
font-family: verdana;
font-size: 20px; 
padding: 0px;
text-align: top; }

h2 {
font-family: verdana; }

h3 {
font-family: verdana; }

p {
font-family: verdana;
font-size: 11pt;
text-align: left;
padding: 0px 0px 0px 10px; }

 a {
font-family: verdana; }


td {
border-width: 0px;
border-style: dotted; 
border-color: olive; 
padding: 0px; }

tr {
padding: 0px;}

.copyright {
height: 200px;
width: 500px;
background-color: #3a3a3a;
padding: 0px 100px 0px 100px; 
border-top: 1px solid rgba(0,0,0,2); }

.copyright h4 {
color: #fff; }

.footer {
width: 100%;
margin: 20px auto;
background: #232323;
padding: 10px 400px 10px 400px; }

前もって感謝します、ライアン

4

1 に答える 1

2

レイアウトにテーブルを使用しないでください。

table 要素は、表形式のデータ用であり、それ以外には何もありません。実際に HTML を書き始めるときは、HTML5 と意味的に正しい要素を使用してください。

したがって、代わりに<div id="navbar">を使用します<nav>。

また、インライン スタイルは使用しないでください。

意味的に正しい HTML(5) の書き方や、プレゼンテーションとコンテンツの分離について、何千ものチュートリアルがあります。

また、2000px のビューポート幅 ( #page {width: 2000px;}) も最新ではないと仮定すると、ますます多くのユーザーがより小さな (より) 小さいディスプレイ (ビューポート) を備えたモバイル デバイスを使用します。

最後になりましたが、コードにいくつかのタイプミスがあります。たとえば、ここのような引用符をたくさん忘れていますwidth="200 src=Pictures/trans_logo.png">。コードを検証することは常に良い考えです。

于 2013-09-15T14:33:02.510 に答える