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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS疑似フレーム内の文字色の指...
-
MovableTypeのサブカテゴリ字下...
-
ブログのデザインがずれる原因
-
MovableTypeでCSSにコメントを...
-
FC2ブログ ブラウザの違い
-
ブログの幅を変えたい。【初心...
-
ブログのページレイアウトを元...
-
FC2ブログ タイトルの文字を...
-
ブログのテンプレート編集について
-
HTMLの修正
-
FC2ブログ 拍手・facebookなど...
-
本文の文字を大きくしたい
-
ブログに背景壁紙画像を設定し...
-
gooブログタイトル部の下の幅設定
-
ブラウザの縮小時にブログの表...
-
W3CのHTML結果とCSS結果の問題...
-
したらば掲示板のタイトルをセ...
-
ブログのメイン記事の幅を広げ...
-
Fc2ブログ 背景を黒に変える方...
-
ライブドアブログで字間を変えたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ライブドアブログのサイドバー...
-
中央寄せの解除
-
ライブドアブログにおいて記事...
-
WordPressのヘッダー上部の余白
-
fc2ブログのアクセス解析がう...
-
wordpress カスタムフィールド...
-
gooブログの画像を背景に文字を...
-
ワードプレス、cocoonでタイト...
-
ライブドアブログで字間を変えたい
-
アメブロ。日記から本文がはみ...
-
アメーバブログの両サイドの余...
-
アメーバのブログ 画像の貼り付け
-
bloggerブログで画像の枠を消す...
-
エキサイトブログで挿入画像を...
-
ライブドアブログのまとめブロ...
-
ブログのデザインがずれる原因
-
ワードプレスでタイトルの字数...
-
CSS html ブログの横幅の編集
-
タグ
-
ブログ記事内に文章を左右2列に...
おすすめ情報