[gelöst] DIV-Container schrittweise skalieren

[fabio]

Hi

gibt es eine Möglichkeit, ein DIV-Container nicht kontinuierlich mit dem Browserfenster zu vergrössern, sondern nur in sagen wir mal 100 Pixel Schritten?

Also wenn das Browserfenster 842 px breit ist, wäre der DIV 800 px, hätte das Fenster noch 488 px, wäre der DIV nurnoch 400 px.

[AmicaNoctis]

Hallo,

mal abgesehen von "Warum willst du das machen?" geht das mit JavaScript.

Gruß,

Amica

PS: Warum willst du das machen?

[fabio]

Dass es mir JavaScript geht ist mir klar, damit könnte man ziemlich einfach die Breite auslesen, auf 100 pixel runten und aufs DIV anwenden.
Ich wollte nur schauen ob das auch irgendwie per CSS geht, da ich wenn möglich auf JavaScript verzichten wollte.

Das "warum" zeig ich dir gerne.
http://img.skitch.com/20091003-cbfrq...md8aat6khx.jpg
In der Katalogansicht werden die Artikel so in Boxen aufgeteilt (links Foto, rechts kurzer Text) welche 300 Pixel breit sind (100px hab ich oben nur wegen der Einfachheit genommen).

Desto grösser das Browserfenster wird, desto mehr solche "300px-Boxen" passen natürlich rein, damit der Platz besser genutzt werden kann. Logisch eigentlich
Jetzt hat es ja in den unteren beiden Fenster (link oben) einen Balken oben und unten, wo das Logo, Seitenzahl, etc ist.
Schön wäre es, wenn das Logo dann genau mit dem hintersten Produkt bündig wäre, und nicht genau (im unglücklichsten Falle) 299 Pixel überhängt.

Das ganze ist nicht so super tragisch, ich dachte nur, wenn es eine saubere Methode für das Vorhaben gäbe könnte ich es nutzen.
Wenn es aber ne riesen Bastelsache wäre würde ich es lieber lassen und halt die 299 überhängende Pixel in Kauf nehmen.

[Kropff]

Ich nehme mal an, du arbeitest hier mit float: left. Warum drehst du das nicht einfach um und arbeitest mit float: right? Dann sollte der gewünschte Effekt eintreten.

Peter

[fabio]

Ja eben, weil wenn mit float:right gearbeitet wird, der abstand nach rechts ja immer gleich ist.
Der ist ja aber im Idealfall ja nicht immer gleich, sondern mehr dem Inhalt angepasst

[Kropff]

Ja eben, weil wenn mit float:right gearbeitet wird, der abstand nach rechts ja immer gleich ist.
Der ist ja aber im Idealfall ja nicht immer gleich, sondern mehr dem Inhalt angepasst

Bei einem float: right platscht der Inhalt recht an das umgebende Element an. Wenn dies dann genau so ausgerichtet wird, wie zum Beispiel das übergeordnete Element des "Logo" und Zahlen-Containers, dann sollte das passen. Btw: gibt es ein Online-Beispiel? Ansonsten poste mal den relevanten(!) Code. Nicht den kompletten!

Peter

[AmicaNoctis]

Hallo Fabio,

ich hab grad etwas gegrübelt, ob es mit lustigen float-Tricks und absoluter/relativer Positionierung klappen könnte, aber bis jetzt sieht das nicht nach einem funktionierenden Ansatz aus.

Du wirst wohl um JS nicht drumherum kommen, wenn du das erreichen möchtest.

Gruß,

Amica

[Kropff]

Du wirst wohl um JS nicht drumherum kommen, wenn du das erreichen möchtest.

Da bin ich mir noch nicht so sicher. Ich glaube, dass geht auch mit CSS. Aber ohne weitere Infos .

Peter

[AmicaNoctis]

@Kropff: Ok, hast ja recht...

Hab was hinbekommen, was aber aus Sicht von Layout/Content Separation trotzdem hirnrissig bleibt und immer noch nach JS schreit.

[fabio]

@Kropff
Ich habe beim lesen (war unterwegs hatte nicht gross Zeit zu überlegen vor'm antworten) irgendwie das float mit align verwechselt.
Es besteht bis jetzt noch kein Stück Code. Das sind alles nur Photoshopmontagen, halt mit Browserfenster und so dass es "echt" ausschaut, aber Code existiert noch keinen.
Ich bin momentan noch am abklären, welche Ideen die wir beim Entwurf hatten auch realisierbar sind.

@AmicaNoctis
Danke für dein Bemühen, aber der HTML Code schaut ja nicht gerade übersichtlich aus, funktioniert zwar aber ist ja auch nicht wirklich semantisch.

Ich glaube ich werde das einfacher lösen müssen, und es einfach gleichmässig skalieren. Ich kann dann immernoch mittels Javascript (falls vorhanden) den Container anpassen. Das mit JavaScript zu lösen ist ja nicht wirklich schwer und das werd ich dann schon machen können.

vielen Dank euch beiden für die Zeit und's Antworten

[AmicaNoctis]

Guten Morgen,

der HTML Code schaut ja nicht gerade übersichtlich aus, funktioniert zwar aber ist ja auch nicht wirklich semantisch.

Sag ich ja:

aus Sicht von Layout/Content Separation trotzdem hirnrissig

Ich wollte nur versuchen, Kropff zu beweisen, dass es nicht ohne JS geht - nun ja, ich bin "gescheitert"

Gruß,

Amica