![]()
- ie6 でリストが横に並ばず縦に並んでしまう
ie6のコーディングでノイローゼになりそうです。5時間くらいいろいろ試行錯誤しましたが、解決できません。 <div class="pic0"> <ul> <li class="pic1"><img src="images/pic1.jpg"/></li> <li class="pic1"><img src="images/pic2.jpg" /></li> <li class="pic1"><img src="images/pic3.jpg" /></li> <li class="pic1"><img src="images/pic4.jpg"/></li> <li class="pic1"><img src="images/pic5.jpg"/></li> </ul></div> .pic0{ width: 250px; height:40px; float: left; display:inline; padding-top: 10px; padding-bottom: 10px; overflow:hidden; } .pic1 li { float: left; height: 47px; width: 36px; display:block; margin-left:3px; margin-right:3px; } ie6のみ縦に並んでしまいます。 疑ったもの ・haslayout *{ zoom:1; } {line-height:0;} ・marginが倍になるバグ widthの指定 ・cssが効いていない ・ ネガティブマージン など ie6のcssを読み込ませるなど、何でもいいので、ie6のリストが横にさせる方法はないでしょうか。 雑文ですが、どうかお願いします。助けてください。
- 【Html CSS】<a>の上に文字を配置したい
添付の画像の様にしたいです。 一番左には「ＳｏｌｄＯｕｔ」って文字が一番上に配置されてます。 （この状態でhoverも<a>のリンクも効かせたい） 以下は、ソースです。これを添付の画像の様にしたいです。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; vertical-align: middle; } .box li{ float: left; list-style:none; } .box .out{ border-right: 10px solid #fff; border-top: 10px solid #fff; } .box a { text-align: center; display: block; text-decoration: none; font-weight: bold; color: #69380f; background-color: #f2f2f2; width: 100px; height: 120px; } .box a:hover{ background-color: #ccc; } </style> </head> <body> <ul class='box'> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> </ul> <br> </body> </html> 以上、ご指導の程、宜しくお願いいたします。
- リキッドデザイン3カラム左端幅固定の個別スクロール
現在、リキッドデザインで幅3カラムのレイアウトをしようとしています。 左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。 以下のコーディングでFirefoxとChrome、Safariでは想定したレイアウトを概ね実現できたのですが（厳密には中央と右のサイズが微妙に異なっていて調整できていません）、IE9以下は全てレイアウトが崩れて表示されてしまいます。 IE6はともかくとしても、IE7以降で崩れずにレイアウトを完成させる方法は無いでしょうか。 さらに欲を言えば中央と右カラムを完全に二分割のサイズにできるとありがたいです。 （こちらはできればで結構ですが。。。） おわかりいただける方、お知恵をお借りできないでしょうか。 ご迷惑をおかけしますが、よろしくお願いいたします。 ------------html------------ <div id="wrap"> <div id="contents"> <div id="wall"> <div id="nav"> 左ブロック </div> <div id="main"> 中央ブロック </div> </div> <div id="sub"> 右ブロッック </div> </div> </div> ---------------------------- ------------css------------ #wrap{ width:100%; text-align:left; min-height: 100%; font-size: 100%; } #contents{ position:fixed; overflow:auto; width:100%; min-width:980px; height:100%; margin-top:60px; } #wall{ position:fixed; overflow:auto; width:60%; min-width:579px; height:100%; } #nav{ position:fixed; overflow:auto; left:0px; width:178px; height:100%; } #main{ width:100%; min-width:401px; height:100%; margin-left:178px; } #sub{ width:40%; min-width:401px; height:100%; margin-left:60%; } ----------------------------
- 最上部の余白の原因
こんばんは、質問させてください。 XHTML 1.0 Transitional、CSS2で大枠のレイアウトを組んでいてはまっています。 コードは抜粋です。現在の書き方だと タイトル部分の上に対してのマージンによって <div class="header">の要素と一緒に余白がとられてしまい真っ白な余白が最上部にできてしまいます。 想定ではヘッダーの中で中央ぐらいにTitleという文字がくると思っていたのですが。。 原因はなんでしょうか？ 宜しくお願い致します。 -index.html <body> <div class="header"> <p class="title">Title</p> </div> </body> -style.css *{ margin:0; padding:0; } .header{ background-color:blue; width:800px; height:250px; } .title{ width:200px; height:50px; background-color:red; color:white; margin-left:210px; margin-top:100px; }
- 【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>
- 締切済み
- takfc3s_19
- CSS
- 回答数3
- テーブルのレイアウトについて
こんにちは。 素材屋さんに置いてあるテーブル用の画像を使い、 テーブルの一番外側のセルに画像を入れているのですが、 最上段と２番目の行との間にどうしても隙間ができてしまいます。 具体的にはこのページのようになってしまいます。 →http://sumiresou.web.fc2.com/test2.html 自分で原因検索をしてみてもなかなか上手くいきません。 どなたか教えて頂けないでしょうか？ 使用ソフトはHTML Formater、パソコンはMac OS10.4です。 よろしくお願いいたします。
- ベストアンサー
- kurousagi1
- ホームページ作成ソフト
- 回答数2
- XHTML のタイトルが表示されません ご教授おね
タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像） 一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- positionプロパティの設定について
下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。 div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。 なお、positionプロパティを使う方法のみのご回答でお願いします。 ----------------------------------------- div#footer { position: relative; width: 100%; height: 250px; margin: 0; padding: 0; background : url(images/footer_bg.gif) repeat-x 0 0; } div#inner { position: absolute; top: 0px; left: ?px; width: 800px; margin: 0px auto 0px auto; } -----------------------------------------
- ベストアンサー
- noname#145208
- HTML
- 回答数2
- リンクの下線のガタつきを解消する方法について
下記のソースを主要ブラウザで表示チェックした所、IE6でリンクの下線がガタついてしまいました。 http://ameblo.jp/coosytest/entry-10324805136.htmlと同様の現象だと思います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } td * { vertical-align:middle; } td { border-bottom:1px dotted red; } p { padding:0; margin-top: 5px; margin-right: 0; margin-bottom: 5px; margin-left: 0; } --> </style> </head> <body> <table width="500" cellspacing="0" cellpadding="0" border="0" summary="記事一覧"> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/19</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージが表示されます。</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/18</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１メッセージ２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/17</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/16</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７message８</a></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/10</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ３</a></p></td> </tr> </table> </body> </html> 上記ソースの中の下記を消すとガタつく現象が回避できることは確認しました。 td * { vertical-align:middle; } ただし、これを行うとtwitterの画像が天地中央揃えになっていたのが、上揃えになってしまうようなので、この記述は有効のままにしたいと思います。 また、下記を消してもガタつく現象が回避できることは確認しました。 body { font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } ただし、これを行うとこの部分のフォントが意図しないフォントになってしまうため、出来れば回避したいと思っています(回避策がなければIE6だけフォント指定を消すかもしれませんが)。 FirefoxやChromeなどで見た際の表示は今のソースのままで大丈夫そうなので、今の表示を維持したままIE6のリンクのガタつきを解消したいと思ったのですが、どうすれば良いかわからなかったので アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 以上、よろしくお願いします。
- CSSを使用したHPの左メニューとフッターについて
CSSを使用したホームページを作成しています。 左メニューとメインコンテンツ部分があります。 2点ほど、ご教授頂けますと幸いです。 1.左メニューの背景色について 現在、左メニューの背景色がメニュー周りのみとなっています。 これを左メニュー最下部（フッターの所まで）色を付けたいと思っています。 2.ブラウザのサイズ縮小によるフッターの表示について 現在、フッターを常に最下部で表示するように対応してみた所です。 ブラウザのサイズを縮小（上下を狭くする）と、フッターの部分が、左メニューの上部に重なってしまいます。 こちらを重ならないようにする方法（重なりそうになるとフッターが画面外に）はどのようにしたら宜しいでしょうか？ 以下ソースとなります。 宜しくお願い致します。 HTML --------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="test.css" type="text/css" /> <title></title> </head> <body> <div id="container"> <div id="header"> </div> <div id="main"> <div class="category"> <h1>テスト</h1> <div class="entry_body"> 本文本文本文本文本文本文本文本文本文本文本文本文 </div> </div> </div> <div id="side"> <div class="category"> <h3>メニュー</h3> <ul> <li><a href="../test1/">test1</a></li> <li><a href="../test2/">test2</a></li> <li><a href="../test3/">test3</a></li> <li><a href="../test4/">test4</a></li> <li><a href="../test5/">test5</a></li> </ul> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- CSS --------------------------------------------------------------- html, body { height: 100%; font-size:80%; line-height: 140%; letter-spacing:1px; color: #333333; background-color:#cccccc; text-align: center; margin: 0px auto; padding: 0px; } a:hover { text-decoration: none; } #container { width:900px; min-height:100%; height:auto !important; height:100%; position: relative; margin: 0px auto; background-color:#FFFFFF; text-align: left; } #header { border-top:#003366 solid 10px; margin: 0px 0px 0px 0px; clear:both; } #main { float:right; width:688px; background: #FFFFFF; margin: 0px 5px 0px 0px; padding: 0px 0px 0px 0px; display: inline; } #main .category { width:688px; margin: 0px 0px 15px 0px; } #main h1 { font-size:105%; border-left:#003366 solid 6px; border-bottom:#cccccc solid 1px; height:17px; font-size:120%; font-weight:bold; margin: 10px 10px 10px 10px; padding: 11px 10px 10px 20px; } #main .entry_body { margin: 15px 24px 15px 24px; padding: 0px 0px 0px 0px; } #main ul { margin: 0px 30px 0px 28px; padding: 0px 0px 10px 0px; } #main ol { margin: 0px 30px 0px 35px; padding: 0px 0px 10px 0px; } #main li { line-height: 140%; margin: 0px 0px 0px 0px; padding: 0px 0px 5px 0px; } #side { float:left; font-size:12px; width:200px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background:#336699; color:#FFFFFF; } #side .category { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; } #side h3 { color:#FFFFFF; background:#003366; font-size:12px; text-align:left; font-weight:bold; margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; border:#6699cc 1px solid; } #side .entry_body { margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; background: #6699cc; } #side ul { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; background: #6699cc; } #side li { line-height: 120%; list-style:none; margin: 5px 0px 5px 0px; border:#336699 1px solid; } #side li a, #side li a:link, #side li a:visited { color:#FFFFFF; text-decoration:none; display:block; padding: 10px 10px 10px 10px; } #side li a:hover { color:#333333; background:#99ccff; text-decoration: none; padding: 10px 10px 10px 10px; } #footer { width:900px; height:10px; background:#003366; margin: 0px 0px 0px 0px; position: absolute; bottom: 0; } ---------------------------------------------------------------
- ベストアンサー
- noname#181544
- HTML
- 回答数4
- CSSを使用したHPの左メニューとフッターについて
CSSを使用したホームページを作成しています。 左メニューとメインコンテンツ部分があります。 2点ほど、ご教授頂けますと幸いです。 1.左メニューの背景色について 現在、左メニューの背景色がメニュー周りのみとなっています。 これを左メニュー最下部（フッターの所まで）色を付けたいと思っています。 2.ブラウザのサイズ縮小によるフッターの表示について 現在、フッターを常に最下部で表示するように対応してみた所です。 ブラウザのサイズを縮小（上下を狭くする）と、フッターの部分が、左メニューの上部に重なってしまいます。 こちらを重ならないようにする方法（重なりそうになるとフッターが画面外に）はどのようにしたら宜しいでしょうか？ 以下ソースとなります。 宜しくお願い致します。 HTML --------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="test.css" type="text/css" /> <title></title> </head> <body> <div id="container"> <div id="header"> </div> <div id="main"> <div class="category"> <h1>テスト</h1> <div class="entry_body"> 本文本文本文本文本文本文本文本文本文本文本文本文 </div> </div> </div> <div id="side"> <div class="category"> <h3>メニュー</h3> <ul> <li><a href="../test1/">test1</a></li> <li><a href="../test2/">test2</a></li> <li><a href="../test3/">test3</a></li> <li><a href="../test4/">test4</a></li> <li><a href="../test5/">test5</a></li> </ul> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- CSS --------------------------------------------------------------- html, body { height: 100%; font-size:80%; line-height: 140%; letter-spacing:1px; color: #333333; background-color:#cccccc; text-align: center; margin: 0px auto; padding: 0px; } a:hover { text-decoration: none; } #container { width:900px; min-height:100%; height:auto !important; height:100%; position: relative; margin: 0px auto; background-color:#FFFFFF; text-align: left; } #header { border-top:#003366 solid 10px; margin: 0px 0px 0px 0px; clear:both; } #main { float:right; width:688px; background: #FFFFFF; margin: 0px 5px 0px 0px; padding: 0px 0px 0px 0px; display: inline; } #main .category { width:688px; margin: 0px 0px 15px 0px; } #main h1 { font-size:105%; border-left:#003366 solid 6px; border-bottom:#cccccc solid 1px; height:17px; font-size:120%; font-weight:bold; margin: 10px 10px 10px 10px; padding: 11px 10px 10px 20px; } #main .entry_body { margin: 15px 24px 15px 24px; padding: 0px 0px 0px 0px; } #main ul { margin: 0px 30px 0px 28px; padding: 0px 0px 10px 0px; } #main ol { margin: 0px 30px 0px 35px; padding: 0px 0px 10px 0px; } #main li { line-height: 140%; margin: 0px 0px 0px 0px; padding: 0px 0px 5px 0px; } #side { float:left; font-size:12px; width:200px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background:#336699; color:#FFFFFF; } #side .category { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; } #side h3 { color:#FFFFFF; background:#003366; font-size:12px; text-align:left; font-weight:bold; margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; border:#6699cc 1px solid; } #side .entry_body { margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; background: #6699cc; } #side ul { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; background: #6699cc; } #side li { line-height: 120%; list-style:none; margin: 5px 0px 5px 0px; border:#336699 1px solid; } #side li a, #side li a:link, #side li a:visited { color:#FFFFFF; text-decoration:none; display:block; padding: 10px 10px 10px 10px; } #side li a:hover { color:#333333; background:#99ccff; text-decoration: none; padding: 10px 10px 10px 10px; } #footer { width:900px; height:10px; background:#003366; margin: 0px 0px 0px 0px; position: absolute; bottom: 0; } ---------------------------------------------------------------
- ベストアンサー
- noname#181544
- HTML
- 回答数4
- z-indexを使用した枠の設定について
z-indexを使用して画像の枠を丸くしたいと思い、 参考URL→http://www.htmq.com/style/z-index.shtml を参考にしたのですが出来ません。 div.imageboxで作った角丸の枠を画像の上から重ねて画像を角丸にしたいのですが、どうすれば良いのでしょうか。 ちなみにcssやhtmlで画像を背景画像として扱うという方法は私事情で出来ません。申し訳ありません。この方法ならば簡単にできるのですが・・・ 下はそのソースです。お願いいたします。 <!-- css --> div.imagebox{ //枠の設定 height:150px; width:150px; display: inline-block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position:relative; z-index:2; }img.imagebox{ //画像のz-index設定 position:relative; z-index:1; } <!-- html --> <div class="imagebox"> <img src="画像" width="150" height="150" border="0" class="imagebox"> </div>
- IE6でli間に出来る隙間を無くす方法について
下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、Firefox等では隙間は出来ませんでした。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } ul, li { margin:0; padding:0; } li { list-style: none; } #mainlinkbox { width:100px; } #mainlinkbox li.nolink, #mainlinkbox li.link a { width:97px; border-bottom: 1px dotted blue; padding-bottom: 3px; padding-left: 3px; padding-top: 4px; background-color:red; } #mainlinkbox li.link { position:relative; } #mainlinkbox li.link a { display:block; } #mainlinkbox li.link a:hover { background-color: #c2f4a3; } #mainlinkbox li.link .submainlinkbox { left: 100px; position: absolute; width: 100px; background: yellow; } --> </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>
- “タグの属性”と“スタイル”の優先度について
HTMLの勉強をしています。以下のソースですと、“cellpadding”が機能しません。試しに、*{margin:0; padding:0;}を外しレンダリングしてみると、うまくいきました。これは、やはり、「“タグの属性”と“スタイル”での指定なら、“スタイル”が優先されると考えてよいのですか？」 よろしく、お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style text/css> *{ margin:0px; padding:0px; } </style> </head> <body> <table width="200" border="1" cellspacing="1" cellpadding="15"> <tr> <td>セルパディング</td> </tr> </table> </body> </html>
- ベストアンサー
- noname#246613
- HTML
- 回答数2
- 入れ子フレーム内のページにリンク
カテゴリ的にＨＴＭＬで良いのかどうかわかりませんが、教えてください。 ランダム表示させた文章から３つに分割された入れ子フレームのｈｔｍｌページ内の 該当箇所へ直接リンクする記述を教えていただけないでしょうか？ top.html（ココにリンクにする文章を３０種ランダム表示させます） frame.html（フレーム本体） frametop.html (フレーム上部見出し） mokuji.html（フレーム左部目次） 1kaisetu.html （フレーム右部：解説ページ） 2kaisetsu.html （フレーム右部：解説ページ） 3faq.html （フレーム右部：よくある３０の質問） ４以下略 ５ ・・・ 通常、右部には1kaisetsu.htmlが表示されるようになっており、 左部目次のmokuji.htmlからのリンクで3faq.htmlがフレーム右部に表示されます。 このフレームレイアウトを崩すことなく、top.htmlから3faq.htmlの該当する箇所にページ内リンクを 設定したいのですが、どうにも設定できません。 よろしくお願いします。
- CSSのフロートを使ったレイアウト割
CSSのフロートを使ったレイアウト割で質問です。 あるボックス（仮に100px）を真横に並べる時の事ですが、 いつもは<p>なり<div>なりにCSSでフロートleftで詰めていました。 間隔を空けるためにマージンで10pxとったとして 100px+10pxで110pxのものが5つ 550pxの幅になります。 ただ、最後のボックスにはマージンを付けたくありません。 ■がボックス、□が間隔の10pxだとして ｜ バナー ｜ ■□■□■□■□■ ■□■□■□■□■ ■□■□■□■□■ ｜他のコンテンツ｜ こういう風にしたいんです。（この例でいうと540pxにおさめたい） 左と右が端にあって等間隔でそろっている。 どんどん下にも追加していったり消したり、つめていくので 一番右の最後にだけ別のCSSを付けるわけにはいきません。 どんどん左詰めで詰まって行く コンテンツを作りたいのですが、このやり方だと出来ないですよね。 あまり使わないんですが こういう場合って <ul>とか<il>とか使うんですか？ やり方があったら教えて下さい。
- ulの入れ子で困っています
以下のようにulの入れ子をしているのですがIE6と7で上に 隙間が空いてしまいます。 ulにmargin:0;を加えても全く効果なしなのですがどのように すれば隙間をなくせますでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>タイトル</title> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> </head> <body> <ul id="hoge"> <li> <ul id="fuga"> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ul> </li> </ul> </body> </html>
- htmlで枠線や、間隔を表現しようとしています。方法としては、html
htmlで枠線や、間隔を表現しようとしています。方法としては、htmlそのもののタグを利用する方法と、1pxの画像（spacer.gifのような名前が多いようです）を利用する方法があり、spacerの方法の方がいいと聞いたのでそちらでやりたいのですが、素人なので一から作れないので困っています。サンプルをネットで探しているのですが、なかなかありません。おすすめのサンプルはどこかにないでしょうか？
- 1
- 2