snowboarder1994
Goto Top

CSS Webseite anpassen

Hallo,

versuche gerade dieses Bild auf der Webseite http://goo.gl/A2F6zH

so wie auf dem Screen zu sehen ist auszurichten, aber irgendwie bekomme ich das nicht mittig.

8a6e82740649b420faef5272bda8b3f9


Mfg. Markus

Content-Key: 280378

Url: https://administrator.de/contentid/280378

Ausgedruckt am: 28.03.2024 um 16:03 Uhr

Mitglied: Snowboarder1994
Snowboarder1994 16.08.2015 um 17:59:02 Uhr
Goto Top
Vergessen dazu zu schreiben, es handelt sich hierbei um einen Slider.
Mitglied: Arano
Arano 16.08.2015 um 19:00:02 Uhr
Goto Top
Hi...

...ich klicke __niemals__ auf gekürzte Links wenn ich den Poster nicht kenne !
Wenn ich nicht sehe wo ich hinlaufe, gehe ich nicht !
Warum überhaupt verwendest du diese ? Hast du was zu verbergen ? Wozu einen dritten mit einbinden wenn gar nicht nötig ?

(Im Internet gibt es nichts umsonst, alles KOSTET - und wenn es informationen sind mit denen dann Geld verdient wird.... NICHT MIT MIR)

Außerdem möchtest du doch unsere Hilfe haben, also "rede nicht drumherum" sondern sprich es offen und ehrlich aus !
Schließlich willst du ja auch keine Antwort ala:
- Goggle doch mal da findest du es schon
- Schau mal in dieses und jene Forum da wurde das schon mal...
(- oder so etwas wie jetzt von mir face-wink )


~Arano
Mitglied: 122990
122990 16.08.2015 aktualisiert um 19:03:35 Uhr
Goto Top
Moin,
naja Bildbearbeitung anschmeißen und das Bild erst mal in die richtige Auflösung anpassen (max. 980px Breite). Dann passt das auch face-wink
Ein Bild mit 2.352px × 1.568px für einen Slider zu nutzen ist ich sach mal sub-sub-sub optimal face-big-smile

Gruß grexit
Mitglied: Snowboarder1994
Snowboarder1994 16.08.2015 um 19:08:32 Uhr
Goto Top
Hallo,

danke
kann ich dieses Bild auch eine Breite geben, falls das mal größer sein sollte als 980px?


http://schuetzenverein-todtenweis.de/webdesign/ ist der link
Mitglied: 122990
122990 16.08.2015 aktualisiert um 19:59:14 Uhr
Goto Top
ann ich dieses Bild auch eine Breite geben, falls das mal größer sein sollte als 980px?
??
Mach es auf die Größe des Sliders feddich, anders wird das für dich ziemlich schwer anzupassen sein, denn der ist für Mobile Devices etc. ebenfalls angepasst (jQuery OneByOne Slider), da müsstest du schon ziemlich viele Änderungen vornehmen (schon wegen der Animationen). Also mach das Bild auf seine finale Größe, fertig.

Außerdem scheint das Plugin veraltet zu sein denn im Firefox sieht das ziemlich mies aus. Da sind die hier schon besser: http://codecanyon.net/item/jquery-responsive-onebyone-slider-plugin/ful ...
Mitglied: Arano
Arano 16.08.2015 um 19:40:46 Uhr
Goto Top
Hi,

2.352x1.568 ist wirklich etwas groß, da muss natürlich auch viel heruntergeladen werden und dann ggf. kleinscaliert werden. Gerade auf kleinen Geräte doof !
Es gibt aber keinen Grund sie größer zu machen, denn so schnell wirst du die Seite wohl nicht überarbeiten, und wenn doch, dann musst du die drei aktuellen Bilder eben austauschen - ist dann halt so. aber die werde ja sicher eh regelmäßig durch aktuelle ersetzt

Was passiert denn, wenn du in der CSS-Klasse ".background-image" eine Breitenangabe angibst z.B. 980px !? Aktuell steht 100% drin was wohl der Grund sein könnte das es auch genau so angezeigt wird.
(layout.css@39: width:100%)


~Arano
Mitglied: Arano
Arano 16.08.2015 um 20:00:41 Uhr
Goto Top
Hi,


denn der ist für Mobile Devices etc. ebenfalls angepasst
Na dann wäre mein Vorschlag nicht so gut !
Denn dadurch würde das Bild bzw. der Container IMMEr diese Breite haben und auf mobilen Geräten viel zu groß dargestellt werden.

Vermutlich musst du dann einen Container darüber in seiner Breite beschränken.
Jetzt sehe ich aber gerade das es da nicht viel gibt. darüber ist eigentlich nur noch ".slug-pattern" und dann schon ".page-wrapper".
Dann geht es vermutlich nur über ".slug-pattern" denn hier ist schon eine feste Höhe von 610px definiert, da wäre die Breitenangaben dann am passenden Ort.

Dennoch gibt es dann wahrscheinlich Probleme mit kleinen Gräten, hier müsste mann dann also wieder über ein CSS-Media-Query weitere Größen definieren damit es auch auf den Kleinen entsprechend angezeigt wird.

Das jQuery-Dingen kenne ich kein Stück. Wie verhält der sich den von Haus aus auf kleinen Geräten ?
Vielleicht passt der sich ja automatisch der Bildschirmbreite an (steht ja vieles auf 100%-Breite) und ist so Programmiert, das er IMMER die gesamte Anzeigebreite verwendet !?


~Arano
Mitglied: 122990
122990 16.08.2015 aktualisiert um 20:09:00 Uhr
Goto Top
Sein verwendetes jQuery OneByOne Plugin scheint aber zusätzlich noch einen Knick zu haben denn im Firefox wird das overflow:hidden überhaupt nicht beachtet so dass das Bild "überquellt". Dagegen funktioniert das originale Plugin einwandfrei, wie hier gezeigt:
http://codecanyon.net/item/jquery-responsive-onebyone-slider-plugin/ful ...

Er sollte sein Bild halt so in der Größe anpassen das das was er in der Mitte haben will entweder auch in der MItte des Bildes ist, nötigenfalls mit Bildwiederholung durch Spiegelung, wenn's nicht ausreicht. Schon die Ladezeit des Bildes ist ja unterirdisch ... würde ich so also nie und nimmer weiterverfolgen.
Mitglied: Snowboarder1994
Snowboarder1994 16.08.2015 um 20:18:09 Uhr
Goto Top
Ok Super danke,

dann versuche ich mal den Weg mit der Bildanpassung.
Wie finde ich denn die genaue Breite und die genaue höhe raus?
Mitglied: Snowboarder1994
Snowboarder1994 16.08.2015 um 21:38:58 Uhr
Goto Top
Irgendwie komme ich so nicht weiter.

Jetzt habe ich unten unter dem Menu "Neuigkeiten" zwei Bilder eingefügt, wie mach ich das nun das die die gleiche Höhe haben?
Mitglied: 122990
122990 16.08.2015 aktualisiert um 21:50:19 Uhr
Goto Top
Schon mal was von Bildbearbeitung und "Cropping" (Beschneidung) gehört ? Wohl nicht. Denke da ist wohl erst mal ein Grundkurs Webdesign fällig.
Mitglied: d4shoerncheN
d4shoerncheN 17.08.2015 um 07:49:05 Uhr
Goto Top
Moin,

ich hab mir jetzt nicht alles angeguckt - aber lös es doch einfach so:

.meineKlasse {
height: XXXpx;
width: 100%;
max-width: XXXXpx;
}

Somit kannst du deinen Bilder eine eindeutige Höhe geben und eine Maximalbreite verpassen, die sie bekommen sollen.

Das gleiche machst du für die mobile Darstellung über die Media Queries. Hier könnte es eventuell schon ausreichen:

.meineKlasse {
max-height: XXXpx;
width: 100%;
}

Gruß
Toni
Mitglied: Snowboarder1994
Snowboarder1994 20.08.2015 um 23:28:49 Uhr
Goto Top
Danke versuche ich.
Mitglied: DirkEinstedt
DirkEinstedt 10.08.2016 um 18:36:48 Uhr
Goto Top
Hi Snowboarder1994,

ich hätte das ganze mit CSS gelöst. Dafür gibt es natürlich mehrere Ansätze. Wenn Du das Bild beispielsweise als Hintergrund haben
möchtest und darüber noch einen Text, bietet sich an, das ganze per "background"-Eigenschaft einzubinden.

div.bg-image
  {
  display: block;
  width: 100%;
  height: 300px; /*  Feste Größe */
  
  background-image: url(DEIN_BILD_PFAD.jpg);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  }

Diese Version hat allerdings einen Nachteil. Die Höhe muss festgesetzt sein. Ein weitere Ansatz währe über das img-Element:

<img src="DEIN_BILD_PFAD.jpg" style="width: 100%;" /> 

Der Vorteil dabei wäre, dass Du 100% Breite erreichst und sich die Höhe der Breite anpasst. Die Proportionen sind dann die gleichen
und dein Bild wirkt nicht verzerrt. Wenn Du dich für die letzte Version entscheidest, könntest Du mit einem absoluten Element ebenfalls
Texte und Buttons überlagern.

Hier noch ein paar Seiten, die Dir CSS ein wenig näher bringen:

https://www.coding-lab.de/tutorials/css/
https://www.coding-lab.de/tutorials/css/position-und-z-index/ (Für dein Thema interessant)

http://www.w3schools.com/css/
http://www.w3schools.com/cssref/pr_class_position.asp (Für dein Thema interessant)


https://developer.mozilla.org/de/docs/Web/CSS
https://developer.mozilla.org/de/docs/Web/CSS/position (Für dein Thema interessant)