- 締切済み
div内の classのリンクのつけ方
<body class="thrColFixHdr"> <div id="header"> <div id="headerIn"> <div class="logo">店名</div> <h1>ようこそ</h1> </div> <!-- end #header --></div> ホームページの一番上の部分です。 http://www.goo.ne.jp/ 上記サイトのように左上にロゴが入っており、 お店ページのロゴをクリックしたら、上記ページと同じようにトップページに戻るようにしたいのですが、 class="logo"にリンクをつけても反応してくれません。 それ以外にググって色々調べましたが、どうしても方法が分りません。 初歩的な質問かもしれず、恐縮ですがご教授いただければ幸いです。
- ahoutori
- お礼率33% (1/3)
- ホームページ作成ソフト
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- nbafreak
- ベストアンサー率63% (12/19)
<div style="float:left;">ロゴ画像</div><div style="float:right;">ようそこ</div> <div style="clear:both;"></div> としてください。 <div style="clear:both;"></div> を忘れると何かとぶっ壊れますので注意です^^
- ORUKA1951
- ベストアンサー率45% (5062/11036)
bodyにclassは不要でしょう。HTML内にはbodyは一つ(かつ必須)しかないので。 A要素は、inline要素しかないようにもてません。次にブロック要素が現れるとその直前で閉じられていると解釈しなければならない事になっています。 すなわち、<a href="[URL]"><div></div>と書かれていた場合は、 <a href="[URL]"></a> <div></div> と解釈することが決められています。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから <!ELEMENT A - - (%inline;)* -(A) -- anchor --> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Links in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A )］より これは、この要素には(inline要素)のみ含みうると読みます。 また、 7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )はHTML作成で最初に学ぶべき最も重要な概念です。【この説明がないマニュアルはゴミ箱直行だね】 ★？と思ったら、仕様書に目を通す癖をつけましょう。そしたら覚えられる。 ★下記で検証済みHTML4.01strictです。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{ margin:0px;padding:0px;background-color:rgb(200,200,200); } body>div{ width:70%;min-width:600px;max-width:900px;margin-left:auto; margin-right:auto;background-color:white;padding:10px; border:none;position:relative;} p{text-indent:1em;} img.Logo{position:absolute;top:18px;left:0px;border:none;} body>div>h1{text-align:center;margin:20px 0px;;} p.test{position:absolute;font-size:12px;height:18px;top:-12px; left:0px;border:1px solid gray;width:100%;text-align:center; background-color:rgb(200,200,200);padding-top:2px;} --> </style> </head> <body> <div> <a href="./index.html"><img src="http://www.goo.ne.jp/img2/logo/gh_logo2.gif" width="115" height="63" alt="ロゴ" class="Logo" ></a> <h1>サンプル</h1> <p>こんな感じです。幅60％、ウィンドウ幅を変えると、ウィンドウ幅によって最小500px、最大800px内で変化する。ログは左上に絶対配置となっている。</p> <p class="test">ブラウザの横幅を変更しても、内容が左右真中に表示されています</p> </div> </body> </html>
- jun04151
- ベストアンサー率60% (3/5)
検討違いなら申し訳ない。 <a href="リンク先"><img src="画像アドレス"></a> のやり方ではだめなのでしょうか？？ 無理にdivタグにclassを持たせるまでもないかと思いました。
お礼
御回答ありがとうございます。 こんなに早くアドバイスを頂き感謝いたします。 早速試してみます。
補足
大変詳細なアドバイスを頂き深く感謝いたします。 ご教授に従い早速変更を進めておりますが、もう少しのところで詰まっております。 下記のように変更したのですが、今までと表示が逆になってしましました。 前 ロゴ ようこそ 改編後 ようこそ ロゴ <div>の場所を変更してたり<div align="left">を入れたりしたのですが、 いちばん左にロゴ その右横にようこそという文章にしたいのですが、 お手数ですがご教授いただければ幸いです。 知識不足を痛感しORUKA1951様のよりお教えいただきましたアドレスをもとに、勉強に励みたいと思います。 <body class="thrColFixHdr"> <div id="header"> <div id="headerIn"> <div><a href="http://www.yahoo.com/"><img src="../new/img/logo.gif" border="0" alt="ロゴ"></a> <h1>ようこそ</h1> </div> <!-- end #header --></div>