2

私の質問は、ロゴとメニューをカプセル化している上部の水平バーについてです。ユーザーの構成 (テキスト サイズ、CSS または画像の無効化) に応じてブラウザーが自動的に調整することを好むため、高さを指定したくありません。

http://jsfiddle.net/5GmWp/30このソリューションposition: absolute;は 、黒いトップバーの周りの白いギャップも回避します。 

#top{ color: white;
      background: none repeat scroll 0 0 #444;
      /* "absolute position" avoids a white gap around the #top black bar */
      position: absolute;
      /* Using absolute position, I do not have to specify the height */
      height: auto;
      width: 100%;
      top: 0;
      left: 0;
      padding-left: 3em; }

ただし、この上部の水平バーは前景に表示され、ページの残りの部分は背景に部分的に表示されます。reset.cssCSSを正規化するために使用したことを修正するには： http://jsfiddle.net/UKYrR/12

#top{ color: white;
      background: none repeat scroll 0 0 #444;
      /* reset.css removes the white gap around the #top box */
      /* position: absolute; // "absolute position" is not required */
      /* However I have to specify the height :( */
      height: 90px;
      /* If height=auto, the logo is partially outside the #top box */
      width: 100%;
      top: 0;
      left: 0;
      padding: 0.5em;
      padding-left: 3em; }

しかし、ロゴ画像を黒いトップ ボックス内に保持するために、高さを指定する必要があります。

そのような水平トップバーをコーディングするための良い方法は何ですか?
また、優れた小さな CSS チュートリアルもありがたく思います ;)

編集：<table>この種の問題を修正する ために使用する前に。<div>しかし、ほとんどの Web サイトの使用と CSS が代わりに使用されていることに気付きました。別の質問:ほとんどの Web サイトが、水平バーを表示する<div>代わりに使用することを好むのはなぜですか? <table>ウェブサイトからのコピペを簡単にするためですか？

詳細: 私は余暇を利用して、視覚障害者がアクセスできる地図を誰でも作成できるようにする Web サイトを開発しています。したがって、CSS を無効にする、画像を無効にする、大きなテキスト サイズを使用する、古いブラウザーなど、考えられるすべての構成で Web サイトが適切に表示されるようにしたいと考えています。また、CSS/HTML/JavaScript/画像ファイルは小さくする必要があります。また、外部の CSS/JavaScript ファイルに依存しない場合もあります。上部の水平バー内にすぐにメニューを追加します。マップ エディタの Web アプリケーション (SVG + JavaScript) も書き直していますが、これは別の話です...

4

2 に答える 2

3

http://jsfiddle.net/UKYrR/16/

これは非常に簡単で (しかも非常にさまざまな方法で解決できる)、何を説明すればよいかわかりません。あなたが望むすべてについて私に聞いてください。

div対table戦争に関しては、ベースまたはベースのレイアウトのような特別な用語さえありtableますinline-block。ここに最悪または最高のものはありません。それらは、あなたの仕事を行うための異なる地下パラダイムです. inline-block私は半年以上 sに固執していますtableが、inline-blocks やs (JS を使用) でfloatさえできない完全にエキサイティングなものを見たことがありません。blockそれは私がinline-blocksを好むのに完全に十分です。

于 2013-05-19T22:24:45.553 に答える