ページヘッダー部分のHTML/CSS

質問

独学で勉強中の学生です。
どうしてもできなくて…よろしくお願いします！

ページヘッダー部分1～5（グローバルナビより上）を画像でHTML入れました。

CSSで
全体を inline
1をfloat:
2をmargin-left;
5をfloat: right;

3,4の高さを合わせることができません。

添付画像のような配置にするにはどうしたらよいのでしょうか。

使っているのはDreamweaverです。

よろしくお願いします。

回答No.2

Hanagefactory

まずはもうすこしマークアップをちゃんとしましょう。
そしてinlineとblockの違いを理解してから、「中央寄せ」とかで検索すると、いろいろ学べると思います。

> <header>
> <div id="pageHeadLogo">
> <h1 id="○1"><img src="images/head_fukidashi.png" width="" height="" alt="○1"></h1>

まず、マークアップ的にはここは<nav>でよいのでは？そして<h1>じゃないほうがいいと思います。
あと、<img> のwidth=""はまずいかもしれません。

それはおいておいて、

---
h1 {
display: inline;
}

やりたいこととしては
display: inline-block;
の方があってるのでは？
---
#○1 {
float: 0;
}
このfloatは無効ですね。
noneになってると思います。

---
#○2 {
margin-left: 100px;
}
上のfloatがleftの前提とでしょうか？
意図が不明ですね。

---

だとして、現状のマークアップに近い感じでやるとしたら、
添付画像みたいな感じでよければ、以下のようなソースでいかがでしょうか。
※書く画像は(横px)x(縦px).pngです。
<div id="pageHeadLogo">
<h1 id="a1"><img src="images/150x100.png" alt="○1"></h1>
<h1 id="a2"><img src="images/100x100.png" alt="○2"></h1>
<h1 id="a3"><img src="images/30x100.png" alt="○3"></h1>
<h1 id="a4"><img src="images/300x50.png" alt="○4"></h1>
<h1 id="a5"><img src="images/200x50.png" alt="○5"><img src="images/200x50.png" alt="○5"></h1>
</div>

h1 {
display: inline-block;
}
#a4 img{
height: 50px;
display: table-cell;
vertical-align: middle;
}
#a5 {
float: right;
}
#a5 img{
display:block;
}

お礼

丁寧な回答、ありがとうございます。
基本的なことの理解がまだまだ追いつかないようです…
ひとつひとつ調べながら進めていきます。ありがとうございました。

回答No.1

Hanagefactory

もう少し具体的にタグ名と記述を確認できないと答えようがないですね。
また、最終的にどんな形にしたいのでしょうか？

補足

最終的に添付画像のように、横一列で高さも中央揃えにしたいのです。

HTML

<div id="page">
<header>
<div id="pageHeadLogo">
<h1 id="○1"><img src="images/head_fukidashi.png" width="" height="" alt="○1"></h1>
<h1 id="○2"><img src="images/head_logo.png" width="" height="" alt="○2"></h1>
<h1 id="○3"><img src="images/head_logo2.png" width="" height="" alt="○3"></h1>
<h1 id="○4"><img src="images/head_logo3.png" width="" height="" alt="○4"></h1>
<h1 id="○5"><img src="images/head_logo4.png" width="" height="" alt="○5"></h1>
</div>

CSS

h1 {
display: inline;
}

#○1 {
float: 0;
}

#○2 {
margin-left: 100px;
}

#○5 {
float: right;
}

ここまでの状態です。