1. ホーム
  2. 質問と答え
  3. Googleマップの横にCSSテーブルを追加するにはどうすればいいですか？

Googleマップの横にCSSテーブルを追加するにはどうすればいいですか？

2011-12-05 10 views
0

私はCSSの初心者です。正しい使い方を学ぶ必要があります。私は、ページの中央のGoogleマップを持っており、それがうまく表示されます。マップの作成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; 
}

ここでは、マップの右側に直接2列のテキストが必要です。

enter image description here

をそして、私はそこにそれを置くしようとすると、テキストは、それがになっていた場合を除き、どこでも表示されます：私はそれをモックアップした場合、それは次のようになります。それで私はあなたに助けを求めています。私がテーブルで嘲笑した次のようなものを得る方法を教えてください。これはCSSで行うべきですか？マップの右側にテキストの列が必要なので、float:rightを作成する必要がありますか？レイアウト実験をすると、マップが左に移動するのはなぜですか？私はあなたが私の質問のいくつかに答えることができれば嬉しいです私は、テキストの2列のコードがテーブルでとgeogrphy名の一部のようなものを見しようとしているので、代わりにCSSによって、そのレイアウトを取得するべきではないと仮定します。

<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**
ありがとう

 

  • アンドラ・プラデシュ州
    • ：

    は、私は答えに応じてこれをしませんでした

  • アルナーチャル・プラデーシュ州
  • アッサム
    • ものを改善するが、私はこのような要素に置くことに成功したときにマップが、今はもうセンタリングされていない 

     <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を地図とリンクの周りに追加した後の結果に満足しています：

    #holder { 
    width: 945px ; 
    margin-left: auto ; 
    margin-right: auto ; 
}

    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です。comと私はまた私が行った変更で元の質問を更新します。本当にありがとう、それは今完璧に近いです。 –

    関連する問題

     関連する問題