CSSテクニックコミュのheaderの右側に検索などを一列に並べるには？

初めまして、uriと申します。
いまWebデザインを勉強していますが、中々思うようにコーディングできなくて煮詰っています。
アドバイス宜しくお願いします。

（★ここからhtml）
<div id="header">
<img src="./img/rogo.gif" alt="Joola-Japan" />
<div id="header_text">
<h3>サイト内検索</h3>

<form method=get action="http://www.google.co.jp/search">
<input type=text name=q size=20 maxlength=255 value="">
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="検索">
<font size=-1>
<input type=hidden name=domains value="http://www.#.co.jp">
</form>

<h3><a href="#">| プライバシーポリシー |</a></h3>
<h3><a href="#"> サイトマップ |</a></h3>
</div>
</div>

（★ここからCSS）
#header {
width:750px;
height:75px;
background-image:url(../img/header_bg.gif);
margin-bottom:25px;/* ナビボタン用マージン空け */
}

#header_text {
position:absolute;
top:35px;
margin:0 0 0 50px;
padding:0px;
}

#header_text h3 {
font-size:10px;
float:left;

コメント(25)

最初
全て
最新の40件

[1] mixiユーザー 08月01日 22:48

現状だとやりたいことが伝わりづらいのですが、画像の状態が理想形ですか？

[2] mixiユーザー 08月01日 23:02

>kojiさんへ
お返事ありがとうございます。
すいません、書き方がへたで・・・

画像はJPGのデザインで、それに沿ってコーディングしてるのですが、検索とプライバシーポリシーとサイトマップの文字を図の様に横に並べたいのですが、現在は、検索だけが表示されて
プライバシーポリシーとサイトマップの文字が検索の下に落ちて2行になっている状態です。
宜しくお願いします。

[5] mixiユーザー 08月01日 23:06

>みちさんへ
アドバイス、有難うございます。
一つ一つ検証しながら、チョット頑張ってみます！
有難うございました。
自分でいろいろ試しているうちにどこが変なのかわからなくなってしまって。
区切りのborderってテーブルで囲むんですか？
それともdivで一つ一つ囲って横にborderをつける？

すいません、超初心者な者で。。
宜しくお願いします。

[6] mixiユーザー 08月01日 23:08

>みちさんへ
リストですか～！これも試してみます。
有難うございます

[11] mixiユーザー 08月01日 23:30

>みちさんへ
有難うございます。頑張ってみます

> 飴☄ฺ さんへ
お返事有難うございます。
いろんなやりかたがあるんですね～。
といいつつ、、インライン・・・？
えっと・・・なんだっけ？本で調べてみます。

[12] mixiユーザー 08月01日 23:35

何か結論出ちゃったし、ご自分で調べられてるようなので口幅ったいようですが。
プライバシーポリシー＆サイトマップが２行で表示されてるのは、h3タグで表示＆各項目ごとにくくってるからですね。
<div>プライバシーポリシーサイトマップ</div>
として、1行で表示してあげます。

それを踏まえて↓

＞区切りのborderってテーブルで囲むんですか？

上記の「プライバシーポリシー」「サイトマップ」を、共に<span class="navi"></span>でくくるとします。
この際、CSSには

.navi {
border-left: 1px solid #000000;
padding-left:4px;
padding-right:4px;
}

とすると、文字から4px離れた左側にボーダーが入る＆右側に4pxの空白を設ける、というわけです。

[13] mixiユーザー 08月01日 23:41

丁寧に説明ありがとうございます☆

そうですね（＾＾）
今回はみなさんが言うようにfloatを使用した方がいいと思います。
もし自分がやった場合を長くなりますが書いておきます。

<div id="header">
<h1><img src="./img/rogo.gif" alt="Joola-Japan" /> </h1>
<div id="header_text">
<h2>サイト内検索</h2>

<form method=get action="http://www.google.co.jp/search">
<input type=text name=q size=20 maxlength=255 value="">
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="検索">
<font size=-1>
<input type=hidden name=domains value="http://www.#.co.jp">
</form>

<ul>
<li>｜<a href="#">プライバシーポリシー</a>｜</li>
<li><a href="#"> サイトマップ</a>｜</li>
</ul>
</div>

</div>


/* css style */
#header {
width:750px;
height:75px;
background-image:url(../img/header_bg.gif);
margin-bottom:25px;
}

h1 {
float:left;
}

#header_text {
top:35px;
float:left;
margin:/*ここで左にロゴとの間を取る*/;
}

#header_text ul {
margin:/*ここで検索フォームとの間を取る*/;
}

#header_text ul li {
display: inline;

これぐらいでしょうか☆
検証はしていませんが、その他調整が必要なのは確かです。

[16] mixiユーザー 08月02日 17:48

>みちさん、ぼっこしさん、 Kojiさん、nuさんへ
皆さまいろいろご親切にいろいろアドバイスしていただいて
有難うございました。
自分でそれぞれ検証してみたのですが、まだ上手く表示出来ないんです。きっと超ぼけてることしてるんだと思うのですが・・・
最後はkojiさんのべら写しで、やっても一列に並ばず…
自分でフォーム部分も<li>で囲ってみたりしたんですが。

/* heml */

<div id="header_text">
<h3>サイト内検索</h3>
<ul>
<li>

<form method=get action="http://www.google.co.jp/search">
<input type=text name=q size=20 maxlength=255 value="">
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="検索">
<input type=hidden name=domains value="http://www.#.co.jp">
</form></li>

<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>

</div>

/* css */
h1 {
float:left;
}

h3 {
font-size:small;
}
#header_text {
top:35px;
float:left;
margin-left:50px;
font-size:small;
}

#header_text ul {
margin:5px;
}
#header_text ul li {
display: inline;
}
#haeder_text ul li a {
text-decoration: none;
}

[18] mixiユーザー 08月02日 18:26

ちょっと書き直してみました。

<div id="header_text">

<ul>
<li class="bold">サイト内検索

<form method=get action="http://www.google.co.jp/search">
<input type=text name=q size=20 maxlength=255 value="">
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="検索">
<input type=hidden name=domains value="http://www.#.co.jp">
</form></li>

<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>

</div>

h1 {
float:left;
}

#header_text {
top:35px;
float:left;
margin-left:50px;
font-size:small;
}

#header_text ul {
margin:5px;
}

#header_text li {
display:inline;
border-right: 1px solid #000000;
padding-left:6px;
padding-right:4px;
}

#header_text form{
display:inline;
}

#header_text a {
text-decoration: none;
}

li.bold {
font-weight:bold;
}

これで全て1行で表示＆項目ごとに区切り線が入ります（検証済）。

[19] mixiユーザー 08月02日 18:49

何がブロック要素で何がインライン要素か把握しておかないと、わけわかんなくなると思いますよ。

ちなみにhx、formはブロック要素です。
floatを使うにせよdisplay:inline;を使うにせよ、横並びというのは、本来は改行されてしまうブロック要素を改行させないところがキモですね（positionはちょっと違うか...）。

あと余計な混乱を避けるために、CSSの頭に
* {margin:0; padding:0;}
を入れておくといいかも。

[20] mixiユーザー 08月02日 22:42

>ぼっこしさんへ
ありがとうございます。このままコピペで検証しましたら、
横一列に並びました！有難うございました！
ただ、図の様に項目ごとの区切り線が、サイト内検索の前と検索ボタンの後にも入っちゃいます。(^_^;)

> ginnezさんへ
ありがとうございます。ブロック要素とインライン要素がいまいち理解して無いんですね。私。。
何度も本読んだりしてるんですけれど。。。
本来、改行されてしまうものを、強制的に改行させなくしてるってことですか。
* {margin:0; padding:0;} は、授業で入れるように
聞いたので、必ず入れるようにしています。

[21] mixiユーザー 08月02日 23:35

>ぼっこしさんへ
右にボーダーをつけたいのだけを分けて、
*/HTML*/
<li class="r_b"><a href="#">プライバシーポリシー</a></li>
<li class="r_b"><a href="#">サイトマップ</a></li>

*/css*/
li.r_b {
border-right: 1px solid #000000;
}
にしたら、付けたい所だけボーダーがつきました。
でも、サイト内検索も<li>で囲っていても上にのっかっちゃいます。
図の様に上の部分が今の状態です。
下がPhotoshopの完成デザイン部分です。

[23] mixiユーザー 08月03日 23:51

>Nao7さん
書き込み有難うございます。
横一列に並びました！！
まだ書き方としては変なことしてるかもしれませんが、
見ていただけますでしょうか？

*/ css */
#header {
width: 750px;
height: 75px;
background-image: url(../img/header_bg.gif);
margin: 0px;
margin-bottom: 25px;/* ナビボタン用マージン空け */
}
#header img {/* rogo.gifの横ピクセル指定 */
foat: left;
margin-right: 50px;
margin-left: 0px;
}
#search_box {
float: left;
margin-right: 10px;
margin-left: 100px;
}
h1 {
float: left;
}
h3 {
display: inline;
font-size: small;
}
#header_text {/* ヘッダー内テキスト */
position:relative;
top: 40px;
left: auto;
margin-left: 130px;
font-size: small;
}
#header_text ul {
margin: 5px;
}
#header_text li {
display: inline;
padding-left: 6px;
padding-right: 4px;
}
#header_text form{
display: inline;
}
#header_text a {
text-decoration: none;
}
li.r_b {
border-right: 1px solid #000000;
}

[24] mixiユーザー 08月04日 02:55

完成形から思うに、headerはwidth:100%;で、
そのなかにwidth:750px;のたとえばheader_wrapperがあり、
問題のFormを含むブロックは、header_wrapperに対して
右寄せ、bottom揃えなんじゃないかと。

つまりウインドウサイズを変えた場合も、サイトマップの右側の線と、その下のナビゲーションメニューの「リンク」の右端とがぴったり合うことが意図されたレイアウトだと思うんだけど。。。

てなわけで（？）以下、必要なとこだけ。

<style>
#header_wrapper {
width:750px;
height: 60px;
margin:0 auto;
background-image: url(../img/header_bg.gif);
padding:7.5px 0;
}

ul#header_text {/* ヘッダー内テキスト */
position:relative;
top:35px;
text-align:right;
font-size: 70%;
}

#header_text li,
#header_text form{
display: inline;
}
</style>

<ul id="header_text">
<li>

<form method=get action="http://www.google.co.jp/search">
　<label>サイト内検索
　　<input type=text name=q size=20 maxlength=255 value="">
　　<input type=hidden name=ie value=Shift_JIS>
　　<input type=hidden name=oe value=Shift_JIS>
　　<input type=hidden name=hl value="ja">
　　<input type=submit name=btnG value="検索">
　　<input type=hidden name=domains value="http://www.#.co.jp">
　</label>
</form>

</li>

<li>｜<a href="#">プライバシーポリシー</a>｜</li>
<li><a href="#"> サイトマップ</a>｜</li>
</ul>

[25] mixiユーザー 08月08日 08:19

> ginnezさん
有難うございました。
レス遅くなってしまいごめんなさい。
何とか上手く表示できるようになりました！

皆さま、また宜しくお願いします。

ログインすると、残り10件のコメントが見れるよ