痔になりやすい生活習慣とは?

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定したのですが、
ウィンドウを小さくしたり、長い文を書いたりすると、
メインの記事がフッターと重なって読めなくなってしまいます。
記事が短い時は、ページ全体の下部に、
長い時はスクロールした一番下にくるようにしたいです。
テーブルのheight指定を使えば同じような効果は得られますが、
テーブルの無いレイアウトをやってみたかったので。
同じような質問は発見したのですが、いい解答が見つかりませんでした。

A 回答 (2件)

何度もゴミ回答ばかりしてすみません。

これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出した内容の扱い(Overflow)
scroll 内容を切り抜く。

次に、オーバーラップを回避した書き方を一応示しておきます。
Left<br/>を追加して、スクロールバーが出ることをご確認下さい。

<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Test</TITLE>
  <STYLE type="text/css">
  #left {
  position:absolute;
  top: 130px;
  left: 100px;
  width: 300px;
overflow-y: scroll;
  }
  #main {
  position:absolute;
  top: 130px;
  left: 400px;
  }
  #right {
  position:absolute;
  top: 130px;
  left: 700px;
  }
  #footer {
  position:absolute;
  bottom: 0px;
  left: 100px;
  }
  </STYLE>
</HEAD>
<BODY>
<div id="left">
 left<br/>
</div>
<div id="main">
 main
</div>
<div id="right">
 right
</div>
<div id="footer">
 footer
</div>
</BODY>
</HTML>
    • good
    • 0

固定しているので仕方ないです。

固定は必要なのでしょうか?
ただ左を150px空けたいだけでしたら

body{margin:0; padding:0; text-align:left }
div{ margin:0 0 0 150px; }
#header {height:60px; }
--------------------------------------
<div id="header">
ヘッダ部
</div>
<div>
メインの記事
</div>
<div>
フッター
</div>

こんなんじゃダメですか?
DIVを他に使用する場合はそれぞれIDかクラスを付けてmargin指定でOKです。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSで、contentsがfooterに重なってしまう

スタイルシートでページを作成しています。

上からheader、contents, footerとボックスを配置しているのですが、
contentsの内容が多くなると、下に膨らむのですがこのときにページ最下部にあるfooterに重なってしまいます。
contents内には、さらにボックスが複数ありテキストや画像があります。

ためしにcontents内をすべてテキスト文字にしてたくさん記載をしたところ、
footerには重ならず、footerが自動的に下へ移動しました。

これは何がいけないのでしょうか?
なぜcontents内にボックスを入れると、footerに重なってしまうのでしょうか?

Aベストアンサー

多分floatを使っている。
>header、contents, footer
header,section,footerですよね。contentsは変?そもそも複数形じゃないし。
 ⇒HTML5新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
にあわせたほうが良かろうかと
<div class="header">
</div>
<div class="section">
 <h2>本文見出し</h2>
 <p>・・・</p>
 <div class="section">
  <h3>項見出し</h3>
  <p><img src="" width="" height="" alt=""></p>
  <p>記事</p>
  <div class="article"><!-- header,section,footerをもちうる完結した記事 -->
   <div class="header"></div>
   <div class="section"></div>
   <div class="footer"></div>
  </div>
 </div>
 <div class="nav"><!-- ナビゲーション -->
 </div>
 <div class="aside"><!-- このsectionと直接関係ない記事 -->
 </div>
</div>
<div class="footer">
</div>
header,section,footerは何箇所も登場する可能性があるのでclassのほうが良いかな・・

[HTML5だと]
<header>
</header>
<section>
 <h2>本文見出し</h2>
 <p>・・・</p>
 <section>
  <h3>項見出し</h3>
  <p><img src="" width="" height="" alt=""></p>
  <p>記事</p>
  <article>
   <header></header>
   <section></section>
   <footer></footer>
  </div>
 </section>
 <nav>
 </nav>
 <aside>
 </aside>
</section>
<footer>
</footer>

floatを使ってブロックの配置をしないことが原則ですが、画像の場合はfloatさせることもあるでしょうから、その場合にはfloatを終了させるコンテナブロックに対して
:afterまたは:beforeの擬似要素にて
{content:"";
clear:[right|left|both];
display:block;
}
のセットで良いはずです。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
 のDATAでチェック済みHTML4.01 + CSS2.1
★タブは_に置換してあるので戻す。

<!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 name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
body>div.header,
body>div.section,
body>div.footer{
width:90%;min-width:630px;max-width:900px;
margin:0 auto;
padding:5px;
}
body>div.section{position:relative;}
body>div.section>h2,
body>div.section>div.section,
body>div.section>p{
margin: 0 200px;
}
div.section div.nav,
div.section div.aside{
position:absolute;
top:0;
width:200px;
height:100%;
}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
/* ここからが本題 */
/* もしもfloatを使って配置していたら */
div.section img{
float:right;
}
body>div.section:after{
content:"";
display:block;
clear:right;
}
/* わかりやすいように色分け */
div.header{background-color:aqua;}
div.section{background-color:blue}
div.aside{background-color:fuchsia}
div.nav{background-color:gray}
div.footer{background-color:green}
div.section div.section{background-color:lime}
div.div.aside{background-color:maroon}
div.section div.article{background-color:orange;}
div.section div.article div.header{background-color:purple;}
div.section div.article div.section{background-color:silver;}
div.section div.article div.header{background-color:yellow;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
_</div>
_<div class="section">
__<h2>本文見出し</h2>
__<p>・・・</p>
__<div class="section">
___<h3>項見出し</h3>
___<p><img src="./images/01.jpg" width="240" height="180" alt="写真"></p>
___<p>記事</p>
___<div class="article"><!-- header,section,footerをもちうる完結した記事 -->
____<div class="header">HEADER</div>
____<div class="section">SECTION</div>
____<div class="footer">FOOTER</div>
___</div>
__</div>
__<div class="nav"><!-- ナビゲーション -->
___ナビ
__</div>
__<div class="aside"><!-- このsectionと直接関係ない記事 -->
___補足
__</div>
_</div>
_<div class="footer">
__<h2>フッタ</h2>
_</div>
</body>
</html>

多分floatを使っている。
>header、contents, footer
header,section,footerですよね。contentsは変?そもそも複数形じゃないし。
 ⇒HTML5新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
にあわせたほうが良かろうかと
<div class="header">
</div>
<div class="section">
 <h2>本文見出し</h2>
 <p>・・・</p>
 <div class="section">
  <h3>項見出し</h3>
  <p><img src="" width="" height="" alt=""></p>
  <p>記事</p>
  <div class="ar...続きを読む

Qcssでコーディング レイアウト重なってしまう

たすけてください
かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで
重なり作業ができません。positionの設定がいけないのはわかっています。。。

上から順にheader→nav→a→b(c1,c2)→footerです。
jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、
navがうごくようになったら他の<div>がきゅっとうえによってしましました。
他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。
空が白みはじめたのであきらめましたが配置ができないと次に行けず途方にくれています。

以下にソース書きます。
お願いいたします。

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">

<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){

$(window).scroll(function(){
var dy=$(this).scrollTop();
console.log(dy);
$("#nav").css("top",150+dy/8);
});

});
</script>


<body>
<div id="wrap">
<div id="header" class="box"></div>
<div id="nav" class="box"></div>
<div id="a"></div>
<div id="b" class="box">
<div class="c_box" id="c1"></div>
<div class="c_box" id="c2"></div>
</div>
<div id="footer"></div>
</div>
</body>


<style type="text/css">
.box{ margin:0 auto; width:1260px; position:fixed;}
#wrap{ weidth:1260px;}
#header{ height:145px; background:#fcc; }
#nav{ height:69px; background:#ccc; top:150px; }
#a{ width:1285px; height:522px; background:#ccf; }
#b{ height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;}
.c_box{ width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; }
#c1{ position:absolute; left:24px; top:308px; }
#c2{ position:absolute; left:465px; top:308px; }
#footer{ height:100px; background:#fac; }

</style>

たすけてください
かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで
重なり作業ができません。positionの設定がいけないのはわかっています。。。

上から順にheader→nav→a→b(c1,c2)→footerです。
jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、
navがうごくようになったら他の<div>がきゅっとうえによってしましました。
他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。
空が白みはじめたのであきらめまし...続きを読む

Aベストアンサー

こんな感じでいいですか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<style type="text/css">
body{margin:0;padding:0;}
#wrap{ width:100%; width:100%;}
#header{ width:100%; height:145px; background:#fcc; position:fixed; top:0;z-index:10;}
#nav{ width:100%; height:69px; background:#ccc; position:absolute; bottom:0;}
#a{ width:100%; height:522px; background:#ccf; margin-top:150px;}
#b{ height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;}
.c_box{ width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; }
#c1{ position:absolute; left:0; bottom:0;}
#c2{ position:absolute; right:0; top:0;}
#footer{ height:100px; background:#fac; }
</style>
</head>

<body>
<div id="wrap">
<div id="header">
header
<div id="nav">nav</div>
</div>

<div id="a">a</div>
<div id="b" class="box">b
<div class="c_box" id="c1">c1</div>
<div class="c_box" id="c2">c2</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

こんな感じでいいですか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<style type="text/css">
body{margin:0;padding:0;}
#wrap{ width:100%; width:100%;}
#header{ width:100%; height:145px; background:#fcc; position:fixed; top:0;z-index:10;}
#nav{ width:100%; height:69px; background:#ccc; position:absolute; bottom:0;}
#a{ width:100%; height:522px; background:#ccf; margin-top:150px;}
#b{ height:758px; background:#cff; padding-top:44px; padding-left:24px; p...続きを読む

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qフッターの位置を一番下に表示させたいのですが・・・

表示方法について質問をさせてください。

現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分(ページ最下部)の表示項目を、必ずページの一番下に表示させたいのです・・・。

しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。

コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、その下に無駄な空間が存在してしまいます。

そうでは無く、コンテンツの量に左右されず、必ずブラウザの画面一番下にフッター部分が表示されるようにしたいのですが、色々と試してみるのですが、出来ませんでした・・・。

サイズなどを指定してしまうと、コンテンツの内容に影響されまた結果が変わってしまいますし、ブラウザによってはバグ的な表示になってしまうので、これはNGでした。

これらを実現するためには、何か特殊な設定をHTML側、またはCSS側で定義しなければならないのでしょうか?

ご存知の方いらっしゃいましたら、是非、アドバイスの程よろしくお願いいたします。

表示方法について質問をさせてください。

現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分(ページ最下部)の表示項目を、必ずページの一番下に表示させたいのです・・・。

しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。

コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、...続きを読む

Aベストアンサー

>今回のこの手法はポイントとしては・・合ってますでしょうか?

相対値の中の絶対値を指定する(分かり難くてすいません。)ことで画面最下部へ持ってきています。

positionについては代表的なものを挙げると、
position:relative;←相対
position:absolute;←絶対
※z-index←重なり順(ブラウザによって解釈の違い有)
などがあります。
また、
position:fixed;bottom:0;
などを使って固定してしまう方法もあります。
今回のようなフッターの位置指定については多くのサイトが
いろいろ例などを挙げているので参考にして試してみてください。

>その際に、このpositionを使った・・などはありませんでしょうか?

positionに限らずですが、ブラウザによってはいろいろと不具合があります。
とくにIEは大変です。「CSSハック」などを覚えておくと対応できると思います。

Q訪問済のリンク色を変えない方法

テキストリンクをクリックすると、次から色が変わりますよね?クリック前とクリック後と一緒の色にしたいんです。前に教えてもらったんですが、ページ内の全てのリンクの色が同じ色になってしまったんですが、そういうものなんですか?文字別に色を変えて指定することはできますか?どういうタグを入れたら良いか教えて下さい。

Aベストアンサー

BODYタグをいじります。
<body link="クリック前の色" vlink="クリック後の色">
のようにします。色の部分は#3333FFとか#FFFFFFのように
お好みの色をいれます。

文字別に色を指定するときも
<a href="link_saki.htm"><font color="#FF0066">リンク</font></a>
のように<a>の中に<font color>で指定すれば可能です。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング