- 締切済み
以下のサイトのpaddingの設定方法
サイトの右サイドバーのホームページ制作事業のカテゴリー下の広告バナーのpaddingの設定がききません。 marginは設定すれば反映するのですがpaddingの設定がききません。 広告バナーの前にbackground imageとして三角の矢印を挿入したいため paddingで広告バナーを右に15px動かしたいです どのようにしたら移動できるか分かりません お分かりの方いましたらよろしくお願いします
- ryuujinn11
- お礼率26% (47/178)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
common.css 415行目 #sub li a { background: url("../images/bg_arrow.gif") 0 50% no-repeat; display: block; padding: 5px 5px 5px 30px; } #sub li a:hover { background:#EFEBEF; color: #333333; } しかしこれは邪道です。 #sub li{list-style-image:url();} でしょう。 そもそも、継承されるプロパティを何度も書くのは止めたほうが良いです。これだけでCSSの行数は1/3以下になるでしょう。この状態では作成した自身でもメンテナンス不能になっちゃいます。
ソース拝見致しました。 id名「sub」配下のliタグ全般に一律で5pxのpaddingがかかっているのが原因じゃないでしょうか？ ネット事業の方のバナーが上手くいってるのは、liタグではなくaタグのクラス内にpaddingを指定してるおかげです。 iframeタグの外側にdivタグなどを挟んで、そちらにクラス指定をするのが一番早いかと思います。
お礼
ありがとうございました 困っていたので大変助かりました
関連するQ&A
- paddingを指定すると、marginが広がります。
はじめまして。 現在CSSでHPを作成しているのですが、タイトルにあるように、paddingを指定すると、marginが広がってしまいます。 topのpaddingを指定するとtop-marginが・・・ bottomを指定すると・・・ のような感じです。 原因と解決方法を教えていただけないでしょうか？ #news { width: 180px; height: 110px; background-image: url(img/news.gif); margin-top: 15px; padding-top: 30px; background-repeat: no-repeat; padding-bottom: 20px; padding-left: 20px; } レフトに配置しています。
- ベストアンサー
- HTML
- padding-leftがききません。。。
padding-left効かないです...原因教えて下さい。 ソースは以下です。 <div id="right"> <div class="plofile"> </div> </div> #right { width:250px; float:left; overflow:hidden; } .plofile { width:190px; height:265px; padding-left:10px; float:left; margin-top:35px; background:url(plofile_bg.png); padding-left:20px; }
- 締切済み
- HTML
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- ＨＰ製作 paddingやmarginが効かない
お世話になっております、表題の件、 非常に低レベルな質問になるかと思いますが 失礼致します。 現在、ワードプレスのtwentyelevenをカスタマイズし、 ホームページを作成しておりますが sidebar.phpを編集してＣＳＳを効かせようとしているのですが paddingやmarginなどが反映されず困っております。 #secondaryという<div>の中にある <p>にpaddingをかけようとしており、 サイドバーの中のリンクを右に寄せて リンクの色を黒に統一しようとしており、 リンクの色は黒に変更したのですが、 paddingが効きません。 ※コード #secondary .sidebar_font (padding-left:20px;} .sidebar_font a:link { color: #000; } .sidebar_font a:visited { color: #000; } .sidebar_font a:hover { color: #000; } .sidebar_font a:active { color: #000; } #secondaryのスタイルによってpaddingやmarginが効かなくなることがあるのでしょうか？ 大変恐縮ですが ご助力戴ければ幸いでございます。
- ベストアンサー
- CSS
- CSS-paddingが反映されません
入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。 ご教授ください。
- 締切済み
- HTML
- IE6だとpaddingで指定したぶんだけ消えてしまう。。。
いま、CSSでサイトつくっているのですが、IE6だけpaddingで指定した分だけ、画像（背景）が足りません。 <h2>と<p>をくっつけて一枚の背景画像を作ろうとしています。 解決するには宣言を変えるか、CSSハック？をする、もしは<div>を入れ子するしかないのでしょうか？ また、<div>を入れ子にするのはよくないと教えていただいたのですが、どれくらいまでが許容範囲でしょうか？ いつもwrapperで囲っているので、大枠のレイアウトを作るだけでもすでに１つ入れ子状態なんですが・・・ <h2>あああああああああああああああああ</h2> <p>あああああああああああああああ </p> .h2 { background-image: url(img/flow6_01.gif); height: 37px; width: 650px; text-indent: -9999px; float: left; margin-bottom: 0px; } #p { width: 625px; height: 120px; float: right; background-image: url(img/flow1_02.gif); margin: 0px; margin-bottom: 10px; background-repeat: no-repeat; padding-left: 25px; }
- ベストアンサー
- HTML
- *{margin:0px;padding:0px;}
*{margin:0px;padding:0px;} という風に、スタイルシートで設定をしているのですが、 テーブルに余白を付けようとしても、できません。 どうすればいいのでしょうか？
- ベストアンサー
- HTML
- フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
- ワードプレス メニュー見出し画像の位置変更方法
Wordpressのサイドバーのメニュー左横にある見出し画像変更の表示位置変更について教えて下さい。 テーマでStinger3を使用しており、以下のURLを参考にして見出し画像の内容を変更する方法は分かりました。 http://kichiden.com/stinger-sidebar/ .menu_underh2 { margin-bottom: 20px; margin-top: 20px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 35px; background:#eee;/*背景追加*/ background-image: url(images/ca3.png); background-repeat: no-repeat; background-position: left center; border-bottom: 2px #212121 solid;/*下線追加*/ } 私の作成したブログでは、メニューの見出し横に表示させた画像のサイズを少し大きくしてしまったので、見出し画像に左の余白が無い状態になっています。 上記padding-left: 35px;の数字を大きくしても、 文字が右にズレるだけで、見出し画像の位置は同じで変わりません。 見出し画像だけを右に少しずらすしたいんのですが、どのようにすれば良いのでしょうか？ どうかアドバイスのほど、よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- jQuery、JSONの結合方法
いつもお世話になります。 jQuery.fn.hoge = function(options) { var defaults = { 'val1':'1', 'val2':'2', 'Css':{ 'padding':'3px', 'margin':'2px', 'background-color':'red' } } などとして、 hoge( 'val2':'222', Css':{ 'padding':'10px' } ) var setting = $.extend(defaults,options); とすると、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px' } となります。 ここで、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px', 'margin':'2px', 'background-color':'red' } となるようにするにはどうしたらよいのでしょうか。 つまり、 'val2':'2', －＞ 'val2':'222', 'padding':'3px' －＞ 'padding':'10px' と書き換えられるのは良いのですが、, Css':{ 'padding':'10px' } となってしまい 次の２つが削除されてしまうのは困るということです。 'margin':'2px', 'background-color':'red' よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
ありがとうございました 大変助かりました