このページhttp://morriswebsitedesign.com/about.htmlのコンテンツテキストをナビゲーションリンクに合わせるにはどうすればよいですか?以前は絶対プロパティまたはテーブルを使用していましたが、現在はfloatの使用方法を理解しようとしています。
私はそれをこのように見せたい:A BBB
ここで、Aはナビゲーションで、Bはコンテンツです。
このページhttp://morriswebsitedesign.com/about.htmlのコンテンツテキストをナビゲーションリンクに合わせるにはどうすればよいですか?以前は絶対プロパティまたはテーブルを使用していましたが、現在はfloatの使用方法を理解しようとしています。
私はそれをこのように見せたい:A BBB
ここで、Aはナビゲーションで、Bはコンテンツです。
テキストとナビゲーションリンクが広すぎて、それらを含むに収まりませんdiv
。それらを並べたい場合は、含まれているのサイズを大きくするdiv
か、テキストやナビゲーションリンクのサイズを小さくする必要があります。
たとえば、次のスタイルを使用すると、それらは私のコンピューター上で完全に整列します。
#content { width:700px; }
div
ミニチュアロゴとナビゲーションリンクをスタイルでラップする必要がありますfloat:left;
。float:left
次に、ミニチュアロゴとを削除できますul
。
まず、float:leftを#contentから削除します。これにより、#contentがメニューの右側に表示されます。
次に、テキストの一部をメニューの下に配置したくない場合は、overflow:hiddenを指定します。
#menu{float:left}
#content{overflow:hidden}
このようにして、コンテンツに幅を与える必要はありません。
それらの間にいくらかのスペースを作るために、あなたはあなたのメニューにマージン右とマージン下を与えることができます。
#menu{margin-right:20px; margin-bottom:20px}
私はあなたのcssであなたの'p'がマージントップを持っているのを見ます。そして、それはあなたのコンテンツのトップがあなたのメニューに整列されないようにします。css3を使用して、最初の要素の余白を削除できます。
#content p:nth-child(1){margin-top:0}
編集: #contentをロゴに合わせるには:
#logo2{width:200px; float:left}
#menu{width:200px; float:left; clear:left; margin-bottom:100px}
#content{display:inline}
まず、ロゴとメニューが列として機能する必要があります。両方を同じ幅にし、左にフロートさせる必要があります。左をクリアすると、メニューがロゴの下に移動します。
次に、#contentを選択して、float:leftを削除し、display:inlineを指定します。これにより、ブロックとして機能しなくなります。
メニューの下部の余白は、テキストがメニューの下に移動しないようにするためのものですが、メニューの高さを大きくしてみることができます。
CSSでfloatを使用する場合、floatを追加するアイテムにも幅が必要です。
しかし、フロートするときは、それらのフロートをクリアすることについて知る必要があります。ここに良い読み物があります:
http://css-tricks.com/the-how-and-why-of-clearing-floats/
コンテンツの横にもロゴが必要な場合は、メニューとロゴをdivでラップしてから、その要素をフロートさせます