nicht angemeldet
img innerhalb von li vertikal zentrieren
Hi,
ich versuche grad eine Kundenlogoliste in Form zu bringen.
Das sieht dann so aus:
<ul class="kundenlogos">
<li>
<a href="#"><img src="/basics/logos/example.gif" alt="" /></a>
</li>
<li>
<a href="#"><img src="/basics/logos/example.gif" alt="" /></a>
</li>
etc..
</ul>
Die li´s sollen als quadrate dargestellt werden.
ul.kundenlogos li {
display: block;
float: left;
width:7em;
height: 7em;
text-align: center;
margin: 0 10px 16px 0;
border: #ccc 1px solid;
line-height: 7em;
}
ul.kundenlogos li img {
vertical-align: middle;
}
Im FF zentriert der mir die enhaltenen images wunderbar. Opera, Safari und haha der IE spielen da nicht mehr mit.
Hat jemand eine Idee? Bin schon etwas erstaunt dass die ersten beiden das nicht zentrieren.
Vielen Dank,
Mel
-
Hallo,
Die li´s sollen als quadrate dargestellt werden.
[...]
ul.kundenlogos li img {
vertical-align: middle;
}Im FF zentriert der mir die enhaltenen images wunderbar. Opera, Safari und haha der IE spielen da nicht mehr mit.
Für den IE gilt:
"The sub and super values are supported on text. The auto value is supported on the currentStyle object. The other values are supported on objects that support VALIGN."Da für <img> keine valign gibt, unterstützt der IE das auch nicht.
Offenbar unterstützt Opera und Safari vertical-align ebenfalls nur bei Tabellen.Grüße
Thomas-
Hi,
Da für <img> keine valign gibt, unterstützt der IE das auch nicht.
Offenbar unterstützt Opera und Safari vertical-align ebenfalls nur bei Tabellen.kann ich nicht bestätigen wenn ich sonst bilder im fliesstext habe (kleine grafiken z.b. pdf icons o.ä.) und denen vertical-align:middle; zuweise unterstützen das alle Browser (alle= bei mir ie, ff, opera, Safari).
hmm. mysteriös.
-
Hallo,
Da für <img> keine valign gibt, unterstützt der IE das auch nicht.
Offenbar unterstützt Opera und Safari vertical-align ebenfalls nur bei Tabellen.kann ich nicht bestätigen wenn ich sonst bilder im fliesstext habe (kleine grafiken z.b. pdf icons o.ä.) und denen vertical-align:middle; zuweise unterstützen das alle Browser (alle= bei mir ie, ff, opera, Safari).
Du hast recht.
Es liegt an width und height für <li>
ich habe das jetzt so gemacht:
ul.kundenlogos li {
display:block;
float: left;
/*width:7em;*/
/*height: 7em;*/
text-align: center;
margin: 0 10px 16px 0;
border: #ccc 1px solid;
font-size:7em;
line-height:1em;
}<li>
 <a href="#"><img src="mbg.gif" width="15" height="15" alt="" border="0"></a> 
</li>  =
Damit kommt in den Browser eine annährend ähnliche Darstellung zustande.
Grüße
Thomas-
Hallo Thomas,
danke dass Du Dir die Mühe gemacht hast. Ja wenn ich height weglasse dann klappt das mit mit Leerzeichen auch in Opera und Safari wunderbar. Der IE jedoch ignoriert das ganze.
Auch wenn ich keine width vergebe...ändert das nichts.Da ich nicht unbedingt eine TAbelle verwenden möchte bleibt noch die lösung die images halt gleich im passenden format abzuspeichern und die Ausrichtung damit nicht über css zu steuern.
danke fürs testen,
mel
-
Hallo,
danke dass Du Dir die Mühe gemacht hast. Ja wenn ich height weglasse dann klappt das mit mit Leerzeichen auch in Opera und Safari wunderbar. Der IE jedoch ignoriert das ganze.
Auch wenn ich keine width vergebe...ändert das nichts.DOCTYPE richtig benützt? Bei mir macht der IE da mit.
Da ich nicht unbedingt eine TAbelle verwenden möchte
Warum nicht? Das halte ich für weniger schlimm, als float-Vergewaltigung von Listen. Wie dem auch sei, ist deine Sache.
Grüße
Thomas-
Hallo Thomas,
also Doctype ist
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">aber...grrrmpff...da sind leerzeichen davor na toll. habe ich vorher nicht gesehen--> soweit ich mich erinnern kann wird der ie damit in quirksmodus geschickt, ok das wird es wohl sein.
aber mit den tabellen, also findest Du dass da eine liste vergewaltigt wird? kann ich nicht nachvollziehen. Ist ja ne klassische Aufzählung, keine tabellarischen daten. Eine Tabelle wäre hier eine reine Designertabelle, naja gut man kann sich immer drüber streiten.
Mir ist eine übersichtliche Liste lieber als dieses tr-td-gewusel.
vg mel
-
Hallo,
aber mit den tabellen, also findest Du dass da eine liste vergewaltigt wird? kann ich nicht nachvollziehen. Ist ja ne klassische Aufzählung, keine tabellarischen daten. Eine Tabelle wäre hier eine reine Designertabelle, naja gut man kann sich immer drüber streiten.
Mir ist eine übersichtliche Liste lieber als dieses tr-td-gewusel.
Ja, ich halte das für Missbrauch, wenn Listen mit float und Co. so vergewaltigt werden, als wären sie Tabellen. Dann sollte man eben eine Tabelle benützen.
Natürlich höre ich jetzt irgendwelche Einwände von wegen WAI etc. Nur ich habe es noch so gut wie nie erlebt, dass diese Einwände von leuten kämen, die WAI nicht als Selbstzweck ("guck mal, _ich_ bin 100% WAI-kompatibel!") sondern im Sinne von WAI nützen würden, dann müssten sie nämlich Listen einfach Listen sein lassen.
Aber da driften wir in eine Diskussion hinein, die ich eigentlich nicht mehr führe ;-)
Grüße
Thomas-
Hmm ich will keinen "ätsch ich bin barrierefreier als Du"-Krieg anzetteln ;)
Mich interessiert die Meinung der Profis her sehr, deshalb werde ich Deinen Vorschlag überdenken.
vg, mel
-
Hi,
Nur ich habe es noch so gut wie nie erlebt, dass diese Einwände von leuten kämen, die WAI nicht als Selbstzweck ("guck mal, _ich_ bin 100% WAI-kompatibel!") sondern im Sinne von WAI nützen würden, dann müssten sie nämlich Listen einfach Listen sein lassen.
wieso?
Die HTML-Auszeichnung ist eine Sache und die Darstellung über CSS eine völlig andere.
Meine Herangehensweise ist, die Inhalte so passend wie möglich auszuzeichnen und hierbei denke ich noch überhaupt nicht an die spätere Darstellung über CSS, sondern allenfalls an die Umsetzung ohne CSS (und auch ohne Grafiken).
Habe ich also eine Auflistung von Links, dann verwende ich selbstverständlich eine Liste (etwas passenderes gibt's noch nicht). Habe ich andererseits eine tabellarische Übersicht von Links, die diese tatsächlich sinnvoll in Zeilen und Spalten setzt (und auch Gitterrahmen dies sinnvoll unterstüzen würden), dann ist eine Tabelle sicherlich angebrachter.Das Ganze hat für mich auch nicht unbedingt etwas mit WAI zu tun, sondern ganz einfach mit der Verwendung der zu den Inhalten passenden HTML-Elemente.
freundliche Grüße
Ingo-
Hallo Ingo,
wieso?
Habe ich also eine Auflistung von Links, dann verwende ich selbstverständlich eine Liste (etwas passenderes gibt's noch nicht). Habe ich andererseits eine tabellarische Übersicht von [...] dann ist eine Tabelle sicherlich angebrachter." [...] da driften wir in eine Diskussion hinein, die ich eigentlich nicht mehr führe"
Anhand des in diesem Thread gegebenen Beispiels: da sollen Logos "aufgelistet" werden. Im Kopf entsteht bei dem Wort also eine Liste und so wir es in einer Liste gemacht.
Dargestellt werden soll es aber wie eine Tabelle: Zeilen mit Rahmen. Wenn es nur drei oder vier Logos sind geht es vielleicht mit einer Liste, aber wenn es mehrere Logos werden rutscht dann das "nächste" Logo in einer neuen Zeile, es entsteht (optisch), weil es auch so gewollt ist, also eine Tabelle mit mehreren Zeilen und Rahmen um die Zellen.
Da stellt sich _mir_ natürlich die Frage, welchen Zweck soll eine Liste haben, die auf diese Weise entfremdet eingesetzt wird *, und ob es nicht schon von der Grundüberlegung her einfach falsch gewesen ist auf die Assoziation "Auflistung" <-> "Liste" zu setzen, und dass es hier eine Tabelle die geignetere Möglichkeit wäre.
Oder überhaupt, man kann das ganze auch ohne Listen und Tabellen lösen: hspace und vspace sind anerkannte Arrtibute für <img>, aber sogar darauf kann man verzichten und mit den simplen CSS-Angaben
img {
border: solid 1px silver;
padding:20px;
margin:10px;
}
genau das ereichen was man erreichen wollte, ohne sich dabei auf dem Kopf stellen zu müssen um alle Browser zu bedienen.Grüße
ThomasPS: *) Bei Navigationen würde ich z.B. Listen eher zustimmen.
-
Hi,
" [...] da driften wir in eine Diskussion hinein, die ich eigentlich nicht mehr führe"
ich weiss.. ;-)
es entsteht (optisch), weil es auch so gewollt ist, also eine Tabelle mit mehreren Zeilen und Rahmen um die Zellen.
Aber ist die Anordnung auch eine tabellarische? Ich denke nicht.
Oder überhaupt, man kann das ganze auch ohne Listen und Tabellen lösen: hspace und vspace sind anerkannte Arrtibute für <img>, aber sogar darauf kann man verzichten und mit den simplen CSS-Angaben
img {
border: solid 1px silver;
padding:20px;
margin:10px;
}
genau das ereichen was man erreichen wollte, ohne sich dabei auf dem Kopf stellen zu müssen um alle Browser zu bedienen.Stimmt. Das würde durchaus der Intention entsprechen, die Logos einfach hintereinander, d.h. ohne logische Beziehung zueinander, zu setzen.
Gruß
Ingo-
Ich hab mal gelesen dass man sich bei der Erstellung seines html-Quelltextes schon Gedanken machen sollte dass man elemente die inhaltlich zusammengehören auch als solche ausgezeichnet werden - sprich zusammenhängende Elemente sollten auch gruppiert werden falls möglich. Stand soweit ich mich erinnern kann in der BITV. Seitdem versuche ich zu vermeiden, meine Elemente unmotiviert einzeln in meinem Dokument herumhängen zu lassen;)
Auch im Hinblick auf textbasierte Browsern - da ist es doch auch schöner so eine Logoliste als Liste schön ordentlich zusammengefasst erkennen zu können.
Der Vorschlag das img Element zu stylen seztt allerdings voraus dass diese Grafiken auch in der gleichen Grösse abgespeichert wurden. Das habe ich jeztt eh gemacht weil das mit dem vertical-align: middle und line-height für den IE trotz Vermeidung Quirksmodus nicht geklappt hat.
allerdings kann ich mich dran erinnern dass dieser Vorschlag
img {
border: solid 1px silver;
padding:20px;
margin:10px;
}vom IE 5.0 z.b nicht umgesetzt wird- ist doch dann auch wieder keine universale einfache brauchbare Lösung....
Übrigens noch ein Vorteil der gefloateten Liste im GGs. zu Tabellen: Tabellen brechen nicht, meien Liste hingegen schon, so im Hinblick auf liquides Design...
vg mel
-
-
-
-
-
-
-
-
-
-