保管CSSポイント

こんにちはみんな、保管CSSポイント

私は私の仕事のための小規模なプロジェクトに取り組んでいると、彼らはマップを作成し、特定の都市を特定するために私に尋ねてきました。私は私のPCでそれを完了し、私はポイントが所定の場所に留まることを別のPC（例えば、ラップトップ）にロードすることを確認しようとしています。これが私の最初の投稿であるので、これが私がやっていることについて十分な情報であることを願っています。すべての助けが大いに感謝されるでしょう。

コードの基本は次のとおりです。

<html> 
<head> 
<meta charset="utf-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<title>States/Cities</title> 
</head> 
<style media="screen"> 
    html,body{ 
    background-color: #AADAFE; 
    } 
    .Vegasdot{ 
    height: 10px; 
    width: 10px; 
    border-radius: 50%; 
    background-color: black; 
    top: 246px; 
    left: 306px; 
    position: absolute; 
    z-index: 2; 
    } 

    .SaltLakedot{ 
    height: 10px; 
    width: 10px; 
    border-radius: 50%; 
    background-color: black; 
    top: 88px; 
    left: 395px; 
    position: absolute; 
    z-index: 2; 
    } 

    .Phoenixdot{ 
    height: 10px; 
    width: 10px; 
    border-radius: 50%; 
    background-color: black; 
    top: 333px; 
    left: 386px; 
    position: absolute; 
    z-index: 2; 
    } 

    .statesMap{ 
    padding-top:3%; 
    padding-left:12%; 
    position: absolute; 
    z-index: 1; 
    }

<img src="StatesGIMP.png" alt="States Map" 
class="statesMap" usemap="#States"> 

<span class="Vegasdot"></span> 
<span class="SaltLakedot"></span> 
<span class="Phoenixdot"></span>

出典

2017-12-14 King Solo

それで、あなたはそれが正しくスケールする必要がありますか？テストを済ませましたか（ブラウザウィンドウのサイズをさまざまなサイズに変更しましたか？）私は以前これをしていましたが、それほど楽しいことではありませんでした...基本的には、さまざまな画面サイズに対してさまざまな割合の位置付けと多くのメディアクエリを使用していました。 – Kallmanation

ChromeのF12機能内でサイズを変更しました。私の最終的にそれをリサイズするとうまくいくように見えましたが、私のファイルを友人に送って見せてくれました。 –

これは良いスタートです。あなたの友人の画面はあなたの画面より大きいですか？ – Kallmanation

ここで起こって物事のカップルがあります。

まず、position: absolute;は親コンテナを基準にしています。ラッパーdivにイメージとドットをラップすると、ドットを.wrapperに相対的に配置することができます。この.wrapperはposition: absolute;子供

に対して親として機能するために position: relative;を必要と

第二に、我々は相対的であるtransform: translate(-50%,-50%)を適用し、あなたは彼らがイメージと

第三にスケールするように割合を使用してドットを配置する必要があります。それ自身の高さと幅まで。これにより、ドットの中心が位置決めされるようになります。その結果、画像の縮尺が変わるとドットの中心が同じになるようにします

また、共通ルールをa .dotクラス

例：https://codepen.io/tylerfowle/pen/MrwreX

HTML：

<div class="wrapper"> 
    <img src="http://ontheworldmap.com/usa/usa-states-map.jpg" alt="States Map" 
     class="statesMap" usemap="#States"> 
    <span class="Vegasdot dot"></span> 
    <span class="SaltLakedot dot"></span> 
    <span class="Phoenixdot dot"></span> 
</div>

CSS：

html,body{ 
    background-color: #AADAFE; 
} 

.wrapper { 
    position: relative; 
} 

.dot { 
    height: 10px; 
    width: 10px; 
    border-radius: 50%; 
    background: black; 
    z-index: 2; 
    position: absolute; 
    transform: translate(-50%,-50%); 
} 
.Vegasdot{ 
    top: 48%; 
    left: 17%; 
} 

.SaltLakedot{ 
    top: 37%; 
    left: 24.5%; 
} 

.Phoenixdot{ 
    top: 60%; 
    left: 22%; 
} 

.statesMap{ 
    width: 100%; 
    z-index: 1; 
}

出典

2017-12-14 21:00:00

私はドライ部分が好きです...クリーンなコードが好きではないのですか？ – JasonK

ありがとうございます。私は掃除を開始し、より良いネスティングを開始します。とても有難い。 –

答えて

関連する問題