画面の解像度に応じてCSSイメージの配置方法をオフにする

Question

http://magee.darkslidedesign.comに移動すると、jQueryスライドのメインページに画像が表示されます。スライドの両側には、「前の」ボタンと「次の」ボタンがあります。

私はこれらの矢印は、彼らがしている同じ場所に滞在していするための最良の方法を把握しようといくつかの助けが必要

#slides .next,#slides .prev { 
    position:absolute; 
    margin-top: -215px; 
    width:24px; 
    height:43px; 
    display:block; 
    border: 0; 
} 

#slides .next { 
    margin-left: 827px; 
} 

...以下のCSS内の特定の場所に配置されたこれらのイメージを持っています解像度が1600x900の場合は解像度が低くなります。

ヘルプ？

Answer 1

フム...レイアウトはちょっとファンキーです...あなたが行うことができます一つのことは、.prevにmargin-left: 100px;を削除.nextにmargin-left: 827pxを削除し、.nextにright:0px;を追加し、最後に保持して60％広いコンテナにposition:relativeを追加することですスライドdiv。同じ60％幅のdivにmin-width: 750px;を置くこともできます。

いつも同じ場所に滞在したい場合は、60％幅のdivに800px程度の固定幅（width:800px）を付けます。

Answer 2

はこのような何かを試してみてください：

#slides { 
    position:relative; 
} 

#slides .next,#slides .prev { 
    position:absolute; 
    top:30px; // use this instead of margins, of course change the value 
    left: -30px // Try with this 
    width:24px; 
    height:43px; 
    display:block; 
    border: 0; 
} 

#slides .next { 
    right: -30px; // Change the value 
} 

Answer 3

htmlコードは最初のものとして有効でないとして、この問題を解決することは非常に困難です。また、あなたの矢印にポジションアブソリュートを取ることは、ヘッダーの依存性が非常に高くなるため、賢明なことではありません。スライダー自体にのみ依存する必要があります。それはあなたがポジションを変えるときには絶対的です。 #slides .next,#slides .prevの内部では、スライダが正しく機能しなくなります。スライダーが.prevのどこにでも置かれているように、ほとんど感じます。 .prevはプレースホルダのようなものです。

これらの理由から、この問題はCSSの観点からのみ解決できないと強く信じています。 HTMLを最適化して有効にすることをお勧めします。また、別のスライダを使用することもできます。通常スライダーの外に矢印を配置すると、このようになります、ので：

<style> 
#hero_wrapper {float: left; border: 1px dotted blue; padding: 0px 60px;} 
    #hero_images {border: 1px dotted red; width: 500px; height: 300px;} 
    #hero_prev, 
    #hero_next {position: relative; margin-top: 110px; padding: 20px; font-size: 30px; font-weight: bold; border: 1px dotted green; /* #hreo_next special: */ float: left; margin-left: -60px;} 
    #hero_next {float: right; margin-right: -60px;} 
</style> 
<div id="hero_wrapper"> 
    <div id="hero_prev">&lt;</div> 
    <div id="hero_next">&gt;</div> 
    <div id="hero_images"></div> 
</div> 

^{[View output]}

私は、私はあなたに具体的な答えを与えることができないことを残念ですが、私は願っていたときにその（スライダーのDOM構造が最適ではないと仮定しているので）スライダーの使用を再考します。また、技術的には、スタンドアロンの矢印を持つスライダーを見つけるだけです（私は個人的にはthe jQuery Orbit Pluginが好きです）。 ）、単純に私の基本的なスライダ構造のコンセプトを使用してください。その場合は、#hero_imagesをスライドさせて、前の機能と次の機能を矢印に合わせるだけで済みます。

いくつかのポインタ：私は上記のコメントで述べたように白い背景がロールオーバーに表示されませんでしたので、

• は、あなたのメニュー画像は、スプライトにする必要があります。
• メタタグは、/（xhtml）で終了する必要があります。
• Googleアナリティクスでは、フッタに</body>より前にコードを記述することを強くお勧めします。
• 現代のウェブサイトの開発では誰も画像の枠線を望んでいません。そして、そうした場合は、手動で設定します（.someimg {border: 1px solid black;}）。だからavoid non-valid xhtmlには、あなたのCSSの上部にあらかじめ定義されたimgの値を追加してください：img {border: 0px;}
• また、いくつかの他の非標準の属性があります。 Use a validator!
• 通常スライダーで画像がulリスト...