site_study_comのプロフィール

下記の１ページだけ、右背景が途中で切れてしまう不具合が出てしまいました。 このような感じです。 http://marimekko2525.web.fc2.com/ 設定方法は下記のサイトを参考にして作りました。 http://www.webopixel.net/javascript/517.html スライドショーが入っている”<div id="cont">”部分に原因があると思うのですが、 改善策が分かりません。。。 どなたか分かる方いらっしゃいましたらアドバイスをお願いします。 cssソース /*====↓reset.css↓====*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,p,blockquote,th,td { margin:0;padding:0; } img{ border: 0; } /*====↓base.css↓====*/ #cont { width: 610px; height: 100%; position: relative; margin: 50px auto; z-index: 70; overflow: hidden; } #works_deta{ clear:both; margin-top:100px; margin-bottom:10px; padding:20px; background-color:#333535; } #works_deta h4, #works_deta_right h5{ margin-bottom:10px; } #works_deta_left{ float:left; } #works_deta_right{ float:right; width:390px; } #works_deta_right p{ color:#ffffff; font-size: 85%; line-height:1.8em; } hr#works_deta_right{ clear:both; } p.works_deta{ color:#ffffff; font-size: 85%; line-height:1.8em; text-align:right; clear:both; } #works_deta_right img.back_to_list{ float: right; } /*====↓iview.css↓====*/ /* The slider */ .iviewSlider { overflow: hidden; } /* The timer in the Slider */ #iview-timer { position: absolute; z-index: 100; border-radius: 5px; cursor: pointer; } #iview-timer div { border-radius: 3px; } /* The Preloader in the Slider */ #iview-preloader { position: absolute; z-index: 1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: #000 1px solid; padding: 1px; width: 100px; height: 3px; } #iview-preloader div { float: left; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; height: 3px; background: #000; width: 0px; } /* The strips and boxes in the Slider */ .iview-strip { display:block; position:absolute; z-index:5; } .iview-block { display:block; position:absolute; z-index:5; } /* Direction nav styles (e.g. Next & Prev) */ .iview-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .iview-prevNav { left:0px; } .iview-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .iview-controlNav { position:absolute; z-index:9; } .iview-controlNav a { z-index:9; cursor:pointer; } .iview-controlNav a.active { font-weight:bold; } .iview-controlNav .iview-items ul { list-style: none; } .iview-controlNav .iview-items ul li { display: inline; position: relative; } .iview-controlNav .iview-tooltip { position: absolute; } /* The captions in the Slider */ .iview-caption { position:absolute; z-index:4; overflow: hidden; cursor: default; } /*====↓style.css↓====*/ .container { display: block; width: 600px; margin: 0px auto; } #iview { display: block; width: 600px; background: #000; background: rgba(0, 0, 0, 0.7); padding: 5px; border-radius: 5px; position: relative; margin: 10px auto; } #iview .iviewSlider{ display: block; width: 600px; height: 360px; overflow: hidden; border-radius: 4px 4px 0px 0px; } .iview-controlNav { position: static; height: 45px; text-align: center; border-radius: 0px 0px 4px 4px; } .iview-controlNav .iview-items { display: block; padding: 0px 20px; } .iview-controlNav a img { height: 60px; border: #000 1px solid; margin: 20px 10px 20px 0px; border-radius: 2px; } .iview-controlNav a.active img { border-color: #999; } #iview-preloader { border: #666 1px solid; width: 150px } #iview-preloader div { background: #666; }

下記の１ページだけ、右背景が途中で切れてしまう不具合が出てしまいました。 このような感じです。 http://marimekko2525.web.fc2.com/ 設定方法は下記のサイトを参考にして作りました。 http://www.webopixel.net/javascript/517.html スライドショーが入っている”<div id="cont">”部分に原因があると思うのですが、 改善策が分かりません。。。 どなたか分かる方いらっしゃいましたらアドバイスをお願いします。 cssソース /*====↓reset.css↓====*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,p,blockquote,th,td { margin:0;padding:0; } img{ border: 0; } /*====↓base.css↓====*/ #cont { width: 610px; height: 100%; position: relative; margin: 50px auto; z-index: 70; overflow: hidden; } #works_deta{ clear:both; margin-top:100px; margin-bottom:10px; padding:20px; background-color:#333535; } #works_deta h4, #works_deta_right h5{ margin-bottom:10px; } #works_deta_left{ float:left; } #works_deta_right{ float:right; width:390px; } #works_deta_right p{ color:#ffffff; font-size: 85%; line-height:1.8em; } hr#works_deta_right{ clear:both; } p.works_deta{ color:#ffffff; font-size: 85%; line-height:1.8em; text-align:right; clear:both; } #works_deta_right img.back_to_list{ float: right; } /*====↓iview.css↓====*/ /* The slider */ .iviewSlider { overflow: hidden; } /* The timer in the Slider */ #iview-timer { position: absolute; z-index: 100; border-radius: 5px; cursor: pointer; } #iview-timer div { border-radius: 3px; } /* The Preloader in the Slider */ #iview-preloader { position: absolute; z-index: 1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: #000 1px solid; padding: 1px; width: 100px; height: 3px; } #iview-preloader div { float: left; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; height: 3px; background: #000; width: 0px; } /* The strips and boxes in the Slider */ .iview-strip { display:block; position:absolute; z-index:5; } .iview-block { display:block; position:absolute; z-index:5; } /* Direction nav styles (e.g. Next & Prev) */ .iview-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .iview-prevNav { left:0px; } .iview-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .iview-controlNav { position:absolute; z-index:9; } .iview-controlNav a { z-index:9; cursor:pointer; } .iview-controlNav a.active { font-weight:bold; } .iview-controlNav .iview-items ul { list-style: none; } .iview-controlNav .iview-items ul li { display: inline; position: relative; } .iview-controlNav .iview-tooltip { position: absolute; } /* The captions in the Slider */ .iview-caption { position:absolute; z-index:4; overflow: hidden; cursor: default; } /*====↓style.css↓====*/ .container { display: block; width: 600px; margin: 0px auto; } #iview { display: block; width: 600px; background: #000; background: rgba(0, 0, 0, 0.7); padding: 5px; border-radius: 5px; position: relative; margin: 10px auto; } #iview .iviewSlider{ display: block; width: 600px; height: 360px; overflow: hidden; border-radius: 4px 4px 0px 0px; } .iview-controlNav { position: static; height: 45px; text-align: center; border-radius: 0px 0px 4px 4px; } .iview-controlNav .iview-items { display: block; padding: 0px 20px; } .iview-controlNav a img { height: 60px; border: #000 1px solid; margin: 20px 10px 20px 0px; border-radius: 2px; } .iview-controlNav a.active img { border-color: #999; } #iview-preloader { border: #666 1px solid; width: 150px } #iview-preloader div { background: #666; }

下記の１ページだけ、右背景が途中で切れてしまう不具合が出てしまいました。 このような感じです。 http://marimekko2525.web.fc2.com/ 設定方法は下記のサイトを参考にして作りました。 http://www.webopixel.net/javascript/517.html スライドショーが入っている”<div id="cont">”部分に原因があると思うのですが、 改善策が分かりません。。。 どなたか分かる方いらっしゃいましたらアドバイスをお願いします。 cssソース /*====↓reset.css↓====*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,p,blockquote,th,td { margin:0;padding:0; } img{ border: 0; } /*====↓base.css↓====*/ #cont { width: 610px; height: 100%; position: relative; margin: 50px auto; z-index: 70; overflow: hidden; } #works_deta{ clear:both; margin-top:100px; margin-bottom:10px; padding:20px; background-color:#333535; } #works_deta h4, #works_deta_right h5{ margin-bottom:10px; } #works_deta_left{ float:left; } #works_deta_right{ float:right; width:390px; } #works_deta_right p{ color:#ffffff; font-size: 85%; line-height:1.8em; } hr#works_deta_right{ clear:both; } p.works_deta{ color:#ffffff; font-size: 85%; line-height:1.8em; text-align:right; clear:both; } #works_deta_right img.back_to_list{ float: right; } /*====↓iview.css↓====*/ /* The slider */ .iviewSlider { overflow: hidden; } /* The timer in the Slider */ #iview-timer { position: absolute; z-index: 100; border-radius: 5px; cursor: pointer; } #iview-timer div { border-radius: 3px; } /* The Preloader in the Slider */ #iview-preloader { position: absolute; z-index: 1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: #000 1px solid; padding: 1px; width: 100px; height: 3px; } #iview-preloader div { float: left; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; height: 3px; background: #000; width: 0px; } /* The strips and boxes in the Slider */ .iview-strip { display:block; position:absolute; z-index:5; } .iview-block { display:block; position:absolute; z-index:5; } /* Direction nav styles (e.g. Next & Prev) */ .iview-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .iview-prevNav { left:0px; } .iview-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .iview-controlNav { position:absolute; z-index:9; } .iview-controlNav a { z-index:9; cursor:pointer; } .iview-controlNav a.active { font-weight:bold; } .iview-controlNav .iview-items ul { list-style: none; } .iview-controlNav .iview-items ul li { display: inline; position: relative; } .iview-controlNav .iview-tooltip { position: absolute; } /* The captions in the Slider */ .iview-caption { position:absolute; z-index:4; overflow: hidden; cursor: default; } /*====↓style.css↓====*/ .container { display: block; width: 600px; margin: 0px auto; } #iview { display: block; width: 600px; background: #000; background: rgba(0, 0, 0, 0.7); padding: 5px; border-radius: 5px; position: relative; margin: 10px auto; } #iview .iviewSlider{ display: block; width: 600px; height: 360px; overflow: hidden; border-radius: 4px 4px 0px 0px; } .iview-controlNav { position: static; height: 45px; text-align: center; border-radius: 0px 0px 4px 4px; } .iview-controlNav .iview-items { display: block; padding: 0px 20px; } .iview-controlNav a img { height: 60px; border: #000 1px solid; margin: 20px 10px 20px 0px; border-radius: 2px; } .iview-controlNav a.active img { border-color: #999; } #iview-preloader { border: #666 1px solid; width: 150px } #iview-preloader div { background: #666; }

CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li　で使った背景画（矢印）・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます） 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか？ それとも根本的な何かを履き違えしているのでしょうか？ 宜しくお願い致しますm(_ _)m

SPページでフォームを作っており、以下のソースのように、 selectで複数選択させたいと考えています。 --------------------------------------------------------------------------------------------------- <select name="" id="" multiple="multiple"> <option value="">ここから選択してください（複数選択可）</option> <option value="1">1枚</option> <option value="2">2枚</option> <option value="3">3枚</option> <option value="4">4枚</option> </select> --------------------------------------------------------------------------------------------------- 複数選択はできるのですが、iphoneで確認すると デフォルトのボタンの表示が「0　Items」と表示されます。 それをタップすると下にプルダウンが表示される形です。 このデフォルトの表示を「ここから選択してください（複数選択可）」 に変えたいのですが、初心者で調べてもわかりませんでした・・・。 誰かお知恵を貸して頂ければ幸いです。 よろしくお願い致します。