h2要素で文字列の横に画像を二つ文字列の横に配置したいと考えています。できれば2つできなければ一つその画像に他サイトへのリンクも張りたい場合のソースを教えてください・
ーーーーーーーーーーーーーーーーーーーーー|
--------------------------------- |
●人力はてな ○ ← バナー?部分
--------------------------------- |
コンテンツ
ーーーーーーーーーーーーーーーーーーーーー
●と○は別のロゴ
わかりにくい質問ですがよろしくお願いします。
http://www.lemia.co.jp/skins/lemia/main.css
を見てもらったらわかります。ソースを見たらいいと思ってサイトの場所を教えたんですけど。
トップから順番に書いてますので。
あまりキレイな書き方でもないですが。
ボックスの書き方について、あまりわかってないのであれば、
で勉強したらいいと思います。 わかりやすいですよ。
H2にはどんなにcss 設定しても前後にスペースができてしまい、カチっとしたレイアウトはできないので、h要素に並べる「きっちり」img というのはあきらめた方がいいです。
<h2><h2> にした方が楽です。
どうしてもの場合は div でスペースを設定する必要があると思います。
http://www.lemia.co.jp/lemia/comse/sope.html
<h1>タイトル</h1>
みたいに、書きます。
</div>ご回答ありがとうございます。
サンプルサイトですがidが別CSSファイル定義されているようです。
どのように記述したらよいか教えてくださいますとたすかります
http://www.lemia.co.jp/skins/lemia/main.css
を見てもらったらわかります。ソースを見たらいいと思ってサイトの場所を教えたんですけど。
トップから順番に書いてますので。
あまりキレイな書き方でもないですが。
ボックスの書き方について、あまりわかってないのであれば、
で勉強したらいいと思います。 わかりやすいですよ。
丁寧な回答ありがとうございました。
ソースは見たのですがCSSの在り処ががわからなくて・・・
教えて頂いたサイトで勉強させていただきます。
本当にありがとうございました。
このような感じでどうでしょうか。
http://q.hatena.ne.jp/answer ←ダミー
==CSS==
h2 {
color:#fff;
background-color:#333;
float:left;
width:200px;
height:50px;
margin:0;
}
a.banner {
float:left;
display:block;
width:140px;
height:50px;
}
a img { border:none }
======================
==HTML==========================
<div id="header">
<h2>h2要素の文字列</h2></p>
<a href="他サイトのURL" class="banner"><img src="test.png" width="140" height="50"></a></p>
<a href="他サイトのURL" class="banner"><img src="test.png" width="140" height="50"></a></p>
</div>
==エスケープのため<>を全角にしてます。==
全てブロック要素にしてそれをフロートして並べるというのがポイントです。
丁寧にありがとうございました。
勉強になります。
また機会がありましたらよろしくお願い申し上げます。
丁寧な回答ありがとうございました。
ソースは見たのですがCSSの在り処ががわからなくて・・・
教えて頂いたサイトで勉強させていただきます。
本当にありがとうございました。