Linie(nblock) um Blöcke zu trennen
Linie(nblock) um Blöcke zu trennen
PS: Vielleicht gibt es ja auch ein anderes "Boardmittel" um diesen Effekt zu generieren.
- Tommy Herrmann
- Site Admin
- Beiträge: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
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
Re: Linie(nblock) um Blöcke zu trennen
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
Re: Linie(nblock) um Blöcke zu trennen
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
- Tommy Herrmann
- Site Admin
- Beiträge: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
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
- Tommy Herrmann
- Site Admin
- Beiträge: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
... 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: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
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
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;
Re: Linie(nblock) um Blöcke zu trennen
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;
}
Re: Linie(nblock) um Blöcke zu trennen
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>
- Tommy Herrmann
- Site Admin
- Beiträge: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
… 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
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
- Tommy Herrmann
- Site Admin
- Beiträge: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
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
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
- Tommy Herrmann
- Site Admin
- Beiträge: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
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: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
... warte (dauert noch etwas)
- Tommy Herrmann
- Site Admin
- Beiträge: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
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: 5949
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Linie(nblock) um Blöcke zu trennen
https://www.mobirise-tutorials.com/Tuto ... odify.html
Wer ist online?
Mitglieder in diesem Forum: Majestic-12 [Bot], Semrush [Bot] und 3 Gäste