结合div类和我的图像映射

时间:2013-12-06 16:09:52

标签: html css twitter-bootstrap

使用Bootstrap v2.2.2

我正在尝试将图像映射应用到我的span 4类中,除了图像映射类正在敲除对齐(它似乎突破容器或行类而不是在响应断点中缩放图像)。我是一名交易设计师,所以我缺乏CSS认知,我认为这需要。 某处存在代码冲突!

这就是我所做的:

<div class="container">

    <div class="row">

        <div class="span4">
            <h4>
                text
            </h4>
        </div>   

         <div class="span4">
            <h3>
                text
            </h3>
        </div>  

            <div class="span4 map_image" style="background-image: url('assets/img/tradeLogos.jpg');">
                <a class="map_link" id="map_link_0" title="The Guild of Master Craftsmen" href="http://www.guildmc.com/"></a>
                <a class="map_link" id="map_link_1" title="Federation of Master Builders" href="http://www.fmb.org.uk/"></a>
                <a class="map_link" id="map_link_2" title="Build Assure" href="http://www.fmbuildassure.co.uk/"></a>
                <a class="map_link" id="map_link_3" title="Gas Safe" href="http://www.gassaferegister.co.uk/"></a>
                <a class="map_link" id="map_link_4" title="European Builders Confederation" href="http://www.eubuilders.org/"></a>
                <a class="map_link" id="map_link_5" title="Velux Roof Windows" href="http://www.velux.co.uk/"></a>
                <a class="map_link" id="map_link_6" title="Napit" href="http://www.napit.org.uk/"></a>
                <a class="map_link" id="map_link_7" title="Trust Mark" href="http://www.trustmark.org.uk/"></a>

           </div>  


    </div>
</div>

CSS:

       .map_image { display: block; width: 360px; height: 182px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
    .map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
    .map_image #map_link_0 { width: 78px; height: 81px; top: 7px; left: 1px; }
    .map_image #map_link_1 { width: 77px; height: 82px; top: 8px; left: 91px; }
    .map_image #map_link_2 { width: 98px; height: 78px; top: 9px; left: 175px; }
    .map_image #map_link_3 { width: 73px; height: 75px; top: 10px; left: 284px; }
    .map_image #map_link_4 { width: 72px; height: 81px; top: 98px; left: 1px; }
    .map_image #map_link_5 { width: 105px; height: 81px; top: 99px; left: 81px; }
    .map_image #map_link_6 { width: 71px; height: 81px; top: 99px; left: 193px; }
    .map_image #map_link_7 { width: 85px; height: 78px; top: 99px; left: 272px; }

0 个答案:

没有答案