Ergebnis 1 bis 10 von 10

Thema: Abstände im CSS

  1. #1
    Contao-Nutzer
    Registriert seit
    23.02.2016.
    Beiträge
    59

    Frage Abstände im CSS

    Hi


    ist es möglich Abstände zwischen Inline-Elementen über CSS so zu definieren, dass immer die vollständige Breite des Fenster ausgenutzt wird?

    Im Grunde möchte ich die bunten Punkte (siehe Bild) footer bsp.PNG nicht als gesamtes Bild hochladen, welches dann skaliert oder beschnitten wird, sondern dass sich die Abstände zwischen den Punkten (als einzelne Bilder) immer anhand der verfügbaren Breite des Fensters verändern - die Punkte dabei aber immer gleich Groß bleiben.

    Der erste Punkt links sollte natürlich (fast) am linken Bildschirmrand stehen und der letzte dabei (fast) ganz am rechten.



    HTML-Code:
    <div id="punkte_linie">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/1.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/2.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/3.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/4.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/5.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/6.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/7.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/8.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/9.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/10.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/11.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/12.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/13.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/14.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/15.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/16.png">
    		<img src="	files/papers werbeagentur website/content/grafiken/Header Punkte/17.png">
    </div>

    hier weiß ich allerdings nicht weiter. Auch über Google konnte ich nichts genaues finden (ziemlich wahrscheinlich, weil ich nicht weiß nach was ich da genau suchen soll... )

    Ist das eigentlich überhaupt möglich, was ich hier vorhabe?



    Nochmals vielen vielen lieben Dank für die nette Hilfe hier im Forum!!!


    LG

  2. #2
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.198
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Sollte eigentlich mit Blocksatz möglich sein. Also text-align: justify; für das umgebende Element setzen.

  3. #3
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Sollte mit Flexbox gehen. Allerdings kann ich mir nicht vorstellen, dass zu große Abstände zwischen den Punkten noch gut auussehen.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  4. #4
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    @tab auch eine Idee.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  5. #5
    Contao-Nutzer
    Registriert seit
    23.02.2016.
    Beiträge
    59

    Standard

    Zitat Zitat von tab Beitrag anzeigen
    Sollte eigentlich mit Blocksatz möglich sein. Also text-align: justify; für das umgebende Element setzen.
    ich habe der ID punkte_linie - text-align:justify; zugewiesen, allerdings sind nun alle Punkte am linken Bildschirmrand...



    @mlweb
    flexbox werd ich mir noch genauer ansehen!

  6. #6
    Contao-Nutzer
    Registriert seit
    06.10.2012.
    Beiträge
    213

    Standard

    Ansonsten müsste es für neuere Browser (> IE 8) mit calc und vw funktionieren.

  7. #7
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.198
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Llywellyn Beitrag anzeigen
    ich habe der ID punkte_linie - text-align:justify; zugewiesen, allerdings sind nun alle Punkte am linken Bildschirmrand...
    Ja, das klappt nur bei mehrzeiligem "Text". Kann man aber austricksen, siehe z.B. hier. Du hast zwar keine Navigation, aber das Problem ist im Wesentlichen das selbe.

  8. #8
    Contao-Nutzer
    Registriert seit
    23.02.2016.
    Beiträge
    59

    Daumen hoch

    Zitat Zitat von tab Beitrag anzeigen
    Ja, das klappt nur bei mehrzeiligem "Text". Kann man aber austricksen, siehe z.B. hier. Du hast zwar keine Navigation, aber das Problem ist im Wesentlichen das selbe.
    danke für den Link, damit hat es jetzt funktioniert!




    @mlweb
    Flexboxen sehen sehr interessant aus!

    Ich hätte justify-content: space-between probiert, allerdings hat das nicht funktioniert.
    Muss mich noch mehr damit auseinandersetzen, aber was ich bist jetzt gesehen habe, kann man sehr viel damit machen! Danke nochmals.

    Und ja, ab einer gewissen Breite sind die Punkte schon etwas klein... aber das ist ein anderes Problem




    Vielen Dank nochmals an alle für die Hilfe!

  9. #9
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Llywellyn Beitrag anzeigen

    Ich hätte justify-content: space-between probiert, allerdings hat das nicht funktioniert.
    Hab es gerade noch einmal selbst getestet. Funktioniert. Hast Du vielleicht die Browserprefixes vergessen.

    Für Dich könnte neben space-between auch space-around interessant sein.

    Hier noch mal mein Testcode
    HTML-Code:
    <div id="punkte_linie">
        <img src="images/punkt.png" width="25" height="25" alt=""/>
        <img src="images/punkt.png" width="25" height="25" alt=""/>
        <img src="images/punkt.png" width="25" height="25" alt=""/>
        <img src="images/punkt.png" width="25" height="25" alt=""/>
        <img src="images/punkt.png" width="25" height="25" alt=""/>
     </div>
    css - für space-between
    Code:
    #punkte_linie {
        margin: 100px;
        justify-content: space-between;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        -o-justify-content: space-between;
        justify-content: space-between;
        -ms-flex-pack: justify;
    }
    css - für space-arround
    Code:
    #punkte_linie_around {
        justify-content: space-between;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        box-pack: justify;
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        -ms-justify-content: space-around;
        -o-justify-content: space-around;
        justify-content: space-around;
        -ms-flex-pack: justify;
    }
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  10. #10
    Contao-Nutzer
    Registriert seit
    23.02.2016.
    Beiträge
    59

    Standard

    Zitat Zitat von mlweb Beitrag anzeigen
    Hab es gerade noch einmal selbst getestet. Funktioniert. Hast Du vielleicht die Browserprefixes vergessen.

    Für Dich könnte neben space-between auch space-around interessant sein.

    [/CODE]

    Ja genau. Ich hatte keine Browserprefixe eingegeben...


    Danke nochmals für den Tipp mit den Flexboxen. Ich werde jetzt die Rocksolid-Colums umbauen und mit Flexboxen formatieren!
    Die vordefinierten Margins - die für mich als Anfänger, sehr umständlich zum Aufheben sind - stören mich schon sehr...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •