• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bitte testen

Ladenbesitzer

Ladenbesitzer

Mitglied
Hallo!
Ich bitte euch, die Darstellung einer auf meienr Seite erstellen Liste zu überprüfen.
www.wohlfuehlen-zuhause.de
Bitte nehmt alle Browser die ihr installiert habt.

Es sollten zwei Zeilen mit jeweils drei nebeneinander eingefärbten Vierecken dargestellt sein (insgesamt also 6 Vierecke). HOHE Priorität
Beim hovern sollte sich die Farbe ändern. GERINGE Priorität


Bitte um kurzes Feedback, falls dem nicht so ist. Dann gerne eine kurze Fehlerbeschreibung und der verwendete Browser.

PS: Es geht nur um die DESKTOP Version der Seite
 
Werbung:
Hi,
habe mit dem Safari 9.0 getestet.
Es werden mir alle 6 Vierecke dargestellt
und sie ändern beim hovern ihre Farbe.

MfG
derquido
 
Danke für dein Feedback.
Ich hatte gestern beim Safari auf dem S5 ein merkwürdiges Phänomen.
Auf einem Gerät wurde es einwandfrei dargestellt, auf einem anderen S5 war die Liste "zerlegt" dargestellt.
Von links nach rechts:
Der Listenpunkt, Bild1, daneben Bild2, daneben der Titel.

Auf einem anderen Firefox waren es drei Reihen mit jeweils 2 nebeneinanderliegenden Bildern.
 
Werbung:
Das Phänomen wird wohl von display:inline-block kommen. Bedenke, dass diese Anweisung einen Abstand von ca. 4 Pixel mitbringt.
 
Danke für den Hinweis!
display:inline-block ist für li festgelegt.
padding und margin haben aber 0px.
Wo stecken die von dir genannten 4px?
Oder hat display:inline-block generell 4px Platzbedarf?

Entschärfe ich das Problem indem ich die Bilder von jeweils 184px auf 180 px verkleinere?
Oder gibt es eine schönere Lösung?

PS: Ich habe die Textgröße in den Titeln reduziert von 14px auf 12px. Der Titel "Schönes für die Küche" passte nä. gerade so rein
 
Zuletzt bearbeitet:
Hallo

Entschärfe ich das Problem indem ich die Bilder von jeweils 184px auf 180 px verkleinere?
Zum Vergrößern anklicken....

Entschärfen: ja - beseitigen: nein. Zusätzlich müsstest du die Breite der li-Elemente entsprechend anpassen, die sind ja mit dem inline-block versehen.

hat display:inline-block generell 4px Platzbedarf?
Zum Vergrößern anklicken....

Jein. Das Thema ist etwas komplexer als wahrscheinlich vor dir vermutet. Zudem hat djheke richtigerweise geschrieben

ca. 4 Pixel
Zum Vergrößern anklicken....

Die 4 Pixel sind nicht genau festgeschrieben, sondern passen mehr oder weniger bei den meisten Desktop-Browsern und 100%-Zoom.

Wo stecken die von dir genannten 4px?
Zum Vergrößern anklicken....

Jeweils rechts von den li-Elementen.

Wenn du pixelgenau arbeiten willst ist inline-block deshalb nicht besonders geeignet. Wenn du es trotzdem verwenden möchtest gibt es verschiedene Lösungen neben der bereits oben genannten.

Du könntest den li-Elementen zum Beispiel einen rechten negativen margin von 4-px geben.

Oder die li-Elemente im Quelltext in einer Zeile schreiben. Oder zumindest das erste oder letzte Zeichen in die nachfolgende bzw. vorige Zeile setzen.

Das sind aber alles nur Hilfslösungen, die nicht in jedem Browser funktionieren müssen.

Insgesamt besser wäre deshalb die li-Elemente als Block-Elemente zu kennzeichnen und mit float/clear nebeneinander anzuordnen oder flexbox zu verwenden. Wobei ich nicht weiß in wie weit flexbox mit dem veralteten XHTML harmoniert.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Werbung:
Vielen dank für deine ausführliche aber klar verständlich Antwort!

Könntest du mir vlt. den folgenden Abschnitt erklären?

Insgesamt besser wäre deshalb die li-Elemente als Block-Elemente zu kennzeichnen und mit float/clear nebeneinander anzuordnen
Zum Vergrößern anklicken....
 
Den Weg über die Suchmaschine hab ich schon durch.
Wegen für mich großem Aufwand und dennoch Mißerfolg ja die Methode mit der Liste.

Den Link werde ich mir heute Abend durchlesen.
Danke!
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben