Dieses Projekt wird in seiner aktuellen Form die Tore bald schließen.
Hier mehr erfahren: Unsere Zukunft innerhalb des WoltLab-Ökosystems
  • Hallo Leute,


    Ich bin bei mir auf ein Problem gestoßen und ich weiß einfach nicht wie ich das Problem lösen kann :-/


    Ich möchte auf meiner seite drei Bilder Nebeneinander einfügen und habe diesen CSS code in verwendung:


    und ich benutze diesen HTML code um die Bilder einzufügen:


    Aber leider werden mir die Bilder nicht Nebeneinader angezeigt :-/
    Bei zwei Bildern nebeneinader hat es wunderbar funktioniert aber wenn ich mehr als zwei haben möchte passiert immer das:


    Das Mittler Bild rückt viel zu weit nach rechts und das rechte Bild wandert einfach eine etasche tiefer :-/
    Hier ein Link zu dieser Seite: https://f1-dtm-liga.com/dtm-hotlaps-seite/
    Ganz unten sind dann die drei Bilder zu sehen.


    Ich weiß einfach noch nicht was ich da falsch mache :(
    Vielen Dank schon mal für die Hilfe :)


    Lg Stefan

    • Offizieller Beitrag

    Ich würde dir als erstes empfehlen, die Benennung deiner Klassen zu überdenken. „Mittellinks“ ist nichts, bei dem man direkt sagen kann, was das ist. Ist es links? Ist es mittig? Klassen sollten immer so eindeutig benannt werden wie möglich.


    Davon abgesehen würde ich heutzutage float nur noch so nutzen, wie es ursprünglich gedacht war: Um Text zu umfließen. Alles andere ist mit Techniken wie Flexboxen oder Grids wesentlich eleganter.


    HTML:

    CSS:

    CSS
    .flexbox {
    	display: flex;
    	text-align: center;
    }
  • Alles klar ja ich konnte mich nur mit dem behelfen was ich so im Netz finden konnte bezüglich Mehrspaltigen Seiten und CSS.


    Bezüglich der klassen, die benenne ich immer so das ich immer genau weiß was damit gemeint ist :) aber ich bin auch Österreicher wir ticken ein wenig anderes :D aber ich werde in zukunft darauf achten bei meiner benennung :)


    Vielen Dank auf jedenfall das hat super funktioniert nur eines ist mir noch aufgefallen :)
    Das Linke Bild ist wunderbar in seiner Box zentriert und das Mittlere sieht eigentlich auch ganz gut aus :D nur das Rechte Bild ist mehr auf der Rechten seite als Mittig :-/


    Kann man das noch Mittig machen ?


    Lg Stefan

    • Offizieller Beitrag

    Da du hier eine Unterscheidung brauchst, würde ich der Flexbox noch eine weitere Klasse geben und diese dann per SCSS ansprechen:
    HTML:

    HTML
    <div class="flexbox flexbox-two-centered">
    	<div class="left">
    		<img class="startbild12" src="https://f1-dtm-liga.com/images/ligagruppe/dtm-home.png" title="DTM Liga" alt="DTM Liga"></div>
    	<div class="right">
    		<img class="startbild12" src="https://f1-dtm-liga.com/images/ligagruppe/f1-home.png" title="F1 Liga" alt="F1 Liga"></div>
    </div>

    SCSS:

  • Hallo Ich mal wieder :D


    Ich hab noch eine Frage dazu :D
    Ich möchte nun auf der Seite wo ich die Zwei bilder zentriert habe nun auch ein drittes Bild hinzufügen und diese auch zentrieren.


    Ich habe es versucht nur mit der flexbox zu arbeiten so wie für die drei bilder oben aber da werden mir leider alle drei bilder links angezeigt.


    Was müsste ich den für einen Neuen CSS Code dafür hinzufügen ?


    Vielen Dank schon mal für die Hilfe :D


    Lg Stefan

  • Ich benutze zur Zeit diesen HTML Code für die drei Bilder.

    also ohne diesen zusatz flexbox-two-centered da dieser code ja für zwei bilder ist oder ?
    aber ja der wert ist gleich wie hier eingestellt. (flex: 1 0 49%;) fals du den wert meintest :D


    Lg Stefan

  • Nun ja ich hatte das versucht zu machen

    aber das sah dann so aus:


    Danach hatte ich versucht es nur mit der Flexbox so wie der erste Code von dir aber da kam lider auch kein erfolg und deswegen wollte ich mal fragen :D


    Lg Stefan