はじめての親子ハイキングに挑戦!! >>

HTMLでテキストを入れると文字が重なって左上に全て表示されてしまいます。
また改行も反映されません。

以下のような構成ですが、どのようにすれば、
テキストが普通に表示され改行も反映するでしょうか?

【HTML】

<div id="add">
<p>ああああああああああああああ</p>
<p>いいいいいいいいいいいいいい</p>
<p>ううううううううううううう</p>
</div>

【関連CSS】

#address{
position:relative;
width:921px;
height:308px;
margin:0 auto 50px;
}
#address #logo{
position:absolute;
left:0px;
top:0px;
}
#address #add{
position:absolute;
left:0px;
top:56px;
}
#address #map{
position:absolute;
left:461px;
top:0px;

「HTMLで文字が重なって表示されます」の質問画像

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

A 回答 (3件)

本当に困ってるんだったら、urlを提示しないと誰も解らないヨ。

    • good
    • 1

htmlとcssの全体を見ないと何とも言えない。


書いているhtmlタグ順序も関係するし、cssの他の部分の影響もある。
示されているcssとhtmlの範囲内では文字が重なる事は無い。
    • good
    • 1

このCSSを使うならaddressの子要素としてaddが居ないと機能しない。

以下にする。

<div id="address"> ←追加
<div id="add">
<p>ああああああああああああああ</p>
<p>いいいいいいいいいいいいいい</p>
<p>ううううううううううううう</p>
</div>
</div> ←追加
    • good
    • 1
この回答へのお礼

ご回答ありがとうございます。
しかし修正してみましたがダメでした。。

こちらのCSSが影響していそうです。

#footerarea{
width:100%;
height:454px;
margin:0;
}
#footerarea #footercon{
position:relative;
width:921px;
margin:0 auto;
}
#footerarea #footercon #footer{
position:absolute;
left:0px;
top:60px;
}
#footerarea #footercon #footer #logo{
position:absolute;
left:0px;
top:0px;
}
#footerarea #footercon #footer #add{
position:absolute;
left:0px;
top:56px;

どのようにCSSの設定を直せば、正常にテキストが掲載され、
またBRやPタグも反映されるようになるでしょうか?

お礼日時:2016/07/16 07:32

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

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

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

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

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

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;"
で直接打ち変えてしまえば。

Q画像と文字が重なって表示される。

画像と文字が重なって表示される。


こんにちは。
今、会社でHPの更新プロジェクトにアサインされています。
ただ、HTMLは初めて扱います。

本題ですが、

【 ●ホームへ戻る 】

上記をすべてのページの右下に表示しているのですが、
ほぼすべてのページでは画像と文字が隣り合って表示されているのですが、
1つのページだけは画像と文字が重なってしまいます。

IEの"表示"→"ソース"でひらいてみても、記述内容は同じなのですが、
表示が違います。

これはどういった原因が考えられるのでしょうか。

Aベストアンサー

ありがちなオチとしては表示の違うファイルのみ DOCTYPE 宣言の記述が違うとか。html のソースが同じで、CSS も同一のものを使用している場合、もっともありえそうなのはコレかと。

もしくは CSS の指定に子孫セレクタを使用していて、表示部分の親要素の記述ミス(id や class のタイプミスとか)が存在する、という可能性も無きにしも非ず。

想像で答えられるのはこの程度。
あとは実際にソースを見せてもらわない事には、なんとも言えないですね。

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+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

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テーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

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...続きを読む

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。


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

人気Q&Aランキング