leap_dayのプロフィール

@leap_day leap_day
ありがとう数600
質問数57
回答数888
ベストアンサー数
338
ベストアンサー率
60%
お礼率
94%

＜＜数学＞＞ 高校の頃はかなり得意分野でした が、十数年前の記憶なので難しい問題は解けないかも知れませんが解けそうなものはわかりやすく回答していきたいです ＜＜パソコン歴＞＞ 2年　(ネット閲覧だけしてる時期も入れると3,4年かな） ＜＜スクリプト＞＞ perl歴　1年　：　Javascript歴　1ヶ月　：　PHP歴　さわり程度(07年1月現在） とまぁ、アマチュアですがいろいろな技法を習得していきたいので一緒に考えましょう（＾＾）ｖ HP公開用のCGIゲーム開発中 完成したらHPのUP法など伺うことになると思いますのでそのときはよろしくお願いします

  • 登録日2007/01/08
  • リストタグ, float:left; operaで

    下記のようにリストタグで [リンク][　　説明　　] というデザインにしたいと思っています。 リンク部分はマウスを当てると浮き出るようにしています。 これがIEとfirefoxではうまく表示されますがoperaではうまく表示されません。 [説明]の部分の<li>が[リンク]部分の<li>を無視して表示されてしまいます。 marginで場所あわせをするとリンクボタンを押したときに全体が動くようになってしまいます。 テーブルタグを使うと、IEで見た場合リンクのボタンがうまく動かないのでテーブルタグはだめっぽいです。 なにか解決案はございますでしょうか？よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- a.link-a{ display:block; width:150px; height:30px; text-align:center; line-height:30px; background-color:#ccddff; } a.link-a:hover{ margin:-2px 0 0 -2px; border:solid #492E07; border-width:0 2px 2px 0; } a.link-a:active{ border-width:2px 0 0 2px; } ul.link{ margin:3px 0; ist-style-type:none; clear:both; } li.float-1{ float:left; width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.float-2{ width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } li.margin-1{ width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.margin-2{ margin:-31px 0px 0px 150px; width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } --> </style> </head> <body> <ul CLASS="link"> <li CLASS="float-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="float-2">日本初、最大級のＱ＆Ａサイト　ＯＫＷＡＶＥ</li> </ul> <ul CLASS="link"> <li CLASS="margin-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="margin-2">日本初、最大級のＱ＆Ａサイト　ＯＫＷＡＶＥ</li> </ul> </body> </html>

    • ベストアンサー
    • HTML
    • ONEONE
    • 回答数4
  • リストタグ, float:left; operaで

    下記のようにリストタグで [リンク][　　説明　　] というデザインにしたいと思っています。 リンク部分はマウスを当てると浮き出るようにしています。 これがIEとfirefoxではうまく表示されますがoperaではうまく表示されません。 [説明]の部分の<li>が[リンク]部分の<li>を無視して表示されてしまいます。 marginで場所あわせをするとリンクボタンを押したときに全体が動くようになってしまいます。 テーブルタグを使うと、IEで見た場合リンクのボタンがうまく動かないのでテーブルタグはだめっぽいです。 なにか解決案はございますでしょうか？よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- a.link-a{ display:block; width:150px; height:30px; text-align:center; line-height:30px; background-color:#ccddff; } a.link-a:hover{ margin:-2px 0 0 -2px; border:solid #492E07; border-width:0 2px 2px 0; } a.link-a:active{ border-width:2px 0 0 2px; } ul.link{ margin:3px 0; ist-style-type:none; clear:both; } li.float-1{ float:left; width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.float-2{ width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } li.margin-1{ width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.margin-2{ margin:-31px 0px 0px 150px; width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } --> </style> </head> <body> <ul CLASS="link"> <li CLASS="float-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="float-2">日本初、最大級のＱ＆Ａサイト　ＯＫＷＡＶＥ</li> </ul> <ul CLASS="link"> <li CLASS="margin-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="margin-2">日本初、最大級のＱ＆Ａサイト　ＯＫＷＡＶＥ</li> </ul> </body> </html>

    • ベストアンサー
    • HTML
    • ONEONE
    • 回答数4
  • 背景に影をつける方法（CSS）を教えてください。

    以前からやりたかったメインの背景の左右に影をつける方法にチャレンジしているのですが、IE6だけ少しうまくいきません・・・ やり方としてはメイン（wrapper）のボックスに＋影の幅（左＋右）のwidthを指定して、左右の影の幅分を左右それぞれにpaddingを指定しています。 その中をヘッダー＋2カラムで構成しているのですが、IE６だけ右側部分のpaddingが2倍？になっているのか、おさまりきらず下に回り込んでしまいます。 その他のブラウザでは左右に2カラムが表示されています。 これはIE6のバグの一種でしょうか？ これの解決方法を教えていただけないでしょうか？ <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right">aああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div> </div> body { font-size: 12px; margin: 0px; padding: 0px; height: auto; width: 100%; text-align: center; position: absolute; line-height: 150%; background-image: url(img/bg.gif); float: left; } #main { text-align: left; width: 910px; margin-top: 0px; margin: 0px auto; ; ; background-image: url(img/main-bg.gif); padding: 0 10px 0 10px; } #left { text-align: left; float: left; width: 210px; margin-left: 0px; padding: 10px 0 10px 0; } #right { width: 700px; float: right; }

    • ベストアンサー
    • HTML
    • noname#64096
    • 回答数5
  • 背景に影をつける方法（CSS）を教えてください。

    以前からやりたかったメインの背景の左右に影をつける方法にチャレンジしているのですが、IE6だけ少しうまくいきません・・・ やり方としてはメイン（wrapper）のボックスに＋影の幅（左＋右）のwidthを指定して、左右の影の幅分を左右それぞれにpaddingを指定しています。 その中をヘッダー＋2カラムで構成しているのですが、IE６だけ右側部分のpaddingが2倍？になっているのか、おさまりきらず下に回り込んでしまいます。 その他のブラウザでは左右に2カラムが表示されています。 これはIE6のバグの一種でしょうか？ これの解決方法を教えていただけないでしょうか？ <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right">aああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div> </div> body { font-size: 12px; margin: 0px; padding: 0px; height: auto; width: 100%; text-align: center; position: absolute; line-height: 150%; background-image: url(img/bg.gif); float: left; } #main { text-align: left; width: 910px; margin-top: 0px; margin: 0px auto; ; ; background-image: url(img/main-bg.gif); padding: 0 10px 0 10px; } #left { text-align: left; float: left; width: 210px; margin-left: 0px; padding: 10px 0 10px 0; } #right { width: 700px; float: right; }

    • ベストアンサー
    • HTML
    • noname#64096
    • 回答数5
  • Firefoxでメニューナビの全体幅が調整できない

    ヘッダーのメニューナビがIEでは正常に表示されているのに、Firefoxではメニュー全体幅が左右にはみ出てしまいます。どうしたらどんなブラウザでも指定したWidth幅どうりに表示できるようになるのでしょうか？ 色々自分なりに考えましたが、CSS初心のためいまいちわかりません。 良きアドバイスよろしくお願いします。 CSS <style type="text/css"> <!-- menug{ position: relative; padding: 0 0 0 58px; margin: 0 0 auto 0; background: url(/menug_bg.gif) repeat-x; height: 46px; list-style: none; width: 870px; } .menug li{ float:left; } .menug li a{ float: left; display: block; color:#; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold; padding:0 0 0 15px; height: 46px; line-height: 46px; text-align: center; cursor: pointer; } .menug li a b{ float: left; display: block; padding: 0 20px 0 6px; } .menug li.current a, .menug li a:hover{ color: #fff; background: url(/menug_hover_left.gif) no-repeat; background-position: left; } .menug li.current a b, .menug li a:hover b{ color: #fff; background: url(/menug_hover_right.gif) no-repeat right top; } --> </style> HTML <ul class="menug"> <li class="current"><a href="#"><b>MEMU1</b></a></li> <li><a href="#"><b>MENU2</b></a></li> <li><a href="#"><b>MENU3</b></a></li> <li><a href="#"><b>MENU4</b></a></li> <li><a href="#"><b>MENU5</b></a></li> <li><a href="#"><b>MENU6</b></a></li> </ul>

    • ベストアンサー
    • CSS
    • zapan
    • 回答数4
もっと見る