2011-07-27 10 views
0

下記のスクリーンショットにある以下のレイアウトを再作成しようとしています。CSSレイアウトに関するヘルプ

screen shot of layout

私は何かアドバイスは素晴らしいことだ、コンテンツセクションで、選択したメニューオプションに参加する方法についてのイムかなり確実ではない。..いただきましたメニューやコンテンツのセクションの作成に取り掛かるための最善の方法をお聞きしたかったです

また、メニューにはul/liを使用する必要がありますか?内部にまたがるよう

そして(作成語るれる)上部のメニューバーには、私は、各項目で、大きなdiv要素を使うべきでしょうか?このレイアウトを再現するために任意のヘルプ

+2

使用[Firebugの](http://getfirebug.com)やChromeコンソール右クリックします、Inspect Element(要素の検査)を実行すると、それらがどのように機能したかがわかります。 :)(これはJIRAのプロジェクト画面です) –

+0

たとえば、左側のタブボタンはULリストです。 –

+0

私はちょうどスクリーンショットを与えられました....( – Mark

答えて

2

ため

おかげで、あなたは概念の多様性を学ぶ必要があります。

まず、ナビゲーションとして動作するように順不同リスト(<ul><li>)をスタイルする方法について説明します。

第二に、あなたはfloat:left|rightposition:absolute|relativeを使用してのいずれかを介して、要素を配置する方法を学習する必要があります。

最後に、おそらく最も重要なのは、Google Chromeの開発ツールやMozilla FirefoxのFirebugの使い方をhtml/cssの読み書きに不可欠なツールとして学ぶ必要があることです。具体的には、他のWebサイトがどのように設計を実装したかを調べるために、これらのツールが必要です。これはおそらくコードを学習する最善の方法の1つです(少なくとも私のためでした)。

これを行う方法の詳細な説明を提供するには、時間がかかりすぎて、グーグルから得た貴重な学習経験を損ない、元のソースコードを熟読し、自分のサイトで再作成しようとする。その段階の任意の時点で、あなたはトラブルに何かを実装している場合は、その後、すべての手段によってstackoverflowの、助けを求めるために戻ってくる:)