Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann

Die Foren sind geschlossen. Für Fragen zu MR, NOF & mehr steht Tommys Forum zur Verfügung. Ich danke für die langjährige Treue und Mitarbeit! Eure Administratorin.

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/
Alle Beiträge dieses Benutzers finden
#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.
Alle Beiträge dieses Benutzers finden
#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!
Alle Beiträge dieses Benutzers finden
#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.
Alle Beiträge dieses Benutzers finden
#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: 29)



.png  2020-10-28 (1).png (Größe: 120,97 KB / Downloads: 28)
Alle Beiträge dieses Benutzers finden
#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: 23)
Alle Beiträge dieses Benutzers finden
#7
Huh Geht doch!?


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



.png  2020-10-28_3.png (Größe: 672,5 KB / Downloads: 43)
Alle Beiträge dieses Benutzers finden
#8
Schon mal Danke.
Werde mich heute Mittag mal drauf stürzen.  :D
Alle Beiträge dieses Benutzers finden
#9
Moin.
Habe es leider noch nicht hinbekommen.
Bleibe aber am Ball. Zumindest so, dass ich dann weiß wie es funktioniert.
Alle Beiträge dieses Benutzers finden
#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!
Alle Beiträge dieses Benutzers finden
#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: 23)


Danke dir.
Alle Beiträge dieses Benutzers finden
#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
Alle Beiträge dieses Benutzers finden
#13
Ja. Stimmt. Habe ich reingemacht.
Schau mal deinen Beitrag #10 CSS.  :D
Den habe ich ja zu Grunde gelegt.
Alle Beiträge dieses Benutzers finden


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Umstieg auf Mobirise 5 nof15us 67 3.948 16.12.2020, 10:53
Letzter Beitrag: Tommy Herrmann
  NOF 12 und Mobirise kombinieren Petergun 14 515 11.12.2020, 07:50
Letzter Beitrag: Petergun
  Mobirise-MP3 Player einbinden. Soundcloud? Thomas Saake 11 475 08.12.2020, 17:16
Letzter Beitrag: Thomas Saake
  Mobirise-Drop Down Menü verschiedene Farben Thomas Saake 8 315 08.12.2020, 14:42
Letzter Beitrag: Thomas Saake
  Mobirise-Text unter Logo Menüleiste Thomas Saake 14 533 03.12.2020, 17:22
Letzter Beitrag: Thomas Saake
  Mobirise-Noch ein Problem mit Hamburger Menü auf Handy Thomas Saake 23 728 30.11.2020, 16:54
Letzter Beitrag: Thomas Saake
  Mobirise-PopUp Modal Text statt Kreuz zum schließen Thomas Saake 3 231 26.11.2020, 15:43
Letzter Beitrag: Thomas Saake
  Mobirise-Timeline Abstand verringern Thomas Saake 2 161 26.11.2020, 14:10
Letzter Beitrag: Thomas Saake
  Position Icons - Mobirise 5.2.0. Markus78 9 426 16.11.2020, 19:03
Letzter Beitrag: Tommy Herrmann
  Mobirise-Abstand Google Maps Thomas Saake 11 562 08.11.2020, 22:25
Letzter Beitrag: AndyNeu



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!