Как добавить таблицу CSS рядом с моей картой Google? - PullRequest
Новая
       1

Как добавить таблицу CSS рядом с моей картой Google?

0 голосов
/ 05 декабря 2011

Я новичок в CSS, и мне нужно научиться правильно его использовать.У меня карта Google по центру на странице, и она хорошо отображается: 

   <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, так как я хочу столбцы текста справа от моей карты?Почему моя карта перемещается влево, когда я делаю эксперименты с макетом?Я надеюсь, что вы можете ответить на некоторые из моих вопросов.Я полагаю, что код для 2 столбцов текста не должен быть таблицей, а вместо этого получить его разметку с помощью CSS, поэтому часть с именами geogrphy будет выглядеть примерно так: 

<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

1 Ответ

2 голосов
/ 05 декабря 2011

Контейнер карты и div region_links_one должны быть смещены влево.

Тогда вам нужно убедиться, что ширина обоих div достаточно мала, чтобы поместиться в их родительский контейнер.Затем они должны завернуться рядом друг с другом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...