CSSのdivパーツの配置がうまくいきません!助けてください!!
完成予想図
┌―――――――――――――――――――┐
|画像 |
|┌――┐ ┌――――――┐┌――┐|
||ロゴ| || ||検索||
|└――┘ └――――――┘└――┘|
└―――――――――――――――――――┘
現実・・
┌―――――――――――――――――――┐
|画像 |
|┌――┐ |
||ロゴ| |
|└――┘ |
|┌――――――┐┌――┐ |
||| ||検索| |
|└――――――┘└――┘ |
└―――――――――――――――――――┘
画像の上にロゴを配置しています。
さらにロゴの同じ高さの右側に検索窓を付けたいと思っています。
現状のCSSは、以下のようになっています。
/* ヘッダー */
div#header{background-color: #017acd;
background-image: url(sky.jpg);
padding: 28px 20px 100px}
div#header h1{margin: 0}
div#header p{color: #ffffff;
font-size: 0.75em;
margin: 0}
htmlファイルにgoogleのサイト内検索パーツを追加しようと、
div#google {width: 240px;
margin-right: 500px}
を追加しましたが、実際はうまくいかず、ロゴの下に表示されます。
右側に移動することはできましたが、平行線上には持っていけません。
誰か助けてください・・・
HTMLファイル:
<!-- ヘッダー -->
<div id="header">
<h1><img src="logo.gif" alt="LOGO" /></h1>
<p>このサイトは、料理を扱うサイトです。</p>
<!-- SiteSearch Google -->
<div id="google">
<form method=get action="http://www.google.co.jp/search">
<input type=text name=q size=26 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="yahoo.co.jp"><br>
<input type=radio name=sitesearch value="yahoo.co.jp" checked>Site sherch by
<img src="Logo_25gry.gif" alt="Google LOGO" align="absmiddle">
</form>
</div>
</div>
No.2ベストアンサー
- 回答日時:
連日失礼いたします。
div#google {width: 240px;
margin-right: 500px}
のmargin-right: 500px;を消してください。
このままですと、
width 240px
+ margin 500px
= 740px
の要素ができてしまっているので、、
h1が入る隙間がなくなってしまっているのですね。
marginに気づかなくてすみませんでした…
>そしてHTMLのW3Cのテスト結果はエラー99個、ワーニング1個になりました。
>CSSはエラーが1個、ワーニングが3個になりました・・・
ということですが、ここの部分は私からご指摘するのは難しいので、
W3Cの結果を見ながら、ご自分でちょっとずつ修正していくのが一番かな、と思います。
意外とあのサイトで言っていることってものすごい細かいことを言っていたりするので、
表示されてればいっか!な感じでしたら、あまり気にしなくてもいいかもです。
ワーニングは直したほうがいいかもですが…。
clearfixですが、
clearfixの記述をして、
<div id="header" class="clearfix">と記述すればたぶんいけるかと思うのですが・・・。
テーブルの中に入れてしまうのは、一見簡単でいい方法に見えますが、
HTMLの記述としては間違っていますので、
お時間があるときにでもfloatに挑戦してみてください(^^)
ありがとうござます。
テーブルのaliginが使ったら駄目とか、
いつのまにやらHTMLが使いにくくなっていました。
見えたらいいわ的に作っていたので、
width: 240px;
margin-right: 500px;も適当に突っ込んでみました。
自力でブログを作ろうとしましたが挫折しました;;
ワードプレスを利用することにします・・・
また質問すると思うのでよろしくお願いしますmm
No.1
- 回答日時:
前回は良回答をいただきましてありがとうございますm(_ _)m
初めてだったのでテンパりました(笑
さて、今回ですが、
div#google {width: 240px;
margin-right: 500px}
に、floatという要素を付けて浮き上がらせます。
この場合、右側へ動かしたいので
div#google {width: 240px;
margin-right: 500px;
float:right;}
とするとdiv#googleが浮き上がって右側へ移動します。
そして、画像のついている、というh1に対して、
widthを指定します。
これをしないと、h1が画面のいっぱいいっぱいにまで広がってしまうので、
div#googleの入る隙間がうまれません。
この際、おそらくはdiv#googleにfloatを指定するだけでうまくいくと思うのですが、
もしだめだったら、h1の方にもfloat:right;を指定してみてください。
そして、clearfixという技法がありますので、
それをdiv#headerに入れてください。
これをいれないと、下の要素がぐちゃぐちゃになってしまいます。
ここの説明は私がクチベタで説明ができないので
http://blog.d-spica.com/entry/070307clearfix.html
をごらんになってやってみてください。
cssは慣れると本当にいろいろなことができるようになります。
どうぞがんばって慣れて楽しんでくださいね
うまくいかなかったときは、どうなったのか、ということを教えてください。
ありがとうござます。
div#google{・・にfloat:right;を追加しました。
div#header h1{・・にwidth: 500px;を追加しました。
すると検索窓はロゴの下に表示され、画像が伸びて、画像が1枚と1枚目の上部がちょっと表示されました。
clearfixという技法のどれをdiv#headerに追加するのかさっぱりわからないので、
ネットで調べてテーブルでaligin=leftとaligin=rightで表示させました。
そしてHTMLのW3Cのテスト結果はエラー99個、ワーニング1個になりました。
CSSはエラーが1個、ワーニングが3個になりました・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
中央寄せの解除
-
アメブロ。日記から本文がはみ...
-
fc2ブログのブログ説明文の文...
-
Word Press内に、HP制作を作成...
-
Becky!ver.2で、返信・転送用テ...
-
【FC2ブログ】複数カテゴリを作...
-
ブログにカウンターを付ける方法
-
fc2掲示板 「メッセージ表示...
-
wordpressの投稿ページの格納場所
-
画面いっぱいに広がるブログに...
-
テンプレート編集にモジュール...
-
Wordの「キーボードのユーザー...
-
三つ折りのリーフレットを作りたい
-
改ざんは修正や訂正という意味...
-
goo blogの映像外の説明用文字...
-
FC2でブログでプロフィールに家...
-
Seesaaブログで記事内に表を載...
-
ひな形とテンプレートの違い?
-
EXCEL2007のヘッダー・フ...
-
FC2ブログ 去の日付に変更
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
中央寄せの解除
-
ライブドアブログのサイドバー...
-
FC2のテンプレで質問です。
-
ブログ記事内に文章を左右2列に...
-
ブログのデザインがずれる原因
-
FC2ブログの右サイドバーが落ちた
-
Jugem カスタマイズ(背景)
-
アンドロイドで文字が左に偏る。
-
fc2ブログ タイトルを枠で囲み...
-
FC2ブログのテンプレートを...
-
ブログに背景壁紙画像を設定し...
-
FC2のテンプレ
-
ライブドアブログにおいて記事...
-
アメブロcss 3カラムを2カラム...
-
FC2ブログのサイドメニューの調整
-
fc2ブログ背景色変更
-
FC2ブログのテンプレ編集/幅調...
-
HEAD・HTMLの行間改行が上手く...
-
HTML、テーブルが下に落ちます。
-
FC2ブログ ブラウザの違い
おすすめ情報