0

ヘッダー内にあるスライダーを中央に配置しようとしています。ヘッダーとコンテナ全体は、margin: 0 auto; だけできれいに中央に配置されます。次に、ヘッダー内にスライドショーを含めようとし、さまざまな方法で正しく配置しようとしました。はい、position:aboslute を使用して座標を操作することで、独自の構成に成功しましたが、それは他の世界では機能しません。

サイト (建設中) は www.hrcprojectconsulting.com です。

すべての CSS を見ることができるので、どのように配置できるか知っていますか? すべてのマージンの組み合わせを試しましたが、思いつくオプションがありません。

良いニュースは、Windows 7 で Internet Explorer 10 も利用できるようになったことです。そのため、CSS3 と html5 のプレースホルダーが機能するため、逆方向のコーディングを行うことはもうありません。

注: たまたますべてが正常に表示された場合、これは、私と同じ種類のモニターと解像度を使用していることが原因です。

ありがとうございました

スライダーのコード:

 <style type="text/css" media="screen">
#slider {
    width: 960px; /* important to be same as image width */
    height: 150px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}
#sliderContent {
    width: 960px; /* important to be same as image width or wider */
    position: absolute;
    top: 125px;
    left:265px;

    margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
    display: none;
}
.sliderImage span {
    position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

私のホームページのコード:

<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }



body{

    background:url('../assets/uploads/miweb/gradient2.png');
    background-repeat:repeat-x;
    font: 13px/20px normal Helvetica, Arial, sans-serif;
    color: #4F5155;
    margin:0;
    padding:0;
    line-height: 1.5em;

}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 960px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
height: 300px; /*Height of top section*/
}
4

1 に答える 1

1

これはul、デフォルトのパディングがあるためです。パディングul#sliderContentを 0に設定する必要があります。

 #sliderContent {
    padding:0;
    margin:0;
 }

次にposition: absolute、スタイルシートから を削除する必要があります。

をsliderContent一番下に配置するには、次のようにします。

 #topsection {
    position: relative;
 }
 #slider {
    position: absolute;
    bottom: 0;
 }
 #sliderContent {
    padding: 0;
    margin: 0;
 }
于 2012-11-28T12:39:18.633 に答える