Bootstrap 4

[k_creativ_design]

Hallo liebe Leute hier bei PSD-Tutorial,

wer kann mir bitte weiter helfen?? Ich habe beim Dreamwaever über Bootstrap-Komponenten ein Bild über "Responsives Image: Default" eingefügt. Nun möchte ich das mein Bild mittig sitzt. Jetzt mein Problem hier greift der Begriff: "center-block" nicht mehr wie in der Version zu vor.

Was kann ich jetzt tun, damit mein Bild in der Mitte sitzt???

Ganz liebe Grüße
Kryssi

 

[Myhar]

Probiere es mit der Klasse mx-auto

 

[k_creativ_design]

Myhar vielen lieben Dank. Es hat funktioniert. Kennst du dich gut in Bootstrap aus??

 

[Myhar]

Kennst du dich gut in Bootstrap aus??

Ja. Aber das tun hier viele. Warum?

 

[k_creativ_design]

Ja. Aber das tun hier viele. Warum?

Weil ich da gerne mal noch eine Frage hätte. Ich habe auf unserer Webseite ein "Carousell" die Bilder die dort ablaufen sind alle auf die große Größe angelegt. Wenn ich mir unsere Webseite auf einen sehr großen Bildschirm anschaue, dann habe ich immer beim "Carousell" eine grauen rand.

Wie kann ich das anders machen?

Hier mal unsere Seite: www.wgvschleiz.de

 

[Myhar]

sind alle auf die große Größe angelegt.

Es gibt nicht die eine große Größe. Die größte Größe für die deine Bilder ausgelegt sind ist 1800px in der Breite.
Auf allen Geräten, die größer sind, wird dann der im CSS definierte Hintergrund (bei dir ein Verlauf von grau nach weiß) angezeigt. Definiert wird dieser Hintergrund bei den ".carousel-control" Elementen, einmal für die linke und einmal für die rechte Seite.
Hier wäre es zusätzlich noch hilfreich (unabhängig von diesem Problem), ein Icon wie einen Pfeil einzubauen damit diese Links auch wirklich sichtbar werden. Oder eben diese Elemente komplett zu entfernen falls diese nicht benötigt werden.

 

[k_creativ_design]

Hallo Myhar, danke für deine Antwort, leider habe ich sie nicht richtig verstanden. Ich weiß jetzt immer noch nicht wie ich das grau weg bekommen, damit das Bild, die Bilder über die gesamte breite laufen. Die Bilder haben alle eine Breite von 1800px.

Wer könnte mir hier noch weiter helfen?

 

[Myhar]

Was genau hast du denn nicht verstanden? Du musst lediglich die definition vom Hintergrund vom Element mit der Klasse carousel-control entfernen. Bzw. durch einen anderen ersetzen.
Die Bilder laufen nicht über die gesamte Breite, weil sie auf 1800px beschränkt sind. Wenn du sie größer haben willst werden sie unscharf, das willst du doch auch nicht, oder?

 

[k_creativ_design]

Sorry ich verstehe es einfach nicht. Gibt es kein Beispiel dafür??

 

[Myhar]

Das sind Grundlagen von CSS...

.carousel-control {background-color: pink}

Was hast du denn probiert?

 

[k_creativ_design]

Ich habe nix probiert, weil ich es im Moment leider nicht verstehe. Ich möchte das in der Diashow die Bilder bei einem Großen Bildschirm genauso über die gesamte fläsche gehen, wie z.B. auf einem Tablett. Das man keinen grauen Hintergrund mehr sieht wie es im Moment ist. Die Bilder sind alle groß angelegt so das ich keinen Verlust habe.

 

[Chris_EDI]

Die Bilder haben alle eine Breite von 1800px. Wenn du sie auf allen Bildschirmen über die gesamte Breite darstellen willst, müsstest du sie auf 100% breite stellen. Ob das allerdings dann gut aussieht, bezweifle ich sehr.
Finde, so wie es jetzt ist, schaut es gut aus, mit der Hintergrundfarbe kannst du ja noch experimentieren.

 

[k_creativ_design]

Chris_EDI danke für deine Antwort. Wie machen das den andere bei Ihnen ist es doch auch auf die gesamte breite vom Bildschirm. Alle OnePage Seiten sie eine Slideshow haben sind über die gesamte breite vom Bildschirm. Deswegen irritiert mich das alles so sehr.

 

[Chris_EDI]

Wie machen das den andere

Kann ich dir leider nicht sagen, habe noch keine OnePage gemacht.

 

[Myhar]

@k_creativ_design bitte stelle deine Fragen auch so, dass gleich ersichtlich ist, was du möchtest. Ich habe dir gesagt wie du den grauen Rand wegbekommst, du möchtest aber, dass die Bilder auf die volle Breite dargestellt werden, unabhängig von der Auflösung.
Hierfür kannst du folgendes probieren:

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
object-fit: cover;
width: 100%;
height: 100%
}

Übrigens würde ich an deiner Stelle Slide Nummer 3 überdenken und keine Websites für Kunden anbieten wenn ihr schon an solchen Aufgaben scheitert

 

[k_creativ_design]

Danke für deine Antwort. Sorry das ich zwei Jahre raus war Webseiten zu programmieren und mich in die neuen Sachen erst mal reinfitzen muss. Traurig wenn man hier keine Fragen stellen kann, ich dachete dafür ist das Forum da, das man sich austauscht und gegenseitig hilft. War das letzte mal.

 

[Chris_EDI]

zwei Jahre raus war Webseiten zu programmieren

Verdammt lange Zeit, da hast ganz schön was aufzuholen. Das meine ich jetzt weder negativ noch sarkastisch noch böse. .

 

[k_creativ_design]

Ja ich weiß das ich vieles Aufzuholen habe, deswegen knie ich mich da ja auch rein, und stelle Frage wenn ich nicht weiter komme. Und wäre froh Hilfe zu bekommen.

 

[Myhar]

Du hast doch Hilfe bekommen? Oder passt etwas daran nicht?

 

[k_creativ_design]

Sorry das ich mich schon wieder melde. Warum sitzen meine Bilder bei einem großen Monitor nicht in der mitte obwohl ich die Angabe ".mx-auto" angegeben habe??
Was auch nicht funktioniert hat ist, das die Slideshow wie auf einer One-Page Seite aussieht? Was mache ich den falsch??