0

Photoshop から HTML+CSS コードに至るまで、固定テーブル CSS レイアウトを作成する方法をチュートリアルで勉強しています。

これは、チュートリアルで提案された最後の例です (最後にどのように見える必要があるか):

http://www.html.it/articoli/1688/template/11-css.html

これは以前のテンプレートの私の個人的なバージョンです: http://onofri.org/example/WebTemplate/

左の列の左の影でFirefoxに問題があることをどのように確認できますか（他のブラウザでは他の問題があります）

サンプル テンプレートのように、 bgpage.gifイメージを #container div の背景として設定し、この div の右側に配置して、この影を作成しました。

容器 {

/* /* consente di posizionare un elemento al centro del suo contenitore (non tutti i browser la supportano) */
margin: 0 auto;
width: 770px;   /* Imposto la larghezza */
background: url(../images/bgpage.gif) repeat-y scroll 100% 0 transparent;

}

チュートリアルで提案された例ではうまく機能し、私の場合はうまくいかないのはなぜですか?

誰かが私が解決するのを手伝ってくれる？

TNX

アンドレア

4

1 に答える 1

1

ページの問題は、2 つの画像が重なっているために発生します。より正確には：

bg4.jpgの は のbodyと重なってbgnarrowcolumn.jpgい#containerます。

これを修正するには、次の CSS ルールを追加するだけです。

background: url(../images/bgpage.gif) repeat-y scroll 103% 0 transparent;

100% を 103% に変更します。

ご覧のとおり、チュートリアルページではこの方法を使用しています（つまり、画像を使用して背景を作成しています）。ウェブサイトを作成し、ウェブページのプレゼンテーションを作成するこの方法は時代遅れであり、非常に困難です。あなたが見たように。さらに、多くの画像が必要なため、サーバーにアクセスできます (悪い習慣)。

なぜ画像を使用する必要があるのですか？私の意見では、最善の方法は CSS3 を使用することです。

シャドウを使用した例の Jsfiddle を次に示します: DEMO

グラデーションの背景を作成したい場合は、gradientプロパティを追加するだけです。

于 2013-07-06T19:50:15.257 に答える