Content ausrichten in DIV

vnv-urbex · 31. Oktober 2021

Hallo Leute,

ich möchte gern die Portfolio Gallery von Huge-IT deinstallieren und die Seite mit Bordmitteln gestalten. Ich bin jetzt relativ weit gekommen und hänge gerade an der Ausrichtung zweier Objekte.

Im Editor habe ich folgenden Zeilen angelegt und die custom.css um die Klassen "dokumentation und weitere-videos" erweitert. Jetzt komme ich bei der Ausrichtung der unteren 2 Videos nicht weiter. Ich möchte sie gern an dem oberen Video ausrichten. Also das linke Video 10px von links und das Rechte 10px von rechts. Wenn ich das problem richtig eingrenze liegt es an den Klassen der Bootstrap, dort findet sich bereits eine Ausrichtung.

Wie kann ich jetzt meine gewünschte Ausrichtung umsetzten? Die Klasse "weitere-videos" ist leer, weil nichts funktionierte. Hier noch der Link zur Seite.

Code

  <div class="dokumentation">
    <div>
        <h2><span style="color: #fe6700;">Schieferbergbau in der Eifel. Teil 1-3</span></h2>
    </div>
    <div>
        <hr />
    </div>
    <h3>Teil 1: Abbau unter Tage</h3>
    <div>Alois Döring, Gabriel Simons Bergleute auf der Grube Margareta bei Mayen lösen mit Schwarzpulver die Schieferblöcke aus der Wand, die mit Pickel, Keil und Handsäge geköpft werden. Diese älteren handwerklichen Verfahren der Schiefergewinnung sind heute abgelöst durch den Abbau mit der Seilsäge, die gleichmäßige Blöcke aus der Schieferwand herausschneidet.&nbsp;</div>
    <h3>Teil 2: Spalten und Zurichten</h3>
    <div>&nbsp;</div>
    <h3>Teil 3: Problemlösung Förderschacht Mayen 1983</h3>
    <div>https://www.youtube.com/watch?v=4DfqNzoFMsQ</div>
    <div class="row">
        <div class="col-md-6 weitere-videos">https://www.youtube.com/watch?v=D5upSpNGOsM</div>
        <div class="col-md-6">https://www.youtube.com/watch?v=njg8XqJ-T9k</div>
    </div>
</div>

Alles anzeigen

Liebe Grüße und vielen Dank

Re:Later · 31. Oktober 2021

Zitat von vnv-urbex

Wenn ich das problem richtig eingrenze liegt es an den Klassen der Bootstrap, dort findet sich bereits eine Ausrichtung.

Das Problem scheint eher die template.css, die die Klasse row überschreibt. Die hat halt in Bootstrap 3 negative Margins (-15px), was dann durch positive paddings der col-Klassen wieder ausgeglichen wird. Das template.css erzwingt aber -30 bzw. -20px. Eigentlich No-Go, weil das sehr relevante Bootstrap-3-Klassen sind, die man so direkt nicht überschreiben sollte.

Vielleicht mit

Code

.dokumentation .row
{
 margin-left: -15px;
}

oder ähnlich.

vnv-urbex · 31. Oktober 2021

Zitat von Re:Later

Das template.css erzwingt aber -30 bzw. -20px. Eigentlich No-Go, weil das sehr relevante Bootstrap-3-Klassen sind, die man so direkt nicht überschreiben sollte.

Ah ok, sollte ich dann erst mal dieses Problem lösen? Kann es sein, dass ich da mal was falsch gemacht habe? Ich schau mir gerade einiges zu Bootstrap an, hatte mich bisher noch nie damit beschäftigt.

vnv-urbex · 31. Oktober 2021

Das ist dann sicherlich auch der Grund dafür, dass ich zwischen den beiden oberen Feldern keinen Abstand bekomme. Immer wenn ich dort einen Abstand einfüge, rutscht die rechte Spalte nach unten.

Re:Later · 31. Oktober 2021

Zitat von vnv-urbex

Kann es sein, dass ich da mal was falsch gemacht habe?

Das weiß ich nicht, ob du die template.css diesbezüglich geändert hast. Kann auch sein, dass das der Template-Ersteller war.

Aktuellere Bootstrap-Versionen lösen das mittlerweile ingesamt eleganter, aber das wäre jetzt schon sehr sehr sehr großer Aufwand das Template auf z.B. Bootstrap 5 umzustellen. Quasi ein Neuanfang.

Generell gibt es in Bootstrap Basis-Klassen, die man so direkt nicht ändern sollte wie in obigem Beispiel zu sehen. Sondern dann eher so wie in meinem Post zu sehen. Oder man arbeitet mit SCSS, aber das ist dann noch mehr

Zitat

sehr sehr sehr großer Aufwand

vnv-urbex · 1. November 2021

Zitat von Re:Later

Vielleicht mit
Code .dokumentation .row { margin-left: -15px; }
oder ähnlich.

Guten Morgen, damit funktioniert es schon mal. Dann habe ich noch geschaut, ob ich etwas in der template.css oder bootstrap.css geändert habe und die originalen Dateien aus dem Template drüber kopiert. Dabei hat sich nichts geändert, normal mach ich auch alle Anpassungen in der custom.css.

Ein riesen Aufwand lohnt jetzt nicht mehr, ich will ja die Huge-IT loswerden, weil ich dann auf Joomla 4 umsteigen möchte. Ob das Template dann bestehen bleibt, ist ebenfalls noch unsicher. Vielleicht steige ich in dem Zug auf ein neues Template um.

Zitat von vnv-urbex

Das ist dann sicherlich auch der Grund dafür, dass ich zwischen den beiden oberen Feldern keinen Abstand bekomme. Immer wenn ich dort einen Abstand einfüge, rutscht die rechte Spalte nach unten.

Kannst du mir noch sagen, wie ich den Abstand zwischen den beiden Spalten umsetzten kann?

Liebe Grüße

Re:Later · 1. November 2021

In Bootstrap 3 gibt es die Klassen-Kombination

Code

<div class="row row-no-gutters">

Die entfernt alle Einrückungen von row und den Kind-col-Klassen. Bin nicht ganz sicher, ob du dann mit padding-left:15px auf den linken Video-col. und padding-right:15px; auf den rechten dein Ziel erreichst.

Meinen obigen Code oben musst dann aber wieder rausnehmen.

Oder gleich versuchen, inklusive obigem Code, das padding-right des linken col auf 0 setzen.

Und das padding-left des rechten auf 0.

vnv-urbex · 1. November 2021

Puh, also ich habe jetzt mal deine Zeile von oben entfernt. Dann habe ich die -30px und -20px in der template.css entfernt welche das Bootstrap überschrieben haben. Jetzt passen die Abstände im Dreierblock schon mal. Aber oben im zweier stellt sich einfach kein Erfolg ein.