人に聞けない痔の悩み、これでスッキリ >>

こんにちは。いつもお世話になっています。
質問は題名の通りです。footerを3カラム使い、3列で配置したいと考えています。

CSS
----
/* フッター */
div#FOOTER {
width:100%;
border-top: 1px solid #204460;
border-bottom: 4px solid #204460;
background: #507EA1 ;
}
div#FOOTERleft{
position:absolute;
left:0;
width:33%;
}
}
div#FOOTERmiddle{
position:absolute;
width:34%;
margin-left:33%;
margin-right:33%;

}
div#FOOTERright{
position:absolute;
right:0;
width:33%;
}
---

html
<div id="FOOTER">
<div id="FOOTERleft">
<h2>連絡先</h2>
<ul>
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<div id="FOOTERmiddle">
<h2>連絡先</h2>
<ul>
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<div id="FOOTERright">
<h2>連絡先</h2>
<ul>
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
</div>

と書いたのですが、なぜかFOOTERleftとFOOTERmiddleの間に隙間ができ、FOOTERrightは他2つの下側に配置されます。

手元のWeb標準の教科書を参考に頑張ってみましたが、うまくできませんでした。

どなたか正常に配置することができる書き方を教えてください。
どうかよろしくお願いします。

このQ&Aに関連する最新のQ&A

文書 意味」に関するQ&A: 契約書の文書の意味

A 回答 (2件)

そんなHTMLは書きません。


FOOTERrightなんて、後日メンテナンスするとき、そこに何が書かれているか解らなくなります。もちろん検索エンジンもわからない。ちゃんと文書構造上意味のあるものにしましょう。
[class名の例]
 header,footer,section(本文),article(完結した記事),aside(直接関係しない記事),nav(ナビゲーション)など、HTML5で採用されるDIVの代わりの要素名をつけるのがよい。これらは検索エンジンは無論、自分でも後で何が書かれているか解る。たとえば右に配置していたものを左にしても不都合はない。
 HTMLはデザインを考えたらダメです。あくまで文書構造を記述するためのものです。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 初心者が作成したマニュアルには、この手の不都合が多々あるので注意すること。


また、IDは一意に文書内の要素を決めるもので通常はリンクの終点です。CSSのためにIDを付けると、一意であるがために何度も記述することになり煩雑になります。逆にリンクの終点であるときは、それをCSSで利用できますが、決して逆(CSSのためにIDを書く)ではない。
[例]
<p class="memo important">補足であり、かつ重要なメモ書き</p>
<p class="memo">たとえば<span class="important">ここは大事</span>です。</p>
これだと
p.important{color:red;}
p.memo{border:solid blue 1px;}
と同じクラスでまとめて書けるしメンテナンスも楽でしょ。もしこれをIDで指定すると大変になる。

★絶対配置するためには、基準が必要です。この場合footer内のものを配置するので、footerはstatic以外にしておく必要がある。ここではrelativeにしておく。
 また本体にはabsoluteを指定しない!!!

以下は、サンプルです。タブは_に変換してあるのでタブに戻すこと。
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み

<!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@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
div.footer{
_width:100%;
_border-width: 1px 0px 4px 0px;
_border-style: solid;
_border-color: #204460;
_background: #507EA1;
_position:relative; /* この子孫要素を絶対配置するときの基準にする */
}
div.footer div.DocumentType,
div.footer div.nav{
_position:absolute;
_width:33%;
_top:0;
_height:100%; /* 同じプロパティは一度で済ます */
}
div.footer div.nav h2{display:none;}
div.footer div.DocumentType{
_right:0;
_background-color: rgb(200,200,255);
}
div.footer div.nav{
_left:0;
_background-color: rgb(200,255,255);
}
div.footer div.document-version{
_margin:0 34%;
}
div.footer div.DocumentType p{
_margin:5px;
_text-align:center;
}
img{
_border:none;
}
-->
_</style>
</head>
<body>
_<div class="header" id="PAGETOP">
__<h1>サンプル</h1>
_</div>
_<div class="section" id="MAIN">
__<h2>本文</h2>
_</div>
_<div class="footer" id="INFO"><!-- リンク先でもないのにidは使わない -->
__<div class="nav">
___<h2>このページの目次</h2>
___<ul>
____<li><a href="#PAGETOP">TOP</a></li>
____<li><a href="#MAIN">本文</a></li>
____<li><a href="#INFO">文書情報</a></li>
___</ul>
__</div>
__<div class="document-version">
___<dl>
____<dt>First Published</dt>
____<dd>2005-06-10</dd>
____<dt>Last Modified</dt>
____<dd>2005-06-10 12:00:00 (JST)</dd>
___</dl>
__</div>
__<div class="DocumentType">
___<p>
____<a href="http://validator.w3.org/check?uri=referer">
_____<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88">
____</a>
___</p>
___<p>
____<a href="http://jigsaw.w3.org/css-validator/check/referer">
_____<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88">
____</a>
___</p>
__</div>
_</div>
</body>
</html>
    • good
    • 1
この回答へのお礼

ご回答ありがとうございます。
なるほどです。idとclassを同一視していました。(どちらも似たようなものだと思っていました。)
idはページの場所や特定のものを一意に定めるためで、classはデザインを設定するというのは書く上で覚えておかなければいけないことなのですね。

>HTMLはデザインを考えたらダメです。あくまで文書構造を記述するためのものです。
この一文はよく覚えておきます。

もう一度、書いてくださったコードとご指摘いただいた内容を見ながらよく内容を把握しようと思います。
ご丁寧な回答、本当にありがとうございました。

お礼日時:2011/08/20 00:49

div#FOOTERleft{


position:absolute;
left:0;
width:33%;
}
}/*これを消してみてください。*/

}
}
2つもいりません。
    • good
    • 0
この回答へのお礼

ありがとうございます。消し忘れていました。

お礼日時:2011/08/20 00:35

このQ&Aに関連する人気のQ&A

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

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

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の方も修正する方法でもよけ...続きを読む

Qリンクをクリック出来ない。

http://www.1sshindo.com/
このページを作ったのですが、topページで
その他のページというリンクにカーソルを合わせても
指のマークが出ません。
(MACでですが。
windowsを持っていません。)
なぜでしょうか。
この要素をtable_top7と指定して
cssで.table_top7 {
border: thin solid #FF6600;
position: absolute;
width: 70px;
top: 1705px;
left: 70px;
margin: 1px;
}
となっていますが、
要素を下に移動させたかったので
top:1615px;
から
top: 1705px;
としたらこのようになってしまいました。
1680pxぐらいまでならリンクが出るようです。
なぜでしょうか。
他の要素が影響しているんでしょうか。
初歩的すぎて
怒られそうですが。
お願い致します。

Aベストアンサー

あ、すみません。#1の方の回答、見ていませんでした。

fnaviが邪魔をしているのならば、これをTOPからもう少し下げ、padding-topとmargin-topをかぶらないぐらいに小さくしてはどうでしょう?

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

Aベストアンサー

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values fr...続きを読む


人気Q&Aランキング