divの配置指定で問題が発生しています
- div要素の配置指定に関して問題が発生しています。
- スタイルシートの指定により、色や幅、文字サイズは正しく表示されています。
- しかし、div要素の位置は意図した通りに表示されず、中央に配置されてしまいます。
- ベストアンサー
div の配置指定ができないです
.menu { background-color: mistyrose; background-position: 0px 500px; width: 230px; font-size: 14px; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <div class="menu"> ＨＯＭＥ<p>ＨＯＭＥ<p>ＨＯＭＥ<p>ＨＯＭＥ<p>ＨＯＭＥ<p> </div> このスタイルシートなのですが、色・幅・文字サイズはちゃんと 表示されますが、どういうわけか位置が変化しません。 0px 0px としても左上にはくっつかず、center になります。 どこか間違っていますでしょうか？よろしくお願いします。
- ame-sanc
- お礼率83% (1229/1475)
- その他（プログラミング・開発）
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
背景画像じゃ無くて、DIV要素自体の位置を指定したいのですか。 > background-position: 0px 500px; これ背景画像の位置の指定ですよ。単語を直訳してもわかるように。 要位置を指定するのは position:absolute; top:○px; left:○px; として下さい。 http://www.tohoho-web.com/css/reference.htm#position
関連するQ&A
- div配置のことで質問です。
div配置のことで質問です。 こんにちは。タイトル通りなのですが、divタグがうまく使えません。 いろいろなサイトを参照しましたが、解決できないのでこちらで質問させてください。 お聞きしたい事は3点あります。 （下の方に画像をつけているので参照しながらお願いします。） 1.画像上の黄色のdivくくりを水色の隣に持っていきたいということ 2.赤からオレンジまでの固まりをセンターに持っていきたいということ（横です） 3.紫のdivくくりをpadding:40;に指定すると上下左右に40pxずつ幅が広がってしまうのですが、サイズはwidth900×height500のまま内側に40px余白を作りたいということ もしおわかりになる方がいらっしゃいましたら、教えていただけると幸いです。 どうぞよろしくお願いいたします。 ■スタイルシート /*------------------------------------------------------------------ */ * { margin: 0; padding: 0; } body { text-align: center; background-color: #ffffff; } body div { margin: 0 auto; border : 0 ; } /*------------------------------------------------------------------ブロック要素 */ div.all { width: 900px; margin:0; padding: 0px; } div.aka { text-align: left; width: 900px; margin:0; padding: 0px; background-color: #ff0000; } div.murasaki { font-size:10pt ; text-align: left; width: 900px; height:300px; margin:0; padding:40px; background-color: #aaaaff; } div.mizu { font-size:10pt ; text-align: left; width: 500px; margin:0; padding:0px; background-color: #00ffff; } div.kiiro { font-size:10pt ; text-align: left; width: 400px; margin:0; padding:0px; background-color: #ffff00; } div.orange { font-size:10pt ; text-align: right; width: 900px; margin:0; padding: 0px; background-color: #ff6600; } ■ボディ内 <div class="all"> <!--ーーーーーーーー赤色--> <div class="aka"> テスト </div> <!--ーーーーーーーー紫色--> <div class="murasaki"> テスト </div> <!--ーーーーーーーー水色--> <div class="mizu"> news<br /> <table cellspacing="0" cellpadding="0" width="500"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーー黄色--> <div class="kiiro"> topics<br /> <table cellspacing="0" cellpadding="0" width="400"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーーフッター--> <div class="orange">テスト</div> </div> 長々とすみません。よろしくお願い致します。
- ベストアンサー
- HTML
- ieとfirefoxでdiv枠に２pxのズレ
宜しくお願い致します。 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。 何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div><!-- /header --> <div id="goods"> <div id="top-menu"> </div><!-- /top-menu --> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が 右に２pxにずれる。 どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div><!-- /goods --> <!-- ################################################################################## --> <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div><!-- /col_05 --> <br style="clear:both;"> </div><!-- /menu --> <br style="clear:both;"> <!-- ################################################################################## --> </div><!-- /wrap --> </body> </html>
- ベストアンサー
- CSS
- divの幅が 中身英字だと 固定されない なぜ？
例えば、 <div style="width:200px; background-color:yellow;"> ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt </div> とした場合、字列が折り返されず、幅がどんどん伸びてくんですが、 <div style="width:200px; background-color:yellow;"> ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> とした場合は、字が折り返されて、幅が固定されます。 ひらがなと英字を混ぜて、 <div style="width:200px; background-color:yellow;"> ああtttttttttttttttttttttああああああああああああaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああaaaaaaaaaaaaaaああああああああああああああああああああああああああああああああああああああああああああ </div> としても、英字が長く続いている分だけ幅が伸びていくようでした。 英字があっても、幅が固定されて、折り返されるようにしたいのですが、 どなたか良い方法があれば教えてください。
- 締切済み
- HTML
- 大divの中に小divを配置して回り込ませる方法。
大divの中に小div3つを配置したいのですが、回り込み及び、小divの枠線の表示ができません。配置は大div clearの中の左側にdiv menu、右側にdiv contents、下部にdiv footerを配置したいと思っていますが、回り込みができず、表示したい箇所は下記のように表示されてしまいます。 • xxxx • xxxxx • xxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx 更にliタグの・を消したいのですが、cssにlist-style-type:noneと記述しても消すことができませんでした。 記述のどこに問題がありますか？ ご教授お願い致します。 (css) div#image {margin-left : auto ; margin-right : auto ;width:800px;border:solid 1px #660000;} div#container {margin-left : auto ; margin-right : auto ;width:800px;height:30px;background-color:#000000;border:solid 1px #660000;} h1 {margin:0px;color:#330000;font-family:Geogia,Times New Roman,sans-selif;} h2 {font-size:18px;padding-left:20px;padding- top:5px;margin:0px;color:#ffffff;font-family:Geogia,Times New Roman,sans-selif;} div#clear{border:solid 1px #660000;margin-left : auto ; margin-right : auto ;width:800px;height:1500px;background-color:#ffffff;] ul {border:1px solid #660000;} li {list-style-type:none;} h3 {font-color:#ffffff;} p {font-color:#ffffff;} div#menu {border:solid 1px #660000;width:100px;height:200px;float:left;} div#contents {border:solid 1px #660000;width:500px;height:700px;float:right;} div#footer {border:solid 1px #660000;width:700px;height:100px;clear:both;} (html) <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxx</title> <link href="./style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="image"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" /></h1> </div> <div id="container"> <h2>xxxxxxxxxxx </h2> </div> <br> <div id="clear"> <div id="menu"> <ul> <li> xxxxxx </li> <li> xxxxxx </li> <li> xxxxxx </li> </ul> </div> <div id="contents"> <h3>xxxxxxxxxx</h3> <p>xxxxxxxxxxx</p> <p>xxxxxxxxxxx</p> <br> <p>xxxxxxxxxxxxxxxxxx</p> </div> <div id="footer"> <p>xxxxxxxx</p> </div> </div> </body> </html>
- ベストアンサー
- HTML
- ブラウザ間でのdiv幅の違い
次のようなdivの入れ子を作ったのですが、 IEとFirefoxで大きさが違って表示されてしまいます。 FirefoxでもIEと同じ幅、同じ見ためで表示させるには 何をどのように指定してやれば良いでしょうか。 よろしくお願いします。 <html> <head> <style type="text/css"> <!-- .blue {width:200px; padding:10px; background-color:#0000ff;} .green {width:180px; padding:5px; background-color :#00ff00;} --> </style> </head> <body> <div class="blue"> <div class="green">ここが180px</div> </div> </body> </html>
- 締切済み
- HTML
- CSSでテーブルを使わずにレイアウト
以下のソースでなんとかレイアウトできたのですが 左よせではなくセンターよせにしたいのですがどのように記述すればよいでしょうか？CSSの対応していないブラウザの場合にメニューを下部メニューにしたいため p.menu は下部に記述しています。 -- css -- body { width:700px; margin:0px; font-size:12px; color:#ffffff; } p.head { height:15px; margin:0px auto; background-color:#0000ff; } .text { width:500px; text-align:left; margin:0px 0px 0px auto; background-color:#aa0000; } p.menu { width:200px; background-color:#dddddd; position:absolute; left:0px; top:15px; } -- html -- <body> <p class="head"> タイトル </p> <div class="text"> あいうえおかきくけこ </div> <p class="menu"> <a href="">menu1</a> </p> </body>
- ベストアンサー
- HTML
- float: leftで横に並べたら、サファリだけ
float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 ＩＥやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？
- ベストアンサー
- HTML
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- 角丸にしたDiv内の画像の角がはみ出してしまう
よろしくお願いします。 参考書片手にCSSを勉強しています。 品物の画像をスマホで見られるページを作っているのですが、 角丸にしたDiv内の画像の角がはみ出してしまい、対処法がわからず悩んでいます。 どのような方法がありますでしょうか。 初歩的な質問で恐れ入りますがご教授お願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>じっけんじっけん</title> <style type="text/css"> <!-- body, p, h1, h2, h3, img, table, div, ul, li { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; } #wrap { background-color: #EEEEEE; height: auto; width: 100%; margin: 0px; padding-top: 100px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; } .title { width: 100%; margin-right: auto; margin-left: auto; } .main { background-color: #FFFFFF; width: 96%; margin-right: auto; margin-left: auto; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); box-shadow:0px 0px 2px #555; margin-bottom: 100px; border-radius: 20px; } p.resizeimage img { width: 100%; } .itemnum { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-color: #C0C0C0; line-height: 50px; float: left; } .price { color: #7D7D7D; font-size: 52px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 60px; text-align: right; } .itemname { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 54px; font-weight: bold; } .detail { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 48px; } --> </style> </head> <body> <div id="wrap"> <div class="main"> <p class="resizeimage"> <img src="p/a.jpg"> </p> <p class="itemnum">32×13×22cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ａタイプ</p> </div> <div class="main"> <p class="resizeimage"> <img src="p/b.jpg"> </p> <p class="itemnum">35×14×24cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ｂタイプ</p> </div> </div> </body> </html>
- ベストアンサー
- CSS
- フレームHTMLについて。
サイトを作るにあたって、画面を二分割にしようと思っていますが、どうにも作る事が出来ません。 サイト様を見ても分からない上に、とりあえず解説通りに実行しても良く分からない事になる。・・そんな状態がかれこれもう4ヶ月になります。 もうサイト自体を諦めようか・・と思いましたが、最後にここで質問をして諦めるかどうかを決めようと思っています。 そんな私が恥を忍んでお願いをします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <!--made by Web Design Templates http://wdt.pekori.jp/--> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- body{ margin: 0; font-size: 10pt;/*全体のフォントサイズ*/ } a{ color: #212122;/*リンクの色*/ text-decoration: none; } .leline{/*裏側の細線の設定*/ position: absolute; z-index: 1 top: 0; left: 100px; width: 10px; height: 100%; border-left: solid 1px #ABABAC;/*色*/ } .leline2{/*裏側の薄色部分と点線枠の設定*/ position: absolute; z-index: 1; top: 0; left: 120px; width: 130px;/*幅*/ height: 100%; border-left: dotted 1px #ABABAC;/*枠の色*/ border-right: dotted 1px #ABABAC; background-color: #FBFBFC;/*背景色*/ } .main{/*メニュー全体の位置と幅を設定*/ position: absolute; z-index: 2; top: 25px; left: 60px; width: 240px; } h1{/*SiteTitle部分の設定*/ font-size: 12pt; font-family: "Verdana"; font-weight: normal; letter-spacing: 0.2em;/*文字間隔*/ text-align: center; width: 220px; margin: 10px 10px 40px 10px; padding: 5px 15px 5px 15px; border: solid 1px #696969; background-color: #FFFFFF;/*背景色*/ } .menu{/*メニューの設定*/ margin: 10px;/*メニューごとの間隔*/ padding: 5px; border: solid 1px #696969;/*枠の色*/ background-color: #FFFFFF;/*背景色*/ font-family: Verdana; font-size: 10pt; } .text{/*「一言」部分*/ margin: 20px 10px 10px 10px; padding: 5px; border: solid 1px #696969; background-color: #FFFFFF; font-family: Verdana; font-size: 9pt; } .bottom{/*アドレス部分*/ margin: 40px 10px 10px 10px; padding: 5px; border: solid 1px #696969; background-color: #FFFFFF; font-family: Verdana; font-size: 7pt; text-align: center; } --> </style> </head> <body> <div class="leline"></div> <div class="leline2"></div> <div class="main"> <h1>Site Title</h1> <div class="menu">■ <a href="#">What's New</a></div> <div class="menu">■ Sitemap</div> <div class="menu"><span style="color: #AA4548">■</span> Text <span style="font-size: 8pt">- 12/13</span></div> <div class="menu">■ Photo</div> <div class="menu">■ Bookmark</div> <div class="text"> ［一言スペース］<br> <br><br><br> </div> <div class="bottom">Since 2001.12.10 // E-mail</div> </div> </body> </html> ↑これに既にフレームを付けた状態のHTMLを切実に待っています。 これをインターネットで表示すると、http://wdt.pekori.jp/template/top/007/007_gray.html←の様になります。
- 締切済み
- その他([技術者向] コンピューター)
お礼
すみません、認識不足でした。 おっしゃるとうりで、無事解決いたしました。ありがとうございました。