アプリ版：「スタンプのみでお礼する」機能のリリースについて

スタイルシートでサイト作り

解決済

  • 質問者：yu-bi
  • 質問日時：
  • 回答数：2件

現在サイトをスタイルシートを使って作ってます。
まだまだ本＆辞書片手に勉強中の初心者です。

幅４５０px高さ１００％中央配置のテーブル内に
ヘッダー部分に４５０px　×　１３０pxの画像
その左下にメニューバー　右にコンテンツ
を作りたいと思います。

メニューバーは　幅１２８ｐｘ　高さ１００％です。
本を見ながらアレンジして作りました。次の通りです。

/* === サイドバー部分のスタイル === */

.side{width:128px;
vertical-align:top;
padding:0px;
background-color:#999999}

.side div {font-size:12px;
font-weight:bold;
letter-spacing:3px;
border-bottom:solid 1px white}

.side a{color:#333333;
　text-decoration:none;
display:block;
padding-top:5px;
padding-bottom:5px;
padding-left:13px}

.side a:hover{color:ffffff;
background-color:#666666}

<!--=== サイドバー部分のソース ===-->
<td class="side" rowspan="5" valign="top">
<div><a href="link.htm">about</a></div>
<div><a href="link.htm">contents</a></div>
　　<div><a href="link.htm">blog</a></div>
　　<div><a href="link.htm">bbs</a></div>
　　<div><a href="link.htm">link</a></div>
</td>

リンクにふれると色が変わるのが気に入ってます。

この「link」の下にコメントとリンクを入れたいんですが

「拍手」ボタン　<form>・・・</form>
「返事はこちら」　　というコメント（「こちら」部分がリンク）
をセルで囲って、画面下までのばしたいです。

いろいろ試したんですが、新しく作ったセルが横に並んだり
<side>の a の影響を受けてしまったりして思ったように出来ません。
どうぞ御指南お願いします。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： harlan
  • 回答日時：

ブラウザによってCSSやHTMLの属性の対応がマチマチなので、同じ表示にするためにDOCTYPE宣言を


明確に指定する、という事はよくあります。
DOCTYPE宣言の書き方によって、下位互換モードか標準モードに分かれますが

> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
この書き方ですと、互換モードになります。

> IE以外ではautoの様に縮んでしまったので
そうですか？標準モードだと、逆にIEだけが100%にならないと記憶していましたが。
ブロック要素の高さのパーセント指定は、親要素に対するものなので、どこで高さ指定をしているかによって、
どの要素を親要素と判別するか、ブラウザによって違いがあるようです。

> NNで「ページがありません」みたいにエラーがでて表示されないんですが
DOCTYPE宣言によって、このようなエラーが出る事はないと思います。無効な宣言は無視されるだけですから。
外部CSSファイルのパス、ファイル名の指定を間違えているという事はないでしょうか？

> たまに並べたセルに隙間が出来ることがあるんですけど（理論上、数値はあってるはず）なぜなんでしょうか？
これは、いろいろな原因が考えられるため、一概には言えません。
また、IEはサイズの考え方が他のブラウザと違うために、理論上合っていても、隙間ができたり、できなかったりと
困惑させられる事が、よくあります。

複数のブラウザで同じスタイルで表示させるというのは、実は簡単な事ではありません。
解決の方法は、HTMLの内容によって、いろいろ変わってきますので、ソースを貼り付けて頂ければ
具体的なアドバイスができると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

おへんじありがとうございます。
まさにDOCTYPE宣言を変えたところうまくいきました。あんな悩んでいたのに一瞬で解決です・・・。
隙間が出来たのはどうやらよけいな<td></td>が気がつかないうちに勝手に足されていたようです。
まだまだわからないことがたくさんありきりがないです・・。
本当に苦労させられますが今回学んだことを今後も活用させて頂きます！

通報する
お礼日時：2006/01/27 22:26

No.1

  • 回答者： harlan
  • 回答日時：

サイドバーの部分は、１つのセル内に記述されていますね。

そのセルを rowspan="5" として
縦に5段分結合しているわけですから、右のコンテンツ部分は、縦に5個のセルが並んでいる
のではないか、と想像します。
この状態が正しく表示されていると仮定して、サイドバーの下に新しくセルを1つ追加したら
横に並んでしまったとすると、左右のセルの数が合っていない、追加する場所を間違えている、
rowspan="5" の数字を変更するのを忘れている、<tr>を入れる場所が間違っている、
などの可能性があるような気がします。

いずれにしても、このソースだけでは、どこを間違えているかは想像の域を出ません。
上手く表示できない状態の、ソース全体か、少なくとも<table>～</table>までの間を
書いてください。

右のコンテンツは5段のまま、という条件で、<table>内のサンプルを書いて見ました。
参考にして下さい。

<table>
<tr>
<td class="side" rowspan="4" valign="top">
<div><a href="link.htm">about</a></div>
<div><a href="link.htm">contents</a></div>
<div><a href="link.htm">blog</a></div>
<div><a href="link.htm">bbs</a></div>
<div><a href="link.htm">link</a></div>
</td>
<td>メインコンテンツ１</td>
</tr>
<tr><td>メインコンテンツ２</td></tr>
<tr><td>メインコンテンツ３</td></tr>
<tr><td>メインコンテンツ４</td></tr>
<tr>
<td>
「拍手」ボタン<br>
「返事はこちら」
</td>
<td>メインコンテンツ５</td>
</tr>
</table>

この回答への補足

わー！ありがとうございます！！
本をまんまコピーしてたんで、全然わかってませんでした！！！
ほんっと助かりました。
右側のコンテンツのセルをひとつ減らしたら、左側にひとつセルを増やせました。思った通りにできました！！ありがとうございます！

もしよければもう少し教えてもらいたいんですけど、テーブルを高さ１００％で表示したいのですが、IE以外ではautoの様に縮んでしまったので、調べたところ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">と入れるといいようなことが書いてありました。
しかし、NNで「ページがありません」みたいにエラーがでて表示されないんですが、これって何か関係があったのでしょうか？
いろいろ可能性が考えられると思いますが、また補足させて頂きます！
あと、たまに並べたセルに隙間が出来ることがあるんですけど（理論上、数値はあってるはず）なぜなんでしょうか？
便乗質問で、図々しくてすいませんがよろしければ御指南お願いします。

補足日時：2006/01/25 17:44
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報