Abstände im CSS

[Llywellyn]

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.

<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

[tab]

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

[mlweb]

Sollte mit Flexbox gehen. Allerdings kann ich mir nicht vorstellen, dass zu große Abstände zwischen den Punkten noch gut auussehen.

[mlweb]

@tab auch eine Idee.

[Llywellyn]

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!

[pju]

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

[tab]

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.

[Llywellyn]

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!

[mlweb]

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

<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

#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

#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;
}

[Llywellyn]

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...