mein Ort

"Single Knips .... unterwegs im Ort " (Stand: 31.07.25)
Habe mich dazu entschlossen eine eigene Rubrik für Einzelbilder zu eröffnen, die ich in meinem Wohnort mache.
Ich versuche ja, aus gesundheitlichen Gründen, wenigsten alle 2-3 Tage so eine 3/4 Stunde bis 1 Stunde spazieren zu gehen. In der Regel ist irgendeine von meinen Cams immer dabei. Oftmals mache ich gar kein Bild - manchmal auch nur 1 Bild. Daraus dann eine extra Seite "Fotowalk" zu machen, wäre wohl stark übertrieben. So habt ihr hier jetzt den Bereich für meine Gelegenheits-Knips-Bilder.


Der alte Bulli

Hach, ich hätt ihn am liebsten mitgenommen ....
Hatte meine Hausstrecke fast beendet und war nur noch ein paar Meter von daheim entfernt .... da stand er da am Straßenrand. Ist der nicht schön! Irgendwie haben die früher schönere Autos gebaut als heute - oder!? Guckt euch mal das Fenster an - nach vorn aufklappbar - wie krass ist das denn !

Es war einmal ....

So beginnen meist die Märchen der Brüder Grimm und dieses hier startet ganz ähnlich:
Es war einmal ein kleines, süßes Rotkäppchen, das sich auf den Weg machte den lieben Glaskontainer zu besuchen. Unterwegs traf es auf einmal auf die grummelige Stauscheibe (Schild), die es kurz vor ihrem Ziel vom rechten Pfad abbrachte.

Komm .... mach nochmal blubb

Ein kleiner Solarspringbrunnen in einem einfachen 10 Liter Eimer an einem bewölkten Morgen.
Die Zellen hatte kaum noch Energie und so machte er nur alle 10-20 Sekunden einmal Blubb. Musste somit doch einige Versuche starten bis ich ein halbwegs gelungenes Splish-Splash-Bild hinbekommen hab.

Verkehrszeichen 101

Das Verkehrszeichen 101 „Gefahrstelle“ warnt allgemein vor einer Gefahrensituation im Straßenverkehr.
Ok - was mag es wohl hier (in diesem Fall) bedeuten? Achtung, der Weg ist hier zu ende - es kommt ein Apfelbaum ?
Find ich gut .... es wird viel zuwenig darauf hingewiesen, dass diese komigen Bäume überall rumstehen und man da nicht gegenfahren sollte.

Traurig ....

find ich es, dass man so ein Schild aufstellen muss.
Da macht man sich die Mühe Blumen zu pflanzen, um sich und andere an deren Schönheit zu erfreuen .... dann kommen irgendwelche Hirnies (sorry) und .....

Mikado

Ich glaube auch dazu brauche ich nicht allzu viel zu schreiben. Auf dem Bürgersteig fand ich diese Deko vor.

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.