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

締切済

質問者：prime2011
質問日時：2013/02/27 01:31
回答数：2件

http://www.shogidojo.com/
上記のサイトは、サイトの一番上の見出しバーナー（２４将棋倶楽部の文字があるバーナー）とその横に広告のバーナーが一列に並んでいます。
プラウザのウインドウを小さくして行くと、見出しバーナーは優先的に表示されて、広告バーナーの方が削られていきます。

http://but.mods.jp/mtos/
上記の私のブログもその様にしたいのですが、プラウザのウインドウを小さくすると、広告バーナーが優先的に表示されて、肝心の見出しバーナーが２列目に表示されます。

(1)プラウザウインドウを小さくしても、２列に表現されず、１列のままである事。
(2)見出しバーナーの方が広告バーナーよりも優先的に表示される事。
この２つを実現する良い方法は無いでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2013/02/27 17:50

基本的な考え方は、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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2013/03/04 10:03

No.1

回答者： wo_moon
回答日時：2013/02/27 17:30

すぐ思いつく方法は

タイトルと広告バナーをそれぞれ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;
}
-----------------------------------