- 締切済み
HP作成 HTML CSS 背景 重ね合わせ
HPを作成していて、わからないことがあります。 HP全体の背景を画像にし、bodyの部分の背景をさらに画像にして、画像を重ねた形でHPを作りたいと考えました。 htmlファイルを作成し、自分のPCからhtmlファイルをブラウザに開いたところ背景がしっかりと表示されました。 しかし、htmlファイルをアップロードし、HPを開いたところ、一番奥の背景の画像が反映されませんでした。 どうすれば反映されるのか教えていただきたいです。 CSSです。 html{ background-image:url(http://pomo.vis.ne.jp/bg/corkboard/bg_corkboard200_04.jpg); } * { padding : 0px ; margin : 0px ;} #my_body { margin: 5px auto; width : 900px ; background-image:url(http://hide.kanari.info/sozai/ico/memo001/kabe.gif); } #my_header { width : 100% ; height : 110px ; border-bottom : 2px solid #000000 ; padding-top:10px; } #my_navigation { float : left ; width :188px; height:1500px; border-left : 1px solid #000000; border-right : 1px solid #000000; } #my_contents { float : right ; width :709px; height:1500px; border-right : 1px solid #000000; } #my_footer { width : 100% ; clear : both ; border-top : 1px solid #000000; } html要素の中で、一番奥の背景を設定しています。 body要素の中に、二番目の背景を設定しています。 HTML要素の中に背景を設定すると適応されないのでしょうか？ アップロードして、背景を正しく表示される方法を教えてください。 HPのURLです。 http://10t4047f.web.fc2.com/ よろしくお願いいたします。
- nyanjirou7878
- お礼率14% (1/7)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- DrFell
- ベストアンサー率55% (305/551)
>HTML要素の中に背景を設定すると適応されないのでしょうか？ 文章宣言がhtmlでは過去互換モードになりますので、適用されません。 htmlにも背景を入れたければ、標準モードに文書宣言を変えてください。 【例】 <html>を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> に変更。 苦言ですが、どのような文章で書かれている文章かを宣言するのは基本中の基本です。それにあわせたcssを記述します。、「ホームページ作成講座」で先生になる前に、もう一度生徒になって、正しい知識を勉強してください。 講座のソースを拝見しましたが、ひどいとしか言いようがありません。文書構造がでたらめです。 ｈｔｍｌ+ｃｓｓでは、文章構造・論理構造と見た目のデザインに役割を分割します。htmlに<b>や<br><br>は書きません。見出しも<h2>の前には<h1>が必ず出ます。というようなことは真っ先に学ぶことですが、全く理解されてません。もう一度、「正しい」といわれているhtmlを学ばれることをお勧めします。
関連するQ&A
- HP作成で背景画像が表示されないです・・
いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとｃｓｓを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 － html － <body> <div id="container"> <div id="header"> →背景画像表示されます。 <p>＊＊＊＊＊</p> </div> <div id="box"> <div id="left"> →背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> － ｃｓｓ － #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }
- ベストアンサー
- ホームページ作成ソフト
- CSSで背景画像をランダムに表示させたいのですが
CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか？ 背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。 <div class="main"> ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。 </div> スタイルシートの方では現在は .main { float:left; background-image:url(/image/top_bg01.jpg); background-repeat:no-repeat; min-width:736px; height:auto; border-right:1px solid #000000; } としており、このtop_bg01.jpgの部分の画像を top_bg01.jpg top_bg02.jpg top_bg03.jpg top_bg04.jpg top_bg05.jpg とランダムに表示させたいのですが、対応方法が分からずに困っています。 http://www.designwalker.com/2006/12/random-css.html はためしてみましたが、PHPがうまく対応できずに断念してしまいました。 どなた様か宜しくお願いいたします。
- ベストアンサー
- HTML
- ＨＰ作成
たびたびすみません。 以下のようなものをつくりました。 これでいくつか質問があります。 １．「ＴＯＰ」のブロックの縦の長さを変えるにはどこをどのようにすればいいでしょうか？ ２．「ＴＯＰ」以外のブロックの縦の長さをいっぺんに変えることはできますか？ ３．（以下のソースとは関係ありませんが）ＨＰのフォントは何を使えば だいたいのＰＣで見れることができるでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 25px; BACKGROUND-COLOR: #ff99cc; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: #666666; PADDING-TOP: 5px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 25px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body> <center> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 206px; FONT-FAMILY: 'Sylfaen'; HEIGHT: 94px" cellspacing="3" cellpadding="0" width="206"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="#666666">Top</font></td> </tr> <tr> <td><a class="menu" href=""> Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> </table> </center> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- CSS dtの中に画像を入れた時に
CSS dtの中に画像を入れた時に dtの文字が下にずれてしまいます。 画像を消すと問題無いので、画像の指定に原因があると思うのですが・・・。 ■css ---------------------------------------- .sub{ clear:both; width:420px; } .sub dt{ float:left; padding:0 0 0 0; width:200px; height:38px; line-height:38px; background:url(../img/sub-bg2.jpg) no-repeat; font-size:1em; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } .sub dt img{ padding:0 0 0 0; width:4px; height:38px; } .sub-menu dd{ float:right; width:180px; height:38px; line-height:38px; font-size:1em; background-color:#ffffcc; text-align:right; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } ■html --------------------------------------- <dl class="sub"> <dt><img src="../img/a.png" width="4" height="38" alt="aa" />テキスト</dt> <dd>あいうえお</dd> </dl> お分かりになる方、宜しくお願いします。
- ベストアンサー
- HTML
- HTML 微妙なずれを修正したいです。
http://matsudamakoto.web.fc2.com/index.html 上記URLの ナビゲーションと画像が微妙にcenterからずれてしまっているように感じます。 これらをうまくcenterに表示する方法を教えていただけませんか？ cssのソースを提示させていただきます。 よろしくお願いいたします。 body { font-size:14px; line-height:150% } h1 { color:black; border-left:10px solid #cccccc; border-right:10px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; font-size:16px; padding:10px 0 10px 0; text-align:center; } p { text-align:left; border-left:10px solid #cccccc; border-right:10px solid #cccccc; padding:0 0 0 20px; } #menu { list-style-type:none; text-align:center; } #menu li { display:inline; border-right:5px solid #cccccc; padding:0 20px 0 20px; } .main { width: 100%; } .main div { width: 50%; margin: 0 auto; }
- ベストアンサー
- ホームページ作成ソフト
- このHTMLとCSSをひとつにするのはどうすれば？
WordpressのAddQuickTagを使うために別れたままでは使うことができません＞＜ https://saruwakakun.com/html-css/reference/box ちなみに１９番のカギカッコを使いたいと思っています。 何卒よろしくお願いいたします！！ HTMLが・・・ <div class="box19"> <p>ここに文章</p> </div> CSSが・・・ .box19 { position: relative; padding:0.25em 1em; } .box19:before,.box19:after{ content:''; width: 20px; height: 30px; position: absolute; display: inline-block; } .box19:before{ border-left: solid 1px #5767bf; border-top: solid 1px #5767bf; top:0; left: 0; } .box19:after{ border-right: solid 1px #5767bf; border-bottom: solid 1px #5767bf; bottom:0; right: 0; } .box19 p { margin: 0; padding: 0; }
- 締切済み
- HTML
- 掲示板の背景が更新すると無くなってしまいます
今自分の掲示板を持っているのですが、 掲示板に新しい背景を素材として入れたところ、 カスタマイズの際の更新では上手く表示されたのですが、 ページに戻って更新した際に 画像がなくなってしまいます・・。 どこが問題なのでしょうか・・？ 全く分からないのでよかったら教えてください・・。 背景画像（紫の険の画像urlはhttp://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpgです） </div> </body> </html> <NOTITLE> <html> <head> <style type="text/css"> <!-- body{ background-color:#FFF; } ul{ } a:link { color:#003366; } a:visited { color:#003366; } a:hover { color:#3399CC;} DL{ font-size:14px; color:#000; } DT{ font-size:14px; color:#000; margin:5px 5px 0; } DD{ font-size:14px; color:#000; margin:5px 0 15px 20px; } H1{ font-size:21px;color:#3399CC; padding:25px 5px 10px; } H2{ font-size:14px;color:#FF9900; padding:3px 5px;margin:0; background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg); background-repeat:repeat-y; background-color:#FFFFDD; border:1px solid #777777; } H3{ font-size:14px;color:#FF9900; padding:3px;margin:0; background-color:#FFF; border:1px solid #777777; } HR.ad { width:100%; height:1px; background:#3091C1; text-align:center; border-width:0px; margin-left:0px; color:#3091C1; } --> </style> </head> <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" style="background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg）background-repeat:repeat-y;width:100%;margin:0;padding:0;"> <div style="background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg);background-repeat;width:100%;height:auto;" align="right">
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSを独学中です。が背景の設定がどうしてもうまくいきません。
CSSを使ってwebを作ろうとしている素人です。 header（見出しのロゴなど） main この中にコラムを２つ。左コラムに縦並びメニュー 背景画像あり。 footer（copyright表記など） 色はグレー。 いろいろ参考資料を見ながら、このような構成にしたのですが、 本文(main)のところが、footerと同じグレー１色になってしまい、 予定していた背景画像が表示されません。 とりあえず全体的なレイアウトは何とか大丈夫なようなのですが、 何か原因がお分かりでしたらご教示いただけると幸いです。 おそらく単純なミスなのかもしれませんが。 以下に、cssとhtmlファイルの抜粋を載せておきます。 ------- css ------- body { margin: 0; padding: 0; background-color: #999999; color: #FFFFFF } .header {略} .main { padding: 0px; background-color: #FFFFFF; color: #000000; background-image: url(images/background-check.gif); } .footer{ clear: both; padding: 2px 0 2px 0; border-top: solid 1px #333333; color: #FFFFFF; text-align: center; } p { margin: 0 0 12px 20px; padding: 0; line-height: 130%; color: #000000 } ul { list-style: none; margin: 0; padding: 0; } img { border: none; } /*------ 左の縦メニュー------------ */ .menutate { width: 120px; margin: 0px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } .menutate li a { height: 32px; text-decoration: none; } .menutate li a:link, .menutate li a:visited { color: #FFFFFF; display: block; background: url(images/menutate.gif); padding: 8px 0 0 5px; } .menutate li a:hover, .menutate li #current { color: #990099; background: url(images/menutate.gif) 0 -32px; padding: 8px 0 0 5px; } /*-------- コラム分け---------------- */ .leftcolumn { float: left; width: 120px; } .rightcolumn { float: left; overflow: auto; padding: 0 0 0 20px; } /*----- 本文-------------- */ h1{ padding: 6px 5px 6px 5px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 15px solid #CC0099; background-color: #FFFF99; } h2{ padding: 2px; border-left: 15px solid #CC0099; border-bottom: 1px solid #666666; } ------ html ------ <body> <div class="header"> （略） </div> <!-- メインパート --> <div class="main"> <!-- 左のタテメニュー --> <div class="leftcolumn"> <div class="menutate"> <ul> <li><a id="current" href="index.html">home</a></li> <li><a href="others.html">others</a></li> <li><a href="aboutme.html">about me</a></li> </ul> </div> </div> <!-- 右のコラム --> <div class="rightcolumn"> <h1>いろいろ</h1> <h2>あれこれ</h2> <p>などなど</p> </div> </div> <div class="footer"> Copyright: 2007 xxx. All rights reserved. </div> </body> </html>
- 締切済み
- CSS
- ＨＴＭＬタグの質問です!詳しい方お願いします
<div style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; OVERFLOW-Y: scroll; BORDER-LEFT: #ffffff 1px solid; WIDTH: 395px; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: 523px"></div> というタグに背景画像を入れたいのですが、 背景を動かすと後ろ(もとの背景)ごと動いてしまいます。 やっぱり不可能なのでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- Opera、ネスケでcssが崩れます
DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------
- ベストアンサー
- HTML
補足
回答していただきありがとうございます。 文書宣言を書き加えましたが、背景は反映されません。 正しく書けていないでしょうか？ それと、ホームページ作成講座は他の方のHPです。 相互リンクしています。 私への批判は結構ですが、他の方のHPの批判はご遠慮ねがいます。 私は初心者です。