• 締切済み

htmlの編集　位置替え　DD使って

ｈｔｍｌ初心者です このｈｔｍｌについて見てください <a name="top"></a> <input type="image" src="http://img14.shop-pro.jp/PA01143/396/etc/botan1.jpg?20130718134606" name="button1" alt="Aボタン" onClick="location='#ご注文完了まで'"/> <input type="image" src="http://img14.shop-pro.jp/PA01143/396/etc/botan2.jpg?20130718134614" name="button2" alt="Bボタン" onClick="location='#お届けまで'"/> <input type="image" src="http://img14.shop-pro.jp/PA01143/396/etc/botan3.jpg?20130718134619" name="button3" alt="Cボタン" onClick="location='#お支払方法'"/> <h4 style="background-color:#00BFFF;text-align:left;padding:20px 10px;"> <b><font color="FFFFFF">お買い物の流れ</font></b> </h4> <br> <div style="position: relative;"> <img style="float: left" src="http://img14.shop-pro.jp/PA01143/396/etc/backcalor2.jpg?20130718144511" alt=""> <div style="position: absolute; top: 15px; left: 50px; width: 120px;"> <b>ご注文完了まで</b> </div> </div> <a name="ご注文完了まで"></a> <p style="text-indent:1.5em"> <font size="4"> STEP1. カートに入れる </font> </p> <div style="position: absolute; top: 200px; right: 270px; width: 120px;"> <img src="http://img14.shop-pro.jp/PA01143/396/etc/allow2.jpg?20130718141249" alt=""> </div> <br> <p style="text-indent:24em"> <font size="3"> カートに入れるボタンをクリックし、 </font> </p> <p style="text-indent:24em"> <font size="3"> 商品をカートに入れます。 </font> </p> <br> <hr align="right" style="border-top: 2px dashed #DAA520;width:64%;"> <p style="text-indent:17em"> <font size="4"> STEP2. レジに進む </font> </p> <div style="position: absolute; top: 338px; right: 270px; width: 120px;"> <img src="http://img14.shop-pro.jp/PA01143/396/etc/allow2.jpg?20130718141249" alt=""> </div> <br> <p style="text-indent:24em"> <font size="3"> レジに進むボタンをクリックし、 </font> </p> <p style="text-indent:24em"> <font size="3"> お客様情報入力画面に進みます。 </font> </p> <br> <hr align="right" style="border-top: 2px dashed #DAA520;width:64%;"> <p style="text-indent:17em"> <font size="4"> STEP3. お客様情報の入力 </font> </p> <div style="position: absolute; top: 486px; right: 270px; width: 120px;"> <img src="http://img14.shop-pro.jp/PA01143/396/etc/allow2.jpg?20130718141249" alt=""> </div> <br> 矢印の位置がChromeで見るとだんだん上にずれていきます ＜DIV＞の指定をやめてDLを使って＜DD＞の中にbackgroundとして指定すれば位置ずれしないと思ったのですが、上のｈｔｍｌをどう書き換えたらいいかわかりません；； DDを使わなくてもいいので位置ずれしないで矢印を表示できる方法があれば教えて下さい 回答待ってます

画像を拡大する
  • CSS
  • 回答数2
  • ありがとう数0

みんなの回答

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.2

質問の箇所だけ htmlはデザイン無視で組みます。 <ol class="step"> <li>STEP1. カートに入れる <p>カートに入れるボタンをクリックし、<br>商品をカートに入れます。</p> </li> <li>STEP2. レジに進む <p>レジに進むボタンをクリックし、<br>お客様情報入力画面に進みます。</p> </li> <li>STEP3. お客様情報の入力</li> </ol> それに、ｃｓｓでデザインをつけます。お勧めは外部ファイルですが、今回は<head></head>内に以下を挿入してみてください。 <style> .step>li{ list-style-type:none; padding-left:1.5em; font-size:1.3em; border-bottom:2px dashed #DAA520; background:url(http://img14.shop-pro.jp/PA01143/396/etc/allow2.jpg) no-repeat 2em 2em; height:7em; margin-top:1em; line-height:1.8em; width:64%; } ol.step p{ margin-top:0.5em; font-size:0.9em; margin-left:4em; line-height:1.4em; } </style> 他にインラインスタイルシート以外に使っていなければ上手くいくはずです。 他の場所もかなりぐちゃぐちゃですので、＃1さんもおっしゃっていますが、基本から学び直されることをお勧めします。普通は0からですが、auschwitzさんの場合は余計な知識やお荷物がある分、マイナスからのスタートとなります。 やりたいことと同じに見えるデザインを探して回るより、自分で組み立てた方が早いです。4ケタの掛け算の全く同じ計算を探すより、九九を覚えて2ケタ以上の計算の仕方を覚える方が早いのと同じ。折角、捜しあてても間違った情報も沢山転がっていますよ。 今回は、順番のあるリストなのでol>liだと思いました。矢印は意味がない、なくてもいいものに思えます。理解を助けるデザインとの扱いにし、背景画像としました。htmlには中身だけ、ｃｓｓで見た目を制御するのが鉄則です。そのあたり、理念から学び直されることをお勧めします。

回答No.1

どうみてもposition: absoluteのせいというあなたが「position: absolute」の意味を分かっていないせい。 <font>を使っていることを含めいろいろと基礎がなっていないので、今後も同じような質問を繰り返す危険性があります。 解説サイトなどを利用し、早めにHTMLの正しい使い方を学んでください。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（

    css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>

    • ベストアンサー
    • HTML
  • テーブルタグについて

    重ね重ね質問してごめんなさい！ スタイルシートを使ってみたんですけど・・・ <HTML> <HARD> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <META name="robots" content="noindex,nofollow"> <TITLE>**************</TITLE> <style type="text/css"><!-- body{font-size:12px;} div{font-size:14pt;font-weight:bold;color:orange;text-indent:47em;} .moji{font-size:13px;font-weight:normal;color:black;text-indent:65em;} span{font-size:14px;color:orange;margin-left:75em;} .rire{font-size:12px;color:black} --></style> </HEAD> <BODY> <BR><BR><BR><BR> <div>***********</div> <BR> <div class="moji">***************</div> <BR><BR> <span><A HREF="mail.htm"><IMG SRC="image/******.gif" border=0></A>(←mail)</span> <BR><BR><BR><BR> <table class="rire" border align="right" border="0" cellpadding="0" cellspacing="1" bordercolor="orange"> <tbody> <tr> <td>**** <img src="image/***.gif"></td> <BR> <tr> <td align="left"> <table style=" border:1px;solid #ffa000; cellpadding: 3px;width: 320px;height: 63px ;color:black; font-size:12px;"> <tr> <td>****</td> </tr> </tbody> </table> 　　　・ 　　　・ 　　　・ テーブルタグを閉じても文字がテーブルの中に入ってしまうんです・・・。 何が間違っているのか分かりません・・・。閉じるタブは閉じてます・・・よね？ 教えてください！

    • ベストアンサー
    • HTML
  • ＣＳＳで指定してます。プラザーによっては文字の位置

    よろしくお願いします。 文字の大きさ、行間を指定しているのですが プラウザーによっては文字の位置が一行ほどずれてしまいます。 何か対策はないのでしょうか？ ＩＥは文字半角分左に、Chromeは一行上に、Operaは半角分右によってます。 ＣＳＳを自力で書き込むのは初めてで、サンプルブックを見ながらしてます。 書き方を間違えているのでしょうか。 ------------------------------------------- 【スタイルシート】 *{ margin:0; padding:0; } #boxA{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } #boxB{ background:#ffffff; } #boxE{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } body{ text-align:center; } #container{ width:892px; margin-left:auto; margin-right:auto; text-align:left; } h1{ font-size : 11.5px; color:#333333; font-weight : 500; text-indent:0px; letter-spacing : -0.1em; } .text1{ font-size : 11.5px; letter-spacing : -0.1em; } .text2{ font-size : 70%; } .text3{ font-size : 85%; line-height : 1.3em; } #boxA{ width : 892px; } #boxA2{ width : 708px; margin-top : 10px; margin-left : 90px; background-image : url(../img/top_img.jpg); height : 328px; } #boxA3{ width : 708px; margin-top : 10px; background-image : url(../img/porishi.jpg); background-repeat : no-repeat; background-position : 50% 50%; margin-left : 90px; height : 130px; } #boxE{ width:100%; clear:left; } #boxB{ width : 892px; float : none; } #boxB2{ margin-top : 10px; margin-left : 100px; width : 708px; } ------------------------------------------- 【webページ】 </head> <body background="img/bgcolor.png"> <div id="container"> <div id="boxA"> <br /> <div id="boxA2" class="text1"> <br /> <br /> <br /> <br /> <a href="http://www.wakayama2015.jp/" target="_blank"><img src="img/top_kokutai.png" width="106" height="276" border="0" align="left" alt="2015年紀の国わかやま国体　わかやま大会" /></a><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h1>　　　　　　　　　　暮らしに欠かせない食・住・遊に関する事業を展開する丸長グループ。 </h1> 　　　　　　　　　 　日々の生活が安心・快適で、そして豊かであってほしい…<br /> 　　　　　　　　　　その想いがグループ企業の分野を超えたノウハウの共有につながり、<br /> 　　　　　　　　　　さらなるサービスの向上へと結びついているのです。<br /> 　　　　　　　　　　これからも郷土和歌山県を拠点に県内外に事業フィールドの拡大に<br /> 　　　　　　　　　　邁進してまいります。<br /> </div> <div id="boxB" style="text-align : center;" align="center"> <div id="boxB2"> <img src="img/top_mainimg.png" width="703" height="815" border="0" /> </div> </div> <div id="boxE" style="text-align : center;" align="center"> <p style="text-align : center;" align="center" class="text2"><br /> <font color="#000000">Copyright (C) 2000 MARUCHO GROUP Corporation. All Rights Reserved.</font></p> </div> </div> </div> </body> </html> 【webテスト】 http://www.dream-web.jp/test/maru/ サンプルブック見れば見るほど解らなくなってしまって困ってます。 助力よろしくお願いします。

    • 締切済み
    • CSS
  • フルスライドの画像上に文字を入れたい

    すみません、初心者です。 htmlは、 <div id="container"> <div class="fullSlideShow"> <ul> <li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li> </ul> </div> <div class="helo"> <h1>site title</h1> <p>abcdefg</p> </div> と書いてみました。CSSですが、 .fullSlideShow h1 { position: absolute; z-index:500; left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20; } .fullSlideShow h1 a.textlink { color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none; } としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。 とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。 どうぞ宜しくお願いします。

    • ベストアンサー
    • CSS
  • float と text-indent について

    floatを利用して、画像を右か左に寄せたとき、ネットエスケープ7.1でインデント2emが反映されない。(IE6は、OK) 同じく背景を画像に合わせて付けたいのですが、何かいい方法はありませんか。 2つの疑問についてお願いいたします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- p { background-color: #99CC00; 　　text-indent: 2em; 　　font-size: 12px} img { float: right} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <p><IMG src="test.jpg" width="100" height="75">floatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについて</p> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • 2カラムを作りたいと思ってますがフロートできません

    ＨＴＭＬで以下のソースを記述しました。 <!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=utf-8" /> <title>ダイエット</title> <link href="css/style1.css" type="text/css" /> </head> <body> <center><img src="img/バナー.png" /></center> <div> <div id contents> <h1>今月のおすすめダイエット</h1> <p>こんなお腹でいい・・・？私・・・。</p> <br /> <img src="img/マキシムストロング.png" alt="マキシムストロング" /> <br /> <p>産後太り、中年太りでこんなお腹になってませんか？</p> <img src="img/ビフォーアフター.png" alt="お腹"/><br /> <p>10キロ痩せたいという方はダイエットの方法を考えなければいけません。<br /> 運動や食事などの方法を徹底的に見直し効率的にダイエットを行っていきましょう。<br /> 10キロ痩せるのはハードルが高いと思うかもしれませんが、<br /> 効果的な方法で行えば、成功する確率も高くなります。<br /></p> <img src="img/Fotolia_66573075_XS-min.jpg" alt="体重計" /><br /> <p>10キロ痩せたい場合のダイエットで一番大事なポイントは目標設定を明確にすることです。<br /> 無理のない運動や食事を計画することによって途中の挫折がなくなります。<br /> 健康的に10キロ痩せることを目標にしましょう<br /></p> <br /> <br /> <p>マキシマムストロングスと併用したいダイエットサプリがこちら！！</p> <br /> <img src="img/オリフェスト.png" /><br /> <br /> <p>こんな理想ボディーを手に入れましょう</p> <img src="img/ビフォーアフター.png" /></div> <br /> <div id sidenavi> <p><img src="img/6586779561100367916.jpg" /></p> <p>6つの施術で<br /> 美脚を作る<br /> 骨盤ダイエット<br /> 脚やせ<br /> </p> <br /> <br /> <img src="img/2510561931730068165.jpg" /> <p>大人気<br /> 長続きしない方必見<br /> 噂のダイエット<br /></p> <br /> <br /> <img src="img/ダウンロード (6).jpg" /> <p>大人気<br /> １食置き換えるだけ<br /> 簡単ダイエット<br /></p> <br /> <br /> <img src="img/ダウンロード (7).jpg" /> <p>とってもおいしいと評判<br /> 小腹がすいた時に<br /> 安心して食べられビスケット<br /></p> </div > </div> </body> </html> その後ｃｓｓにてsidenaviを右にフロートしたいので以下の記述をしまいた @charset "utf-8"; /* CSS Document */ #wrap { width:1000px; margin:0px auto; } #contents { float:left; width:700px; height:1500px; margin:10px 0px 10px 0px; } #sidenavi { float:left; width:300px; height:1500px; margin:10px 10px 10px 0px; } ですがフロートされません。 ｃｓｓがうまくリンクされてないのでしょうか？ 原因がまったくわからない初心者です。 どなたかお知恵をおかりしたいと思います。 どうぞよろしくお願いいたします

    • 締切済み
    • XML
  • HTML&CSS DIVをぴったりと縦に並べたい

    HTML&CSS初心者です。 下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、 「見出し002」の上のマージンがうまく取れずに困っています。 .box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、 「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、 MacのSafariとFirefoxでは、余白の差が出てしまいます。（Safariの方が余白が大きい） <br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。 ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、 下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に 変な膨らみを持たせたくありません。 どなたか解決法を教えて下さい。よろしくお願い致します。 【HTML】 <div id="main"> <div class="mds01"><h3><em>見出し001</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p><br style="clear: both;" /> </div> <div class="mds02"><h3><em>見出し002</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> </div> 【CSS】 /*メイン大枠部分*/ #main { margin: 0px; padding: 0px; width: 627px; float: right; background: #FFFFFF; height: auto; } /*各見出し*/ .mds01 h3 { background: url(img/mmds01.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } .mds02 h3 { background: url(img/mmds02.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } /*ボックス*/ .box { margin: 0px; padding: 0px; height: auto; width: 587px; clear: left; } /*ボックス内・画像とテキスト*/ #main .box img { float: left; padding-right: 10px; } #main .box h5 { font: bold 14px "ＭＳ Ｐゴシック", Osaka; color: #022962; margin: 0px 0px 10px; padding: 0px; } .txt { font: normal 13px/16px "ＭＳ Ｐゴシック", Osaka; color: #333333; margin: 0px; padding: 0px; } em { visibility: hidden; }

    • ベストアンサー
    • HTML
  • コンテンツとコンテンツの詰まり

    Windows XP あるいは8 HTML 4.01 コピー ～ TOP.html　copyTOP.css あああああ　と　　いいいいいの間隔はあいているのに いいいいい　と　　うううううの間隔はなぜか詰ってしまっています。 間隔を空けるにはどうしたらいいでしょうか？ コードは以下の通りです。 [ HTML 側 ] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="～"> <title>aaaaaaaaaa</title> <link rel="stylesheet" href="copyTOP.css" type="text/css"> </head> <body> <div id="zentai"> <div id="part"> <p class="title">あああああ</p> <div id="partnerwaku"> <div id="partnerimage"> <a href="" alt="のロゴ" class=""></a> <a href="" alt="のロゴ" class=""></a> <a href=""><img src=".gif" alt="のロゴ" class=""></a> <a href=""><img src=".jpg" alt="のロゴ" class="A"></a> <a href=""><img src=".jpg" alt="のロゴ" class=""></a> </div> </div> </div> <div id="PR"> &lt;PR&gt; <br> <div id="PRsection"> <br> <a href=""> <img src="" alt="" class="PRimage01"></a> </div> </div> <div id="PR2"> <br> &lt;PR&gt; <br> <div id="PRsection2"> <br> <a href=""> <img src="" alt="" class="PRimage02"></a> </div> </div> <div id="columnwaku"> <div id="columnbun"> <p class="title">いいいいい</p> <div id="columncontents"> <p><a href=""><img src =".jpg" class="columnarticle01"></a></p> </div> </div> </div> <br> <br> <br> <br> <div id="PR3"> <br> &lt;PR&gt; <br> <div id="PRsection3"> <br> <a href=""><img src="" alt="" class="PRimage03"></a> </div> </div> <br> <br> <br> <br> <br> <div id="questionnairesection"> <div id="questionnaire"> <p class="title">ううううう</p> <div id="questionnairecontents">えええええ</div> </div> </div> <div id="PR4"> <br> &lt;ddd&gt; <br> <div id="PRsection4"> <br> <a href=""> <img src="" alt="" class="PRimage04"></a> </div> </div> <div id="pagetop"> <br> <br> <a href="#logoimage">ページの先頭へ▲</a> </div> <hr class="beforefooter"> <div id="aboutus"> <div id="aboutussection"> <p class="aboutustitle">管理会社</p> <p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p> </div> </div> <br> <br> <hr class="beforefooter"> </div> <!--全体のdiv--> </body> </html> [ css側] @charset "Shift_Jis"; body { overflow-y:auto overflow-x:auto text-align:center; cursor:url("images/.png"); } #allitem{ cursor:url("images/.png"); } #zentai{ width:1000px; margin-left:auto; margin-right:auto; } .title{ margin-top:0px; margin-bottom:0px; font-size : 20px; border-style:solid; width:592px; background-color:#FFFF99; padding:3px; } #part{ clear:left; float:left; height:180px; width:642px; padding-right:147px; font-size : 20px; } #partnerwaku{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR{ float:left; width:180px; height:120px; } #PRsection{ border-style:solid; border-color: #000099; } #PR2{ float:left; width:185px; height:150px; } #PRsection2{ border-style:solid; border-color: #000099; } .PRimage01{ width:170px; height:80px; } .PRimage02{ width:165px; height:100px; } #kuhaku{ clear:left; height:20px; } #columnwaku{ float:left; clear:left; height:130px; width:790px; } #columnbun{ height:120px; width:600px; } #columncontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } .columnarticle01{ height:70px; width:400px; background-color:#CC99CC; } #PR3{ float:left; width:185px; height:150px; } #PRsection3{ border-style:solid; border-color: #000099; } .PRimage03{ width:165px; height:100px; } #questionnairesection{ clear:left; float:left; height:130px; width:1050px; } #questionnaire{ width:600px; border-radius: 20px; } #questionnairecontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR4{ float:left; width:185px; height:150px; } #PRsection4{ border-style:solid; border-color: #000099; } .PRimage04{ width:165px; height:100px; } 文字制限のため省略

    • ベストアンサー
    • HTML
  • フッターの画像の位置づけ指定方法がわからない

    ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; 　　　　　　　　　 　　font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; 　　　　　　　　　/*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ 　　　　　　display: block; line-height: 25px; text-decoration: none; 　　 text-align:right background-img:url(.gif); 　　　　　　padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 　　　　　　　　　　　　　　color: #8b1c62 } ul.sidemenu ul {margin: 0; 　　　　　　padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; 　　　　　　　line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; 　　　　　　　　　　　　　 　　　　color:#ffffff; 　　　　　border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; 　　background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); 　　　　　　background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～　　 <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。

    • 締切済み
    • CSS
  • jQuery 2つのsetInterval

    写真と文字を組み合わせたクロスフェードで行き詰りました。 ２つ質問があります。 【質問１】 １番目のテキストがフェードイン→3秒待機→1番目のテキストと 1番目の写真がフェードアウト→2番目・3番目同じ→繰り返し。 という感じにしたいのですが、下記の#text-boxの設定ですと setIntervalで5秒間隔でフェードインになるので#photo-boxとの タイミングが5秒ずれてしまいます。 これを合わせるにはどうすればよいのでしょうか？ 【質問２】 下記のように、１つのdivでテキストと写真を入れると正常に動かなくなります。 それぞれ分けてdiv(#text-box,#photo-box)で囲うと動きます。 この原因はなんでしょうか？ <div id="all-box"> <p class="text">1番目のテキスト</p> <p class="photo"><img src="img/01.jpg" width="500" height="200" alt="" /></p> <p class="text">2番目のテキスト</p> <p class="photo"><img src="img/02.jpg" width="500" height="200" alt="" /></p> <p class="text">3番目のテキスト</p> <p class="photo"><img src="img/03.jpg" width="500" height="200" alt="" /></p> </div> 宜しくお願いします。 $(function(){ $("#text-box .text").hide(); setInterval(function(){ $("#text-box") .find(".text:first-child") .fadeIn(1000) .delay(3000) .fadeOut(1000) .next(".text") .end() .appendTo("#text-box"); },5000); $("#photo-box .photo:gt(0)").hide(); setInterval(function(){ $("#photo-box") .find(".photo:first-child") .fadeOut(1000) .next(".photo") .fadeIn(1000) .end() .appendTo("#photo-box"); },5000); }); ■HTML <div id="all-box"> <div id="text-box"> <p class="text">1番目のテキスト</p> <p class="text">2番目のテキスト</p> <p class="text">3番目のテキスト</p> </div> <div id="photo-box"> <p class="photo"><img src="img/01.jpg" width="500" height="200" alt="" /></p> <p class="photo"><img src="img/02.jpg" width="500" height="200" alt="" /></p> <p class="photo"><img src="img/03.jpg" width="500" height="200" alt="" /></p> </div> </div> ■CSS #all-box{ position:relative; width:500px; height:200px; } #text-box,#photo-box{ width:500px; height:200px; } #text-box .text{ position:absolute; top:80px; left:0; z-index:2; } #photo-box .photo{ position:absolute; top:0; left:0; width:500px; height:200px; z-index:1; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する