Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
CSS float
6 views
Skip to first unread message
Helmut Richter
May 9, 2012, 8:23:30 AM5/9/12
to
Mein Problem: Ich habe eine Anzahl (vielleicht 15) Blockelemente, deren
Größe durch den Inhalt definiert ist und die dann kleiner sind als die
typischen Fenster auf den intendierten Ausgabegeräten (falls nicht wie bei
Smartphones, ist die Frage eh irrelevant). Weil es Blockelemente sind,
werden sie normalerweise untereinander angeordnet. Das ist eine
Platzverschwendung, die zu unnötigem Scrollen führt. Auf die Reihenfolge
kommt es nur ungefähr an; der Zusammenhang ist locker, was man optisch
durch einen hinreichend breiten Rand ausdrücken kann.
Hier bietet sich float:left an (wenigstens als Versuch, wenns nichts
taugt, versuche ich was anderes). Ich hab versucht, mich schlau zu machen
und bin auf den Effekt gestoßen, dass Blöcke von rechts an die vorhandenen
geschoben werden und an längeren hängenbleiben können. Beispiel:
http://css-technik.de/css-examples/219_9/beispiele/thumbnails2.html
bei verschiedenen Fenstergrößen versuchen.
Einen Ausweg sehe ich nicht. Man kann natürlich mit clear die Optik
geradeziehen, aber dazu müsste man ja vorher wissen, wann das nötig ist,
was wiederum von der Fenstergröße abhängt, über die ich als Autor nichts
weiß. Mir ist auch klar, dass es nicht ganz einfach ist, zu definieren,
was genau passieren soll. Der Browser soll ja nicht Puzzle spielen und die
nachfolgenden Blöcke *irgendwo* einordnen, obwohl *mir* das durchaus recht
wäre. Man kann natürlich die Blöcke der ungefähren Größe nach
vorsortieren, um den Effekt zu minimieren, aber ganz wegbekommen wird man
ihn nicht.
Konkrete Frage: erinnert die Frage jemanden an etwas, für das er eine
einfache Lösung weiß, dann möge er bitte anworten. Sonst lebe ich mit der
möglichen Unschönheit bei bestimmten Fenstergrößen. Mir ist eh der
richtige Inhalt wichtiger als die schöne Optik (und Suchmaschinen danken
es mir), aber es muss ja auch nicht hässlicher sein als nötig.
--
Helmut Richter
Größe durch den Inhalt definiert ist und die dann kleiner sind als die
typischen Fenster auf den intendierten Ausgabegeräten (falls nicht wie bei
Smartphones, ist die Frage eh irrelevant). Weil es Blockelemente sind,
werden sie normalerweise untereinander angeordnet. Das ist eine
Platzverschwendung, die zu unnötigem Scrollen führt. Auf die Reihenfolge
kommt es nur ungefähr an; der Zusammenhang ist locker, was man optisch
durch einen hinreichend breiten Rand ausdrücken kann.
Hier bietet sich float:left an (wenigstens als Versuch, wenns nichts
taugt, versuche ich was anderes). Ich hab versucht, mich schlau zu machen
und bin auf den Effekt gestoßen, dass Blöcke von rechts an die vorhandenen
geschoben werden und an längeren hängenbleiben können. Beispiel:
http://css-technik.de/css-examples/219_9/beispiele/thumbnails2.html
bei verschiedenen Fenstergrößen versuchen.
Einen Ausweg sehe ich nicht. Man kann natürlich mit clear die Optik
geradeziehen, aber dazu müsste man ja vorher wissen, wann das nötig ist,
was wiederum von der Fenstergröße abhängt, über die ich als Autor nichts
weiß. Mir ist auch klar, dass es nicht ganz einfach ist, zu definieren,
was genau passieren soll. Der Browser soll ja nicht Puzzle spielen und die
nachfolgenden Blöcke *irgendwo* einordnen, obwohl *mir* das durchaus recht
wäre. Man kann natürlich die Blöcke der ungefähren Größe nach
vorsortieren, um den Effekt zu minimieren, aber ganz wegbekommen wird man
ihn nicht.
Konkrete Frage: erinnert die Frage jemanden an etwas, für das er eine
einfache Lösung weiß, dann möge er bitte anworten. Sonst lebe ich mit der
möglichen Unschönheit bei bestimmten Fenstergrößen. Mir ist eh der
richtige Inhalt wichtiger als die schöne Optik (und Suchmaschinen danken
es mir), aber es muss ja auch nicht hässlicher sein als nötig.
--
Helmut Richter
Martin Honnen
May 9, 2012, 8:51:58 AM5/9/12
to
Helmut Richter wrote:
> Hier bietet sich float:left an (wenigstens als Versuch, wenns nichts
> taugt, versuche ich was anderes). Ich hab versucht, mich schlau zu machen
> und bin auf den Effekt gestoßen, dass Blöcke von rechts an die vorhandenen
> geschoben werden und an längeren hängenbleiben können. Beispiel:
> http://css-technik.de/css-examples/219_9/beispiele/thumbnails2.html
> bei verschiedenen Fenstergrößen versuchen.
>
> Einen Ausweg sehe ich nicht. Man kann natürlich mit clear die Optik
> geradeziehen, aber dazu müsste man ja vorher wissen, wann das nötig ist,
> was wiederum von der Fenstergröße abhängt, über die ich als Autor nichts
> weiß. Mir ist auch klar, dass es nicht ganz einfach ist, zu definieren,
> was genau passieren soll. Der Browser soll ja nicht Puzzle spielen und die
> nachfolgenden Blöcke *irgendwo* einordnen, obwohl *mir* das durchaus recht
> wäre. Man kann natürlich die Blöcke der ungefähren Größe nach
> vorsortieren, um den Effekt zu minimieren, aber ganz wegbekommen wird man
> ihn nicht.
>
> Konkrete Frage: erinnert die Frage jemanden an etwas, für das er eine
> einfache Lösung weiß, dann möge er bitte anworten.
Mit neueren Browsern mag display als inline-block
> Hier bietet sich float:left an (wenigstens als Versuch, wenns nichts
> taugt, versuche ich was anderes). Ich hab versucht, mich schlau zu machen
> und bin auf den Effekt gestoßen, dass Blöcke von rechts an die vorhandenen
> geschoben werden und an längeren hängenbleiben können. Beispiel:
> http://css-technik.de/css-examples/219_9/beispiele/thumbnails2.html
> bei verschiedenen Fenstergrößen versuchen.
>
> Einen Ausweg sehe ich nicht. Man kann natürlich mit clear die Optik
> geradeziehen, aber dazu müsste man ja vorher wissen, wann das nötig ist,
> was wiederum von der Fenstergröße abhängt, über die ich als Autor nichts
> weiß. Mir ist auch klar, dass es nicht ganz einfach ist, zu definieren,
> was genau passieren soll. Der Browser soll ja nicht Puzzle spielen und die
> nachfolgenden Blöcke *irgendwo* einordnen, obwohl *mir* das durchaus recht
> wäre. Man kann natürlich die Blöcke der ungefähren Größe nach
> vorsortieren, um den Effekt zu minimieren, aber ganz wegbekommen wird man
> ihn nicht.
>
> Konkrete Frage: erinnert die Frage jemanden an etwas, für das er eine
> einfache Lösung weiß, dann möge er bitte anworten.
.floatdemo-multi div {
/* float: left; */
display: inline-block;
width: 80px; height: 80px;
w\idth: 62px; hei\ght: 62px; /* Hack für IE wg. Box-Modell */
padding: 6px; margin: 0 5px 5px 0;
border: 3px solid;
border-color: #d3d3d3;
background: #a60201;
text-align: center;
color: #ff8;
}
eher tun, was du suchst, aber auf Grund von "Mir ist auch klar, dass es
nicht ganz einfach ist, zu definieren, was genau passieren soll." ist
das nur als Vorschlag gemeint, der eventuell deinen Vorstellungen näher
kommen könnte.
--
Martin Honnen --- MVP Data Platform Development
http://msmvps.com/blogs/martin_honnen/
Susanne Jäger
May 9, 2012, 9:09:19 AM5/9/12
to
Helmut Richter wrote:
> Mein Problem: Ich habe eine Anzahl (vielleicht 15) Blockelemente, deren
> Größe durch den Inhalt definiert ist und die dann kleiner sind als die
> typischen Fenster auf den intendierten Ausgabegeräten (falls nicht wie bei
> Smartphones, ist die Frage eh irrelevant). Weil es Blockelemente sind,
> werden sie normalerweise untereinander angeordnet. Das ist eine
> Platzverschwendung, die zu unnötigem Scrollen führt. Auf die Reihenfolge
> kommt es nur ungefähr an; der Zusammenhang ist locker, was man optisch
> durch einen hinreichend breiten Rand ausdrücken kann.
hängt ein bisschen davon ab, *wie* unterschiedlich die Inhalte sind. Ich
> Mein Problem: Ich habe eine Anzahl (vielleicht 15) Blockelemente, deren
> Größe durch den Inhalt definiert ist und die dann kleiner sind als die
> typischen Fenster auf den intendierten Ausgabegeräten (falls nicht wie bei
> Smartphones, ist die Frage eh irrelevant). Weil es Blockelemente sind,
> werden sie normalerweise untereinander angeordnet. Das ist eine
> Platzverschwendung, die zu unnötigem Scrollen führt. Auf die Reihenfolge
> kommt es nur ungefähr an; der Zusammenhang ist locker, was man optisch
> durch einen hinreichend breiten Rand ausdrücken kann.
habe vor einigen Jahren mal eine Lösung mit float und min-height gebaut,
die unter ziemlich vielen Bedingungen passt:
<http://casaaxarquia.com/forsale/finca.php> Hier sind die Blöcke recht
ähnlich, aber auch da kommt es zu gelegentlichen Ausreißern, wenn dann
doch mal eine vierzeilige Unterschrift produziert wird oder sehr
ungünstige Kombinationen dazukommen.
Ein paar sehr gut gemachte Ansätze - die meisten auf der Basis von
inline-block - gibt es bei <http://www.brunildo.org/test/index.html> im
Abschnitt "Centering, Shrink wrapping, Images"
Gruß
Susanne
Helmut Richter
May 14, 2012, 3:14:55 AM5/14/12
to
On Wed, 9 May 2012, Susanne Jäger wrote:
> Ein paar sehr gut gemachte Ansätze - die meisten auf der Basis von
> inline-block - gibt es bei <http://www.brunildo.org/test/index.html> im
> Abschnitt "Centering, Shrink wrapping, Images"
Ja, danke. inline-block macht das, was ich will, und was man nicht
> Ein paar sehr gut gemachte Ansätze - die meisten auf der Basis von
> inline-block - gibt es bei <http://www.brunildo.org/test/index.html> im
> Abschnitt "Centering, Shrink wrapping, Images"
floatet, braucht man nicht zu clearen.
Und die Testsammlung ist vielleicht auch später mal nützlich.
--
Helmut Richter
0 new messages