CSS將我的幻燈片顯示在標題中

我一直在嘗試將標題內的滑塊居中。標題和整個容器整齊地居中，只有餘量：0 auto;然後，我試圖在頭部添加一個幻燈片，並嘗試通過多種方式將其正確放置。是的，我通過使用position：aboslute然後使用座標來成功實現我自己的配置，但這對於世界其他地方不起作用。CSS將我的幻燈片顯示在標題中

網站（正在建設中）是www.hrcprojectconsulting.com

既然你就可以看到所有的CSS的東西，你知道如何在天上可以定位？我嘗試了所有的保證金組合，但我很喜歡那些我能想到的選項。

一個好消息是Internet Explorer 10現在也可用於Windows 7，所以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*/ 
}

來源

2012-11-28 user1815822

讓你的頭的位置是：相對的，現在的位置，你DIV saay左：10％，寬度：10％，因此，這兩個側緣是所有分辨率的標題的10％，因此你的div仍然被關閉 –

請發佈相關的代碼，我什至不能在你的CSS中找到#slider。 – tobiv

這是因爲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-28 12:39:18 Cyclonecode

@ user1815822 - 圖像似乎很小？要進一步放置幻燈片，可以設置'sliderContent'的'margin-top'。 – Cyclonecode

@ user1815822 - 我更新了我的答案=） – Cyclonecode

@ user1815822 - 那是因爲你在'sliderContent'而不是'slider'上設置了絕對位置，對此抱歉。重新檢查答案。 – Cyclonecode

CSS將我的幻燈片顯示在標題中

回答

相關問題