擬似フレームを中央に表示したい
- HTMLの擬似フレームを中央に表示する方法について質問しています。
- 現在、擬似フレームを使ったHPのTOP画面を作成していますが、全体が左に寄ってしまっています。そこで、どのようにすれば擬似フレームを中央に表示させることができるのか質問しています。
- HTMLのスタイルシートを用いて、擬似フレームを中央に表示する方法を教えていただきたいです。
- ベストアンサー
擬似フレームを中央に表示したい。
ただいまＨＰ作成に奮闘中の者です。 いつもはネットでちくちくと検索をしながらhtml等について学びながら作成しているのですが、今回検索エンジンでも上手くヒットしなく、しばらく行き詰まってしまったので質問させてください。 現在擬似フレームを使ってHPのTOP画面が6割ほどできたのですが全てが左に寄っています。 それを中央に表示させたいのですが、どうすればよいのでしょうか？ ■■■□□ ■■■□□ これを↓ ■■■□□ ■■■□□ □■■■□ □■■■□ この様にしたい □■■■□ □■■■□ 以下タグです。 <!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=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトル</title> <!-- ------ FLASH ACTIVATION SCRIPT--------> <script src="flash_activate.js" type="text/javascript"></script> <!-- ------ FLASH ACTIVATION SCRIPT--------> <script src="flash_activate.js" type="text/javascript"></script> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:120px; float:left; background-color:#3399ff; } #tops { width:300px; height:120px; float:left; background-color:#ffcc33; } #topss { width:750px; height:280px; crear:both; background-color:pink; } #left { width:250px; height:100px; float:left; background-color:white; } #menu1 { width:250px; height:100px; clear: both; } #menu2 { width:250px; height:100px; clear: both; } #menu3 { width:250px; height:100px; clear: both; } #menu4 { width:250px; height:100px; clear: both; } #menu5 { width:250px; height:100px; clear: both; } #menu6 { width:250px; height:100px; clear: both; } #middle { width:300px; height:600px; float:left; background-color:white; } #right { width:200px; height:600px; float:left; } #under { width:750px; height:10px; clear: both; background-color:#cc66cc; } --> </style> </head> <body> <div id="top">ここにHPロゴ</div> <div id="tops">ここに説明やテーブル</div> <br style="clear:both" /> <div id="topss"></div> <div id="left"> <div id="menu1"><A Href="http://www.yahoo.co.jp/"><Img Src="about_us.png"></A></div> <div id="menu2"><A Href="URL"><Img Src="member.png"></A></div> <div id="menu3"><A Href="URL"><Img Src="movie.png"></A></div> <div id="menu4"><A Href="URL"><Img Src="blog.png"></A></div> <div id="menu5"><A Href="URL"><Img Src="link.png"></A></div> <div id="menu6"><A Href="URL"><Img Src=""></A></div> </div> <div id="middle">更新履歴など</div> <div id="right"> </div> <div id="under"></div> </body> </html> ご回答頂けたら幸いです。 よろしくお願いしますm(_ _)m
- akachan59
- お礼率100% (4/4)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
今までのことはすっぱり忘れて、本当に基礎からやり直してください。きついようですが、それが一番早くて上達への近道です。 1) HTMLは文書をそれを構成する要素に分解して、それがどのような要素であるかをタグを使ってマークアップするものです。!!!文書の構造であってデザインではありません。 たとえば、見出しはそのレベルによって<h1>～<h6>、段落は<p></p>で、リストは<ul>や<lol>と言う風に・・ これらで足りないときは、<div>(汎用ブロック要素)や<span>(汎用行内要素)にclassやidをつけてマークアップします。たとえば文書のヘッダでしたら<div class="header">、本文なら<div class="section">というふうに、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より <div id="top"><-- idはリンクのターゲットに使うことに限定するほうが良い --> <div id="tops"><!-- idなんて不要 --> <br style="clear:both" /><!-- brは通常は使わない使うべきではない --> <div id="left"><!-- leftなんて文書構造上意味のない名前はつけない --> <div id="menu1"> ・・・【中略】・・・ <div id="menu6"><!-- いちいちリンク先でもないのにidはつけない、またナビゲーションならclass名はnav --> <div id="middle">更新履歴など<!-- ならfooterでしょ --> <div id="right"><!-- これは更新履歴などフッタより前に登場すべき内容では?? <div id="under"><!-- こんなidはつけるな --> ★XHTMLではなく、HTML4.01のstrictをまなぴましょう。世の中XHTMLだといっていたのは遠い昔の話です。HTML5の登場で重要なのはHTML4.01strictです。 ★次の回答で、ウエブ標準の具体的な実例を挙げておきます。そのソースを見ればこれらの説明の意味がよくわかるでしょう。 なお、本気で最短で最善の方法をお探しなら ★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) を一通り学んだ後 ★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc )をすべて目を通すこと。覚えなくて良いです。とにかく通して読んでおくこと。そこにも書かれていますが、まずstrictだけを学ぶこと。決してtransitinalには目もくれないこと。(あなたはXHTML1.0transitinalですが、それはHTML4.01transitinalと実質同じもので、過去の遺物です) ★とても参考になるのは「HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )」の新しい要素とその説明です。
その他の回答 (2)
- kuzumiHK
- ベストアンサー率72% (132/183)
具体的には下記で対応できると思います。 (1)cssを修正 body{ margin:0; padding:0; width:100%; } #hoge{ width:750px; margin:0 auto; } (2)body直下をdivで囲う <body> <div id="hoge"> ここに全コンテンツを入れる </div> </body>
お礼
大変遅れてしまいましたが、ご回答本当にどうもありがとうございました。 一度kuzumiHK様の教えて下さったとおりにやってみて、その部分は正されたのですが、他もあまりにも酷く、やっぱり一からやり直すことにしました。 しかし、今回教えて頂いたことをきちんと覚えて次にいかそうと思っております。
- dscripty
- ベストアンサー率51% (166/325)
う～ん。 突っ込みどころ在りすぎて、大変だから、一つだけね。 block 要素を中央に表示させたいなら、 block 要素 { margin-left:auto; margin-right:auto; } これは、回答じゃないけど…… 「疑似フレーム」じゃつたわらないよ？ CSS レイアウトとかのほうが一般的じゃないかなぁ……
お礼
大変遅れてしまって申し訳ございません。 ご回答どうもありがとうございました。 擬似フレームと勝手に言っておりましたが、確かにこれでは伝わりにくかったですね。 ご指摘どうもありがとうございます。 今回頂いたご回答を参考にして、これからに役立てたいと思っております。
関連するQ&A
- CSSでのマウスオーバーの画像切り替えについて
現在横型のメニューをCSSで作成しています。 配置はうまく出来たのですが、ロールオーバーがうまくいきません。 マウスオーバーしても画像が切り替わりません。 CSSの記述をどのようにすればいいでしょうか？ 以下ソース ◇HTML <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <ul id="hnavi"> <li id="hnavili1"><a href="#"><img src="img/top-menu-1.gif" width="149" height="60"></a></li> <li id="hnavili2"><img src="img/top-menu-2.gif" width="150" height="60"></li> <li id="hnavili3"><img src="img/top-menu-3.gif" width="151" height="60"></li> <li id="hnavili4"><img src="img/top-menu-4.gif" width="149" height="60"></li> <li id="hnavili5"><img src="img/top-menu-5.gif" width="150" height="60"></li> <li id="hnavili6"><img src="img/top-menu-6.gif" width="151" height="60"></li> </ul> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } #hnavi { margin: 0; padding: 0; } #hnavili1 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili1 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili2 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili2 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili3 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili3 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili4 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili4 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili5 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili5 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili6 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili6 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } 宜しくお願いします。
- 締切済み
- HTML
- CSSで表示が、、、
写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }
- ベストアンサー
- CSS
- clear: bothの事で質問です。
XHTML+CSSを勉強してる初心者ですが。 この場を借りて質問させてもらいます。 判らない事は (1) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 300px;width: 400px;float:left;">画像の説明</div> <br style="clear: both;" /> (2) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 100px;width: 400px;float:left;">画像説明</div> <div style="clear: both;"></div> (1)と(2)では、 (1)は<br style="clear: both;" />と記入してますが (2)は<div style="clear: both;"></div>と記入してます。 この(1)と(2)は同じなのでしょうか？ それと使うとするならどちらのほうが有効的なのでしようか？ 教えていただければ光栄です。
- 締切済み
- CSS
- FireFoxでのレイアウト表示崩れについて
現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。
- ベストアンサー
- HTML
- firefoxでfloaｔの調整の仕方CSS
CSSで下記(div)のなかにBOXを3つ並べました、 ie6以上では思い通りに表示されるのですがFireFox（バージョン3.5.3）では一番右端にくるBOXが左端のBOXの下に入ってしまいます。 どなたか解決策を教えていただけますでしょうか？ ----ソース部分--- <div class="setbox1"> <div id="rent1"><a href="eee.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent2"><a href="aaa.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent3"><a href="ccc.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> </div> ----以下CSS---- .setbox1{ margin-left : 25px; width : 750px; } #rent1{ margin-top : 20px; margin-left : 0px; float : left; width : 234px; } #rent1 a{ background-image : url(img/rent1.gif); display : block; line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; } #rent1 a:hover{ background-position : left bottom; } #rent1 img{border-width : 0px 0px 0px 0px; } #rent2{ margin-left : 0px; float : left; margin-right : 22px; padding-left : 22px; width : 234px; margin-top : 20px; } #rent2 a{ background-image : url(img/rent2.gif); display : block; background-repeat : no-repeat; line-height : 0px; width : 234px; height : 69px; } #rent2 a:hover{ background-position : left bottom; } #rent2 img{border-width : 0px 0px 0px 0px; } #rent3{ margin-top : 20px; margin-left : 0px; padding-left : 0px; } #rent3 a{ background-image : url(img/rent3.gif); line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; display : block; } #rent3 a:hover{ background-position : left bottom; } #rent3 img{border-width : 0px 0px 0px 0px; }
- 締切済み
- HTML
- IE6にてずれる
こんにちは html超初心者です。 headとcontentsを隙間なく表示したいのですが、IEではコンテンツがずれてしまい うまく表示されません。 コードを記載します。 ================================== --------html------------ <div id="all"> <div id="head"> <h1><a href="../index.html"><img src="img/logo.gif"></a></h1> <div id="guide"> <a href="../index.html">ホーム</a> <a href="index.html">プロフィール</a> <a href="#">リンク</a></div> <p class="clear-both"> </p> </div> <div id="contents"> コンテンツ内容 </div> </div> --------css------------ body,a,div,p,h1,h2,h3,ul,li,img,dl,dd,dt,ol{ margin:0; padding:0; text-decoration: none; } #all{ width:650px; } .clear-both{ font-size:0; height:0px; clear:both; line-height:0%; } #head{ width:650px; background:url('../img/main_img.gif') no-repeat; height:90px; } #guide{ float:right; margin:60px 0px 0px 0px; } #contents{ background:url('../../common/img/back_img.gif') repeat-y ; } ================================== headにてボックスを二つ挿入し、それらをそれぞれfloat：left・rightで左右に表示しています。 その下に<p class="clear-both"> </p> を挿入し、cssにてそのクラスに対し、 clear:both; line-height:0%; 等を入力しています。 IEにて確認すると、その下のコンテンツが 右にずれてしまっています。 line-height:0%;がcssに記載されていなければ ずれずに表示されますが、headとcontentsの間に 隙間ができてしまいます。 line-height:0%を記載していてもfirefox・operaではcontentsはずれず、隙間もありません。 どなたか教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- 初歩的かもしれませんが回り込みが上手くできません
初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを４つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか？？ <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>
- ベストアンサー
- CSS
- フッターを固定したい…
上の写真のようにDivを組んでいるのですが、 Div4のフッタをブラウザに固定して表示したいのですが、どうすればよろしいのでしょうか? Div4はCSSでbackground-imageとして画像(jpg)が指定されています。 ●html <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <link rel="stylesheet" href="design.css" type="text/css"> <style type="text/css"> </style> </head> <body> <div id="body"> <div id="main"> <div id="div1"> <p class="clip"> <img src="clip.jpg"alt="New clip!"> </p> <p class="b-design"> <a href="design.html"> <img src="b-design.jpg"> </a> </p> <p class="b-photo"> <a href="photo.html"> <img src="b-photo.jpg"> </a> </p> <p class="b-mail"> <a href="mailto:a@com"> <img src="b-mail.jpg"> </a> </p> </div> <div id="div2"> </div> <div id="div3"> </div> </div> <div id="div4"> </div> </div> </body> </html> ●CSS * {margin:0; padding:0} body {background-color:black; width:100%;} img {border-style:none} #body {position:relative; margin: 0 auto; width:800px} #main {} #div1 {float:left; width:330px; height:370px; background-image:url("div1.jpg")} #div2 {float:left; width:470px; height:370px; background-image:url("div2.jpg")} #div3 {float:clear; width:800px; height:800px; background-image:url("div3.jpg")} #div4 {float:clear; width:800px; height:210px; background-image:url("div4.jpg")} .clip {position:absolute; top:30px; left:20px} .b-design {position:absolute; top:290px; left:30px} .b-photo {position:absolute; top:320px; left:30px} .b-mail {position:absolute; top:350px; left:30px}
- ベストアンサー
- HTML
- お世話になっております。fc2でblogを運営しているものです。
お世話になっております。fc2でblogを運営しているものです。 テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。 以下ソースになります。 HTML： <!--navi--> <div id="navi"> <div class="navi01"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン トップ" border="0" width="120" height="30" /></a> </div> <div class="navi02"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン イラスト" border="0" width="120" height="30" /></a> </div> <div class="navi03"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン マンガ" border="0" width="120" height="30" /></a> </div> <div class="navi04"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン その他" border="0" width="120" height="30" /></a> </div> <div class="navi05"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン 掲示板" border="0" width="120" height="30" /></a> </div> <div class="navi06"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン メール" border="0" width="120" height="30" /></a> </div> </div> <!--navi--> CSS： #navi { margin : 0 auto; margin-top : 5px; width : 800px; } .navi01 { float : left; margin-left: 15px; } .navi02 { float : left; margin-left: 10px; } .navi03 { float : left; margin-left: 10px; } .navi04 { float : left; margin-left: 10px; } .navi05 { float : left; margin-left: 10px; } .navi06 { float : left; margin-left: 10px; } です。navi01～navi06までがボタン。それをnaviでグループ化しているイメージです。 ○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。 どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。
- ベストアンサー
- ブログ
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
お礼
ご丁寧に回答してくださってどうもありがとうございます。 ORUKA1951さまに指摘して頂いたように、全て1からやり直しました。 お陰さまでなんとかHPらしいものを作ることができました。 大変遅れてしまいましたが、どうもありがとうございました。 全ての回答をベストアンサーにしたいのですが、一つしか出来ない様なのでたくさん記述してくださったORUKA1951さんをベストアンサーにさせてもらいたいと思います。