問題タブ [sliding-doors]

CSS ボタンの配置について助けが必要です。さまざまなバリエーションを試しましたが、ボタンを希望どおりに中央に配置できません。

まず、この URL を見てください: http://www.front-end-developer.net/cssbuttons/example.htm

ボタンを形成するために 2 つの画像を使用しています (これは 1 つの画像で実行できますが、この場合は 2 つです)。div の幅を「制限」し、div のコンテンツが終了するとすぐに閉じて、親 div 要素に適用float:leftする限り、すべてが期待どおりに機能します。float:rightfloat:left をボタンから削除して、私が何を意味するかを確認できます。

しかし、中央に配置されたボタンはどうですか? float:left/right は真ん中に揃えたいので追加できません。

理論的には、設定できます

そして、私はあなたがこの写真で見ることができるものを手に入れます：

_{(出典: front-end-developer.net )}

しかし、中のテキストの長さはわかりません。異なる翻訳を使用すると、ボタンが非常に短くなったり、その 5 倍の長さになったりします。

<span>の代わりにも使用しようとしまし<div>たが、残念ながらネストされたインライン要素はパディングを正しく尊重しません...

はい、<a>内部で使用する必要があるため、Web クローラーがボタンにアクセスできます。

私は本当にこれにこだわっています。

私はここで説明されている引き戸のテクニックを使用しました：

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

1つだけ例外を除いて、「ホバー」効果のためにもう1つの画像を追加することにしました。

私のコードは、IE8（およびおそらく以前のバージョン）を除くすべてのブラウザーでうまく機能します。

a.submit-button：activeおよびa.submit-button：activeスパンは、単に「ホバー」によってブロックされ、機能しません。

誰かがこれの解決策を知っていますか？

これはテストページです：http ：//websvit.com/temp/button.html

よろしくお願いします！

そしてこれはボタンです：

代替テキストhttp://websvit.com/temp/button-1a.png 代替テキストhttp://websvit.com/temp/button-1b.png

<a></a>タグを使用して美しいボタンをマークアップし、onlick や onhover のスタイルを変更するなどの一般的な方法があります。これは、ほとんどの場合、見た目も動作も優れています。

大きな問題があることが判明しましたが、最初はあまり明白ではありませんでした. 問題は、これらの美しい「ボタン」が中クリックで新しいウィンドウを開くことです。空白か、現在のウィンドウと同じ内容です (href 部分を無効にするために # または javascript:; を使用するかどうかによって異なります)。

今、私は JavaScript RIA をそこら中にボタンを配置して、中クリックで新しいウィンドウを開きます...ラメ...

最初は、ブラウザに空白のページが表示されることがある理由さえ理解できませんでした。

このような方法でリンクを使用することはかなり確立された慣行であるため、説明されている問題に対処するための確立された方法はありますか?

私はこのスクリプトを持っています：

http://jsfiddle.net/NV2uV/

それは機能しますが、私はそれが好きではありません。

短所：

1. レンチ (エッジ ブロック)。
2. あるユニットから別のユニットへの遷移では、アニメーションは 2 つのステップで実行されます (連続したアニメーションが必要です)。
3. スクリプト コードは美しくありません。繰り返しが多すぎます。

要するに、見栄えがよくありません。

スクリプトを改善してアニメーションを見るにはどうすればよいでしょうか。それは目に良いものでした (既成の解決策がある場合は教えてください)。

アップデート：

アニメーションを小さく設定すると、そのアニメーションは非常に見栄えがします。

更新 2:

私は解決策を見つけました: animate 関数では設定 " queue:false " を追加する必要があります。そうすると、アニメーションは一貫してではなく同時に実装されません。

http://jsfiddle.net/TtHBy/

しかし、スクリプトで多くの繰り返しが好きではありません。どのようにカットして美しくすることができますか?

私はメニューを持っています：

引き戸のテクニックを使って、ボタンを作成したいと思います（下部に丸い角があります）。

aとliにカーソルを合わせると、これを機能させることができます。ただし、liの方が大きく、aにカーソルを合わせずに、liにカーソルを合わせると、liの背景画像のみが表示されます。

今、私はliのホバーとcss内のaのホバーを接続する方法があるかどうか疑問に思っています。私はむしろjavascriptを使用せずにこの問題を修正します。

グーグルはそれ以上私を助けませんでした。これは不可能だと思いますが、他のオプションを試す前に確認したかったのです。

アドバイス/ヘルプ/提案を事前に感謝します。

リンク全体を中央に配置しようとしていますが、解決策を探すのに苦労しています。リンクにはシンプルな引き戸スタイルを使用していますが、中央に配置したいと思います。

対話できるデモは次のとおりです：http：//jsbin.com/ibidu3

Firefox以外はすべて正常に動作する汎用の引き戸ボタンを作成しようとしています。ボタンのスパン要素は常にFFで2px低くなります。

これが例です

http://jsbin.com/orami3/4

<a>css 引き戸テクニックを使用してロールオーバー状態を表示するタグがあります。

問題は ie6 にあります。背景画像が点滅/点滅します。これに対する解決策はありますか?

ありがとう、

J.

やあ、

aスライドドアを使用するリンク（）がいくつかあります。リンクの1つにアクセスすると、テキストの色が変わります。firebugを使用すると、リンクが次のスタイルになることがわかります。

<div id="SignInForm"></div>奇妙な部分は、リンクが？内に存在しないことです。そして、この問題はFireFoxで見られますが、IE8では見られません。

罪状認否はこちらをご覧ください：http：//jsfiddle.net/snowman/ecWzz/

リンクがこのスタイルになるのはなぜですか？

よろしくお願いします