Linie(nblock) um Blöcke zu trennen
Linie(nblock) um Blöcke zu trennen
Hallo, kurze Frage: Gibt es einen Block (ich finde keinen) den mal als Linie zwischen andere Blöcke schieben kann, um eine Abfolge von Blöcken mit einer andersfarbigen Linie optisch voneinander zu trennen? Danke für Hinweis im voraus.
PS: Vielleicht gibt es ja auch ein anderes "Boardmittel" um diesen Effekt zu generieren.
PS: Vielleicht gibt es ja auch ein anderes "Boardmittel" um diesen Effekt zu generieren.
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
Moin,
es gibt keinen Block, der nur eine Linie hat.
Eine Linie kann man mit dem Tag <hr> (horizontal rule) an beliebiger Stelle einfügen:
https://www.w3schools.com/tags/tag_hr.asp
… oder - wahrscheinlich ist es das, was bei Dir passt - Du gibst dem Block im "Code Editor" im Bereich "CSS Editor" eine obere
Beispiel einer weißen Border-Kante oben am Block in 2px Breite:
es gibt keinen Block, der nur eine Linie hat.
Eine Linie kann man mit dem Tag <hr> (horizontal rule) an beliebiger Stelle einfügen:
https://www.w3schools.com/tags/tag_hr.asp
… oder - wahrscheinlich ist es das, was bei Dir passt - Du gibst dem Block im "Code Editor" im Bereich "CSS Editor" eine obere
Border.
Beispiel einer weißen Border-Kante oben am Block in 2px Breite:
Code: Alles auswählen
border-top: 2px solid #ffffff;
Re: Linie(nblock) um Blöcke zu trennen
Besten Dank!
Re: Linie(nblock) um Blöcke zu trennen
Füge einfach einen HTML Block an die Stelle wo Du eine Linie haben möchtest.
Da fügst Du dann den Code ein:
size gibt die Strichstärke an, also wie hoch die Linie sein soll.
Oder aber auch so :
Da sind Hintergrund, Linienfarbe und Stärke eben änderbar. Hier z.B. gepunktete Linie
Kannst hier nachlesen was alles geht:
http://www.css4you.de/trickkiste/tr00007.html
Da fügst Du dann den Code ein:
Code: Alles auswählen
<hr size="10">
Oder aber auch so :
Code: Alles auswählen
<hr style="border:dashed #00ff00 1px;
background-color:#aa0000;height:15px;">
Kannst hier nachlesen was alles geht:
http://www.css4you.de/trickkiste/tr00007.html
Gruß Volker
Re: Linie(nblock) um Blöcke zu trennen
Ich habe mal einen Versuch gemacht, so einen Block selber zu erstellen.
Leider bin ich an der Linien Dicke gescheitert. Die kann ich zwar einstellen, aber leider nicht mit der CSS an den HR Tag weitergeben.
Also habe ich einfach einen Block genommen bei dem man die Linienfarbe und Hintergrundfarbe einstellen kann, sowie die Abstände des Blocks nach oben und unten. Die Farbe der Linie kann man zwar ändern, aber immer nur in der sehr dünnen Ausführung.
https://fotoschulungen.com/content6_2.zip
Ist ein M5 Block und wurde von mir umbenannt in teiler. Heisst aber immer noch content6_2 in Mobirise
Leider bin ich an der Linien Dicke gescheitert. Die kann ich zwar einstellen, aber leider nicht mit der CSS an den HR Tag weitergeben.
Also habe ich einfach einen Block genommen bei dem man die Linienfarbe und Hintergrundfarbe einstellen kann, sowie die Abstände des Blocks nach oben und unten. Die Farbe der Linie kann man zwar ändern, aber immer nur in der sehr dünnen Ausführung.
https://fotoschulungen.com/content6_2.zip
Ist ein M5 Block und wurde von mir umbenannt in teiler. Heisst aber immer noch content6_2 in Mobirise
Gruß Volker
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
Moin,
leider erscheint Dein Userblock bei mir nicht in meinem Standard-Thema "Mobirise5".
Hatten wir das nicht schon mal, dass man keine Userblöcke umbenennen darf, wenn man diese weitergeben will.
Das steht in der Javascript-Datei von Dir:
Man kann das mit einem <hr> Element machen, wie ich bereits oben geschrieben hatte, dann sitzt aber eben die Linie nicht ganz außen, wie bei einer
Die Border ist zur Trennung von Blöcken schon der richtige Weg. Außerdem geht eine Border dann auch immer über die gesamte Display-Breite (ohne das voreingestellte Padding).
Einem <hr> Tag gibt man dann ein CSS oder auch als CSS-Class, wie auf meiner Beispielseite hier:
https://www.mobirise-tutorials.com/Tutorials-3/#Vorwort
Farbe:
Deckkraft:
Höhe:
Breite:
mit der Höhe (height) wird die
Im Screenshot das Ergebnis der CSS von diesem <hr> Element:
leider erscheint Dein Userblock bei mir nicht in meinem Standard-Thema "Mobirise5".
Hatten wir das nicht schon mal, dass man keine Userblöcke umbenennen darf, wenn man diese weitergeben will.
Das steht in der Javascript-Datei von Dir:
Volkers Userblock hat geschrieben:
"themeName": "mobirise5",
"parent": "content6",
"blockName": "content6_2",
"mediaPaths": "[]",
"isUserblock": "true",
"customName": "teiler"
Man kann das mit einem <hr> Element machen, wie ich bereits oben geschrieben hatte, dann sitzt aber eben die Linie nicht ganz außen, wie bei einer
Border.
Die Border ist zur Trennung von Blöcken schon der richtige Weg. Außerdem geht eine Border dann auch immer über die gesamte Display-Breite (ohne das voreingestellte Padding).
Einem <hr> Tag gibt man dann ein CSS oder auch als CSS-Class, wie auf meiner Beispielseite hier:
https://www.mobirise-tutorials.com/Tutorials-3/#Vorwort
Farbe:
Deckkraft:
Höhe:
Breite:
Code: Alles auswählen
hr {
background-color: #ff0000;
opacity: 0.8;
height: 10px;
width: 100%;
}
Dickevon der Linie bestimmt.
Im Screenshot das Ergebnis der CSS von diesem <hr> Element:
Re: Linie(nblock) um Blöcke zu trennen
Gruß Volker
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
ja - warum nicht
... kannst Dir natürlich dafür auch einen Block erstellen.
Das ist aber genau das Gleiche, dann kannst Du doch die Border auch gleich an denjenigen Block setzen, den es betrifft.
Übrigens die Farbcodes kann man sich doch einfach am Color-Picker von Mobirise kopieren oder auch einen der unzähligen Generatoren dafür verwenden:
https://www.hexcolortool.com/
... kannst Dir natürlich dafür auch einen Block erstellen.
Das ist aber genau das Gleiche, dann kannst Du doch die Border auch gleich an denjenigen Block setzen, den es betrifft.
Übrigens die Farbcodes kann man sich doch einfach am Color-Picker von Mobirise kopieren oder auch einen der unzähligen Generatoren dafür verwenden:
https://www.hexcolortool.com/
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
Volker,
habe das gerade mal mit einem neuen "input" Feld für die Breite der Border ausprobiert.
Dafür habe ich einen neue Variable so benannt:
@myWidth
Keine Ahnung, ob das so richtig ist - aber was geht ist ja immer richtig
Das in den "HTML Editor", oben bei den Mobirise-Parametern:
… und das in den "CSS Editor":
Dann hast Du einen "Schieber" mit dem Namen "Border-Breite" und kannst die Breite darüber regeln.
Deine Variable für die ausgewählte Farbe kannst Du ja anstelle des Hex-Farbcodes dann auch noch da eintragen.
habe das gerade mal mit einem neuen "input" Feld für die Breite der Border ausprobiert.
Dafür habe ich einen neue Variable so benannt:
@myWidth
Keine Ahnung, ob das so richtig ist - aber was geht ist ja immer richtig
Das in den "HTML Editor", oben bei den Mobirise-Parametern:
Code: Alles auswählen
<input type="range" name="myWidth" title="Border-Breite" min="1" max="50" value="5" step="1">
Code: Alles auswählen
border-top: (@myWidth * 1px) solid #ff0000;
Deine Variable für die ausgewählte Farbe kannst Du ja anstelle des Hex-Farbcodes dann auch noch da eintragen.
Re: Linie(nblock) um Blöcke zu trennen
Super !!!
Das geht ja klasse.
Hier der Code für den Block:
Und der CSS:
Das geht ja klasse.
Hier der Code für den Block:
Code: Alles auswählen
<section data-bs-version="5.1" class="content5" group="Content">
<mbr-parameters>
<input type="color" name="lineColor" title="Border Farbe" value="#2299aa">
<input type="range" name="myWidth" title="Border-Breite" min="1" max="50" value="9" step="1">
</mbr-parameters>
</section>
Und der CSS:
Code: Alles auswählen
border-top: (@myWidth * 1px) solid @lineColor;
Gruß Volker
Re: Linie(nblock) um Blöcke zu trennen
Anstelle eines Border kann man nun auch eine HR nehmen. Vorteil hier ist das man die Hintergrundfarbe anpassen kann und auch andere Designs wählen ( Werde ich noch ein Video zu machen )
Aber hier mal der Code für den HR Eigenbau:
Code Editor HTML Teil :
CSS Teil:
Aber hier mal der Code für den HR Eigenbau:
Code Editor HTML Teil :
Code: Alles auswählen
<section data-bs-version="5.1" class="content6" group="Content">
<mbr-parameters>
<header>HR Eigenbau</header>
<input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="4">
<input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="3">
<input type="range" name="myWidth" title="Linien-Breite" min="1" max="50" value="17" step="1">
<input type="color" name="lineColor" title="Color" value="#f50000">
<header>Background</header>
<input type="color" title="Color" name="bgColor" value="#ffffff">
</mbr-parameters>
<hr class="line">
</section>
CSS Teil:
Code: Alles auswählen
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
.line {
background-color: @lineColor;
align: center;
height: 2px;
margin: 0 auto;
border-top: (@myWidth * 1px) solid @lineColor;
}
Gruß Volker
Re: Linie(nblock) um Blöcke zu trennen
Hallo Tommy, alter CSS Gott
Ich möchte noch die 3 Styles an die Horizontale Linie bringen.
Hab ich mittels Auswahlfelder in die Section geschrieben :
Nun brauche ich die entsprechende CSS dafür und brauche Deine Hilfe
Hier der Code wie ich ihn in Mobirise habe:
Es muss also noch das Attribut für gestrichelt , gepunktet und doppelt in die CSS. Mir fehlt wie immer der Plan
Ich möchte noch die 3 Styles an die Horizontale Linie bringen.
Hab ich mittels Auswahlfelder in die Section geschrieben :
Nun brauche ich die entsprechende CSS dafür und brauche Deine Hilfe
Hier der Code wie ich ihn in Mobirise habe:
Code: Alles auswählen
<select title="HRDesign" name="hrstyle">
<option value="dashed">dashed</option>
<option value="dotted">dotted</option>
<option value="double" selected>double</option>
Gruß Volker
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
ha - supi -
… habe heute keine Zeit mehr das zu testen, die Attribute findest Du aber hier:
https://www.w3schools.com/css/css_border.asp
Du müsstest also für den Style der Border noch eine Variable gründen (anstelle von "solid")
Ich habe nun noch ein Tutorial zur Erweiterung der Toolbox von Mobirise geschrieben. Im Prinzip kann man das beliebig ausbauen und so alle möglichen Parameter hinzufügen.
https://www.mobirise-tutorials.com/Tuto ... odify.html
Das wollte ich schon lange mal machen, denn ich habe schon vor Jahren den einen oder anderen Parameter für mich persönlich angepasst.
… habe heute keine Zeit mehr das zu testen, die Attribute findest Du aber hier:
https://www.w3schools.com/css/css_border.asp
Du müsstest also für den Style der Border noch eine Variable gründen (anstelle von "solid")
Ich habe nun noch ein Tutorial zur Erweiterung der Toolbox von Mobirise geschrieben. Im Prinzip kann man das beliebig ausbauen und so alle möglichen Parameter hinzufügen.
https://www.mobirise-tutorials.com/Tuto ... odify.html
Das wollte ich schon lange mal machen, denn ich habe schon vor Jahren den einen oder anderen Parameter für mich persönlich angepasst.
Re: Linie(nblock) um Blöcke zu trennen
Na dann warte ich mal bis Du Zeit hast
Ich und CSS
Theoretisch weiß ich das, aber ich bin zu doof das umzusetzen.
Ich brauche also Werte für die Farbe, Dicke der Linie und eben ob Solid oder dottert oder gestrichelt usw.
Das klappt so leider nicht. Da musst Du ran
Ich und CSS
Theoretisch weiß ich das, aber ich bin zu doof das umzusetzen.
Ich brauche also Werte für die Farbe, Dicke der Linie und eben ob Solid oder dottert oder gestrichelt usw.
Das klappt so leider nicht. Da musst Du ran
Gruß Volker
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
Moin,
also da fehlen mir auch die Kenntnisse
Ich kann zwar eine Auswahl-Option schaffen, die dann auch in der Tool-Box dargestellt wird, wie z.B.:
… habe aber gerade keine Ahnung, wie ich das dann anwenden kann.
Jetzt steht dort ja:
Sobald ich das Attribut "solid" mit @borderType als Variable ersetze, wird nichts mehr angezeigt. Man müsste da vielleicht über "IF" (Wenn) gehen, aber auch hier bekomme ich den korrekten Syntax nicht hin.
Im Prinzip ist das aber auch alles Quatsch, wozu soll das in der Toolbox überhaupt gut sein, wenn ich die Anweisung für meine gewünschte Border einfach in den CSS-Editor schreiben kann
Du könntest doch für eine "dashed" (gestrichelte) Border dann eben schreiben:
Wahrscheinlich müsste man da wieder mit JavaScript ran ...
also da fehlen mir auch die Kenntnisse
Ich kann zwar eine Auswahl-Option schaffen, die dann auch in der Tool-Box dargestellt wird, wie z.B.:
Code: Alles auswählen
<select title="Size" name="borderType">
<option value="1" selected>Solid</option>
<option value="2">Double</option>
<option value="3">Dotted</option>
<option value="4">Dashed</option>
</select>
Jetzt steht dort ja:
Code: Alles auswählen
border-top: (@myWidth * 1px) solid @lineColor;
Im Prinzip ist das aber auch alles Quatsch, wozu soll das in der Toolbox überhaupt gut sein, wenn ich die Anweisung für meine gewünschte Border einfach in den CSS-Editor schreiben kann
Du könntest doch für eine "dashed" (gestrichelte) Border dann eben schreiben:
Code: Alles auswählen
border-top: (@myWidth * 1px) dashed @lineColor;
Re: Linie(nblock) um Blöcke zu trennen
Hast hier mal geschaut ?
https://mobirise.com/docs/
Wäre halt cool wenn wir sowas hin bekommen würden
Natürlich kann man alles von Hand in den Code schreiben, als Block wär es eben eleganter
https://mobirise.com/docs/
Wäre halt cool wenn wir sowas hin bekommen würden
Natürlich kann man alles von Hand in den Code schreiben, als Block wär es eben eleganter
Gruß Volker
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
Sorry,
bekomme es nicht hin.
Habe gerade mal im Hersteller-Forum gefragt:
https://forums.mobirise.com/discussion/ ... toolbox/p1
Ich habe es jetzt mal mit "Radio" Buttons versucht. Das gleiche Problem.
Dabei sollte eigentlich der name="myType" dann die Werte als Variable liefern, also so:
so geht es:
bekomme es nicht hin.
Habe gerade mal im Hersteller-Forum gefragt:
https://forums.mobirise.com/discussion/ ... toolbox/p1
Ich habe es jetzt mal mit "Radio" Buttons versucht. Das gleiche Problem.
Code: Alles auswählen
<input type="radio" title="Solid" name="myType" value="solid">
<input type="radio" title="Dotted" name="myType" value="dotted" checked>
Code: Alles auswählen
border-top: (@myWidth * 1px) solid @lineColor;
border-style: @myType;
Code: Alles auswählen
border-top: (@myWidth * 1px) solid @lineColor;
border-style: dotted;
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
Ich glaube ich habe es geschafft
... warte (dauert noch etwas)
... warte (dauert noch etwas)
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
Ich werde das noch zu meinem Tutorial hinzufügen.
HTML:
CSS:
HTML:
Code: Alles auswählen
<!-- Start EDIT Tommy - input fields added -->
<header>Border</header>
<input type="range" name="myWidth" title="Border Width" min="1" max="50" value="8" step="1">
<input type="color" title="Border Color" name="lineColor" value="#e43f3f">
<select title="Border Style" name="myStyle">
<option value="solid">Solid</option>
<option value="double">Double</option>
<option value="dotted">Dotted</option>
<option value="dashed" selected>Dashed</option>
</select>
<!-- End EDIT Tommy - input fields added -->
CSS:
Code: Alles auswählen
border-top: (@myWidth * 1px) @lineColor;
& when (@myStyle = 'solid') {
border-style: solid;
}
& when (@myStyle = 'double') {
border-style: double;
}
& when (@myStyle = 'dotted') {
border-style: dotted;
}
& when (@myStyle = 'dashed') {
border-style: dashed;
}
- Tommy Herrmann
- Site Admin
- Beiträge: 5985
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
… habe mein Tutorial und mein Video neu erstellt:
https://www.mobirise-tutorials.com/Tuto ... odify.html
https://www.mobirise-tutorials.com/Tuto ... odify.html
Wer ist online?
Mitglieder in diesem Forum: Ahrefs [Bot] und 2 Gäste