selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

Grafik bricht immer um anstatt sich zu verkleinern

Autor: MPM_Modellhobby
Datum: 17.06.2014 15:37:52

Moinsen.

Wir haben gerade auf Responsive Design umgestellt:
http://www.modellhobby.de

Nun möchte ich aber dass, sobald sich die Bildschirmuflösung verkleinert, die 3 nebeneinander stehenden Grafiken auf der Startseite nicht umbrechen, sondern sich einfach nur verkleinern. wie die obere breite Grafik und der Slider.

Hat jemand eine Lösung für das Problem?



<style>
.d-_-b {max-width:100%; height:auto;}
.pad {padding:0px 0px 10px 0px;background:transparent;}
</style>                                                  

DIESE GRAFIK VERKLEINERT SICH:                            
<div class="pad d-_-b floatleft"><a href="{URL}article&ProdNr=0314221PrH">
<img class="d-_-b" src="@@@[email protected]@@/wochenangebot_20_06_14_deu.jpg"></a></div>

DIESE GRAFIKEN WERDEN UMGEBROCHEN, ANSTATT SICH ZU VERKLEINERN:
<div class="pad d-_-b floatleft"><a href="{URL}catalog&p=3256"><img class="d-_-b" src="@@@[email protected]@@/ka_motoren_deu_14.jpg"></a></div>
<div class="pad d-_-b floatleft"><a href="{URL}catalog&p=3261"><img class="d-_-b" src="@@@[email protected]@@/ka_akkus_deu_142.jpg"></a></div>      
<div class="pad d-_-b floatleft"><a href="{URL}shippingcosts"><img class="d-_-b" src="@@@[email protected]@@/ka_versand_deu_142.jpg"></a> </div>      


Re: Grafik bricht immer um anstatt sich zu verkleinern

Autor: Netinja
Datum: 18.06.2014 08:52:20

> Moinsen.
>
> Wir haben gerade auf Responsive Design
> umgestellt:
> http://www.modellhobby.de
>
> Nun möchte ich aber dass, sobald sich die
> Bildschirmuflösung verkleinert, die 3
> nebeneinander stehenden Grafiken auf der
> Startseite nicht umbrechen, sondern sich einfach
> nur verkleinern. wie die obere breite Grafik und
> der Slider.
>
> Hat jemand eine Lösung für das Problem?

Hi,
Du musst einfach nur den 3 kleinen Bildern eine Maximalbreite geben, wie du es auch bei dem grossen Bild gemacht hast.

LG
Netinja



Re: Grafik bricht immer um anstatt sich zu verkleinern

Autor: MPM_Modellhobby
Datum: 18.06.2014 09:39:30


> Hi,
> Du musst einfach nur den 3 kleinen Bildern eine
> Maximalbreite geben, wie du es auch bei dem
> grossen Bild gemacht hast.
>
> LG
> Netinja
>

Danke für die Antwort. Aber wenn ich den 3 Bildern eine maximale Breite zuweise, brechen die Grafiken trotzdem um anstatt sich zu verkleinern. Ich hätte gerne den Effekt, dass sie gar nicht umbrechen und sich nur verkleinern.

Gibt es vielleicht einen Befehl, der den Float-Umbruch verhindert?


Funktionieren FLEXBOXEN nicht im INTERNET EXPLORER?

Autor: MPM_Modellhobby
Datum: 19.06.2014 12:39:11

Ich habe mein Problem so eben selbst lösen können, in dem ich statt FLOATS FLEXBOXEN verwende, was auch super funktioniert - die Grafiken bleiben in einer Reihe.

Allerdings stehe ich jetzt vor dem nächsten Problem:
Im Firefox funktioniert das RESPONSIVE DESIGN wuderbar. Alles bleibt an Ort und Stelle und wird einfach nur verkleinert. Sobald ich die Seite allerdings mit dem IE oder OPERA öffne verkleinern sich die Grafiken nicht mehr bei veränderter Auflösung.

Kann es vielleicht daran liegen das "display: flex" nicht mit IE und OPERA kompatibel ist? Oder hat jemand ne Ahnung woran das liegen könnte?

Hier noch der Quelltext mit den 3 Grafiken:

<style>

#flexx {
display:flex;
flex-direction:row;
}

.bildli {max-width:100%; height:auto;}

</style>

<div id="flexx">                    
<div class="bildli"><a href="{URL}catalog&p=3256"><img class="bildli" src="@@@[email protected]@@/ka_motoren_deu_14.jpg"></a></img></div>

<div class="bildli"><a href="{URL}catalog&p=3261"><img class="bildli" src="@@@[email protected]@@/ka_akkus_deu_142.jpg"></a></img></div>
              
<div class="bildli"><a href="{URL}catalog&p=75"><img class="bildli" src="@@@[email protected]@@/ka_servos_deu_142.jpg"></a></img></div>
</div>


Re: Grafik bricht immer um anstatt sich zu verkleinern

Autor: T.Jung
Datum: 19.06.2014 16:44:11

> Danke für die Antwort. Aber wenn ich den 3
> Bildern eine maximale Breite zuweise, brechen die
> Grafiken trotzdem um anstatt sich zu verkleinern.
> Ich hätte gerne den Effekt, dass sie gar nicht
> umbrechen und sich nur verkleinern.

Ich habe mal schnell ein kleines Beispiel zusammengekloppt.
Für Erklärungen habe ich leider keine Zeit (muss jetzt weg), aber ich hoffe, ein Blick in den Quelltext hilft Dir weiter:
http://www.tobiasjung.net/storage/bsp-skalierung/

HTH,
Tobias Jung



[OT] Re: Grafik bricht immer um anstatt sich zu verkleinern

Autor: Freddy
Datum: 19.06.2014 17:32:33

> Ich habe mal schnell ein kleines Beispiel
> zusammengekloppt.

Nein, wie süß. ;-))


Gruß,
Freddy



Re: Funktionieren FLEXBOXEN nicht im INTERNET EXPLORER?

Autor: Freddy
Datum: 19.06.2014 17:35:22

Hallo,

> Kann es vielleicht daran liegen das "display:
> flex" nicht mit IE und OPERA kompatibel ist?

Bei solchen Fragen schau ich zuerst bei "Can I use?" nach:

http://caniuse.com/#search=flex


Gruß,
Freddy



Re: [OT] Re: Grafik bricht immer um anstatt sich zu verkleinern

Autor: T.Jung
Datum: 20.06.2014 16:29:01

> > Ich habe mal schnell ein kleines Beispiel
> > zusammengekloppt.
>
> Nein, wie süß. ;-))

Naja, ich verwende (schon aus urheberrechtlichen Gründen) gerne eigene Bilder für solche Demos. Und viel mehr als Katzen- und Urlaubsfotos habe ich nun mal nicht zu bieten. ;-)

Gruß,
Tobias



Re: [OT] Re: Grafik bricht immer um anstatt sich zu verkleinern

Autor: Freddy
Datum: 20.06.2014 16:47:21

> > > Ich habe mal schnell ein kleines Beispiel
> > > zusammengekloppt.
> >
> > Nein, wie süß. ;-))

> Naja, ich verwende (schon aus urheberrechtlichen
> Gründen) gerne eigene Bilder für solche Demos.

Mach ich genauso.


> Und viel mehr als Katzen- und Urlaubsfotos habe
> ich nun mal nicht zu bieten. ;-)

Da hab ich _deutlich_ mehr:
https://www.flickr.com/photos/sve-fre

;-)


Gruß,
Freddy