i have problem can't figure out in css. @ bottom of imageslider have 3 circles, need bit responsive on laptop 13' till 21' can see them @ exact position. when resize screen, these circles loose position , placed bit higher or lower. here example talking about, see when resize screen, circles not in original position, @ bottom of image. i working towards this. code have following:
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 , 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>
i'm not sure "exact position" of circles. i'm assuming it's on image @ bottom, this:
so changed circles html this:
<div id="circle1" class="circle">o</div> and css can use single circle style definition:
.circle { position: absolute; width:80px; height:80px; border-radius:40px; ... } #circle1 { left: 60px; background:#00ccff; }
you should still add 'min-width' property whole site.
i updated solution here http://jsfiddle.net/y65mw/3/embedded/result/
Comments
Post a Comment