DE:OSM in Website für Gemeinde/css

From OpenStreetMap Wiki
Jump to navigation Jump to search
Ü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