[返信する]
横に伸びてしまう
By マル
2011-05-09 17:59:00
アルバム機能でタグを使い画像をサムネイル表示にした場合、携帯では普通に表示されて見れるのですが、パソコンから見ると横にスクロールが伸び、画像がズラーッと改行無しで表示されてしまいます
指定した画面端までいったら改行される様にしたいのですが出来ません…
助け合い、タグ・デザイン掲示板で"横""スクロール"と検索し、似たような質問があり回答にあったタグ等を試し色々と自分でも試行錯誤してみましたがどうしても解決出来なかったので知恵を貸してくださると嬉しいです
【上部】
<table width="100%" style="background-color:white; font-size:95%; border-bottom:dotted 1px #40C0FF;"><tr><td style="background-color:#40C0FF; text-align:right; border:solid 8px #40C0FF;"><font size=4 color=white>illust</font></td></tr><tr><td style="text-align:left; border-top:solid 5px #ffffff; border-bottom:solid 5px #ffffff; border-left:solid 0px #ffffff; border-right:solid 0px #ffffff;">落書き等の絵。
#fld_◎#
【一覧】
<a href="#v_url#"><img src="#timg_url#" border="1" height="40" width="30" bordercolor="#006600" hspace="7" vspace="3" /></a>
【下部】
<center>
#prev_←_←# | #next_→_→#</center></td></tr></table>
【共通HEAD】
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"><META NAME="ROBOTS" CONTENT="NONE"> <META NAME="ROBOTS" CONTENT="NOARCHIVE"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache">
<pc><style type="text/css"><!--A{cursor:default;}--></style><style type="text/css"><!--a{text-decoration:underline;}a:hover{position:relative ;top:2px ;left:1px ;}--></style><Style Type=text/css>body,Td{ font-size: 10pt; }</Style><Style Type="text/css"><!--Body,Td { margin:2% 30%; line-height:200%; letter-spacing:0.2em; }br { letter-spacing:0; }--></Style><style type="text/css"><!--BODY,TD{ font-family:"Century"; }--></style><Style Type="text/css"><!--A:link { color: #0066bb; } A:visited { color: #0077dd; } A:active { color: #0066bb; } A:hover { color: #0077dd; }--></Style></pc>
以上のデザインを使っています
ミス等ありましたらご指摘宜しくお願い致します
945SH
[編集]
By 匿名
2011-05-09 19:47:07
<Style Type="text/css"></style>の始まりタグと終了タグの文字が合っていませんし（<style type="text/css"></style>という風に小文字に揃えるのが主流です）、無駄に多いです。CSS要素の最初と最後にあれば十分なものなので、消してみるとスッキリするかと。
それと、BODY,TD{}要素が重なっていたり、左右marginが30%という大きな値になっているのが横スクロール原因じゃないでしょうか。
要素を定義するものの意味をわかっていなければ、CSSを扱うのは難しいかもしれません。
詳しく説明しているサイトもありますし、【margin】等で検索をかけるだけでも意味を説明してるところがヒットしますので、頑張ってみてください。
W61K
[編集]
By マル
2011-05-09 22:35:10
回答ありがとうございます
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"><META NAME="ROBOTS" CONTENT="NONE"> <META NAME="ROBOTS" CONTENT="NOARCHIVE"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache">
<pc><style type="text/css">body{cursor:default;} <!--a{cursor:default;}--> <!--a{text-decoration:underline;}a:hover{position:relative ;top:2px ;left:1px ;}--> body,td{ font-size: 10pt; } <!--body,td { margin:2% 30%; line-height:200%; letter-spacing:0.2em; }br { letter-spacing:0; }--> <!--body,td { font-family:"Century"; }--> <!--a:link { color: #0066bb; } a:visited { color: #0077dd; } a:active { color: #0066bb; } a:hover { color: #0077dd; }--></style></pc>
と、ご指摘された通り<style type="text/css"></style>のタグを小文字に統一し、最初と最後にのみ記載するようにしました
BODY,TD{}要素が重なっているともご指摘して下さいましたが、纏めようとすると私のやり方が悪いのかcssが反映されなくなるので統一は出来ませんでした
marginの指定はデザイン上調度良い余白かと思いますが…
文字のみのページだとちゃんと指定した画面端までいくと改行されますが、アルバムの画像一覧表示のページだけ改行なしになってしまうんです
ちゃんとmarginについても色々調べてどのようなcssなのか理解したつもりですが、何故横にスクロールが伸びてしまうのかは分かりませんでした
945SH
[編集]
By 匿名
2011-05-10 00:16:30
確認したPCのブラウザはInternetExplorerじゃないですか？
文書型宣言欄に何も書かれていない場合、IEではバグが起きることがあります。文書型宣言欄にHTMLかXHTMLの宣言を記述すれば正常に改行されて表示されると思います。
あるいは、一覧部分の<a></a>の前後どちらかに半角スペースを入れてみてください。
前に入れるほうが、再編集の時に消えにくいかもしれません。
少なくとも自分の環境では、それでちゃんと改行されました。
それともう一つ。余計なお世話かもしれませんが…。
margin:2% 30%;をbodyのところに移動してみてはどうでしょうか？
余白をbodyの左右に30%とって、更にその中でtdにも左右30%では、(確認した範囲では大丈夫でしたが)変な表示になるブラウザがないとも言い切れないと思います。
それがちょっと気になりました。
pc
[編集]
By マル
2011-05-10 16:10:30
回答ありがとうございます
匿名様のお陰で解決致しました！
どうやら画像一覧の<a></a>部分に文字が入ってなかったのが原因のようで
<a href="#v_url#"><pc> </pc><img src="#timg_url#" border="1" height="40" width="30" bordercolor="#006600" hspace="1" vspace="1" /></a>
と匿名様のアドバイス通り半角スペースを入力した所、パソコンからも無事改行される様になりました
無事解決しましたが文書型宣言も記述し、marginについても色々と改善をしようと思います
お二方共色々とご指摘してくださり本当にありがとうございました！
945SH
[編集]
[1-10表示]
[返信する]
[新規トピ]
[戻る]
無料HPエムペ！
[返信する]
2011-05-09 17:59:00
945SH
[1-10表示]
[新規トピ]
[戻る]