Archiv der Kategorie: css

CSS: Farbige Aufzählungszeichen

Manchmal wär’s schön, wenn die Aufzählungszeichen in Listen (bullets) farbig wären – oder sogar statt bullet etwas Originelleres .

so gehts:

/* Farbe der Aufzählungspunkte */ 
.entry-content ul { list-style: none; } /* Entferne Aufzählungspunkt */ 
.entry-content li::before { 
	font-family: Arial, Helvetica, sans-serif; 
	content: "\2055"; /* Unicode--Symbol */ 
	color: #1c9135; /* Aufzählungspunkt-Farbe */ 

	/* Optional tweaks */
	font-weight: bold; 
	padding-right: 10px; }

Und so sieht es aus:

  • hallo
  • ich
  • bin eine
  • Aufzählung

CSS: Google Map ohne Mausrad

das nervt….  Auf einer Seite ist eine Google-Map eingebunden. Funktioniert bestens – ABER, wenn der Benutzer mit der Muas (Mausrad) scrollt und in den Map-Bereich gelangt, dann gibts ne Riesen-Zoomerei.

das kann vermieden werden mit:

<div class="map-wrap"> 
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5424.971764998638!2d8.294026668792464!3d47.167922726068724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479002b7e09d4a1b%3A0xf865138a071382d1!2sEichenweg+4%2C+6280+Hochdorf!5e0!3m2!1sde!2sch!4v1461835851289" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>

und folgendem CSS-Code:

/* google maps enable mouse scrolling */ 
.map { width:100%; height:450px; } 
.map-wrap { position:relative; } 
.overlay { 
  width:100%; 
  min-height:450px; 
  position:absolute; 
  top:0; }

Nach dem erstmaligen reinclicken in die Karte wird die Zoom-Möglichkeit freigegeben.

Beispiel gefällig? Hier:  tierarztpraxis-eberli.ch/kontakt/