靜態地圖定位

Question

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

有兩個問題：

1. 有在同一水平/行文字，左邊的文字和地圖上的正確

2. 的靜態地圖上保持頁腳頁面

CodePen DEMO

底部

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; 
} 

Answer 1

第一期：地圖對齊地址

讓你的 '網格' p爲div，並添加float:left到你的.grid CSS。

例子：http://codepen.io/anon/pen/kwJcE

第二期：粘頁腳

重複的問題，在這裏看到：Make footer stick to bottom of page correctly

直接鏈接："A CSS Sticky Footer that just works"

紅利第三期：可怕的設計

我永遠不會告訴任何人他們正在學習'錯誤'，但檢查出網格系統/框架，尤其是響應式網格系統。它將幫助您更快建立更好的審美。