Floating macht mich verüückt... :-)

aelo · 16. Januar 2011

Hi,

hab gerade ein Problem mit dem floating, bekomme eine Art Treppeneffekt:

Screenshot:
[Blockierte Grafik: http://www.abload.de/thumb/page_buggy_floatinglxj0.png]

CSS:

Code

.channel
{
        float:left;
        height:100px;
        width:100px;
        margin-left:5px;
        margin-top:0px;
        text-decoration:none;
        border:1px solid #cdcdcd;
        background-image:url('images/channels/default.png');
        color:white;
        font-family:Verdana;
        overflow:hidden;
}

Alles anzeigen

HTML:

Code

<a href="http://10.0.0.150:3000/TS/C-71-71-61920.ts"><div class="channel">ORF1 HD</div></a>
<a href="http://10.0.0.150:3000/TS/C-65535-3-1.ts"><div class="channel">ORF2 HD</div></a>
<a href="http://10.0.0.150:3000/TS/C-71-71-990.ts"><div class="channel">HD suisse</div></a>
<a href="http://10.0.0.150:3000/TS/C-1-1011-11100.ts"><div class="channel">Das Erste HD</div></a>
<a href="http://10.0.0.150:3000/TS/C-1-1011-11110.ts"><div class="channel">ZDF HD</div></a>
<a href="http://10.0.0.150:3000/TS/C-1-1011-11120.ts"><div class="channel">arte HD</div></a>
<a href="http://10.0.0.150:3000/TS/C-71-71-132.ts"><div class="channel">ANIXE HD</div></a>
<a href="http://10.0.0.150:3000/TS/C-65535-3-2.ts"><div class="channel">ServusTV HD</div></a>
<a href="http://10.0.0.150:3000/TS/C-36-36-13001.ts"><div class="channel">ORF1</div></a>


<a href="http://10.0.0.150:3000/TS/C-36-36-13009.ts"><div class="channel">ORF2 V</div></a>
<a href="http://10.0.0.150:3000/TS/C-37-37-13012.ts"><div class="channel">ATV</div></a>
<a href="http://10.0.0.150:3000/TS/C-33-33-17033.ts"><div class="channel">PULS 4 Austria</div></a>
<a href="http://10.0.0.150:3000/TS/C-65535-3-3.ts"><div class="channel">ServusTV</div></a>
<a href="http://10.0.0.150:3000/TS/C-36-36-13102.ts"><div class="channel">GoTV</div></a>
<a href="http://10.0.0.150:3000/TS/C-35-35-17.ts"><div class="channel">Info</div></a>
<a href="http://10.0.0.150:3000/TS/C-33-33-20002.ts"><div class="channel">ProSieben Austria</div></a>
<a href="http://10.0.0.150:3000/TS/C-33-33-20004.ts"><div class="channel">Kabel 1 Austria</div></a>
<a href="http://10.0.0.150:3000/TS/C-36-36-13106.ts"><div class="channel">AUSTRIA 9 TV</div></a>


<a href="http://10.0.0.150:3000/TS/C-33-33-20005.ts"><div class="channel">SAT.1 A</div></a>
<a href="http://10.0.0.150:3000/TS/C-33-33-28805.ts"><div class="channel">VOX Austria</div></a>
<a href="http://10.0.0.150:3000/TS/C-33-33-28800.ts"><div class="channel">RTL Austria</div></a>
<a href="http://10.0.0.150:3000/TS/C-33-33-28810.ts"><div class="channel">RTL2 Austria</div></a>
<a href="http://10.0.0.150:3000/TS/C-33-33-28815.ts"><div class="channel">Super RTL A</div></a>
<a href="http://10.0.0.150:3000/TS/C-35-35-28680.ts"><div class="channel">NICK/COMEDY</div></a>

Alles anzeigen

<- am Link liegts nicht, habe den selben Effekt wenn ich alle Links entferne

vielen dank im Voraus!

best regards
aelo

geronimo · 16. Januar 2011

Hi,

falls Du es nicht kennst - zieh Dir mal yaml rein. Die haben ein Pamphlet, das den ganzen Kram recht anschaulich erklärt

Gruß Gero

aelo · 16. Januar 2011

leider ist dass dann aber ziemlich statisch oder nicht?
möchte hier wirklich einfach soviele Sender in die liste mitaufnehmen wie eben in der channels.m3u vom streamdev-server stehen
d.h. das muss doch auch so irgendwie funktionieren nur irgendwo in meinem CSS fehlt eben ncoh irgendwas...

thx & best regards
aelo

Keine_Ahnung · 16. Januar 2011

yaml hat auch nen CSS Framework was um all diese Merkwürdigkeiten rumbastelt (wart mal auf den Spaß wenn du das in nem anderen Browser siehst ).

Ich hab auch mal so angefangen, aber nach ähnlichen Problemen bin ich auch yaml umgestiegen und auf einmal hat alles einfach so funktioniert

Aber unbedingt die Anleitung dort lesen, da sparst du dir dann am Ende ne Menge Frust.

Zitat

Originally posted by aelo
leider ist dass dann aber ziemlich statisch oder nicht?

Nein, warum solls dann statisch sein?

cu

aelo · 16. Januar 2011

[Blockierte Grafik: http://www.abload.de/thumb/page_workingtqnn.png]

Problem gelöst, mit etwas das nicht statischer sein könnte
Aber in diesem Fall da die Spaltenbreite immer gleich ist und es sich nicht an verschiedene Seitenbreiten anpassen muss (hab die breite der Page fix auf 1000px) dachte ich man darf dieses HTML-Feature auch mal verwenden, ist ja eigentlich sowieso auch eine tabelarische Ausgabe...

best regards
aelo

Keine_Ahnung · 16. Januar 2011

Du weißt aber schon das Tabellen fürs Layout absolut böse sind?

Das geht wirklich auch mit CSS, du musst dich nur einmal durch das float Geraffel durchackern. Dafür gibts yaml oder sehr viele HowTos im Internet. Das ist dann nämlich doch nicht so simpel wie man anfangs denkt, und die vielen Bugs der vielen Browser vereinfachen das nicht unbedingt Spätestens wenn man rausfindet das man die Seite im IE 6.0 nicht mehr Scrollen kann fängt man an die Sache zu hassen.

BTW: Mit CSS gestylte <UL> bieten sich dafür super an. Dann bleiben die Kisten (als <LI>) wenigsten schon mal waagerecht auf einer Linie. Die Kästen als einzelne DIVs scheint erstmal nur Anfangs wie ne gute Idee

BTW2: sowas tuts auch:

Code

<a href="http://10.0.0.150:3000/TS/C-71-71-61920.ts">ORF1 HD</a>

Code

a
{
        float:left;
        height:100px;
        width:100px;
        margin-left:5px;
        margin-top:0px;
        text-decoration:none;
        border:1px solid #cdcdcd;
        background-image:url('images/channels/default.png');
        color:white;
        font-family:Verdana;
        overflow:hidden;
}

Alles anzeigen

So mal schnell ohne die Details zu prüfen. D.h. du kannst auch gleich A stylen (ohne da noch nen DIV reinzupacken). Und darauf alles explizit zu benennen kannst du auch verzichten (es geht z.B. auch "alle <A> innerhalb vom DIV namens 'XYZ'" wenn sich das nur auf Links innerhalb eines Bereichs beziehen soll). Das spart dann ne Menge HTML.

cu

aelo · 16. Januar 2011

thx, das geht nun

komisch aber dass das mit divs nicht genau gleich funktioniert
sollte es THEORETISCH ja

geronimo · 17. Januar 2011

Hi,

also Du solltest Dir das Yaml-Pamphlet auf jeden Fall gönnen!
Das heißt ja nicht, dass Du yaml dann als Framework einsetzen musst. Aber ich habe noch keine bessere Zusammenfassung der ganzen Browserfehler gefunden, die auch noch gut lesbar ist.

Eigentlich ein muss, wenn Du Sachen fürs Web machen willst.

Zitat

Du weißt aber schon das Tabellen fürs Layout absolut böse sind?

Das ist auch mehr Mode, als wirklich begründet und wenn Du mal schaust - selbst so hippe Framworks wie ext sind voll mit endlos geschachtelten Tabellen.
Nicht alles, was man mit Tabellen im Schach halten kann, lässt sich auch mit ohne umsetzen

Ne pragmatische Einstellung bringt *imho* am Meisten

Gruß Gero

Keine_Ahnung · 17. Januar 2011

Zitat

Originally posted by geronimo
Das ist auch mehr Mode, als wirklich begründet und wenn Du mal schaust - selbst so hippe Framworks wie ext sind voll mit endlos geschachtelten Tabellen.

Stimmt schon, aber CSS ohne Tabellen hat halt ne gewisse Eleganz, man hält halt das Layout komplett aus dem HTML. Und man ist offen für wirklich flexible Alternativlayouts (Print, PDA usw.)

Wobei ich eher der Typ für einfach und praktisch bin. Irgendwelche hippen coolen Spielereien im Web mag ich nicht sonderlich.
Z.B. verzichte ich auch gerne auf runde Ecken wenns bedeutet da sinnlos 5 DIVs ineinander zu Schachteln nur damit die Ecken rund sind
Und eine feste Breite (bei Inhalten die vorwiegend Fliestext beinhalten) nur damit das Layout stimmt ist auch Mist. Wenn ich ne 3000x2000er Auflösung habe möchte ich nicht ne 800px breite Webseite haben und damit den Monitor mit leeren Hintergrund verschwenden.

Zitat

Originally posted by geronimo
Nicht alles, was man mit Tabellen im Schach halten kann, lässt sich auch mit ohne umsetzen

Ne pragmatische Einstellung bringt *imho* am Meisten

Jup, stimmt auch. Aber gerade in diesem einfachen Fall...

cu

aelo · 17. Januar 2011

klar, wenns so einfach ist, nur bin ich nicht auf die Idee gekommen eine Liste zu verwenden

zum fixen Layout: klar ist das nicht die schöne Art und Weise, aber vorerst hab ich das ganze ja nur für meinen Server zusammengehackt.

Ich verwende auch CSS3-Attribute die nicht in jedem Browser funktionieren, aber da ich nur Firefox >3.5 oder Chrome >=6 verwende, kann mir das ja auch egal sein

aktuell gibts im WebUI sowieso noch andere Dinge die wichtiger sind:

z.B. die Senderliste bekomme ich von der channels.m3u vom streamdev-server Plugin, lasse sie dann durch ein kurzes C# tool durchlaufen das mir dann in eine neue Datei die linkliste schreibt.
Klar wird sich vermutlich jeder jetzt "an den Kopf greifen", aber zum testen ob das Layout so hinhaut ist auch das egal. Bei Zeit und Gelegenheit schreib ich den Parser natürlich mal in PHP und bau das fix in die WebUI ein...

Recordingsübersicht ist momentan auch ein echo nl2br(exec('ls -lah /var/lib/video/'));

Bin gespannt wie ich die EPG-Übersicht umsetze falls ich das wirklich durchziehe :-), das könnte nämlich noch eine Herausforderung sein

best regards
aelo

crazyPower · 17. Januar 2011

Zitat

Original von geronimo

Das ist auch mehr Mode, als wirklich begründet und wenn Du mal schaust - selbst so hippe Framworks wie ext sind voll mit endlos geschachtelten Tabellen.

Hi,
Autsch. Es gibt eine sinnvolle Begründung: Barrierefreiheit. Frag mal einen Blinden der sich Webseiten per Screenreader "anschaut" - der bekommt das kalte Grausen. Tabellen sind ein Darstellungsmittel für Daten und nicht für Layouts. Und nur weil es andere machen (ext) muss das nicht richtig sein...

Grüße

cp

geronimo · 19. Januar 2011

Zitat

Autsch.

Ja genau - da kann ich auch nur mit Autsch antworten.

Zitat

Es gibt eine sinnvolle Begründung: Barrierefreiheit.

Ich kann's schon nimmer lesen
... das Web ist voll von Statements, die einer dem anderen unreflektiert nachplappert!

Ich hatte vor Kurzem ein Projekt, bei dem Barrierefreiheit ein Thema war, also kam ich nicht umhin, mich mit den div. Screenreadern und eingeschränkten Browsern (Lynx) auseinander zu setzen. Es braucht mir niemand zu glauben, aber der Unterschied, ob jetzt ein Absatz mit div oder Tabelle entstand, spielt bei den Vorlesern so gut wie keine Rolle. Der Unterschied, ob man Links in eine Liste packt oder nur mit Zeilenumbruch o.ä. trennt, ist dagegen gravierend.
Genauso gibt es Screenreader, die es nicht schaffen, einen ganzen Satz vor zu lesen (auch wenn es dafür extra Befehle gibt). Es wird immer nur eine Zeile gelesen. Da wird jeder Fließtext zum Abenteuer.

Die Ergebnisse des Screenreader-Tests schlugen bis zu den Redakteuren durch, denn am Schlimmsten waren die Ergebnisse der allseits beliebten Abkürzungen wie u.U., Maßeinheiten oder selbst Wochentage mit 2 Buchstaben ...

Was "keine_Ahnung" schrieb, insbesondere die Trennung von Inhalt und Aussehen, unterschreibe ich voll und ganz. Jedoch denke ich, dass man sich mehr Gedanken über Trennung von "techn. Rahmen der Seite" und "Darstellung von Inhalten" machen sollte, als darüber, ob jetzt Absätze mit div oder Tabelle organisiert werden. Insbesondere ob dynamische Anzahl von Spalten per javascript oder PHP gelöst wird, sprich ob divs organisiert oder die Anzahl der Spalten einer Tabelle errechnet wird - halte ich für eher nebensächlich.

Wer wirklich barrierefrei arbeiten will, kommt nicht umhin, jeden Text - vor der Veröffentlichung - von Screenreadern vorlesen zu lassen und entsprechend zu korrigieren.

Divs sind zickig wie eine Diva - das sollte jedem klar sein - insbesondere, wenn man die vielen IE-bugs dazu nimmt. Besonders wenn man "statische" Bereiche haben will, erfordert es bei divs den vielfachen Aufwand einer Tabelle. Was nicht heißt, dass man diesen Aufwand nicht treiben soll - nur sollte einem bewußt sein, welche Konsequenzen eine Entscheidung mit sich bringt.

Die 5 geschachtelten Divs sind genauso Kwatsch, wie man früher geschachtelte Tabellen nahm, um einen Rahmen hin zu bekommen. Für vieles braucht man heute weder noch - insbesondere bei CSS3 hat sich doch einiges getan.

Gruß Gero

Keine_Ahnung · 19. Januar 2011

Zitat

Originally posted by geronimo
Der Unterschied, ob man Links in eine Liste packt oder nur mit Zeilenumbruch o.ä. trennt, ist dagegen gravierend.
Genauso gibt es Screenreader, die es nicht schaffen, einen ganzen Satz vor zu lesen (auch wenn es dafür extra Befehle gibt). Es wird immer nur eine Zeile gelesen. Da wird jeder Fließtext zum Abenteuer.

Die Ergebnisse des Screenreader-Tests schlugen bis zu den Redakteuren durch, denn am Schlimmsten waren die Ergebnisse der allseits beliebten Abkürzungen wie u.U., Maßeinheiten oder selbst Wochentage mit 2 Buchstaben ...

Interessant, ich habe noch nie einen Screenreader ausprobiert.

Aber spontan denke ich "nicht mein Problem" (als Ersteller der Website), eine Extrawurst (im Sinne einer Seitenanpassung an buggy Software) kann auch hier nicht verlangt werden.

Mit einer Liste von Links (z.B. das Hauptmenü der Seite) sollte eine solche Software umgehen können. Denn lustigerweise ist ja <UL> fürs Seitenmenü sogar der korrekte Tag (es ist ja eine Liste von gleichartigen Werten und nicht nur ein CSS Trick).
Und Menüs mit mehreren Ebenen in verschachtelten UL bieten einer Software sogar mehr Informationen (über den logischen Zusammenhang der einzelnen Punkte) als pure Links die per CSS rein optisch an die richtige Position geschoben werden.

Wenn man die Seite so ausbaut das die einzelnen Elemente (die auch ohne Java(flash) und ähnlichen Sinn ergeben) in ner sinnigen Reihenfolge kommen und man (optisch unsichtbare) Links zum Überspringen von unwichtigen Inhalten anbietet hat man IMHO genug getan.

Zitat

Originally posted by geronimo
Genauso gibt es Screenreader, die es nicht schaffen, einen ganzen Satz vor zu lesen (auch wenn es dafür extra Befehle gibt). Es wird immer nur eine Zeile gelesen. Da wird jeder Fließtext zum Abenteuer.

Extra Befehle? HTML bietet doch schon von Haus aus die Auszeichnung der Absätze und Überschriften. Da sollte so was doch überhaupt kein Problem sein.

Viel schlimmer ist da wohl das allseits beliebte PDF, das stelle ich mit wirklich Abenteuerlich vor. Denn getaggte PDFs sind mit IIRC noch nie untergekommen.

cu

geronimo · 20. Januar 2011

Zitat

Interessant, ich habe noch nie einen Screenreader ausprobiert.

Yepp - genauso ging es mir auch etliche Jahre.
Habe zwar regelmäßig über barrierefreie Seiten gelesen und gelegentlich nen Tip einfach so übernommen, aber als es jetzt Bestandteil eines Projektes wurde, wollte ich es genau wissen.
Habe mir dann angelesen, was es für Barrieren gibt und eine Testsuite zusammen gestellt.

Anschließend habe ich eine Seite auf verschiedene Arten realisiert und die Tests drüber laufen lassen.

Teilweise ergaben sich völlig neue Gesichtspunkte.
Man kann sich sicher viel erlesen, aber das Erlebnis eines eigenen Tests ist eine unschlagbare Erfahrung, die auch viel tiefer prägt, als etwas Gelesenes.

Ackso - bei Debian gehört meines Wissens orca schon zur Grundausstattung. Sind also nur ein paar Mausklicks, um die Selbsterfahrung zu starten.
Dann einfach mal die Augen zu machen und "sehen", wie weit man(n) kommt

Zitat

Mit einer Liste von Links sollte eine solche Software umgehen können.

Das kann sie auch.
Vielleicht habe ich mich schlecht ausgedrückt.
Es gibt viele Tuts zur Seitenerstellung, bei denen solche Menü-Links nur (!) durch vertikale Striche oder ein '<br/>' getrennt werden - also keine Liste verwendet wird.
Wenn man sich dann so ein Menü anhört, kommt man schnell drauf, dass das Weglassen der Liste eigentlich zu den Todsünden gehören sollte

Zitat

Extra Befehle? HTML bietet doch schon von Haus aus die Auszeichnung der Absätze und Überschriften.

Lach - da habe ich mich wieder mal schlecht ausgekwetscht.
Ich meinte die Befehle des Screenreaders (Tastaturkürzel).
Man kann angeben, ob der Screenreader eine Zeile, einen Satz oder die ganze Seite vorlesen soll (man kann auch hinterlegen, wie Abkürzungen ausgesprochen werden sollen. Das ist aber eine Menge Aufwand - ich habe kein fertiges Paket dafür gefunden).
Richtig extrem wird es, wenn man im Zeilenmodus versucht, eine Seite zu verstehen.
Fast unmöglich! Wenn ich mir dann noch vorstelle, dass es Blinde gibt, die Webseiten über eine Braillezeile erfassen - nötigt mir das extremen Respekt ab.

Ich finde es gut, wenn man ein Verständnis für Menschen mit Einschränkungen entwickelt. Allein ein Test auf Rot-/Grün-Schwäche ist schon eine interessante Erfahrung
Trotzallem sollte man sich seinen Pragmatismus bewahren.

Gruß Gero

crazyPower · 20. Januar 2011

Zitat

Original von geronimo

Ich kann's schon nimmer lesen
... das Web ist voll von Statements, die einer dem anderen unreflektiert nachplappert!

Hi,

naja, unreflektiert stimmt nicht ganz. Ich muss zugeben dass ich die Screenreder selbst nicht benutzt habe aber zwei blinde Menschen haben bei einem Workshop zum Thema Barrierefreiheit eben genau dieses Statement gemacht (allerdings ist das auch schon 5 Jahre her - zu der Zeit wurden die Tabellen wohl nach dem Schema: "jetzt kommt eine Tabellenüberschrift: Blah, Blah, Blah" und "jetzt kommt die erste Datenzeile: Blubb, Blubb, Blubb" vorgelesen). Weshalb sich das nicht mit deinen Erfahrungen deckt weiß ich nicht, ich gehe jetzt mal davon aus dass sich die Screenreader in der Hinsicht dem schlechten Stil angepasst haben ;-).

grüße

cp

Floating macht mich verüückt... :-)

Jetzt mitmachen!

Teilen

Benutzer online in diesem Thema