Mobirise-Tutorials.com

Hallo Tommy,

bei Deinem letzten Beispiel

denke ich, besteht ein Problem darin, daß der Rahmen durch Einfügen von Leerfeldern darüber so weit nach unten geschoben werden muss, bis es unter dem Bild in voller Breite erscheint.
Richtig ?

Ja - alles andere sieht ... schei ... aus

Hallo,

ich habe noch eine Frage zum Editor !

Nach Veröffentlichung besteht vom letzten Eintrag ein ziemlich großer Abstand zum nächsten Block. Besteht die Möglichkeit das "fliessend" zu machen, so daß sich der nächste Block gleich an die letzte Anzeige anfügt ?

Ich habe das Nachrichten-Skript so wie im Tutorial erklärt im iFrame eingebunden.

https://www.meinlangengrassau.de/markt.html

Moin,

das kannst Du in der CSS-Datei "style.css" vom Werner ändern.

Lösche diese Zeile im <body> Selektor (gleich oben in der CSS-Datei):

margin-bottom: 250px;

oder deaktiviere diese als /* Kommentar */

Code: Alles auswählen

body {
  font-family: Verdana, Arial, Sans-Serif;
  font-size: 0.95rem;
  /* margin-bottom: 250px; */
  scroll-behavior: smooth;
  background-color: #db6400;
}

P.S.:

Du solltest niemals Grafiken vergrößern - wie diese hier:

https://www.meinlangengrassau.de/assets ... nden-1.png

Diese ist auf der Seite von Dir daher leicht unscharf:

Das Bild selbst ist 500px breit und Du zeigst es in einer vergrößerten Breite von 699px, da es sich der Breite vom Mobirise-Block anpasst.

schreibe in den "CSS Editor" mit dem Bild "Suchen - Finden":

Code: Alles auswählen

img {
  max-width: 500px;
  margin: auto;
}

Damit wird also eine maximale Breite von 500px bestimmt - somit kann das Bild nicht größer werden als es ist - und das "margin: auto" (Außenabstand automatisch) zentriert das Bild dann noch.

Dann ist es auch scharf:

Dankeschön, ich habe beides verändert !

Beim Bild habe ich es etwas anders gemacht, da habe ich das Bild auf 700px Breite angepasst (ohne es zu strecken).

D.h. also, daß das Bild bei diesem Block immer eine Breite von mindestens 699px haben muss, richtig ?

ja - das ist doch noch besser.

... wollte Dir eine neue Erstellung des Bildes nur ersparen.

Hallo,

was muss ich angeben, daß der Text für die Kategorien grösser erscheint und sich auch ein wenig Abstand zum Text darunter (Seite, Ortierung, Anzahl) befindet ?

: aktuelles.PNG (9.13 KiB) 20344 mal betrachtet

Moin,

Du kannst zum Beispiel diese Class in Werners Date "style.css" anpassen und hinzufügen "font-size" (Schriftgröße) sowie "padding-bottom" (Innenabstand unten):

font-size: 20px;
padding-bottom: 30px;

Code: Alles auswählen

/* Kategorien Aktuelles Jubilaeen Anlaesse*/
p#kategorien {
  text-align: Center;
  color: #ffffff;
  font-size: 20px;
  padding-bottom: 30px;
}

https://www.meinlangengrassau.de/blog.html

Hallo Tommy,

danke, hat wunderbar funktioniert !

Ic bin bestimmt bald fertig

jedoch

ich habe um die Navigation noch einen Rahmen gesetzt:

Code: Alles auswählen

/* Kategorien Suchen Finden*/
p#kategorien {
  text-align: Center;
  color: white;
   font-size: 20px;
  padding-bottom: 30px;
  border: 2px solid white;
}
}

Warum befindet sich der Text nicht mittig im Rahmen, sondern "stösst" oben an ?

Könnte man das einstellen, wenn man die Seiten des Rahmens einzeln definiert und bei "border-top" einen Abstand zum Text eingibt ?

border-top: ...;
border-right: ...;
border-bottom: ...;
border-left: ...;

Hallo Reinhard,

man kann das alles machen und gestalten wie man will.

Das hat mit Text 'mittig' im Rahmen erst mal nichts zu tun.

Es ist doch ganz logisch, wenn Du einem Element, hier einem Tag , also einem "Paragraph" (Absatz), einen Innenabstand-unten (padding-bottom) nur unten gibst, dass dann unten eben diese 30px Abstand entstehen und oben nicht.

Legst Du anschließend um diesen Absatz eine "border" (Rahmen), dann liegt dieser ja um das Paragraph-Element außen drum herum und schwebt da nicht irgendwie frei im Raum. Du musst dann also auch noch oben ebenso einen Abstand angeben, damit der Text dadurch vertikal 'mittig' erscheint.

Mir kommen dann 30px oben und unten etwas viel vor. Im Screenshot und im Code unten, habe ich jetzt mal oben und unten 15px angegeben aber das kannst Du ja ausprobieren und selbst anpassen.

Code: Alles auswählen

p#kategorien {
  text-align: Center;
  color: #ffffff;
  font-size: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 2px solid white;
}

Es gibt da unterschiedliche Möglichkeiten der Schreibweise in CSS (nur damit Du das weißt).

Man kann für eine Anweisung wie "padding" jede Position einzeln schreiben - wie oben im CSS Code - also:

oben - rechts - unten - links:

top right bottom left

... oder diese auch zusammenfassen, wie z.B.:

padding: 15px 0px;

Bei zwei Zahlen gilt die erste Zahl für oben und unten - die zweite Zahl für rechts und links. Das vereinfacht und verkürzt die Schreibweise.

Gucke Dir das auch mal hier an für "padding" (Innenabstand):

https://www.w3schools.com/css/css_padding.asp

Nur falls Du darüber nachdenkst, diesen Rahmen nur um die Verweise der Navigation herum zu setzen - also nicht über die gesamte Blockbreite - dann geht das auch.

Ich würde es aber über die gesamte Breite lassen - eigentlich finde ich diesen Rahmen sowieso nicht gerade schön - aber das ist immer Geschmackssache.

Dazu habe ich dann also das Tag auf 400px verkürzt (das passt gerade noch am Handy). Da es dann automatisch linksbündig gesetzt wird (es wurde ja nicht das Tag vom Werner zentriert, sondern der Text), habe ich es mit einem automatischen "margin" (Außenabstand) - links und rechts - zentriert - also:

margin: 20px auto;

oben und unten "20px" / links und rechts "auto" (automatisch, wird damit horizontal zentriert)

Code: Alles auswählen

p#kategorien {
  text-align: Center;
  color: #ffffff;
  font-size: 20px;
  padding: 15px 0px;
  border: 2px solid white;
  width: 400px;
  margin: 20px auto;
}

P.S.:

Ich sehe gerade - das mit der verkürzten Anzeige im Rahmen lasse mal lieber, denn das Handy-Display zeigt nur maximal 360px Breite an

Gucke Dir das auch mal hier an für "margin" (Außenabstand):

https://www.w3schools.com/css/css_margin.asp

Deine Beschriftung Ereignisse und Begebenheiten würde ich persönlich wahrscheinlich ganz in Werners Datei löschen und weglassen - aber Achtung - nicht das h2 Tag mit der id="anker" löschen, denn das dient als Sprungmarke nach oben. Dann also nur den Inhalt - den Text selbst - löschen.

... oder auch mit "text-align: center;" vielleicht auch zentrieren:

Code: Alles auswählen

h2#anker {
  font-family: Verdana, Arial, Sans-Serif;
  font-weight: Normal;
  scroll-margin-top: 25px;
  color: #ffffff;
  text-align: center;
}

Oder Du schreibst einen solchen Text in einen Mobirise-Block darüber.

Hallo Tommy,

besten Dank, habe das so umgesetz und es funktioniert einwandfrei.

Ich sehe gerade - das mit der verkürzten Anzeige im Rahmen lasse mal lieber, denn das Handy-Display zeigt nur maximal 360px Breite an

Ja, das habe ich probiert, aber auf dem Handy ging es tatsächlich nicht.

Ich persönlich nutze gerne das hier, da man dort mit "Aufgaben" arbeiten kann

www.html-seminar.de

Nun habe ich doch noch eine Frage zum Nachrichten-Editor von Werner Zenk.

Es gibt ja die Möglichkeit im Editor die webadresse einzutragen

: kontakt2.PNG (3.66 KiB) 20227 mal betrachtet

Angezeigt wird dann der komplette Pfad. Hier wäre es schön, wenn z.B für

www.dingsda/kontakt.html nur Kontakt angezeigt werrden könnte.

Nun wird bei mir der Link auch in gelb angezeigt, das ist eher unpassend bei einem hellen Hintergrung.

: kontakt3.PNG (4.11 KiB) 20227 mal betrachtet

Deshalb habe ich es erst mal über den BBCode gelöst, wo man die URL und dem anzuzeigenden Namen in einer gewählten Farbe eintragen kann:

: kontakt.PNG (89.32 KiB) 20227 mal betrachtet

Irgendwie, muss das ja funktionieren, zumindestens in einer bestimmten Farbe, das habe ich in Deinem Tutorial gesehen:

das mit den verkürzten Links hat Werner so im Code der Datei "nachrichten.php" programmiert, was ja auch ganz richtig ist. Das wird hier um das:

Code: Alles auswählen

http://  https://  www

verkürzt - das braucht doch auch niemand.

Andererseits ist ja genau dafür, wenn man das anders darstellen will, auch der BBCode gedacht.

Wollte man nur die eigentliche Seite anzeigen, müsste das vom Werner neu programmiert werden. Das wäre aber auch nicht richtig, denn den gesamten Pfad zu zeigen ist schon richtig und auch wichtig für die Suchmaschinenoptimierung.

Nun hat ja nicht jeder alles im Stammverzeichnis zu liegen (wie Du), bei mir können solche Links schon mal sehr viel länger sein.

Insbesondere ist diese URL eigentlich für die Anzeige zu fremden Domains gedacht und nicht zu eigen Seiten. Da ginge das gar nicht.

Die Linkfarbe hast Du doch selbst so in der CSS beim Werner angegeben. Der Selektor :

a

steht für einen Link (Anchor).

Code: Alles auswählen

/* Link */
a:link,
a:visited {
  font-family: Verdana, Arial, Sans-Serif;
  color: #ffff00;
  text-decoration: None;
}

a:hover {
  color: #ecec53;
}

Das kannst Du auch farblich ändern wie Du willst.

Bei mir habe ich diese CSS für den Link aus Werners CSS ganz entfernt und verwende die Farbe, die ich in Mobirise für Links vergeben habe.

Hallo Tommy,

Tommy Herrmann hat geschrieben: Mi 31. Jan 2024, 14:11 Die Linkfarbe hast Du doch selbst so in der CSS beim Werner angegeben. Der Selektor :

a

steht für einen Link (Anchor).
Code: Alles auswählen
/* Link */
a:link,
a:visited {
  font-family: Verdana, Arial, Sans-Serif;
  color: #ffff00;
  text-decoration: None;
}

a:hover {
  color: #ecec53;
}
Das kannst Du auch farblich ändern wie Du willst.

Die Linkfarbe (#ffff00) habe ich für die Navigation angegeben. Nun wird offensichtlich die gleiche Linkfarbe für die URL, die man angeben kann, genutzt.

Auf hellem Hintergrund ist die URL dann nicht zu lesen !

Das meine ich ! Kann ich für die Navi die Linkfarbe in diesem Gelb so lassen und für die Anzeige der URL eine andere Farbe, die sich vom Hintergrund abhebt, nehmen ?

… ob URL oder Navi - beides ist ein "a" Tag (Anchor) und hat daher auch die gleiche Farbe.

Ich bin gerade unterwegs und kann erst morgen ausführlich schreiben. Man könnte dieser URL dann vielleicht eine ID geben und dieser ID dann eine gesonderte Farbe.

Na, dann wohl eher eine Klasse als eine Id.
Da dieser externe Link noch weitere Attribute hat target="_blank" rel="noopener",
könnte man folgendes machen:

Code: Alles auswählen

a[target="_blank"] {
  color: red;
}

Moin,

… sorry, natürlich keine ID (habe ich mich gestern in der Eile verschrieben), denn das ginge ja an dieser Stelle gar nicht, da die Beiträge durch eine Schleife angezeigt werden und dann immer die gleiche ID verwendet würde. Natürlich eine Class, aber mit dem Attributselektor ist das natürlich noch einfacher.

Dann schreibe das doch in der Datei "style.css" vom Werner noch hinzu, also dann unter den bereits definierten:

/* Link */

Habe da jetzt Deine Beispielfarbe für den Link verwendet und auch noch ein "hover" (Mausüber) dazu geschrieben in Rot, sonst wird das ja wieder gelb bei Mausüber. Kannst Du natürlich auch eine andere Farbe bestimmen.

Code: Alles auswählen

/* Link */
a:link,
a:visited {
  font-family: Verdana, Arial, Sans-Serif;
  color: #ffff00;
  text-decoration: None;
}

a:hover {
  color: #ecec53;
}

/* URL Link Farbe im Beitrag */

a[target="_blank"] {
  color: #0000DD;
}
a[target="_blank"]:hover {
  color: red;
}

Nur zum Verständnis:

Der Attributselektor wird im CSS in [eckige Klammern] gepackt. Dadurch wird dann diese neue CSS-Anweisung nur auf den Selektor "a" mit dem Attribut target="_blank" (Ziel="neuer Tab") wirken und eben nicht auf die anderen "a" Selektoren (Links) ohne Attribut.

Beispiel von Deinem Quellcode bei dem dieses Attribut am <a> Tag mit dran steht:

Code: Alles auswählen

<a href="https://www.meinlangengrassau.de/kontakt.html" title="https://www.meinlangengrassau.de/kontakt.html" target="_blank" rel="noopener">

Mobirise-Tutorials.com

Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk

Re: Nachrichten-Skript von Werner Zenk