1. 홈
  2. 질의 응답
  3. 내 Google지도 옆에 CSS 표를 추가하는 방법은 무엇입니까?

내 Google지도 옆에 CSS 표를 추가하는 방법은 무엇입니까?

2011-12-05 3 views
0

나는 CSS 초보자이며 올바르게 사용하는 방법을 배워야합니다. 내가 페이지를 중심으로 구글 맵을 가지고 있고 그것을 잘 표시내 Google지도 옆에 CSS 표를 추가하는 방법은 무엇입니까?

<div class="mapContainer"> 
     <div id="gmap" style="margin: auto">&nbsp;</div> 
    </div>

지도가 특별한 것은 없었다 만들기 :

map = new google.maps.Map(document.getElementById("gmap"), mapOptions); 
var mapdiv = document.getElementById("gmap"); 
mapdiv.style.width = '1000px'; 
mapdiv.style.height = '600px'

내가 여기에 모든 것을 이해하지 못하고, 도움을 얻었던 CSS를하지만, 지금까지 제대로 렌더링됩니다.

/* @override http://localhost:8000/static/css/style.css */ 
@import url("960.css"); 
@import url("reset.css"); 
@import url("text.css"); 
@import url("uni-form-generic.css"); 
@import url("uni-form.css"); 

.clearfix {display: block;} 
.fleft{float:left;} 

    #buttons, .koolbuttons { 
     float:left; 
    } 

    #map { 
     width: 900px; 
     height: 600px; 
    } 
    #controls { 
     margin: 0; 
     list-style: none; 
    } 
    #controls li { 
     display: inline; 
     margin-left: 42px; 
     font-family: Sans-Serif; 
     font-size: 10pt; 
    } 
    #fusion-hm-li { 
     visibility: hidden; 
     margin-left: 8px; 
    } 

h1, h2, h3, h4, h5, h6, h7, h8 { 
    text-shadow: #fff 1px 1px 1px; 
} 

a {} 
a:link {color: #750006;} 
a:visited {color:#0D1826;} 
a:hover {color: #d2e0f7; text-decoration:none} 

.nobk:hover { 
    background:none; 
} 

body { 
    font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; 
    font-size: 12px; 
    margin: 0px; 
    color:#2C4F66; 
    background-color:#ffffef; 
    line-height:1.3; 
} 

#main_content { 
    background: yellow; 
} 

#footer { 
    background-color:#99b3cc; 
    color:#2C4F66; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    margin-top: 15px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    //text-shadow: #fff 1px 1px 1px; 
} 

#mainCol ul { 
    list-style:none; 
    margin:10px 0 10px 0; 
    padding:0; 
} 

#mainCol li { 
    display:inline; 
    margin:0 0 0 1px; 
    padding:0; 
} 

#mainCol li a:link, #mainCol li a:visited { 
    text-decoration:none; 
    font-size:1.3em; 
    font-weight:bold; 
    color: #000; 
    background-color:#ebebeb; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    text-shadow: #fff 1px 1px 1px; 
} 

#mainCol li a:hover { 
    color:#d2e0f7; 
    background-color:#336699; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    text-shadow: #666 1px 1px 1px; 
} 

.mapContainer #gmap { 
    height: 400px; 
    border-top: 2px solid #8D9BA1; 
    border-bottom: 2px solid #8D9BA1; 
} 

.mapContainer2 #gmap { 
    height: 300px; 
    overflow:hidden; 

} 

.title1 { 
    font-size: 20px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    background-color:#99b3cc; 
    color:#2C4F66; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    text-shadow: #fff 1px 1px 1px; 
} 

/* ========== A view =========== */ 

#contact_info { 
    background-color:#d2e0f7; 
    color:#2C4F66; 
    padding: 10px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
} 

#contact_info h6{ 
    font-size: 12px; 
} 

.tag { 
    font-weight:bold; 
    color: #d2e0f7; 
    background-color:#8D9BA1; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    text-shadow: #666 1px 1px 1px; 
} 

a:hover .tag { 
    background-color: #2C4F66; 
    text-decoration: none; 
} 

a:visited .tag { 
    color: #FFF 
} 
/* ========== DEV Info ============*/ 

.dev_avatar { 
    float:left; 
} 

#dev-info { 
    padding-left:220px; 
} 

.dev_name { 
    font-size: 36px; 
    font-weight: bold; 
    text-shadow: #fff 1px 1px 1px; 
} 

.dev_location { 
    font-size: 18px; 
} 

.dev-result{ 
    font-size:18px; 
    width: 32%; 
    float: left; 
} 

.countries_list dt { 
    font-size: 14px; 
    font-weight: bold; 
} 

.countries_list dd a{ 
    font-size: 12px; 
    text-decoration: none; 
} 

.link_to_profile { 
    font-size: 14px; 
    height: 25px; 
    width: 49%; 
    float: left; 
} 

/* Debug class */ 
.show { 
    background-color:pink; 
} 

/* Mugur CSS Starts Here */ 

.ybox{ 
    background-color:#d2e0f7; 
    color:#2C4F66; 
    padding: 10px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
} 

#header { 
    margin-bottom:20px; 
    position:relative; 
} 

#logo-wrap{ 
    position:relative; 
    width:480px; 
} 

#logo-text{ 
    position:absolute; 
    top:70px; 
    left:150px; 
} 

#logo-text h1{ 
    font-size:24px; 
    font-weight:bold; 
    color:#2C4F66; 
    text-shadow: #cccccc 1px 1px 1px; 
} 

#user-ident { 
    float:right; 
    clear:both; 
    position:relative; 
    text-align:right; 
    background-color:#d2e0f7; 
    color:#2C4F66; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -ms-border-radius: 4px; 
    text-shadow: #fff 1px 1px 1px; 
} 

#navbar{ 
    float:right; 
    clear:both; 
} 

#tags { 
    line-height:2; 
} 

#dev_bio { 
    font-size:18px; 
} 

/* Forms */ 

.uniForm fieldset { 
    border:1px solid #DFDFDF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -ms-border-radius: 5px; 
    padding: 5px; 
} 

.uniForm fieldset legend { 
    font-size: 1.5em; 
} 

/*** Stats */ 
#countries_map { 
    margin-left: auto; 
    margin-right: auto; 
}

이제지도 오른쪽에 텍스트 두 줄을 직접 표시하고 싶습니다.

enter image description here

을 그리고 내가 거기에 넣어하려고 할 때 텍스트가 돼있 경우를 제외하고 모든 곳에서 나타납니다 : 나는 그것을 조롱 경우는 다음과 같이 보일 것이다. 그러므로 나는 너에게 도움을 요청하고있다. 테이블과 조롱 한 다음과 같은 것을 얻을 수있는 방법을 가르쳐 주시겠습니까? 이것은 CSS로 수행해야합니까? 내지도 오른쪽의 텍스트 열을 원하기 때문에 float:right을 작성해야합니까? 레이아웃 실험을 할 때지도가 왼쪽으로 이동하는 이유는 무엇입니까? 내 질문에 답할 수 있기를 바랍니다.

<div class="region_links_one"> 
      <ul class="regions_one"> 
       <li><a id="region_8" href="/andhra_pradesh/" >Andhra Pradesh</a></li> 
       <li><a id="region_9" href="/arunachal_pradesh/" >Arunachal Pradesh</a></li> 
       <li><a id="region_10" href="/assam/" >Assam</a></li> 

       <li><a id="region_11" href="/bihar/" >Bihar</a></li> 
       <li><a id="region_12" href="/chhattisgarh/" >Chhattisgarh</a></li> 
       <li><a id="region_13" href="/goa/" >Goa</a></li> 
       <li><a id="region_14" href="/gujarat/" >Gujarat</a></li> 
       <li><a id="region_15" href="/haryana/" >Haryana</a></li> 
       <li><a id="region_16" href="/himachal_pradesh/" >Himachal Pradesh</a></li> 

       <li><a id="region_17" href="/jammu_kashmir/" >Jammu & Kashmir</a></li> 
       <li><a id="region_18" href="/jharkhand/" >Jharkhand</a></li> 
       <li><a id="region_19" href="/karnataka/" >Karnataka</a></li> 
       <li><a id="region_20" href="/kerala/" >Kerala</a></li> 
       <li><a id="region_21" href="/madhya_pradesh/" >Madhya Pradesh</a></li> 
      </ul> 

      <ul class="regions_two"> 
       <li><a id="region_22" href="/maharashtra/" >Maharashtra</a></li> 
       <li><a id="region_23" href="/manipur/" >Manipur</a></li> 
       <li><a id="region_24" href="/meghalaya/" >Meghalaya</a></li> 
       <li><a id="region_25" href="/mizoram/" >Mizoram</a></li> 
       <li><a id="region_26" href="/nagaland/" >Nagaland</a></li> 

       <li><a id="region_27" href="/orissa/" >Orissa</a></li> 
       <li><a id="region_28" href="/punjab/" >Punjab</a></li> 
       <li><a id="region_29" href="/rajasthan/" >Rajasthan</a></li> 
       <li><a id="region_30" href="/sikkim/" >Sikkim</a></li> 
       <li><a id="region_31" href="/tamil_nadu/" >Tamil Nadu</a></li> 
       <li><a id="region_32" href="/tripura/" >Tripura</a></li> 

       <li><a id="region_34" href="/uttaranchal/" >Uttaranchal</a></li> 
       <li><a id="region_33" href="/uttar_pradesh/" >Uttar Pradesh</a></li> 
       <li><a id="region_35" href="/west_bengal/" >West Bengal</a></li> 
      </ul> 
     </div>

당신에게

**Update**
감사 : 내가 좋아하는 텍스트의 2 열에 대한 코드가 테이블 수와 geogrphy 이름을 가진 부분이 보일 것입니다 대신 있도록 CSS로 레이아웃을하지해야 가정

 

  • 안드라 프라데시
    • :

    나는 대답에 따라 이런 짓을 617,451,515,

  • 아루나 찰 프라데시
  • 아삼
    • 물건을 개선하지만이 같은 요소 배치 관리 할 때지도는 이제 더 이상 중앙에 있지 않습니다 

     <li><a id="region_11" href="/bihar/" >Bihar</a></li> 
     <li><a id="region_12" href="/chhattisgarh/" >Chhattisgarh</a></li> 
     <li><a id="region_13" href="/goa/" >Goa</a></li> 
     <li><a id="region_14" href="/gujarat/" >Gujarat</a></li> 
     <li><a id="region_15" href="/haryana/" >Haryana</a></li> 
     <li><a id="region_16" href="/himachal_pradesh/" >Himachal Pradesh</a></li> 

     <li><a id="region_17" href="/jammu_kashmir/" >Jammu & Kashmir</a></li> 
     <li><a id="region_18" href="/jharkhand/" >Jharkhand</a></li> 
     <li><a id="region_19" href="/karnataka/" >Karnataka</a></li> 
     <li><a id="region_20" href="/kerala/" >Kerala</a></li> 
     <li><a id="region_21" href="/madhya_pradesh/" >Madhya Pradesh</a></li> 
    </ul> 

    <ul class="regions_two"> 
     <li><a id="region_22" href="/maharashtra/" >Maharashtra</a></li> 
     <li><a id="region_23" href="/manipur/" >Manipur</a></li> 
     <li><a id="region_24" href="/meghalaya/" >Meghalaya</a></li> 
     <li><a id="region_25" href="/mizoram/" >Mizoram</a></li> 
     <li><a id="region_26" href="/nagaland/" >Nagaland</a></li> 

     <li><a id="region_27" href="/orissa/" >Orissa</a></li> 
     <li><a id="region_28" href="/punjab/" >Punjab</a></li> 
     <li><a id="region_29" href="/rajasthan/" >Rajasthan</a></li> 
     <li><a id="region_30" href="/sikkim/" >Sikkim</a></li> 
     <li><a id="region_31" href="/tamil_nadu/" >Tamil Nadu</a></li> 
     <li><a id="region_32" href="/tripura/" >Tripura</a></li> 

     <li><a id="region_34" href="/uttaranchal/" >Uttaranchal</a></li> 
     <li><a id="region_33" href="/uttar_pradesh/" >Uttar Pradesh</a></li> 
     <li><a id="region_35" href="/west_bengal/" >West Bengal</a></li> 
    </ul> 
</div>

    : 이제 난

    enter image description here

    을 다른 div를지도와 링크 주변에 추가 한 후 결과에 만족합니다.

    ,663,210

    enter image description here

    출처

    2011-12-05 Niklas Rosencrantz

    답변

    2

    지도 컨테이너와 region_links_one div에 모두 왼쪽으로 떠되어야한다.

    그런 다음 두 div의 너비가 부모 컨테이너에 맞도록 충분히 작아야합니다. 그러면 그들은 서로 옆에 감싸 야합니다.

    출처

    2011-12-05 13:05:43 cowls

    +0

    거의 그랬고 중요한 개선 사항입니다. 그러나 내 맵은 중앙에 있지 않고 왼쪽으로갑니다. 그 결과로 질문을 업데이트하고 있습니다. –

    +0

    중심에 있지 않다는 의미는 무엇입니까? 내가 볼 수있는 링크가 있습니까? – cowls

    +0

    다른 div를 만들고 중심에 위치시켜야했습니다. 내지도에 대한 링크는 http : //www.koolbusiness입니다.co.kr에서 수정 한 내용으로 원래 질문을 업데이트 할 것입니다. 정말 고마워. 이제 완벽 해. –

    관련 문제

     관련 문제