Die CSS Dateien

Einleitung

Vorbereitung

HTML-Datei

CSS-Datei

JavaScript-Datei

Karte-als-Popup

eigene Kosmos-Karte online stellen

Dieser Abschnitt erklärt die jeweiligen CSS-Dateien, welche benötigt werden, um eine OpenStreetMap-Karte in eine Webseite einzubinden.

In unserem Beispiel werden zwei verschiedene CSS-Dateien verwendet. Aus Gründen unterschiedlicher Darstellungen ist eine Datei nur für den Internet Explorer vorgesehen und die andere Datei für die restlichen Browser.

Code bearbeiten und speichern

1. öffne mit einem Editor (beispielsweise Notepad++ oder TextEdit) eine leere Seite
2. kopiere untenstehenden CSS-Code für den Internet-Explorer in die leere Seite
3. speichere das Ergebnis unter: ie_map.css
4. kopiere untenstehenden CSS-Code für alle anderen Explorer in die leere Seite
5. speichere das Ergebnis unter: map.css

CSS-Datei für den Internet Explorer

Wir benennen sie ie_map.css:

html,body {
  background-color: #000000;
  height: 100%;
  width: 100%;
  margin: 1%; padding: 0;
  font-family: Verdana, Arial;
  font-size: 1em;
  overflow: hidden;
  color: #ffffff;
}

a {
  color: #ffff00;
  text-decoration: none;
}

a:hover {
  color: #ffff00;
  text-decoration: underline;
}

#header {
  font-family: Verdana, Arial;
  font-size: 1em;
  overflow: hidden;
  color: #ffffff;
}

p   {
margin-bottom: 20px;
}

#map {
  height: 81%;
  width: 96%;
  padding: 0; margin: 0;
}

#content {
  font-size: 1em;
}

#osm {
  font-size: 0.7em;
  font-style: italic;
  margin-bottom: 20px;
}

CSS Datei für die restlichen Browser

Wir benennen sie map.css:

html,body {
  background-color: #000000;
  height: 100%;
  width: 100%;
  margin: 1%; padding: 0;
  font-family: Verdana, Arial;
  font-size: 1em;
  overflow: hidden;
  color: #ffffff;
}

a {
  color: #ffff00;
  text-decoration: none;
}

a:hover {
  color: #ffff00;
  text-decoration: underline;
}

#header {
  font-family: Verdana, Arial;
  font-size: 1em;
  overflow: hidden;
  color: #ffffff;
}

#map {
  height: 86%;
  width: 96%;
  padding: 0; margin: 0;
}

#content {
  font-size: 1em;
}

#osm {
  font-size: 0.7em;
  font-style: italic;
  margin-bottom: 20px;
}

Der einzige Unterschied der beiden Dateien besteht nur darin:

Code für den IE:

[...]
p   {
margin-bottom: 20px;
}

#map {
  height: 81%;
  width: 96%;
  padding: 0; margin: 0;
}
[...]

Und für den Rest:

[...]
#map {
  height: 86%;
  width: 96%;
  padding: 0; margin: 0;
}
[...]

Es wird also nur das <p>-Attribut angegeben und die Höhe angepasst, mehr nicht.