0

ホームページの Html テーブルを使用してページ レイアウトを作成しました。

レイアウトは問題ありませんでしたが、テーブルは行くべき道ではないことを読んでいました（SEOとそれだけではないかもしれません）

だから私はdivを使用する必要があります、レイアウトは次のとおりです（私はRTL Lang /style /directionにいます）

ここに画像の説明を入力

私の質問は 、誰でもそのようなレイアウトの方法を単純化したり、例を挙げたりできますか

より詳細に説明します：

テーブルの構造を理解しなければならなかったとき、「私の人生」はとてもシンプルだったと思うので、説明のためにこのマークアップを取ります: 

<table>
     <tr> <td>1</td> <td>2</td> </tr>
     <tr> <td>3</td> <td>4</td> </tr>
</table>

ここでは、これが 2 x 2 のテーブルになることを分析するためにあまり考える必要はありません

しかし、divに関しては、私が計画しているようにそれらを配置する結果が得られません.

2 div を介してそのレイアウトを実現しようとしており (テーブルは関係ありません)、レイアウトがクロスブラウザーになるように機能させようとしています。つまり、少なくとも 3 つの主要なブラウザーで同じように見えますIE8&9/ FF/ Chrome(私の好みのみ)

前もって感謝します

4

4 に答える 4

3

ここに画像の説明を入力
私はあなたが望むようなテンプレートを作るのに苦労しました.あなたがそれを好きになることを願っています.divisionタグによる私のレイアウトを見てください.私のdivロジックに基づいて作成されたスクリーンショットも添付しています.私はそれが明確になると思います.あなたのために。

<div id="main" >
    <div style="background-color:Blue; text-align:center; ">
    Main banner
    </div>
    <div style="background-color:Green; text-align:center; " >
    Top menu
    </div>
    <div style="background-color:Gray; text-align:center; width:300px; float:right; height:200px; " >
    Right side menu
    </div>
    <div style="background-color:Red; text-align:center; height:200px;" >
    <div style="background-color:Fuchsia; text-align:center; width:300px; float:right; height:100px; ">
    contend2
    </div>
    <div style="background-color:Lime; text-align:center;height:100px;   ">
     contend1
    </div>
    <div style="background-color:Aqua; text-align:center; width:300px; float:right; height:100px; ">
    contend4
    </div>
    <div style="background-color:Orange; text-align:center;height:100px;   ">
     contend3
    </div>
    </div>
    <div style="background-color:Silver; text-align:center;   " >
    Footer
    </div>
    </div>


**In case if you want external css then use** 
<div id="main" >
    <div id="mainbanner">
    Main banner
    </div>
    <div id="topmenu" >
    Top menu
    </div>
    <div id="rsm" >
    Right side menu
    </div>
    <div id="maincontend" >
    <div id="c2" >
    contend2
    </div>
    <div id="c1">
     contend1
    </div>
    <div id="c4">
    contend4
    </div>
    <div id="c3">
     contend3
    </div>
    </div>
    <div id="footer">
    Footer
    </div>
    </div>
**CSS................**

#Main   
{
}

#mainbanner
{
    background-color:Blue;
    text-align:center;
}

#topmenu
{
    background-color:Green; 
    text-align:center;
}
#rsm
{
    background-color:Gray; 
    text-align:center; 
    width:300px; 
    float:right; 
    height:200px;
}
#maincontend
{
    background-color:Red; 
    text-align:center;
    height:200px;
}
#c2
{
   background-color:Fuchsia; 
   text-align:center; 
   width:300px; 
   float:right; 
   height:100px;  
}
#c1
{
   background-color:Lime; 
   text-align:center;
   height:100px; 
}
#c4
{
    background-color:Aqua; 
    text-align:center; 
    width:300px; 
    float:right; 
    height:100px;
}
#c3
{
    background-color:Orange; 
    text-align:center;
    height:100px;
}
#footer
{
    background-color:Silver; 
    text-align:center;
}
于 2013-03-13T06:50:07.170 に答える
2

完全なレイアウトを要求することはできませんが、それらを作成するために必要なスキルを確実に習得するのに役立つ 2 つのチュートリアルを書きました: How to Position in CSSとCreate a Fixed ('Sticky') Footer with CSS .

于 2013-03-13T06:48:06.947 に答える
0

これをチェックして

<div id="wrapper">
        <div id="header">
            <p>This is the Header</p>
        </div>
        <div id="navigation">
            <p>This is the Menu</p>
        </div>
        <div id="leftcolumn">
            <div class="row">
            <div>1st block</div>
            <div>2nd block</div>
            </div>
            <div class="row">
            <div>3rd block</div>
            <div>4th block</div>
            </div>
        </div>

        <div id="rightcolumn">
            sfsf
        </div>
        <div id="footer">
            <p>This is the Footer</p>
        </div>
    </div>

デモ

于 2013-03-13T07:53:36.680 に答える