締切済み

バーナーヘッダーを固定する方法

2013/02/27 01:31

http://www.shogidojo.com/ 上記のサイトは、サイトの一番上の見出しバーナー（２４将棋倶楽部の文字があるバーナー）とその横に広告のバーナーが一列に並んでいます。プラウザのウインドウを小さくして行くと、見出しバーナーは優先的に表示されて、広告バーナーの方が削られていきます。 http://but.mods.jp/mtos/ 上記の私のブログもその様にしたいのですが、プラウザのウインドウを小さくすると、広告バーナーが優先的に表示されて、肝心の見出しバーナーが２列目に表示されます。 (1)プラウザウインドウを小さくしても、２列に表現されず、１列のままである事。 (2)見出しバーナーの方が広告バーナーよりも優先的に表示される事。この２つを実現する良い方法は無いでしょうか？

prime2011
お礼率90% (424/471)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/02/27 17:50 回答No.2

基本的な考え方は、min-widthを指定して並べればよいです。幅が指定できるのはブロック要素ですからブロック要素内でinline-blockなブロックを二つ並べます。 ★おまけで、columnを使う段組方法を加えておきます。　残念ながら、IE9以前は使えません。他のモダンブラウザはOK 　現状では、以前に示したようにふたつのOLにするほうが良いでしょう。 ★<DOCTYPE>をこの様にすると標準モードで起動します。 ★序列リストですから<ol>でマークアップすべきです。 ★(iframe内のURLのQUERY_STRINGSの&は、&と書くべきです。) ★(iframeには必ずtitleを書くようにしましょう) ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )で検証済み　HTML4.01transitinal+CSS3 です。 ★とにかくHTMLスタイルシートはシンプルにしましょう。 ★ディスプレイ幅は、スマホの480px～1000px程度まで対応しています。それ以上広い場合は1000pxで固定されて中央 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>＊＊＊＊＊＊＊＊＊＊＊ブログ</h1> ＿＿<p><iframe src="--略--" width="468" height="60" scrolling="no" marginwidth="0" marginheight="0" border="0" frameborder="0" style="border:none;"></iframe> </p> ＿</div> ＿<div class="section"> ＿＿<h2>本文タイトル</h2> ＿＿<div class="section"> ＿＿＿<h3>他ブログ訪問</h3> ＿＿＿<ol start="10"> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>かきくけこさしすせそたちつてとなにぬねのかきくけこさしすせそたちつてとなにぬねの</li> ＿＿＿＿<li>さいすせそ</li> ＿＿＿＿<li>たちつてと</li> ＿＿＿＿<li>なにぬねの</li> ＿＿＿＿<li>はひふへほ</li> ＿＿＿＿<li>まみむめも</li> ＿＿＿＿<li>やゆよ</li> ＿＿＿＿<li>らりるれろ</li> ＿＿＿＿<li>わゐうゑを</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>かきくけこ</li> ＿＿＿＿<li>さいすせそ</li> ＿＿＿＿<li>たちつてと</li> ＿＿＿＿<li>なにぬねの</li> ＿＿＿＿<li>はひふへほ</li> ＿＿＿＿<li>まみむめも</li> ＿＿＿＿<li>やゆよ</li> ＿＿＿＿<li>らりるれろ</li> ＿＿＿＿<li>わゐうゑを</li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>他ブログ訪問</h3> ＿＿＿<ol start="5"> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>かきくけこかきくけこさしすせそたちつてとなにぬねのかきくけこさしすせそたちつてとなにぬねの</li> ＿＿＿＿<li>さいすせそ</li> ＿＿＿＿<li>たちつてと</li> ＿＿＿＿<li>なにぬねの</li> ＿＿＿＿<li>はひふへほ</li> ＿＿＿＿<li>まみむめも</li> ＿＿＿＿<li>やゆよ</li> ＿＿＿＿<li>らりるれろ</li> ＿＿＿＿<li>わゐうゑを</li> ＿＿＿＿<li>ん</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

お礼 2013/03/04 10:03

色々と試みましたが、現状では解決不可能と思いました。回答して頂きしまして、有難うございました。

noname#187595

2013/02/27 17:30 回答No.1

すぐ思いつく方法はタイトルと広告バナーをそれぞれDIVでくくって、仮にdiv.title、div.adsenseとします。この2つをさらに親DIVでくくって、仮にdiv.topboxとします。 3つの要素にきちんと横幅を指定しましょう。ただし、この方法だとウインドウの幅がdiv.topboxより狭くなると、ウインドウに横スクロールが出ることになります。 ----------------------------------- 【html】 <div class="topbox"> <div class="title">タイトル</div> <div class="adsense">広告バナー</div> </div> ----------------------------------- 【css】 .topbox{ width: 800px;/* 幅はtitleとadsenseの合計 */ } /* 親要素.topboxにclearfix*/ .topbox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .topbox{ display: inline-table; } /* Hides from IE-mac \*/ * html .mainbox { height: 1%; } .mainbox { display: block; } /* End hide from IE-mac */ /* clearfix ここまで */ .title{ float: left; width: 200px; } .adsense{ width: 600px; } -----------------------------------

質問者