html5でブロックとブロックの間に隙間ができる
- html5でブロックとブロックの間に隙間ができる
- html5で作成したホームページでボタン部分とスライドショー部分の間に隙間ができる問題が発生しています。原因と解決策について教えてください。
- html5で作ったホームページにおいて、ボタン部分とスライドショー部分に隙間が生じてしまいます。問題の原因と解決方法を教えてください。
- ベストアンサー
html5でブロックとブロックの間に隙間ができる
下記のホームページを作りました。 しかし、ボタン部分とスライドショー部分に少し隙間ができてしまいます。 いろいろ試しましたが、隙間が目られません。 原因を教えていただけると幸いです。 [html5] <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <link href="style/main.css" rel="stylesheet" type="text/css"> <meta name="author" content="HTMQ"> <meta name="robots" content="all"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $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> </head> <body> <header> <section> <h1>格安ホームページ制作会社 - hompa（ホムペ） -</h1> </section> <!-- container --> <div id="container"> <!-- header --> <div id="header"> <nav> <ul> <li><a href="index.html"><img src="img/btn/btn0.png" width="120" height="86" alt="TEST"></a></li> <li><a href=""><img src="img/btn/btn1.png" width="120" height="86" alt="TEST2"></a></li> <li><a href=""><img src="img/btn/btn2.png" width="120" height="86" alt="TEST3"></a></li> <li><a href=""><img src="img/btn/btn3.png" width="120" height="86" alt="TEST4"></a></li> <li><a href=""><img src="img/btn/btn4.png" width="120" height="86" alt="TEST5"></a></li> <li><a href=""><img src="img/btn/btn5.png" width="120" height="86" alt="TEST6"></a></li> <li><a href=""><img src="img/btn/btn6.png" width="120" height="86" alt="TEST7"></a></li> </ul> </nav> </div> <!-- header --> <div class="clearfix"></div> <!-- slidmain --> <div id="slidemain"> <p id="slideshow"> <img src="img/index/photo1.jpg" width="980" height="450" alt="スライドショー1" class="active"> <img src="img/index/photo2.jpg" width="980" height="450" alt="スライドショー2"> <img src="img/index/photo3.jpg" width="980" height="450" alt="スライドショー3"> </p> </div> <!-- slidmain --> </div> <!-- container --> </header> </body> </html> [CSS] @charset "UTF-8"; /* CSS Document */ * { margin:0; padding:0; } body { } div#container { text-align:left; width:980px; margin: 0 auto; } div#header { width:840px; text-align:left; margin: 0 auto; padding-top:20px; } h1 { text-indent: -9999px; display: none; } ul { list-style:none; } li { float:left; } .clearfix:after { content:" "; display:block; clear:both; } #slidemain { width:980px; height:450px; } #slideshow { position: relative; width: 980px; height: 450px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; }
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ボタンとスライドショーのdivの間を詰めたいだけなら #slidemain { width:980px; height:450px; } の部分に #slidemain { width:980px; height:450px; margin-top: -7px; ←追加。数字部部分は適宜変えてください。 } と追記すれば詰まると思います。
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
画像の配置がデフォルトのままではないですか。 #header img { vertical-align:bottom; }
関連するQ&A
- 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
- 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
- フッター上部に謎の隙間
フッター上部に謎の隙間ができて困っています。 以下ソースになります。 『HTMLソース』 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>サンプルページ</title> <meta name="description" content="" /> <meta name="author" content="." /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.11.0/build/cssreset/cssreset-min.css"> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript"> $(function(){ $(".hide").hide(); $(".btn").click(function(){ $(".hide").next().slideToggle(); }); }) </script> </head> <body> <div id="conteiner"> <header> <div class="center"> <h1>ヘッダー</h1> </div> </header> <div id="box_001"> <div id="box_002"> <div class="center"> <h2>見出し</h2> <p class="btn">ボタン</p> <ul> <li><img src="A.png" alt="img" width="250" height="250" /></li> <li><img src="A.png" alt="img" width="250" height="250" /></li> <li><img src="A.png" alt="img" width="250" height="250" /></li> <li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li> <li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li> <li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li> </ul> </div> </div> </div> <footer> <div id="box_003"> <p>フッター</p> </div> </footer> </div> </body> </html> 『CSSソース(style.cssで読み込んでます)』 html,body { height: 100%; width: 100%; } #conteiner { width: 100%; height: 100%; } .center { width: 100%; max-width: 1040px; height: auto; margin: 0 auto; } .center:after { content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } header { width: 100%; height: 300px; background: #ff7f50; } #box_001 { background: #4169e1; } #box_002 { background: #4169e1; } #box_001 ul { margin-bottom: 150px; } #box_001 ul li { float: left; margin: 40px; } footer { width: 100%; height: 150px; background: #ff7f50; } footer p { line-height: 150px; text-align: center; }
- ベストアンサー
- HTML
- ホームページのメニューと写真の間に、すき間があく。
はじめまして。 現在、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
- スライドショーに妙な間がある。
いつも為になるアドバイスありがとうございます。 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
- divの間にすき間ができる
入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>
- 締切済み
- レンタルサーバ・ASP
- cssスプライト positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？ どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
- IE6、7で途切れてしまう画像
分からない部分が出た際にいつもお世話になっております。 今回もどなたかご回答頂けますと幸いです。 グローバルナビゲーションを中央揃えにして表示させようとしているのですが、 IE6と7で確認したときになぜか下部分が途切れてしまいます（1pxくらい？） 高さは指定している筈なのですが… 【html】 <div id="global-nav"> <ul> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="191" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="193" height="43" /></a></li> </ul> </div> 【css】 div#global-nav { position:relative; height: 43px; background:url(../common/navi_bg.jpg) repeat-x center bottom; overflow:hidden; } div#global-nav ul { position:relative; left:50%; float:left; list-style-type:none; } div#global-nav li { position:relative; left:-50%; float:left; } 宜しくお願いします。
- 締切済み
- HTML
- 同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
