Интеграция карты листов: лифлет CSS переопределяется CSS-файлом сайта?

Я хочу добавить карту Листа на мой сайт. К сожалению, мой собственный CSS-файл, по-видимому, переопределяет CSS-файл Leaflet для некоторых элементов.Интеграция карты листов: лифлет CSS переопределяется CSS-файлом сайта?

кнопки масштаба карты должно выглядеть следующим образом:

Но теперь они выглядят как это на моей домашней странице:

Интересно, если это мой собственный файл CSS переопределение CSS из Листовки. Но как я могу это предотвратить? Посмотрите на мой #content a. Кажется, что кнопки масштабирования интерпретируются как ссылка и поэтому берут свойства CSS из моего файла.

body { 
 
\t background-color: #EFEFEF; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#wrapper { 
 
\t width: 1000px; 
 
\t padding: 0; 
 
\t margin: 0 auto; 
 
} 
 

 
#content { 
 
\t background-color: #FFFFFF; 
 
\t width: 700px; 
 
\t float: left; 
 
\t padding: 0 2.5em 0 2.5em; 
 
\t margin: 0; 
 
} 
 

 
#content p, ol, ul { 
 
\t font-family: "Open Sans Condensed", sans-serif; 
 
\t color: #444444; 
 
} 
 

 
#content a:link, #content a:visited { 
 
\t color: #C09100; 
 
\t text-decoration: none; 
 
} 
 

 
#content a:hover, #content a:active { 
 
\t color: #C09100; 
 
\t text-decoration: underline; 
 
} 
 

 
#map { 
 
\t height: 400px; 
 
\t width: 100%; 
 
\t margin: 0 auto; 
 
} 
 

 
strong { 
 
\t color: #444444; 
 
\t font-size: 100%; 
 
\t font-weight: bold; 
 
} 
 

 
h1 { 
 
\t color: #444444; 
 
\t font: 3em "Amatic SC"; 
 
\t text-align: center; 
 
} 
 

 
h2 { 
 
\t color: #444444; 
 
\t font: 2em "Amatic SC"; 
 
\t text-align: center; 
 
}

<html> 
 
<head> 
 
    <!-- Link to Leaflet's CSS file: --> 
 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 
 
    <!-- My own CSS file: --> 
 
    <link rel="stylesheet" type="text/css" href="rumkommenstyle.css" /> 
 
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
 
    <script src="JS/Leaflet.MakiMarkers.js"></script> 
 
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 

 
    <div id="content"> 
 
     
 
     <div id="map"> 
 
     <script type="text/javascript"> 
 
      var layer = new L.StamenTileLayer("watercolor"); 
 
      var map = new L.Map("map", { 
 
      center: new L.LatLng(56.074207, -3.376634), 
 
      zoom: 6 
 
      }); 
 
      var icon = L.MakiMarkers.icon({ 
 
      icon: "marker", 
 
      color: "#900", 
 
      size: "m", 
 
      }); 
 

 
      map.addLayer(layer); 
 

 
      L.marker([56.074207, -3.376634], { 
 
      icon: icon, 
 
      title: 'Crossgates, Fife, Scotland', 
 
      alt: 'Crossgates, Fife, Scotland', 
 
      }).addTo(map); 
 
     </script> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

источник

2015-12-20 timothys_monster

(ответ отредактированы)

Короткий ответ:

Чтобы получить черный цвет на ваш зум в кнопок /, вы можете добавить к вашей CSS:

. Лебедка-бар> a: link {цвет: черный; }

Длинный ответ:

Вы заметили, что ваш DIV с идентификатором = "карте" содержит сценарий. Когда этот скрипт запущен, он создает панель div с классом, в которой кнопки масштабирования фактически являются ссылками.

Итак, если вы посмотрите на дерево элементов, вы обнаружите, что #content содержит div.leaflet-bar, который содержит ссылки масштабирования.

Итак, какой цвет должен применяться к ссылкам (#content a: link или .leaflet-bar a: link)?

Цвета буклетниц ссылок устанавливаются в http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css

источник

2015-12-20 16:35:01 YaFred

Спасибо! Я изменил все идентификаторы на классы, но, к сожалению, это не решило мою проблему с кнопками масштабирования. Мне пришлось оставить «map» div как идентификатор, потому что иначе он не будет распознан скриптом. Может быть, это и есть причина? –

Я воспроизвел вашу проблему, и я вижу, что мой ответ ее не решает. Я хотел найти правильное объяснение. – YaFred

Еще раз спасибо за ваше объяснение. Как уже говорилось ранее, я уже изменил все мои другие div (кроме «map») на классы. Так что теперь это '.content', а не' # content'. Я добавил '.leaflet-bar> a: link {color: # 000; text-decoration: none;} 'к моему CSS, но ничего не изменило :( –

Интеграция карты листов: лифлет CSS переопределяется CSS-файлом сайта?

ответ

Смежные вопросы