DE:OSM in Website für Gemeinde/css

Übersicht

HTML-Datei

JS-Funktionen

Straßenliste

CSS-Datei

GPX-Dateien

Testanwendung

ToDo-Liste

OL-Bausteine

Die CSS-Datei definiert vor allem die Grösse der Kartenanzeige, aber auch die Schriftarten, Formatierung der Suchergebnisse, Positionen der einzelnen Elemente etc.

CSS-Datei

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

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

#header 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;
	color: #000000;
}

#content {
	font-size: 1em;
}

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

#mapFrame {
	color: #000000;
	position: absolute;
	top: 75px;
	left: 25px;
	right: 25px;
	bottom: 5px;
}

#searchButton {
	vertical-align: middle;
	left: 80px;
	height: 20px;
	border: 1px solid #000000;
	padding: 1px 10px;
	margin-right: 10px;
	margin-left: 7px;
	background-color: #7f7f7f;
	font-size: 11px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-decoration: none;
	color: #000000;
}

#searchButton:hover {
	background-color: #5f5f5f;
	color: #000000;
	text-decoration: none;
}

#resultList {
	background-color: #000000;
	color: #ffffff;
	position: absolute;
	left: 25px;
	right: 25px;
	top: 75px;
	font-size: 12px;
	height: 0px;
	border: 1px solid #000000;
	overflow: auto;
	font-family: "DejaVu Sans",Sans-serif;
}

#resultList a {
	color: #ffffff;
	text-decoration: none;
}

#resultList a:hover {
	color: #1872ce;
}

CSS-Datei herunterladen/kopieren

Du kannst die Datei analog zur HTML-Seite herunterladen oder per Copy'n'Paste in eine leere Datei kopieren.

herunterladen

Hier kannst du die aktuelle OSM-Karte.css herunterladen.

kopieren

1. kopiere den gesamten Code. Achte darauf, dass du auch das erste und letzte Zeichen kopiert hast.
2. füge den Code im Texteditor in eine neue Seite ein
3. speichere den Code unter dem Dateinamen "OSM-Karte.css"
4. lade die Datei mit dem FTP-Programm auf den Webserver in den passenden Ordner

Falls du einen anderen Ordner- oder Dateinamen wählst, passe die HTML-Datei entsprechend an.

Links

• mögliche OL-CSS Defintionen und deren Bedeutung