- ベストアンサー
CSSテンプレートを使用したら画像にラインが……
はじめてＣＳＳでサイトデザインを構成しているのですが、 画像を配置するとラインの上に画像が被ってしまいます；； ＣＳＳの変更もしくは書き加えたらいいのでしょうか？それともこれはどうにもならないのでしょうか？
- bootleg_tm
- お礼率62% (5/8)
- HTML
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
１． > <Br clear="..."> 削除 ２． > <img src="aaa.png" Align="..."> align属性の削除 alt属性の追加（画像が表示されない時の代替文）。 width属性・height属性の追加 ３． <div class="txt"> <p class="left-img"><img src="001.jpg" alt="001代替文" width="***" height="***"></p> <p>あああ</p> </div> <div class="txt"> <p class="right-img"><img src="002.jpg" alt="002代替文" width="***" height="***"></p> <p>あああ</p> </div> txtクラス内を上記のように変更 ４． .txt{ ・・・ width: 100%; overflow: auto; } .left-img { float: left; } .right-img { float: right; } 上記をCSS内に追加 下記については関係ないですが > <body style="background:#000000 url(main/img/mainbg.png) fixed no-repeat 107px 0px;"> > <body id="bodyid"> 一つにしましょう。 > <div id="copy"> div要素よりp要素の方が妥当かと思われます。 <p id="copy">
その他の回答 (4)
- key-child
- ベストアンサー率54% (25/46)
htmlソースもないとなんともいえませんが、おそらく#leftの親要素にoverflowプロパティを追加ですかね？
お礼
overflowプロパティを追加してみたのですが、うまくいきません；； HTMLソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title></title> </head> <body style="background:#000000 url(main/img/mainbg.png) fixed no-repeat 107px 0px;"> <body id="bodyid"> <a name="TopofPage"></a> <div id="page"> <div id="right"> <h1>*********</h1> <h2> ///////////////////</h2> <h3>いいいいいいいいい</h3> <div class="txt"> <p><img src="001.jpg" Align="left"> あああああああああああああああああああああああああああああああああああああああああああ <Br clear="left"> </p> </div> <h3>いいいいいいい</h3> <div class="txt"> <p> <img src="002.jpg" Align="right"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ <Br clear="right"> </p> </div> <div class="txt"> <p> あああああああああああああああああああああああああああああああああああああああああああ</p> </div> </div> <div id="copy"> Copyright (C) 2001 @@@@@@@@@@@ , All rights reserved. </div> </div> </body> </html>
- key-child
- ベストアンサー率54% (25/46)
こんな感じでできるんじゃないでしょうか？ できない場合はソースを見てみないことにはなんともいえないので ソースを提示してください。 親要素 { overflow: auto; } 親要素 img { float: right; }
お礼
素材配布サイトで配布していたものを色代え程度しかいじれないのでどこに入れたらいいのかわから無いのでソースを載せます。 #bodyid{ background:#000000 repeat-no repeat left top; padding:0; margin:0; text-align:center; font-family: 'ＭＳ ゴシック'; } #page{ width:520px; margin:0 auto; background:#transparent; font-size:0.8em; float:left; color:#eeeeee; } #left{ width:170px; float:right; } #image{ border:1px solid #999; background:#000000 url('img/image.jpg') no-repeat left top; width:150px; height:570px; margin:10px; } #image td{ padding:10px 10px 30px 10px; } #image ul{ list-style-type:none; margin:0; padding:0; } #image li{ font-weight:bold; color:#fff; font-size:0.8em; margin:0; padding:7px 0; } #image li a{ color:#000000; text-decoration:none; } #image li a:hover{ color:#5A5D73; } #right{ width:520px; float:left; } #right a{ color:#5a5d73; } #right a:hover{ color:#7c7f95; } #right h1{ margin:0; padding:10px 15px; text-align:right; font-size:24px; color:#949294; letter-spacing:1px; } #right h2{ background:#5D5C70; padding:5px 15px; margin:0 0 15px 0; text-align:right; font-size:1em; color:#fff; letter-spacing:1px; font-weight:bold; } #right h3{ border-bottom:1px dashed #7D7C88; font-size:1.1em; margin:0; padding:2px 10px; text-align:left; } .txt{ border-bottom:3px solid #7D7C88; margin:0 0 15px 10px; padding:13px 10px 5px 0; text-align:left; font-size:1em; line-height:120%; } .txt p{ margin:0 0 10px 0; } #pagetop{ padding:0 15px 0 0; text-align:right; } #copy{ clear:both; padding:5px; }
- kyonoryori
- ベストアンサー率40% (30/74)
ボーダーがHTML上で何に定義されているのかわかりませんが、たとえば<hr>なのだとしたら、 hr { clear:both; } とすることで、画像の回り込み（float:left）が解除されると思います。どうでしょうか？
お礼
回答ありがとうございます。
- akuhijrwq
- ベストアンサー率35% (381/1064)
灰色のボーダーを短くすることはcssで可能だけど （borderで設定してある部分の数値を小さくすればなる。） その数字はいつも有効だから、いつも短く表示されるんでよければ。
お礼
回答ありがとうございます。ですが被る部分を短くするのではなくて、 二枚目の画像のようにボーダーが画像の下に配置されるようにしたいのです；；
関連するQ&A
- CSS による画像を使ったロールオーバー
よろしくお願いします。 CSSを使って、画像のロールオーバーをしようとしています。 HTMLの構成としては、 タイトル画像（幅800px）の下に、CSSを使って作った ロールオーバーするメニューを横並びで配置したいと思っています。 http://edo-freiheit.sakura.ne.jp/eblog/2006/06/css_2.html のサイトを参考に（ほとんどまる写しですが）して、 作成してみたのですが、HTML全体を左寄せしても、中央寄せ してもロールオーバーしたメニューの項目の左側に隙間というか 余白が入ってしまい、上のタイトル画像とズレが生じててしまいます。 この余白をなくす方法がありましたらお教え下さい。
- ベストアンサー
- HTML
- CSSのテンプレート
HPを作ろうと思い、無料で配布されているCSSを使ったHPテンプレートを使いたいと思っています。しかし、全く正常に表示されずに困っています。 手順もファイルをダウンロードして解凍し、HTMLファイル（index.htmlなど）をブラウザで開いて、HTMLソースを表示し、それをそのままコピーペーストしています。しかし、HPに表示されるのは白の背景に文字だけで構成されたものになり、全くデザインされていないHPに仕上がります…。色々なサイトで配布されているCSSのテンプレートを同じ方法でトライしてみましたが結果は同じでした。 CSSのことで色々と調べてみましたが納得の行く回答を見つけることができずに困っています…。どうしたらきちんと表示されるようになるのでしょうか？どなたか教えてください。よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSを使ったサイトデザインについて
最近、雑誌などを参考にしながらCSSを使ったサイトデザインに挑戦しています。 そこで疑問に思っているのは、画像の配置方法についてです。 画像をHTML上で配置するのか、CSS上で配置するのかどちらがベストなんでしょうか。（当然、場合によって違うので答えはないのでしょうが） たとえば、gooでいえば左上のロゴマークをHTML上で挿入してCSSで配置するのか、CSSで画像の挿入も含めて配置するのがベストなのか、どちらなのでしょう。 それとも、一定の基準があるのでしょうか。 アドバイスお願いします。
- ベストアンサー
- CSS
- CSS 画像の配置について
http://www.handmc.jp/pc/index.html こちらのページにある メインの写真が2枚 バック画像の上に並べられていますが これをCSSで配置するにはどうしたらよいでしょうか？ 背景のグレーのグラデーションもあるので 写真の上に写真を並べているように見えます 今までのテーブルであれば簡単なのですが 沢山本を買ったり WEBで調べていますが 画像配置の方法が文字の回り込みのものばかりで このページのように画像背景の上に さらに画像背景を配置する方法を知りたいと思っております お手数ですがどなたがご教授お願いします
- ベストアンサー
- HTML
- CSSで背景画像の上にラジオボタンを配置したい
画面のある一部分に背景画像があり（背景画像もCSSで配置したい）、 その背景画像の上にラジオボタンを配置したいのですが、これはCSSで実現できますか？ もし可能でしたら具体的なコード（ｈｔｍｌとCSS）を教えていただきたいです。 よろしくお願いします。
- ベストアンサー
- CSS
- CSSで文字と画像の配置方法は・・・
HTML+CSSで書いています。 画像とテキストを配置しようとしています。 画像は位置固定にして、 テキストは回り込みではなく、その上にかぶさる感じにしたいの ですが、画像は画像、テキストはテキストに分離してしまいます。 （画像を背景みたいに扱いたいのですが、すでに背景はCSSで 指定されてしまっています。。。。） どのようにCSSを記述すればいいのでしょうか？
- 締切済み
- HTML
- ホームページをCSSで配置しているサイトを最近見かけます。
CSSでデザインすると、HTMLのテーブルよりもすっきり見えるからだと思うのですが。 しかしCSSだけで配置やデザインをしっかり組むと、 HTMLのテーブルタグで作成した場合とタグの量がそんなに変わるとは思えません。 よく変わっても倍半分くらいかなと思います。 CSSでデザインするとDreamWeaverなどではデザインをチェックすることができません。 ブラウザに表示して確認しないといけません。 ↑これが結構手間 あとCSSを使う理由としてデザインの変更が簡単ということや、 検索エンジンに優しい？というのもあります。 以上を考えるとCSSでの大きなメリットがあまり見出せないのですが、 スッキリとしたサイトはCSSでデザインされています。 なぜCSSでデザインするほうがいいのでしょうか？ CSSでデザインすることの大きなメリットを教えてください。
- ベストアンサー
- HTML
- 配布されたテンプレートでの画像の差し替え
どうしても分からなく、ここに質問させていただきました。 創作サイトを作っている者です。 サイトで配布されていたテンプレートを使い、そのテンプレート内の画像を差し替えたいのですが、よく分からなくて困っています。 CSSを変更すれば～とだけ説明があったので「background:url('○○')」の部分を差し替えたい画像名に変更したのですが、html表示の方で画像の部分だけ真っ白になってしまいます。 画像の保存先、サイズ等は間違っていません。 何が原因で差し替えられないのでしょうか？ また、CSSを知るにあたりお勧めのサイトがあれば、是非教えていただきたいです。
- 締切済み
- CSS
- CSSで作ったテンプレートがのレイアウトが崩れます
はじめまして。 今、初心ながらにdreamweaverでサイトを作っています。 CSSスタイルを使用し、テンプレートを作成して作ってるのですが、サイトはよくある左にサイドのバーがあって、上にタイトルがあるようなレイアウトなんです。 そこでサイドに画像スペースはheightをautoにしているんですが、ある一定以上高さを大きくすると、画像よりしたのスペースが画像の右側に引っかかるように回り込んでしまいます。 しかし、実際にテンプーレートを適用したファイルを見てみると、レイアウトは崩れていません。 原因はおそらくですが、メインの右部分のコンテンツがテンプレートだとCSSスタイルを指定しているだけで、高さがないためだと思うのですが、これはこのままでも問題ないのでしょうか？ 初心な質問かとは思いますがどうかよろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございます!無事出来ました。 あと、文字を画像の横に回りこませることは出来ないでしょうか？
補足
ページを開きなおしたら回りこんでいました；； おかげさまで、思い通りのページが作れそうです。 ありがとうございました