Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobirise-Dreifach Rahmen
#1
Moin.
Wie bekomme ich den dunkelgrauen Rahmen um die Preise dreifach hin?
Die Linien sollen dann farbig werden und der grüne Backstretch Balken kommt weg.

http://tsad17.de/lavida2020/
Gruß
Thomas

Mobirise 5.2. + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
... eine css "border" (das ist es jetzt) hat einen bestimmten Syntax - so geht das nicht.

Da müsstest Du mal googeln und vielleicht 3 <div> Container übereinander verschachteln.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Du könntest doch drei Classen konstruieren:

Code:
.border1 {
  position: relative;
  border: 3px solid red;
  padding: 1.5rem;
}
.border2 {
  position: relative;
  border: 3px solid blue;
  padding: 2.5rem ;
}
.border3 {
  position: relative;
  border: 3px solid green;
  padding: 3.5rem ;
}

Ich finde jetzt den Block mit dem Signum (La ViDa) nicht! Du musst dann wissen in welche DIV die Classen müssen, also class=" border1 border2 border3". Evtl. hast Du mit dem "La ViDa" ein Problem. Kann es nicht testen!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
hast Du das probiert Martin?

Ich meine da würde dann eine "border" die andere überschreiben (habe es aber auch nicht versucht), also in Deinem Fall würde immer nur die class="border3" angezeigt.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
thumbs up Stimmt!
Ich habe jetzt den Block gefunden. Es ist ein Header aus PoliticsM4. Ja, man kann nur 3 DIV's verschachteln. Allerdings macht Mobirise die Borderfarbe über die Auswahl, also <input>. Man muss die Class="wrapper" herausnehmen. Und das Signum ist ein Problem.


.png  2020-10-28-2.png (Größe: 723,2 KB / Downloads: 14)



.png  2020-10-28 (1).png (Größe: 120,97 KB / Downloads: 15)
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
... so geht das auch noch nicht - dann überschreiben sich die <div> wieder :D

Du kannst doch z.B. ganz einfach 3 <div> Container (in jedem Block geht das) mit höheren "z-index" verschachteln:

http://www.mobirise-tutorials.com/Testse...ml#borders

Hier meine CSS:

Code:
.border1 {
  border: 3px solid red;
  padding: 1.0rem;
  z-index: 100;
}
.border2 {
  border: 2px solid blue;
  padding: 1.0rem;
  z-index: 101;
}
.border3 {
  border: 2px solid black;
  padding: 1.0rem;
  z-index: 102;
}


.jpg  div-verschachtelt.JPG (Größe: 109,19 KB / Downloads: 10)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Huh Geht doch!?


.png  2020-10-28_2.png (Größe: 665,48 KB / Downloads: 27)



.png  2020-10-28_3.png (Größe: 672,5 KB / Downloads: 32)
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Schon mal Danke.
Werde mich heute Mittag mal drauf stürzen.  :D
Gruß
Thomas

Mobirise 5.2. + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Moin.
Habe es leider noch nicht hinbekommen.
Bleibe aber am Ball. Zumindest so, dass ich dann weiß wie es funktioniert.
Gruß
Thomas

Mobirise 5.2. + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
HTML:
Code:
<div class="wrapper">
                <div class="wrapper2">
                <div class="wrapper3">
                    <h1 class="mbr-section-title mbr-bold pb-2 mbr-fonts-style" mbr-theme-style="display-2" mbr-if="showTitle">Text mit dreifachem Rahmen in verschiedenen Farben.</h1>
                    <h3 class="mbr-section-subtitle align-left mbr-light pb-2 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showSubTitle">Lorem ipsum</h3>
                    <p class="mbr-text pb-2 align-left mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">Beispiel, Martin Schaller</p>
                    <div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove"><a class="btn btn-md btn-white-outline" href="https://mobiri.se" data-app-placeholder="Type Text">Read More</a></div>
                   <div> <img src="../_images/clients/signature.png" title="mobirise" alt="Mobirise"></div>
                  </div>   
              </div>     
                </div>

CSS:
Code:
.wrapper:before {
  content: "";
  background: @border;
  position: absolute;
  bottom: 0;
  width: ~"calc(90% - 130px)";
  height: 3px;
  right: 0;
}
.wrapper:after {
  content: "";
  background: @border;
  position: absolute;
  bottom: 0;
  width: 10%;
  height: 3px;
  left: 0;
}
.wrapper2 {
  position: relative;
  border-top: 3px solid green;
  border-right: 3px solid green;
  border-left: 3px solid green;
  padding: .5rem .5rem;
}
.wrapper2:before {
  content: "";
  background: green;
  position: absolute;
  bottom: 0;
  width: ~"calc(90% - 130px)";
  height: 3px;
  right: 0;
}
.wrapper2:after {
  content: "";
  background: green;
  position: absolute;
  bottom: 0;
  width: 10%;
  height: 3px;
  left: 0;
}
.wrapper3 {
  position: relative;
  border-top: 3px solid red;
  border-right: 3px solid red;
  border-left: 3px solid red;
  padding: .5rem .5rem;
}
.wrapper3:before {
  content: "";
  background: red;
  position: absolute;
  bottom: 0;
  width: ~"calc(90% - 130px)";
  height: 3px;
  right: 0;
}
.wrapper3:after {
  content: "";
  background: red;
  position: absolute;
  bottom: 0;
  width: 10%;
  height: 3px;
  left: 0;
}
Das musst Du in dem bekannten Block ergänzen!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Habe es ......  thumbs up
Fehlte nur die Farbe für den ersten Rahmen. (wrapper)

Code:
.wrapper {
  position: relative;
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  border-left: 3px solid blue;
  padding: .5rem .5rem;
}
.wrapper:before {
  content: "";
  background: blue;
  position: absolute;
  bottom: 0;
  width: ~"calc(90% - 130px)";
  height: 3px;
  right: 0;
}
.wrapper:after {
  content: "";
  background: blue;
  position: absolute;
  bottom: 0;
  width: 10%;
  height: 3px;
  left: 0;
}
.wrapper2 {
  position: relative;
  border-top: 3px solid green;
  border-right: 3px solid green;
  border-left: 3px solid green;
  padding: .5rem .5rem;
}
.wrapper2:before {
  content: "";
  background: green;
  position: absolute;
  bottom: 0;
  width: ~"calc(90% - 130px)";
  height: 3px;
  right: 0;
}
.wrapper2:after {
  content: "";
  background: green;
  position: absolute;
  bottom: 0;
  width: 10%;
  height: 3px;
  left: 0;
}
.wrapper3 {
  position: relative;
  border-top: 3px solid red;
  border-right: 3px solid red;
  border-left: 3px solid red;
  padding: .5rem .5rem;
}
.wrapper3:before {
  content: "";
  background: red;
  position: absolute;
  bottom: 0;
  width: ~"calc(90% - 130px)";
  height: 3px;
  right: 0;
}
.wrapper3:after {
  content: "";
  background: red;
  position: absolute;
  bottom: 0;
  width: 10%;
  height: 3px;
  left: 0;
}


.png  dreifach rahmen.png (Größe: 197,91 KB / Downloads: 11)


Danke dir.
Gruß
Thomas

Mobirise 5.2. + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Na die hast Du doch hier:
Code:
.wrapper {
  position: relative;
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  border-left: 3px solid blue;
  padding: .5rem .5rem;
}
Huh
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Ja. Stimmt. Habe ich reingemacht.
Schau mal deinen Beitrag #10 CSS.  :D
Den habe ich ja zu Grunde gelegt.
Gruß
Thomas

Mobirise 5.2. + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise-Text unter Logo Menüleiste Thomas Saake 1 25 Vor 6 Stunden
Letzter Beitrag: Martin73
  Mobirise-Noch ein Problem mit Hamburger Menü auf Handy Thomas Saake 23 295 Vor 11 Stunden
Letzter Beitrag: Thomas Saake
  Mobirise-PopUp Modal Text statt Kreuz zum schließen Thomas Saake 3 76 26.11.2020, 15:43
Letzter Beitrag: Thomas Saake
  Mobirise-Timeline Abstand verringern Thomas Saake 2 44 26.11.2020, 14:10
Letzter Beitrag: Thomas Saake
  Position Icons - Mobirise 5.2.0. Markus78 9 219 16.11.2020, 19:03
Letzter Beitrag: Tommy Herrmann
  Mobirise-Abstand Google Maps Thomas Saake 11 323 08.11.2020, 22:25
Letzter Beitrag: AndyNeu
  Mobirise-QR-Code Verlinkung auf Textblock Thomas Saake 3 130 04.11.2020, 13:51
Letzter Beitrag: jonny
  Umstieg auf Mobirise 5 nof15us 63 2.622 27.10.2020, 10:24
Letzter Beitrag: andiko
  Newsbox in Mobirise RB_BCC 33 755 26.10.2020, 17:58
Letzter Beitrag: RB_BCC
  Mobirise Business Möglichkeiten Reves84 3 139 20.10.2020, 11:17
Letzter Beitrag: kfz-fotograf



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!