Oben - Mitte - Unten

[stobi_de]

Nur so eine Idee:
wir sollen gemeinsam (also nicht nur Tommy!) mal ein Tut schreiben für die Positionierung von Elementen.
Ich muss gestehen, dass ich so oft wie ein Ox vor Berg stehe, wenn ich mal irgendeine Überschrift in der Mitte oder Oben in einem Block will (wenn ein Bild rechts daneben steht, haben wir viele von).
Beispiel:
https://www.hautarztzentrum-gummersbach.de/

Da gibt es irgendwo unten 1 - 2 - 3 / Telefon besetzt / Facharzt gesucht ...
Die Nummern im Hintergrund sind nicht ordentlich positioniert

Frank

[Tommy Herrmann]

Moin Frank,

da gibt es Tausend - Und - Ein Anleitungen in den "Bootstrap 5" Seiten. Zum Beispiel:

https://getbootstrap.com/docs/5.0/utilities/position/

... oder auch dieses Flex-Management:

https://getbootstrap.com/docs/5.0/utilities/flex/

Da müsste man dann immer ganz spezifisch auf das aufgetretene Problem eingehen und gucken, ob da Klassen von Bootstrap oder Mobirise verantwortlich sind. So ein allgemeines - allumfassendes Tutorial ist daher schwer denkbar.



Für "Code Schnipsel" hatte ich bereits im Forum mal einen Bereich eingerichtet:

viewforum.php?f=36

... oder auch hier für "Video Tutorials":

viewforum.php?f=37

... natürlich kann ich jederzeit weitere - andere, sinnvolle Bereiche hinzufügen.



... aber ja - ich wünschte hier würde mal jemand die Initiative zu irgendwelchen Tutorials ergreifen. Nur unser Volker hat bisher einige Anleitungen und Video-Tutorials erstellt.




OFF Topic:

nochmals danke für Deine Anleitungen für den Tausch von "Google Fonts" in lokale Verweise

Diese Anleitung von Dir ist am Ende sehr viel brauchbarer als die ursprüngliche von mir und auch die von Mobirise selbst, weil diese Methode tatsächliche sämtliche Schriftstärken berücksichtigt.

Ich habe soeben auch meine eigentliche Stammseite zu meiner Domain so umgestellt und ich denke das der Style nun wieder perfekt - eben wie vorher über "Google Fonts" - dargestellt wird.

https://www.mobirise-tutorials.com/

[Tommy Herrmann]

https://www.hautarztzentrum-gummersbach.de/

Da gibt es irgendwo unten 1 - 2 - 3 / Telefon besetzt / Facharzt gesucht ...
Die Nummern im Hintergrund sind nicht ordentlich positioniert

Moin,

ach ja - wegen der Position dieser "Card-Number" im Hintergrund.

Dafür scheint die class="card-number" verantwortlich zu sein.

In der CSS vom Block steht jetzt:

left: -68px;

Code: Alles auswählen

.card-number {
  display: flex;
  align-items: center;
  position: absolute;
  pointer-events: none;
  left: -68px;
  top: -53%;
  height: 276px;
  margin: 10px 0;
  z-index: -2;
  opacity: 0.3;
  font-size: 230px;
  color: transparent;
  background: linear-gradient(-90deg, #5cc2ed 0, #5d62ee 50%, #c298d3 100%);
  -webkit-background-clip: text;
}

Ich habe das mal im Screenshot auf left: 10%; gesetzt:

Wahrscheinlich solltest Du das dann zum Zentrieren bei dieser absoluten Position so ändern, damit das auch am Handy passt (oder es bleibt am Handy vielleicht auch besser so wie jetzt) - bitte ausprobieren - rein theoretisch:

Code: Alles auswählen

  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

... also eventuell dann auch in den Media-Queries.

Warum die Zahl "01" nun tiefer als die beiden anderen sitzt - keine Ahnung. Müsste man noch suchen. Ist eben mal wieder eine schlampige Programmierung von den Helden.

[stobi_de]

Äh ja, genau das Schlampige meinte ich ja.
Habe ich schon wieder horizontal und vertikal verwechselt?
Mein Kopf läuft gerade gar nicht rund!