0

問題が発生しました。自分のWebサイトyusifmusic.comが、リンク（経歴、ツアー履歴など）がドロップダウンリストに表示されるように編成されています。ただし、ご覧のとおり、テキストが左の列を超えると、左の列に伸び始めます。1つの修正は、コードに大量のブレークを追加することでした（pタグと終了スパンタグの間、下部近く）。ただし、これによりページの下部に多くの空白が追加されます。もっと良い解決策があるに違いないと思います。テーブルの高さをスタイルで100％にしてみましたが、運が悪かったです。この左側の列テーブルの高さを無限に拡張して、このWebページの中央のテキストが表示されたときにインデントされるようにします。今のように見えるのは本当にずさんです...どうすればこれを行うことができますか？ 

<table bgcolor="#000000" width="200" border="0" align="left" cellpadding="35";>
<tr><td>
<div align="center">
<span style="font-size: 12pt">
<u>Tour Dates:</u><p></span>
<span style="font-size: 8pt">
<P>  
2/26 - 50 Mason Social House - San Francisco, CA<br><br>
etc... <br><br>
<p>


</span>
</td></tr>
</table>




<P><br><br><br>
<p>

<div align="center" class="geo">

CONTACT: <a href="mailto:booking@yusifmusic.com">booking@yusifmusic.com</a> etc etc

<br>
<br>

<script language="javascript"> 
function toggleBio() {
var ele = document.getElementById("toggleBio");
var text = document.getElementById("displayBio");
if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "BIOGRAPHY";
}
else {
    ele.style.display = "block";
    text.innerHTML = "hide";
}
} 
</script>

<font size = "4"><center>
<a id="displayBio" href="javascript:toggleBio();">BIOGRAPHY</a> </center></font>

<div id="toggleBio" style="display: none">

<center><b>Yusif!</b></center>
<center><i>Yusif!</i> (self-released)</center>
<center><u>Biography</u></center>
<p>
<p align="left">
"Sometimes our most destructive moments... etc etc<br><br>
4

1 に答える 1

0

個人的には、ウェブサイトのレイアウトをデザインするためにテーブルを扱うのは通常苦痛であり、一般的に多くのウェブ開発はテーブルから離れ、div タグ、クラス、スタイルシートに移行しています。

これが問題の小さな即時修正ではないことは承知していますが、この問題の多くを簡単に Bootstrap.js に移動して、この問題を非常に迅速かつ簡単に修正できると思います。

http://twitter.github.com/bootstrap/scaffolding.html

特に、足場を使用して、既存のコードを挿入できる 3 つの「列」または垂直セクションを作成できます。

ページの残りの部分でブートストラップを適切に使用している場合、セパレーターは下部のセクションで次のようになります。

<div class="row">
   <div class="span4">...Tour Dates Code...</div>
   <div class="span4">...Middle Column Code Contact....Bio....</div>
   <div class="span4">...Code for The Red Column...</div>
</div>

おそらくより迅速な修正となるもう 1 つのことは、下部全体を 1 つの「親テーブル」に含めることです。セルの幅とパーセンテージを自分でいじることができます。コードを親テーブル内に配置すると、セクションの形式が保持されます。

<table bgcolor="#000000" width="100%" border="0" > 
    <tr>
        <td>....Insert left table that has bgcolor="#00000" and cellpadding="35" </td>
    </tr>
    <tr>
        <td>...Insert Center Code here....</td>
    </tr>
    <tr>
        <td>...Insert right table that has cellpadding="8" and bgcolor="#550000"...</td>
    </tr>
</table>

テーブルの詳細については、http ://www.w3schools.com/html/html_tables.aspおよびその他のオンライン サイトを参照してください。

また、テーブル内から align タグを削除し、親セル コンテナーから幅と配置を管理することをお勧めします。

于 2013-01-30T14:01:44.913 に答える