このようなデザインを作りたいです。

質問

http://trendytuts.com/web-layout-tutorials/how-to-design-a-lawjustice-website-in-photoshop.html

このサイトで紹介されているデザインをhtmlとcssを使って作成するとき、
どのように画像をスライスして、どう作成すればよいでしょうか。

上のメニューの部分が分からないので教えていただきたいです。
真ん中のオレンジの旗をdivタグに名前をつけてheaderとし
HomeからContact Usまでのメニューをリストタグにして…と考えているのですが。

htmlとcssを使用して、真ん中のheaderがメニューの上に重なるように作ることは出来るのでしょうか。

上記の方法でなくても、他に方法があれば教えていただきたいです。
説明下手ですみません。よろしくお願いします。

回答No.1

mat-21 · ベストアンサー

> 真ん中のオレンジの旗をdivタグに名前をつけてheaderとし
> HomeからContact Usまでのメニューをリストタグにして…と考えているのですが。
HTMLのタグ的には問題ないです。
で、レイアウトはCSSで全て指定します。

例HTML）
<div id="pageheader">
<div id="header"><img src="hata.gif" width="200" height="200"></div>
<ul id="globalmenu">
<li><img src="gm1.gif" width="100" height="50"></li>
<li><img src="gm2.gif" width="100" height="50"></li>
<li id="gm3"><img src="gm3.gif" width="100" height="50"></li>
<li><img src="gm4.gif" width="100" height="50"></li>
<li><img src="gm5.gif" width="100" height="50"></li>
<li><img src="gm6.gif" width="100" height="50"></li>
</ul>
</div>

例CSS）
#pageheader { position:relative; top:0px; left:0px; width:800px; z-index:0; }
#haeder { position:absolute; top:0px; left:300px; width:200px; height:200px; z-index:1; }
#globalmenu { position:relative; top:100px; left:0px; width:800px; height:50px; z-index:0; }
#globalmenu li { width:100px; height:50px; float:left; font-size:1px; }
#gm3 { margin-right:200px; }

てな感じですが、きっちりレイアウトを納めるには、天地横のピクセル指定が重要です。
例に指定したサイズはあくまで例です。

全体を画面センターにしたい場合は、
#pageheader { position:relative; top:0px; left:0px; width:800px; z-index:0; margin:0px auto; }
という風に、marginの左右を「auto」にすれば、センターになります。

また、
#globalmenu li { width:100px; height:50px; float:left; font-size:1px; }
に、「font-size:1px」と指定しているのは、
画像サイズが、<li>の文字サイズより大きくなった場合、その下に隙間が空いてしまうので、
それを防止するために、指定しているだけです。

まとめ）
ようは、CSSのPOSITIONをうまく使えば、自由自在なところに配置できるわけです。

お礼

ありがとうございます！
やってみます！

回答No.2

mat-21

No1の者です。
CSSに記述ミスがありました。
CSSを知っていれば、気づくと思いましたが、一応修正しておきます。

誤
#globalmenu { position:relative; top:100px; left:0px; width:800px; height:50px; z-index:0; }
↓
正
#globalmenu { position:relative; top:100px; left:0px; width:800px; height:50px; z-index:0; margin:0px; padding:0px; list-style:none; }

以上です。失礼しましたm(_ _)m