使用CSS圖像定位和屏幕分辨率，我怎樣才能最好地定位這張圖片？

我有一個鼠標懸停效果，當客戶端懸掛一個標誌時，它上面的圖片帶有一個國家的小圖標和一條消息，「查看本網站的英文」或「Regardez la website en francais」或其他。使用CSS圖像定位和屏幕分辨率，我怎樣才能最好地定位這張圖片？

我試過我的css位置使用像素以及百分比，但如果您使用1280或1900屏幕分辨率，照片可能會消失。這裏就是我想要它看起來像：

            picture should be here 
            flag 1 flag2 flag3 flag4 flag5 flag6

所以當他們懸停在圖片顯示。 Treemonkey幫助我在今天早些時候到達那裏，現在我只需要取下CSS。目前，我的CSS是這樣的：

.map{ 
    display:none; 
    } 
    a.flagbutton:hover .map{ 
    display:block; 
    position:fixed; 
    top:14%; 
    right:20%; 
    }

如果任何人都可以提出任何建議，以什麼我可以做些什麼來解決這個問題有不同的屏幕分辨率 - 如果可能的話 - 我不勝感激！

來源

2012-01-25 Jason Weber

嘿賈森我再次，看看我從早期的線程給出的CSS，應該做的伎倆。只需用「.map」替換「.item」爲「a.flagbutton」和「.pic」 – Ege

哦，對不起，我再次重新閱讀，我想我錯過了一些東西。我無法理解您想在哪個頁面上顯示「.map」 – Ege

您還可以在標記圖像上設置標題標記，以便在標記圖標的鼠標上顯示小文本。這是另一種選擇，而不是將圖像與消息一起使用。 – Anagio

你可以使用一個容器的所有字段，另一個用於標誌鏈接

<div class="top_container"> 

    <div class='map_cont'>map</div> 

    <div class='flags_cont'> 
     <a href="#" class='flagbutton'>flag 1</a> 
     <a href="#" class='flagbutton'>flag 2</a> 
     <a href="#" class='flagbutton'>flag 3</a> 
     <a href="#" class='flagbutton'>flag 4</a> 
    </div> 
</div>

使上部容器邊距設置爲auto，這樣它保持在每邊的距離，然後漂浮兩個「map_cont」和'flags_cont'容器的右側，使它們出現在屏幕的右側。

.top_container { width:90%; margin:auto; } 
.map_cont{ float:right; } 
.flags_cont { clear:both; float:right } 
a.flagbutton { margin-left:5px; }

來源

2012-01-25 00:58:33 Kypros

嗨Kypros。謝謝！這是一個很好的想法，但旗幟最終是垂直的，我已經有很多div。此外，它是在asp.net，所以這裏是什麼1標誌瓦特/關聯圖像看起來像現在： –

使用CSS圖像定位和屏幕分辨率，我怎樣才能最好地定位這張圖片？

回答

相關問題