Spanner (Geometridae)

Spanner (im Aufbau!)
Mit weltweit 23000 Arten gehören die Spanner mit zu den größten Schmetterlingsfamilien. In Deutschland kommen schon ca. 430 Arten vor. Ihre Färbung ist oft in grau, braun oder beige Tönen gehalten. Allerdings treten auch sehr bunte Arten auf .... z.B. der Pantherspanner.



Birkenspanner (Biston betularia)

Den Birkenspanner trifft man in Auen-, Bruch- und Laubwäldern. Er fliegt nur nachts von Mai bis August und kann eine SP. bis 55mm erreichen. .




Ockergelber Blattspanner ? (Camptogramma bilineata)

Den Ockergelben Blattspanner trifft man auf Magerrasen, Feuchtwiesen und an Waldrändern an. Er lässt sich aber auch auf Friedhöfen, Parks und naturnahen Gärten beobachten. Seine Spannweite beträgt 20-30mm. Die Flugzeit ist von Mai bis September. .




Pantherspanner / Gelber Fleckenspanner (Pseudopanthera macularia)

Der Pantherspanner, auch Gelber Fleckenspanner, erreicht eine Flügelspannweite von 23-28mm. Er fliegt von Ende April bis Anfang Juli und man findet ihn an warmen, sonnigen Waldrändern, Lichtungen und Gebüschen. .
1
2




Problepsis ocellata

Text folgt noch ..... .




Rötlicher Trockenrasen-Zwergspanner (Idaea rufaria)

Ich bin mir (wie bei einigen anderen Faltern auch) nicht sicher, ob die Bestimmung richtig ist. Flugzeit ist von Juni bis August. .




Hartheu-Spanner (Siona lineata)

Der Spanner fliegt von Mai bis Juli, liebt Magerrasen mit trockenen Bereichen und hat eine Sp. von 35-45mm.




Ampfer-Purpurspanner (Lythria cruentaria)

Dieser Falter ist in Zeichnung und Farbe sehr, sehr variabel. Man findet ihn auf Sand- und Heideflächen, Trockenwiesen und Brachen. Warm sollte es sein. Flugzeit von März bis September.




Fleckleib-Labkrautspanner (Epirrhoe tristata)

An Wiesen, Weg- und Waldrändern findet man häufig diesen kleinen Falter (25mm) von April bis August.




Garten-Blattsspanner (Xanthorhoe fluctuata)

Text folgt ....




Protorhoe unicata

Text folgt ....




Hellgebänderter Steinspanner ? (Charissa pullata)

Ich bin mir (wie bei einigen anderen Faltern auch) nicht sicher, ob die Bestimmung richtig ist. .




Idaea camparia ?

Ich bin mir (wie bei einigen anderen Faltern auch) nicht sicher, ob die Bestimmung richtig ist.
1
2



Box-Fenster Introduction

Dies ist ein Versuch

Per div-Box öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf den Buttons 'Mehr', 'Weiter' oder ähnlich. Gerne legen Sie nach diesem Prinzip nur bei Bedarf weitere neue Fenster an bzw. löschen Sie auch nicht benötigte.



Box-Fenster Introduction

Fenster öffnen auf der selben Seite

Per div-Box öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf den Buttons 'Mehr', 'Weiter' oder ähnlich. Gerne legen Sie nach diesem Prinzip nur bei Bedarf weitere neue Fenster an bzw. löschen Sie auch nicht benötigte.




Neue Fenster anlegen

Hinweis: Der fettgedruckte Teil bei den nachfolgenden Code-Beispielen soll Ihnen bereits zeigen, wie Sie ein neues Fenster anlegen bzw. zum vorhandenen Code hinzufügen!

So sieht die Verlinkung bei den Buttons/Links 'Introduction', 'Service' und 'About Us' in der HTML-Datei aus. 
HTML
<label for="open-introduction"><a>Weiter</a></label>
<label for="open-service"><a>Weiter</a></label>
<label for="open-about"><a>Weiter</a></label>
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
So sieht also ein einzelner Text-Link zum Fenser öffnen aus: 
HTML
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
Dieser Text-Link funktioniert schon prima und würde auch reichen, aber um gfls. je nach Situation daraus einen Button zu machen, haben wir für die diesbezügliche Formatierung noch unsere CSS-Klassen 'button' und 'mehr_lesen' darum herum gelegt: 
HTML
<div class="button"><span class="mehr_lesen">
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
</span></div>
Und hier ist die dazugehörige Einschalt-Funktion dieser Fenster in der CSS-Datei ('boxfenster.css): 
CSS
/* schaltfunktion AN / AUS */
input#open-introduction:checked ~ .boxfenster,
input#open-service:checked ~ .boxfenster,
input#open-about:checked ~ .boxfenster ,
input#open-ihr-fenster:checked ~ .boxfenster {
margin:0;
background:rgba(0,0,0,.7);
opacity:1;
}
Das eigentliche Fenster ist in der HTML-Datei dann wie folgt unter Einbindung eines Fenster-Schließen-Buttons gestaltet, hier am Beispiel des 'Introduction-Links': 
HTML
<div class="schalter">
<input type="checkbox" id="open-introduction">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-introduction"><i class="far fa-window-close"></i></label>
. . . Hier steht der Introduction Text . . .
</div></div></div>
Und so würde es entsprechend für ihr neu anzulegendes Fenster aussehen: 
HTML
<div class="schalter">
<input type="checkbox" id="open-ihr-fenster">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-ihr-fenster"><i class="far fa-window-close"></i></label>
. . . Hier steht der Text fuer ihr neues Fenster . . .
</div></div></div>

 

Box-Fenster Service

More Services 01

Lorem ipsum dolor sit amet, ad graece repudiare elaboraret mei, utamur accumsan phaedrum sea ad. In eos erat iriure vivendum, ex pri laudem omittam, sed vero iriure necessitatibus no. Sit ea hinc discere iudicabit, eligendi perfecto pertinax vel ex. Mea ne minim graece appareat, affert consequat cum cu, an eos falli appareat. In porro voluptua mea, ex vim mediocrem forensibus scripserit, cu sea soleat aeterno tractatos. Audiam moderatius an est.

More Services 02

Ut pro sint phaedrum. At dolores maluisset intellegebat his, vel postulant intellegam an, duo rebum mandamus accusamus et. Audiam iisque bonorum cum an, simul reformidans comprehensam pri ne, at graecis iracundia suscipiantur vix. Eos malis eruditi in, te vel mandamus indoctum accommodare.

Unum reprimique instructior an his, te nullam nostrum vis. Quot principes omittantur eos ut, iudicabit euripidis quo ad, his cibo nostrud dolores et. Mea ad laudem intellegat, eu sumo consul dicunt nec.

More Services 03

Vim no sonet dicunt temporibus, tibique persecuti his in, sit iudico altera euismod cu. Vix te eros vivendo intellegam, sumo facete no pro. Vel causae singulis accusata eu, mea commune copiosae ei, nam vero invenire id. Nec te clita moderatius, natum assum homero eos id. Cu odio corrumpit eam. An posse dicit animal pro, duo falli dicit ponderum ex, an elit delicata gubergren mea.

 

Box-Fenster Presentation-1

Presentation 1 Info

Die Minions meinen: Me want bananaaa! Underweaaar jiji tatata bala tu pepete para tú bappleees tatata bala tu underweaaar. Pepete hahaha tatata bala tu bananaaaa hana dul sae gelatooo baboiii bappleees poulet tikka masala bananaaaa po kass. Wiiiii underweaaar tatata bala tu tulaliloo uuuhhh. Bee do bee do bee do bee do bee do bee do uuuhhh aaaaaah gelatooo wiiiii bananaaaa bananaaaa.

La bodaaa poulet tikka masala pepete jeje. La bodaaa la bodaaa uuuhhh jiji pepete gelatooo bappleees hahaha daa bappleees. La bodaaa tulaliloo para tú ti aamoo! Tatata bala tu la bodaaa. Minions Ipsum. Me want bananaaa!




Jeje chasy tank yuuu! Pepete poulet tikka masala baboiii. Daa jeje chasy daa jeje bee do bee do bee do gelatooo uuuhhh tatata bala tu daa. Underweaaar pepete jeje jiji. Tatata bala tu bappleees pepete potatoooo hahaha jiji bee do bee do bee do jiji jiji me want bananaaa! Ti aamoo! Hana dul sae poopayee tatata bala tu para tú bee do bee do bee do jeje. Jeje chasy tank yuuu! Butt me want bananaaa! Gelatooo la bodaaa tatata bala tu ti aamoo! Baboiii butt.

Excelsior documenta es profundis

  • Vamos a la playa
  • Que hora es
  • No tengo dinero
  • El mar es azul

Magna charta bella terra


Lorem bonus at Ipsum

 

Box-Fenster Presentation-2

Presentation-2 Info

Kevin ist ein großer, länglicher Minion mit zwei Augen und aufsprießenden Haaren. Er trägt meist seine Golfkleidung. Kevin sagt: Uuuuhhh belloo! Wiiiii hana dul sae baboiii me want bananaaa! Chasy butt poopayee tank yuuu! Para tú bappleees tank yuuu! Pepete tank yuuu! Chasy potatoooo. Pepete la bodaaa ti aamoo! Chasy. Jiji bee do bee do bee do po kass tatata bala tu daa bee do bee do bee do uuuhhh bee do bee do bee do jeje hahaha daa. Jiji la bodaaa belloo! Pepete baboiii baboiii potatoooo.

Belloo! Baboiii bappleees poulet tikka masala hana dul sae. Hana dul sae baboiii bee do bee do bee do butt jeje chasy po kass butt tank yuuu! Jiji belloo! Tank yuuu! Poopayee gelatooo daa tulaliloo wiiiii. Potatoooo butt chasy po kass butt.




Daa wiiiii me want bananaaa! Tatata bala tu baboiii underweaaar wiiiii poopayee potatoooo. Po kass belloo! Jiji jeje. Chasy la bodaaa la bodaaa potatoooo gelatooo tulaliloo ti aamoo! Uuuhhh. Hahaha tank yuuu! Me want bananaaa! Uuuhhh underweaaar me want bananaaa!

 

Box-Fenster Presentation-3

Presentation-3 Info

Bob ist ein süßer, kleiner Minion. Er ist etwas dicklich und liebt seinen Teddy sehr. Bob sagt: Poulet tikka masala hana dul sae bappleees bee do bee do bee do para tú ti aamoo! Potatoooo. Bappleees jiji jeje potatoooo bee do bee do bee do bananaaaa. Gelatooo potatoooo poulet tikka masala poopayee bee do bee do bee do tatata bala tu poulet tikka masala. Me want bananaaa! me want bananaaa!

Butt hana dul sae chasy bananaaaa tatata bala tu. Bananaaaa la bodaaa potatoooo chasy potatoooo jeje butt jeje underweaaar tulaliloo. Tulaliloo daa bappleees belloo! Poulet tikka masala bee do bee do bee do aaaaaah me want bananaaa! Me want bananaaa! Tulaliloo gelatooo bananaaaa uuuhhh aaaaaah aaaaaah gelatooo tatata bala tu po kass bananaaaa.


 

Box-Fenster Presentation-4

Presentation-4 Info

Stuart hat ein Auge, einen Mittelscheitel und ist häufig hungrig.

Stuart schreit: Aaaaaah jeje uuuhhh tatata bala tu belloo! Bee do bee do bee do jiji bappleees potatoooo. Hahaha tank yuuu! Uuuhhh poulet tikka masala la bodaaa hana dul sae belloo! Ti aamoo! Uuuhhh. Poulet tikka masala bee do bee do bee do butt wiiiii poulet tikka masala bee do bee do bee do pepete bee do bee do bee do la bodaaa.

Minions ipsum butt baboiii butt wiiiii. Tank yuuu! poopayee poopayee uuuhhh baboiii baboiii bee do bee do bee do jeje tatata bala tu daa. Me want bananaaa! uuuhhh underweaaar potatoooo bananaaaa aaaaaah aaaaaah. Poopayee baboiii para tú tank yuuu! Aaaaaah bee do bee do bee do. Chasy aaaaaah para tú baboiii jeje. Daa baboiii gelatooo underweaaar uuuhhh la bodaaa. Belloo! chasy butt aaaaaah.

 

Box-Fenster About

Schrifteinheit REM

Wir verwenden als Schrifteinheit nicht PX, PT oder EM sondern REM. Die Verwendung von REM ermöglicht flexible Schriftgrößen, die sich prozentmässig anpassen. Beim TAG HTML setzen wir in der CSS-Datei die font-Angabe auf 62.5%, welches ca.10 Pixel (px) entspricht.
Hier noch ein Hinweis: Ein Wert von 100% entspricht 16 Pixel (px), wobei 16 Pixel die Standardgröße bei Schriften im Browser ist.

Warum schreiben wir 62.5 % statt 100 % ?
Damit wir nicht ständig die Formel (Pixelwert geteilt durch 16 = rem Wert) anwenden müssen, bei der es krumme, unübersichtliche rem-Werte gibt. Mehr zu der Formel mit Beispiel weiter unten. Es ist so, der umgerechnete Wert läßt sich viel leichter in Bezug zum gewohnten Pixelwert setzen, es erleichtert einfach das Arbeiten. Denn so ergibt sich zum Beispiel:

0.1 rem = 1 px
1 rem = 10 px
1.4 rem = 14 px
2.6 rem = 26 px
30 rem = 300 px

So oder so ähnlich, denn dies ist ein Beispiel, sieht es dann der Code in der CSS-Datei aus: 
CSS
html {
font-size:62.5%;
line-height:1.5;
font-family: georgia, helvetica, serif;
}
Dann folgen die Angabe der Schriftgröße und der Überschriften. 
CSS
body {font-size:1.7rem}
h1 {font-size:3.4rem}
h2 {font-size:2.5rem}
h3 {font-size:1.9rem}
Nachfolgend zwei Beispiele für die prozentmässige Weitervererbung innerhalb der CSS Media Queries:
Bei der Abfrage der Bildschirmbreite ab 1024 Pixel reicht der geänderte Prozentwert und auch bei der Abfrage ab 1280 Pixel reicht der geänderte Prozentwert. 
CSS
@media (min-width: 1024px) {
html {font-size: 68% }
}
@media (min-width: 1280px) {
html {font-size: 72% }
}
Vorteil von REM:
Die Schrift-Werte von z.B. body, h1, h2, h3 müssen nur ein einziges Mal ganz oben im Quellcode und dann nicht mehr wieder angegeben werden und vererben sich im genannten prozentualem Verhältnis einfach weiter. Das gleiche gilt auch für alle anderen HTML-Elemente, die einen Größenwert benötigen, wie z.b. width, height, margin, padding usw., denn wir verwenden die REM-Einheit hier generell im Template.

Ausnahmen von REM:
Wenn wir gelegentlich zusätzlich Pixelwerte (px) verwenden, so hat das folgende Bedeutung:
1. Sehr kleine Werte von 0.1rem oder 0.2rem haben bei der prozentmässigen Weitervererbung keine Auswirkungen.
2. Es ist keine prozentmässige Weitervererbung erwünscht.
Nur als Beispiel verwenden wir für einen Rahmen (border) also 'border:solid 1px black'.




Die allgemeine Formel zur Umrechnung von Pixel zu REM: Man teilt den Pixelwert durch 16 (18/16 = 1.125). Voraussetzung: Die Schriftgröße des Root-Elements ist auf 100% gesetzt und man geht von der 16px Standard-Schriftgröße aus. Beispiel: Die Schriftgröße von 18px entspricht 1.125rem.