写真のスライドショーに関する問題とアドバイスの要請
- ホームページに写真のスライドショーを設置したが、4：3表示の写真が全体が表示されず、パノラマ写真は高さに合わせて左右がカットされる問題が発生している。
- 写真の表示サイズが設定通りではなく、高さが600pxの設定が有効にならない。横方向800pxでパノラマにも対応したい。
- アドバイスを求めるために、問題のソースコードと状況を共有。4：3の写真の全体表示とパノラマ写真の自動調整方法を知りたい。
- ベストアンサー
4：3とパノラマ写真の混在スライドショーについて
ホームページに写真のスライドショーを用意しています。 他板でのアドバイスで動かなくなったものが動くようになりました。 写真の表示もできるようなって良かったのですが、 若干問題があり、アドバイスをお願いしたいのです。 ＯＳ：win7 ＩＥ：１１ 下記のソースを頂きましたが・・・・ 写真 4：3表示・・・全体が表示されない（はみ出した感じ） 写真サイズ 800×600ですが → 1068×800と表示サイズが大きくなっています パノラマ：高さに合わせて左右がカットされたようになります。 800×284ですが → 2254×800の表示サイズの様です これも大きくはみ出しています どちらも、height:600pxとなっていますが、web上では800pxになっています ●なぜ高さが600pxの設定が有効にならないのか 狙いは、横方向800pxでパノラマにも対応したい （パノラマの場合、高さ方向は低く表示する） <STYLE type="text/css"> #container {width:100%;text-align:center;} #slideshow {margin:0 auto;width:800px;height:600px;text-align:left;} #slideshow div {width:800px;height:600px;overflow:hidden;position:relative;} #slideshow div div {top:0;left:0;position:absolute;} #slideshow ul {width:800px;} #slideshow ul li {width:100px;height:75px;float:left;display:inline;} #slideshow .active {filter:alpha(opacity=100)!important;-moz-opacity:1!important;opacity:1!important;} --> </STYLE> 4：3の写真（800：600）の全体表示 パノラマ写真800サイズの高さは自動調整 ができると良いのですが・・・ ここまで書いて、素人ですというのも申し訳ないように思いますが アドバイスをいただけないでしょうか
- hana-51
- お礼率89% (81/91)
- HTML
- 回答数4
- ありがとう数8
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
んー、いろいろと修正点があります。 <center>とかはほとんどのバージョンで非推奨だから見た目の設定はスタイルシートで。 文字コードも特に縛りが無いならutf-8をお勧め。 タグや各タグの属性は小文字で。xhtmlは小文字で書くのが正しい。 <br>で表示を調整しない。<br>は<br /> もう言っていたけどtableでレイアウトしない。 img height="800px"とあるけどheight="800"と単位は付けない。 ・・・！ここじゃないの？<img>のheightに800ってつけたら、それに引っ張られると思うんだけど。 上記の修正点とheight="600"を直して動かして。 それで直るかはわからないけど ちなみに、開発者ツールはブラウザでF12キー押せば大体のブラウザで出てくる。
その他の回答 (3)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
ん～無理かどうかは実際に作ってみないとわからない。 きちんと開発したらたぶん、お望みのものは出来ると思う。 開発者ツールは今後Webページを作っていく上でかなりの手助けになるからふわっとでも使い方を覚えたほうが良い。
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
>tableを使用しており、これが原因しているのかもしれません。 >しかし、知識がありません・・・どのように見ればよいのか・・ >ソースを乗せたほうが良いのかな～？ と、思っています。 いろいろな原因が重なって、現在の状況になっているのかもしれないし、ソースあれば確かにわかるかもしれないけど、質問というか作ってもらったものが動きません、直してくださいっていうレベルになりそう。 ソース乗せたら親切な人が見てくれるかもしれないけどね。 ボクも時間があったら見てみるけど、解決できるかはわからない。
補足
有難うございます >直してくださいっていうレベルになりそう。 ご指摘のような状況かもしれません。 サムネール画像を並べて、順次自動的に大きな画像を表示する様に作成しています。 写真と表示サイズが合わないんです。 写真サイズは800×600（パノラマは縦が小さくなる）にしてあります。 しかし、表示サイズと合わずソースの方を1024、1200PXと変えても表示枠の中にうまく収まりません。 >解決できるかはわからない ヒントがいただけると次へ進めるかも知れませんので。 下記が、今作成しているＨＰのソースです （頂いたソースそのままです・・・写真部は文字数制限で一部割愛） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <title>お気に入り写真</title> <STYLE type="text/css"> <!-- body {font-size:100%;color:#ffffff;text-align:center;background:#000000;} A:link {text-decoration:none;font-size:12pt;color:#dda0dd;} A:visited {text-decoration:none;font-size:12pt;color:#dda0dd;} A:active {text-decoration:none;font-size:12pt;color:#cc00ff;} A:hover {font-size:12pt;color:#ff0000;} .txtRed {color:#ff5f5f;} #container {width:100%;text-align:center;} #slideshow {margin:0 auto;width:800px;height:600px;text-align:left;} #slideshow div {width:800px;height:600px;overflow:hidden;position:relative;} #slideshow div div {top:0;left:0;position:absolute;} #slideshow ul {width:800px;} #slideshow ul li {height:45px;float:left;display:inline;} // #slideshow ul li {width:130px;height:75px;float:left;display:inline;} #slideshow .active {filter:alpha(opacity=100)!important;-moz-opacity:1!important;opacity:1!important;} --> </STYLE> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setId = '#slideshow'; var fadeTime = 1000; var delayTime = 5000; $(setId + ' div div').each(function(i){ $(this).attr('id','view' + (i + 1).toString()); $(setId + ' div div').css({zIndex:'98',opacity:'0'}); $(setId + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime); }); $(setId + ' ul li').click(function(){ clearInterval(setTimer); var connectCont = $(setId + ' ul li').index(this); var showCont = connectCont+1; $(setId + ' div div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'})}); $(setId + ' div div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'})}); $(this).addClass('active'); $(this).siblings().removeClass('active'); timer(); }); $(setId + ' ul li:not(.active)').hover(function(){ $(this).stop().animate({opacity:'1'},200); },function(){ $(this).stop().animate({opacity:'0.5'},200); }); $(setId + ' ul li').css({opacity:'0.5'}); $(setId + ' ul li:first').addClass('active'); timer(); function timer() { setTimer = setInterval(function(){ $('li.active').each(function(){ var listLengh = $(setId + ' ul li').length; var listIndex = $(setId + ' ul li').index(this); var listCount = listIndex+1; if(listLengh == listCount){ $(setId + ' ul li:first').click() } else { $(this).next('li').click(); }; }); },delayTime); }; }); </script> </head> <body> <CENTER> <P><BR></P> <P><B><FONT SIZE="7"COLOR="#af6fff">お気に入り写真</FONT></B></P> <TABLE width="800"border="0"> <TR><TD> <FONT SIZE="4"> 画像がフェードイン&アウトしつつ・・・。 </FONT> </TD></TR> </TABLE><BR> <TABLE width="800"BORDER="0"> <TR><TD BGCOLOR="#afafff"> </TD></TR> </TABLE><BR> <TABLE width="800"BORDER="0"> <TR><TD> 下のサムネール画像を・・。<BR><BR> <div id="container"> <div id="slideshow"> <div> <div><a href="#1"><img src="800/DSC00376.jpg" height="800px" alt="" /></a></div> <div><a href="#2"><img src="800/DSC00381.jpg" height="800px" alt="" /></a></div> </div> <ul> <li><a href="javascript:void(0);"><img src="800/DSC00376.jpg" height="45px" alt="" /></a></li> <li><a href="javascript:void(0);"><img src="800/DSC00381.jpg" height="45px" alt="" /></a></li> </ul> </div> </div> </TD></TR> </TABLE><BR> </CENTER> </body> </html>
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
>他板でのアドバイスで動かなくなったものが動くようになりました。 >写真の表示もできるようなって良かったのですが、 >若干問題があり、アドバイスをお願いしたいのです。 > >ＯＳ：win7 >ＩＥ：１１ > >下記のソースを頂きましたが・・・・ 頂いた人に聞くのが一番早いと思うんだけど。 タグの構成ががどうなってるかわからないし何とも言えない。 開発者ツールとかでなんのスタイルが当たってるか見てみれば糸口がみつかるかも？
お礼
有難う御座います ご指摘のように、アドバイスを頂いた方にさらにアドバイスを頂ければ良かったのですが、 その方も、自分のＨＰの見直し等で時間を取られている中で対応いただき、ここまでで・・・という事になったのです。 もともとの物が、改善されたのであまり無理を言えなくて・・ gooの教えてで「HTML いじったらデザインが崩れました。」という質問を見て、私も・・・と思った次第です。 この回答の中で、「★tableをデザインのために使ってはならない」という記述がありました。 私の質問の記述では、記載されていませんが tableを使用しており、これが原因しているのかもしれません。 しかし、知識がありません・・・どのように見ればよいのか・・ ソースを乗せたほうが良いのかな～？ と、思っています。
関連するQ&A
- jqureryスライドショーが上手くいきません。
こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }
- ベストアンサー
- その他（プログラミング・開発）
- リンク付きスライドショーの不具合について
先日、ホームページを制作しました。そこにスライドショーを「A Simple jQuery Slideshow」といjavascriptを使って作ったあと、ソースの編集をして画像一つ一つにURLを貼り付けました。 しかし、なぜかスライドショーの最初が何も表示されない状態になってしまったのです。少し待つと、スライドショーが始まるのですが・・・ なんか不自然なので、急いで改善したいです。どうかご協力お願いします！ つくったホームページ→http://www.geocities.jp/raisutei/ A Simple jQuery Slideshow→http://jonraasch.com/blog/a-simple-jquery-slideshow ソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <link rel="shortcut icon" href="./favicon.ico"><title>らいす亭</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow a.active'); if ( $active.length == 0 ) $active = $('#slideshow a:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow a:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <style type="text/css"> /*** set the width and height to match your images **/ #slideshow { position:relative; height:350px; } #slideshow a { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #slideshow a.active { z-index:10; opacity:1.0; } #slideshow a.last-active { z-index:9; } </style></head> <body style="background-image: url(http://www.geocities.jp/raisutei/gazou/haikei.jpg);"><!-- geoguide start --><div align=center><script language="JavaScript">var jps=382116062;var jpt=1401374340</script><script language="JavaScript" <table style="text-align: left; margin-left: auto; margin-right: auto; width: 805px; height: 409px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><!-- this will work with any number of images --><!-- set the active class on whichever image you want to show up as the default (otherwise this will be the last image) --> <div style="text-align: center;" id="slideshow"><a href="http://www.geocities.jp/raisutei/consept.html"><img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/karaageintro.png" alt="Slideshow Image 1" class="active" align="middle"></a> <a href="http://www.geocities.jp/raisutei/okomeconsept.html"> <img style="width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/ocomeintro.png" alt="Slideshow Image 2"></a><a href="http://www.geocities.jp/raisutei/gozen.html"> <img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/gozenintro.png" alt="Slideshow Image 3"> </a></div> </td> </tr> </tbody> </table> ※一部中略しました。
- ベストアンサー
- JavaScript
- CSS アクティブタブの仕組み
CSS アクティブタブの仕組み 閲覧ありがとうございます。説明下手ですがお付き合い宜しくお願い致します CSS勉強も兼ねて擬似フレームのサイトを作っているCSS初心者です 解らないことは本やリファレンスサイトで調べ、忘れた時の為にコメントを書きこみ少しずつですが理解しながらサイトを作っています。 現在テンプレートサイト様が配布されている http://10prs.com/material/samples/cdp/mono-vivid/index.html を参考にメニュータブごとに背景色を変え、アクティブになったタブの背景色もタブと同じ色にしようと考察してます。 タブがアクティブになった時にメニューとメイン部分の境界のボーダーが消えるのですが、この仕組みがいまいちよく解りません。 恥ずかしながらアクティブになった時にボーダーが消える部分の記述があるのがどこにあるのか発見できずにいます。 無知なのに無謀な試みと思われるでしょうが御教示頂けないでしょうか、宜しくお願い致します ■以下テンプレートのCSSを抜粋 /* 各#ID＆.class */ div#PAGETOP { height: 100%; overflow: auto; } div#HEADER { position: fixed !important; position: absolute; top: 0; left: 0; width: 100%; height: 70px; color: #fff; background: #000; } ul#PAN { display: none; } div#MENU { position: fixed !important; position: absolute; top: 80px; left: 30px; width: 130px; } div#MENU h2 { display: none; } div#MENU ul { margin-top: 20px; margin-left: 0; list-style: none; position: absolute; z-index: 100; height: 100%; } div#MENU ul li a { margin: 5px 0 5px 10px; padding: 5px 0; border: 1px solid; display: block; width: 119px; color: #333; background: #f1f1f1; font-family: 'Book Antiqua', 'ＭＳ Ｐ明朝', serif; font-size: 116%; text-align: center; text-decoration: none; } div#MENU ul li a:hover { margin-left: 0 !important; width: 129px !important; } li.menu-on a, li.menu-on a:link, li.menu-on a:visited { margin-left: 0 !important; border-right: 1px solid #fff !important; width: 129px !important; background: #fff !important; } div#KIZI { margin-left: 160px; padding: 80px 50px 30px 50px; border-left: 1px solid #333; background: #fff; } ul.modori { display: none; } div#FOOTER { position: fixed !important; position: absolute; bottom: 0; left: 0; width: 100%; height: 22px; color: #fff; background: #000; } div#FOOTER h2, div#FOOTER ul.modori { display: none; } div#FOOTER ul { text-align: center; } div#FOOTER ul li { display: inline; }
- ベストアンサー
- HTML
- text-alignの解除の方法
text-alignの解除の方法ってありませんか？ 例えばhtml内に以下のタグがあるとして、 <div style="text-align:center;"> <div style="width:100px; height:120px; background-image:url(○○○.jpg)"> <div style="width 50px; height: 60px; position:absolute; margin-top: 20px; margin-left:5px"> <p>あいうえおあいうえお</p> </div> </div> </div> このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか？ IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。 分かりづらくて申し訳ありません。
- 締切済み
- HTML
- divinboxにて囲まれた場所を自動スクロールする方法
css div.infobox { font-size: 80%; text-align: left; padding: 3px; width: 100%; height: 5em; overflow: auto; scrollbar-face-color: red } html <div class="infobox"> <ul> <li>あいうえお <li>かきくけこ </ul> </div> で、inbox内をスクロールするにはどうすれば宜しいでしょうか？ 又、スクリプト等で動かせる場合、このinbox内の情報は、検索ロボットに拾われるのでしょうか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- スライドショーに妙な間がある。
いつも為になるアドバイスありがとうございます。 HP作成してるなかで気になったことがあるのですが、jQueryでスライドショーを設定して 画像からリンクを設定すると妙な間があって気になります。 原因は何でしょうか？ ご指導願います。 HTMLフォーム <!DOCTYPE html><!----> <html> <head> <meta charset="utf-8"> <title>ファッション通販サイト”Ce qui plait aux fill”</title> <style>/*CSS*/</style> <link rel="stylesheet" href="top.css" type="text/css" media="all"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> <link rel="stylesheet" href="top.css" type="text/css" media="all"> </head> <body> <div id="wrapper"> <div class="header"> <h1 class="logo"><img src="img/top-logo-01.jpg" /></h1> </div><!--header--> <div class="section"> <div class="fadein"> <a href="リンク01.html"><img src="画像01.jpg" width="400px" height="auto" /></a> <a href="リンク02.html"><img src="画像02.jpg" width="400px" height="auto" /></a> <a href="リンク03.html"><img src="画像03.jpg" width="400px" height="auto" /></a> <a href="リンク04.html"><img src="画像04.jpg" width="400px" height="auto" /></a> <a href="リンク05.html"><img src="画像05.jpg" width="400px" height="auto" /></a> <a href="リンク06.html"><img src="画像06.jpg" width="400px" height="auto" /></a> <a href="リンク07.html"><img src="画像07.jpg" width="400px" height="auto" /></a> <a href="リンク08.html"><img src="画像08.jpg" width="400px" height="auto" /></a> <a href="リンク09.html"><img src="画像09.jpg" width="400px" height="auto" /></a> <a href="リンク10.html"><img src="画像10.jpg" width="400px" height="auto" /></a> <a href="リンク11.html"><img src="画像11.jpg" width="400px" height="auto" /></a> </div><!--fadein--> </div><!--section--> <div class="img"> <p><img src="img/waku.jpg" /></p> </div><!--img--> <div class="news"> <div class="new-item"> <p><img src="img/new-item.jpg" /></p> </div><!--new-item--> </div><!--news--> <div class="item-menu"> <p>最新のアイテムを紹介します。</p> <ul> <li><a href="#">サンダル</a></li> <li><a href="#">パンプス</a></li> <li><a href="#">タンクトップ</a></li> <li><a href="#">キュロット</a></li> <li><a href="#">スカート</a></li> <li><a href="#">ウェッジソール</a></li> <li><a href="#">トレンチコート</a></li> <li><a href="#">カーディガン</a></li> <li><a href="#">ルームウェア</a></li> <li><a href="#">バック</a></li> </ul> </div><!--item-menu--> <div id="footer"> <ul> <li><a href="#">TOP</a></li> <li><a href="#">リンク</a></li> <li><a href="#">サイトマップ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div><!--footer--> </div><!--wrapper--> </body> </html> CSSフォーム @charset"utf-8"; body{ width:100%; background: #EDE8EA url(img/dot/14.gif) repeat; } body .fadein { position:relative;} .fadein img { position:absolute; left:20px; top:35px; } #wrapper{ margin:auto; width:980px; } .header{ width:980px; padding:0; border: 10px groove #cfc; background:#fff; } .section{ margin:30px 0 0; } .img{ float:left; } .news{ float:left; margin:20px; background:#fff; width:500px; border-radius: 10px; } .new-item{ text-align: center; margin:20px 0 0 0; } .item-menu{ float:left; margin:0 20px; font-size:30px; } .item-menu li{ font-size:24px; background-color:#fff; width:300px; list-style:none; text-align:center; margin:5px; } .item-menu a{ text-decoration:none; } .item-menu li:hover{ text-decoration:underline; background-color:#ADFF2F; } #footer{ clear: both; }
- ベストアンサー
- HTML
- CSS、width100％でもできる余白
CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか？ また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- ベストアンサー
- CSS
- 写真と文字の大きさをそろえたい
ビルダーを使いながらやっているのですが 二つのものを左右に並べて上下同じ大きさで表示したいのですが、 下記では同じ大きさになっていると思うのですが、 大きさが（上下の大きさのみ※左右は異なってよいのですが） ことなって表示されてしまいます。 解決方法を教えてください。。。 <DIV style="width : 191px;height : 335px;top : 94px;left : 157px; position : absolute; z-index : 10;" id="Layer8" class="hpb-lb-tb1-cell1" align="center"> <SPAN class="hpb-body4"><SPAN STYLE="line-height:1"><span style="font-size:15pt"> <B><STRONG>ここに文字</STRONG></B></SPAN></SPAN></SPAN> </DIV> <DIV style="width : 412px;height : 295px;top : 94px;left : 347px; position : absolute; z-index : 9; " id="Layer9" class="hpb-lb-tb1-cell2" align=""><IMG src="hpb_i_top10.jpg" alt="イメージ" width="412" height="295"></DIV>
- ベストアンサー
- ホームページ作成ソフト
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- ホームページのメニューと写真の間に、すき間があく。
はじめまして。 現在、webデザインの勉強のために架空のサイトを作っています。 そこで、 写真にあるようにメニューバーと その下の写真との間にすき間ができてしまいます。 IE８では、問題ありません。 firefox5,choromeでトラブルがあります。 調べて メニューと、下の写真のmarginとpaddingを0にしたり、 vertical-alignを指定してみたりしたのですが、 変わりませんでした。 下記にそのhtmlとcssを載せていますので、 ご指摘お願いします。 ※dream weaver cs5で作りました。 =========================================== html <div id="menu"> <ul> <li><img src="image/btn_01_s1.jpg" width="160" height="50" alt="ホーム" /></li> <li><img src="image/btn_02_s1.jpg" width="160" height="50" alt="事業内容" /></li> <li><img src="image/btn_03_s1.jpg" width="160" height="50" alt="実績と強み" /></li> <li><img src="image/btn_04_s1.jpg" width="160" height="50" alt="資料請求" /></li> <li><img src="image/btn_05_s1.jpg" width="160" height="50" alt="会社概要" /></a></li> </ul> <!-- / #menu --></div> <div id="photo"> <p><img src="image/catch_s1.jpg" width="800" height="280" /></p> <!-- / #photo --></div> ============================================= css /*メニューバー*/ #menu { width: 800px; height: 50px; margin: 0px; padding: 0px; } #menu ul li { float: left; border-style: none; vertical-align: text-bottom; } /*写真*/ #photo { clear: both; height: 280px; width: 800px; margin: 0px; padding: 0px; }
- ベストアンサー
- HTML
お礼
有難う御座いました ご指摘の箇所・・・気が付きませんでした。 ・800px → 600 ・XHTML → xhtml に修正してみました 結果は、満足できるものでしたが パノラマ写真は高さを優先されるのか、左右がカットされた状態でした。 これはやはり無理なんでしょうか？ F12の開発ツールのデバッグは知っていましたが、使い方が解らず・・・(>_<) http://www.buildinsider.net/web/ief12devtools/01 が、なんとなく説明している様なので、努力してみます・・・。