靜態地圖定位

-2

我需要一些定位靜態Google地圖地圖的幫助。靜態地圖定位

有兩個問題：

有在同一水平/行文字，左邊的文字和地圖上的正確
的靜態地圖上保持頁腳頁面

底部

HTML：

<div class="wrapper"> 
    <ul class="nav"> 
     <li class="home"><a href="#">Home</a> 

     </li> 
     <li class="location"><a href="#">Location</a> 

     </li> 
     <li class="itinerary"><a href="#">Itinerary</a> 

     </li> 
     <li class="photos"><a href="#">Howard & Mary</a> 

     </li> 
    </ul> 
</div> 

<h1>Location</h1> 

<p class="grid">USS NORTH CAROLINA 
    <br/>Address: 1 Battleship Rd NE, Wilmington, NC 28401, United States Telephone: + 1 910-251-5797 wesbite: <a href="http://www.battleshipnc.com/Visit/Directions">www.battleshipnc.com/</a> 

</p> 
<div class="map"> 
    <p class="static_map"> 
     <img src="http://maps.googleapis.com/maps/api/staticmap?parameters?key=AIzaSyDM-P7a6oHU7e-guJpKQPADlGPtX1_iPBU&size=400x300&sensor=false&markers=1+Battleship+Rd,+Wilmington,+North+Carolina+28401" alt+ "1 Battleship Rd, Wilmington, North Carolina 28401"/> 
    </p> 
</div> 
<script type = "text/javascript" src = "js/jquery.js"></script> 
<script type="text/javascript" src="https: //maps.googleapis.com/maps/api/js?key=AIzaSyDM-P7a6oHU7e-guJpKQPADlGPtX1_iPBU&sensor=false"></script> 
<footer class="main-footer"> 
     <h1 class="tri">All donations & proceeds will go towards <a href="http://www.dare2tri.org/" class="dare">Dare 2 Tri</a></h1> 

</footer>

CSS：

body { 
    background-image: url("http://i.istockimg.com/file_thumbview_approve/1985611/2/stock-photo-1985611-uss-north-carolina.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

h1 { 
    text-align: center; 
    color: #0051c2; 
    font-size: 80px; 
} 
.grid { 
    color: #0051c2; 
    font-size: 40px; 
    width: 45%; 
    margin-left: 10px; 
} 
.map { 
    margin-right: 10px; 
    float: right; 
} 
.wrapper { 
    position: relative; 
    top: 10px; 
    height: 175px; 
    width: 1100px; 
    background-color: black; 
    opacity: 0.8; 
    margin: auto; 
    border-radius: 10px; 
    z-index: 0; 

} 
.main-footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50px; 
    background-color: black; 
    opacity: 0.8; 
    text-align: center; 

} 
.tri { 
    color: white; 
    font-size: 16px; 

} 
ul.nav { 
    display: inline; 
    color: white; 
    text-decoration: none; 
    text-align: center; 
    padding: 8px 15px; 
    border-radius: 5px; 
    text-align: auto; 
} 
ul.nav li { 
    float: left; 
    margin-left: 50px; 
} 

ul.nav li.home { 
    padding: 35px 15px; 
    margin: 20px; 
    top: 15px; 
    font-weight: 100; 
    height: 55px; 
    width: 130px; 
    font-size: 40px; 
} 
ul.nav li.home:hover { 
     background-color: #0051c2; 
     border-radius: 8px; 
} 
ul.nav li.location { 
    padding: 35px 15px; 
    margin: 20px; 
    font-weight: 100; 
    top: 15px; 
    height: 55px; 
    width: 180px; 
    border-radius: 5px; 
    font-size: 40px; 

} 
ul.nav li.location:hover { 
    background-color: #0051c2; 
    border-radius: 8px; 
} 
ul.nav li.itinerary { 
    padding: 35px 15px; 
    margin: 20px; 
    font-weight: 100; 
    height: 55px; 
    width: 200px; 
    border-radius: 5px; 
    font-size: 40px; 
} 
ul.nav li.itinerary:hover { 
    background-color: #0051c2; 
    border-radius: 8px; 
} 
ul.nav li.photos { 
    padding: 35px 15px; 
    margin: 20px; 
    margin-left: 20px; 
    border: 0; 
    font-weight: 120; 
    height: 55px; 
    width: 250px; 
    border-radius: 5px; 
    font-size: 40px; 
} 
ul.nav li.photos:hover { 
    background-color: #0051c2; 
    border-radius: 8px; 
} 
ul.nav li a { 
    color: #faf3bc; 
    display: block; 
    text-decoration: none; 
}

來源

2014-07-09 Alan

請不要規避規則;如果您要包含指向codepen或類似網站的鏈接，請將您的實際代碼添加到帖子中。 – TylerH

好的。但你能幫助解決問題嗎？謝謝:)乾杯芽 – Alan