在響應和固定位置的圖像底部製作css圓圈

我有一個問題，我無法在CSS中弄清楚。在imagelider的底部，我有三個圓圈，但它們需要有一點響應，以便13'至21'的筆記本電腦上的每個人都能看到它們的確切位置。但是，當我調整屏幕大小時，這些圓圈會鬆動它們的位置，並且會放在更高或更低的位置。 Here is the example我在說，你會看到當你調整屏幕大小時，這些圓圈在圖像底部並不處於原來的好位置。 I am working towards this。我的代碼如下：在響應和固定位置的圖像底部製作css圓圈

CSS

.bxslider { 

margin: 0; 
padding:0; 

} 

#bijschrift { 

position: relative; 
left: 65%; 
height: auto; 
bottom: 250px; 
float: left;  
z-index: 9999; 
} 

#bijschrifthoofd { 
z-index: 9999; 
opacity: 0.8; 
padding-left: 10px; 
padding-right: 10px; 
    background-color: #212121; 
} 
#bijschrifthoofd span { 
    width: auto; 
     color: white; 
    font-family: 'Open Sans', sans-serif; 
font-weight: 500; 
line-height: 45px; 
font-size: 150%; 

} 
#bijschriftonder { 
z-index: 9999; 
opacity: 0.8; 
margin-top: 10px; 
padding-left: 10px; 
padding-right: 10px; 
    background-color: #212121; 
    float: left; 
} 
#bijschriftonder span { 
    width: auto; 
     color: white; 
    font-family: 'Open Sans', sans-serif; 
font-weight:100; 
line-height: 45px; 
font-size: 22px; 

} 
#cirkelcontainer { 
width: 100%; 
height: auto; 
position: relative; 
bottom: 200px; 
z-index: 9999; 
display: block; 

} 
.circle 
{ 
    display:table-cell; 
width:80px; 
height:80px; 
border-radius:40px; 
font-size:16px; 
color:white; 
vertical-align: top; 
text-align:center; 
background:#00ccff; 
float: left; 

font-family: 'Open Sans', sans-serif; 
font-size: 22px; 
line-height: 80px; 
} 
.circle2 { 
    display:table-cell; 
    margin-left: 2%; 
    z-index: 9999; 
width:80px; 
height:80px; 
border-radius:40px; 
font-size:16px; 
color:white; 
vertical-align: top; 
text-align:center; 
background:#e05c50; 
float: left; 

font-family: 'Open Sans', sans-serif; 
font-size: 22px; 
line-height: 80px; 
} 
.circle3 { 
    display:table-cell; 
    margin-left: 10%; 
    z-index: 9999; 
width:80px; 
height:80px; 
border-radius:40px; 
font-size:16px; 
color:white; 
vertical-align: top; 
text-align:center; 
background:#0099cc; 
float: left; 

font-family: 'Open Sans', sans-serif; 
font-size: 22px; 
line-height: 80px; 
}

HTML

<ul class="bxslider" > 
    <li><img src="fotos/Untitled-5.jpg" title="Funky roots" /></li> 
    <li><img src="fotos/Untitled-4.jpg" title="The long and winding road" /></li> 
    <li><img src="fotos/Untitled-3.jpg" title="Happy trees" /></li> 

</ul> 
<div id="bijschrift"> 
<div id="bijschrifthoofd"><span>UW SPRINGPLANK NAAR INSPIRATIE</span></div> 
<div id="bijschriftonder"><span>En authentieke waterpret</span></div> 
</div> 
<div style="clear:both"></div> 
<div id="cirkelcontainer"> 
    <div class="circle">O</div> 
    <div class="circle2">IB</div> 
    <div class="circle3">T</div> 
</div> 

</body> 
</html>

來源

2013-07-15 user2583429

該解決方案是很明顯的：我不得不界中的地位絕對所以它不會影響我未來的div的位置，並添加「與容限left：-width px'。在這種情況下：「margin-left：-50px;」。

來源

2013-08-27 20:43:57 user2583429

我不知道哪裏是圓的「確切位置」。我假設它是在圖像的底部，像這樣：

http://jsfiddle.net/Y65mW/1/

所以我改變了各界的Html這樣的：

<div id="circle1" class="circle">O</div>

和CSS的，所以我們可以使用一個單圈樣式定義：

.circle { 
    position: absolute; 
    width:80px; 
    height:80px; 
    border-radius:40px; 
    ... 
} 
#circle1 { 
    left: 60px; 
    background:#00ccff;

}

你應該還是爲整個網站添加一個'min-width'屬性。

我更新這裏的解決方案http://jsfiddle.net/Y65mW/3/embedded/result/

來源

2013-07-15 13:03:08 rafaelcastrocouto

非常感謝您的快速回復。儘管如此，這些圈子應該在圖像的一半處，正如您在我的帖子中包含的設計中所看到的。 – user2583429

好的，我明白了... http://jsfiddle.net/Y65mW/3/embedded/result/ – rafaelcastrocouto

在響應和固定位置的圖像底部製作css圓圈

回答

相關問題