1

ここまで来るのに4時間近くかかりました。3 列のレイアウトを書き留めることができません。これは私がこれまでに得ることができる最高のものです。これは私のcssです:

#header {text-align: center;}

#container {
    width: 960px;
    margin: 0 auto;
     background-color: #FAFAFA;
     color: #003300;
     font-family: Arial, Helvetica, sans-serif;

}

#left {
    float: left;
    width: 150px;
}

#center { margin:0 210px 0 160px;

}

#right{
    float: right;
    width: 200px;
}

#footer { text-align: center;
    clear: both;
}

#left a {text-decoration: none;
         display: block;
         text-align: center;
         color: #FFFFCC;
         font-weight:bold;
         border: 3px outset #CCCCCC;
         padding: 5px;}

figure{}

#left a:link { background-color: #003366; }
#left a:visited { background-color: #48751A; }
#left a:hover {border: 3px inset #333333; }

#left ul { list-style-type: none;
          margin: 0;
          padding-left: 0; }

これは私のプロジェクトのウェブサイトです：

http://younani.com/finalsite/finalindex.html

ご覧のとおり、左、中央、右の列が揃っていません。また、ページが最大化されている場合や通常の場合に合わせてサイトを合わせる方法はありますか? 私はウェブサイトを構築するのが初めてです。また、私たちについてのページでわかるように、ナビゲーションは中央の列に触れていますが、とにかくそのあたりですか? さらに情報を提供する必要がある場合は、お知らせください。ありがとう。

4

1 に答える 1

1

div に追加する必要があり、適切に配置されfloat:left;ます。#centerはい、ピクセルの代わりにパーセンテージを使用して、コンテナーが画面サイズのパーセンテージになるようにすることができます。

編集して 3 列のレイアウトを表示

これは一般的な 3 列のレイアウトです。独自のスタイルを追加する際には、いくつか微調整が必​​要になりますが、うまく機能し、CSS#left, #center, #rightの力を使用して以前の設定をオーバーライドする方法を示しています。 cascade.

<!DOCTYPE html>

<html lang="en">

<head>

   <title>Younani Flower's</title>

   <meta charset="utf-8">

   <style>
        #container {
            width: 960px;
            margin: 0 auto;
        }

        #container div {
            border: 1px solid black;
        }

        #header {}

        #left,
        #center,
        #right {
            float: left;
            margin: 10px 0 10px 20px;
            min-width: 200px;
        }

        #center {
            width: 494px;
        } 

        .clear {
            clear: both;
        }

   </style>

</head>



<body>
    <div id="container" class="clearfix">

        <!-- Header -->
        <div id="header">
            <h1>Younani Flowers</h1>
        </div>

        <!-- Left Column -->
        <div id="left">
            <ul>
                <li><a href="finalindex.html">Home</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="financing.html">Ocassions</a></li>
                <li><a href="aboutus.html">About Us</a></li>
                <li><a href="contactus.html">Contact Us</a></li>
            </ul>
        </div>

        <!-- Center Column -->
        <div id="center">
            <p>Main content</p>
        </div>

        <!-- Right Column -->
        <div id="right">
            <p>Secondary Sidebar</p>
        </div>

        <!-- Footer -->
        <div id="footer" class="clear">     
            <p>&copy; Copyright "Younani" Michael Younani 2012<br /><a href="mailto:YounaniFlower@gmail.com">YounaniFlowers@gmail.com</a></p>
        </div>
    </div><!-- #container -->
</body>

</html>
于 2012-12-01T08:02:14.487 に答える