<div> visibility:collapse und images

[Lokke]

Servus,

ich habe in den letzten Wochen für den Autorenkreis eines Freundes die Website komplett neu aufgebaut.
Hab mich dann gleich ein wenig mehr mit HTML und CSS befasst (bei letzterem brauchts z.Z. noch Stützräder, aber es hat immerhin gelangt das Template zurechtzubiegen )

Jedenfalls, ich habe eine Seite gestaltet, in der mittels innerHTML und div der Inhalt eines div's geswitcht wird.

Die simple Frage die ich habe ist folgende:
Kommt visibility:collapse generell nicht mit img's klar (feste Größe zuweisen brachte keinen Erfolg) oder muss man für den collapse-effekt die div's für diese Seite hart ins CSS coden ?

Hier noch der Link:
Autoren - Steckbriefe der Autoren

Gruß und Danke im voraus
Lokke

 

[Efchen]

Hab mich dann gleich ein wenig mehr mit HTML und CSS befasst (bei Letzterem brauchts z.Z. noch Stützräder, aber es funktioniert alles so wie es soll

Auch bei HTML brauchst Du noch Stützräder. Das mit der Semantik, dem eigentlichen Sinn von HTML, klappt noch nicht ganz!

Jedenfalls, ich habe eine Seite gestaltet, in der mittels innerHTML und div der Inhalt geswitcht wird.

Ganz schlecht! Dazu muss ja JavaScript aktiviert sein. Eine Alternativlösung hast Du anscheinend nicht parat.

Kommt visibility:collapse generell nicht mit img's klar

Ich kannte den Wert gar nicht, habe aber durch Google herausgefunden, dass das nur im Zusammenhang mit Tabellen funktioniert und sogar der IE8 das nicht kennt.
CSS visibility property

 

[Lokke]

Das nenn ich mal fix :)

Auch bei HTML brauchst Du noch Stützräder. Das mit der Semantik, dem eigentlichen Sinn von HTML, klappt noch nicht ganz!

Gut möglich - hab mich drauf verlassen dass wenn der w3c-Validator nicht mehr meckert es schon nicht soooo schlimm sein kann ;)
aber ich lerne schnell =)

Ganz schlecht! Dazu muss ja JavaScript aktiviert sein. Eine Alternativlösung hast Du anscheinend nicht parat.

Hm, hm...gut ich bezweifle dass die, die die Seite ansurfen, das deaktivert haben, aber trotzdem: Gibt es für sowas eine Alternativlösung ? (ich nehme einfach mal an die gibt es)
Wäre klasse wenn du mir einen Themenbegriff nennen könntest, ich lese mich dann schon ein ;)

Ich kannte den Wert gar nicht, habe aber durch Google herausgefunden, dass das nur im Zusammenhang mit Tabellen funktioniert und sogar der IE8 das nicht kennt.
CSS visibility property

Microfail...gott diese Firma ist einfach nur peinlich :>
Danke für die Info, ich probier mal die Tabellenvariante wenn ich zuhause bin.

/bahn
Gruß

 

[Efchen]

hab mich drauf verlassen dass wenn der w3c-Validator nicht mehr meckert es schon nicht soooo schlimm sein kann

Validität (die Syntax) ist aber nur ein Teil. Der eigentliche Sinn von HTML ist die Semantik.

Hm, hm...gut ich bezweifle dass die, die die Seite ansurfen, das deaktivert haben

Den Spruch kenne ich schon zur Genüge, aber wie willst Du das bei hunderten Millionen potenziellen Besuchern beurteilen können?

Gibt es für sowas eine Alternativlösung ? (ich nehme einfach mal an die gibt es)

Ja klar, wie bei allen anderen Seiten auch: Neue Seite laden.

Wäre klasse wenn du mir einen Themenbegriff nennen könntest, ich lese mich dann schon ein ;)

Vielleicht brauchst Du noch "include" dazu? Andererseits, wie hast Du die anderen Seiten realisiert?

 

[Lokke]

Validität (die Syntax) ist aber nur ein Teil. Der eigentliche Sinn von HTML ist die Semantik.

Habe dazu auf dem Heimweg einige interessante Artikel gefunden und einen auch schon verschlungen. Sobald ich mich in CSS reingearbeitet habe kann ich das sicher korrekt anwenden, Sinn macht es ja allemal

Den Spruch kenne ich schon zur Genüge, aber wie willst Du das bei hunderten Millionen potenziellen Besuchern beurteilen können?

Dazu ist die Seite zu spärlich besucht - was nicht heißen soll, dass es deswegen egal ist

Ja klar, wie bei allen anderen Seiten auch: Neue Seite laden.

Das Ziel war halt alles auf einer Seite zu haben ;) Hatte gehofft, dass sich das mit collapse irgendwie regeln lässt, aber dann unterteil ich die Seiten halt einfach nochmal - so ne Endlosseite sieht nämlich alles andere als schick aus

Vielleicht brauchst Du noch &quot;include&quot; dazu? Andererseits, wie hast Du die anderen Seiten realisiert?

Include klingt sehr nett, zumindest nach den paar Fetzen, die ich auf die Schnelle ergoogeln konnte. Und worauf genau beziehst du die zweite Frage ?
Nacht
Lokke

 

[Efchen]

Sobald ich mich in CSS reingearbeitet habe kann ich das sicher korrekt anwenden

Eigentlich braucht man die Semantik BEVOR man CSS macht. Denn CSS basiert auf validem und semantisch sinnvollem HTML.
Ein Layout zu machen, ohne die richtigen Elemente zu kennen, die kommen werden, geht eigentlich nicht. Und die richtigen Elemente kann man nur wählen, wenn man den Inhalt kennt.

Und worauf genau beziehst du die zweite Frage ?

Das sollte heißen, dass ich das genauso realisieren würde, wie Du auch die anderen Seiten realisiert hast.
Es gibt keinen Grund, JavaScript-only-Realisierungen anzubieten, die Seiteninhalte austauschen. Mach es mit den normalen Bordmitteln: Anklicken -> Neue Seite mit den neuen Inhalten laden.
Werden Inhalte per JavaScript/Ajax nachgeladen, kann man nicht nur - wie bei Frames - kein Bookmark auf die neue Seite setzen, man kann sie nichtmal reloaden, weil sie keine eigene URL hat.

 

[Lokke]

Eigentlich braucht man die Semantik BEVOR man CSS macht.

Keine Angst, soweit habe ich den Artikel dann doch gelesen ;)
Ich meinte das eher so:
Es macht keinen Sinn, unsemantisches HTML zu streichen und über CSS realisieren zu wollen, ohne dort auch nur halbwegs durchzusteigen. Aber ich habe glaub ich in beiden Bereichen noch meine Hausaufgaben zu machen :)

Das sollte heißen, dass ich das genauso realisieren würde, wie Du auch die anderen Seiten realisiert hast.
Es gibt keinen Grund, JavaScript-only-Realisierungen anzubieten, die Seiteninhalte austauschen. Mach es mit den normalen Bordmitteln: Anklicken -> Neue Seite mit den neuen Inhalten laden.
Werden Inhalte per JavaScript/Ajax nachgeladen, kann man nicht nur - wie bei Frames - kein Bookmark auf die neue Seite setzen, man kann sie nichtmal reloaden, weil sie keine eigene URL hat.

Gut. Das war jetzt auch meine weitere Planung

Ich mach mich dann jetzt erstmal ans Umbauen - danke dir für die Infos

Gruß

 

[stachelbeer]

kennt jemand in diesem Zusammenhang die unterschiedliche Wirkung von visibility:collapse und display:none?

 

[Lokke]

Falls What's the difference between display: none and visibility: hidden? - Examples stimmt, würde none genau das machen, was ich ursprünglich mal vorhatte, sprich das was collapse mit Text und Tabellen macht auch mit img's ermöglichen.

 

[stachelbeer]

Ja. visibility:hidden; hat keine Auswirkung auf die Wirkung eines Elements nur auf die Anzeige, während display:none auch auf die Wirkung sich auswirkt.

Mit collapse scheint sich keiner so wirklich auszukennen.

 

[Efchen]

Also mal abgesehen davon, dass die Frage eigentlich nach visibility:collapse und nicht "hidden" ging, was ist eine "Auswirkung auf die Wirkung"?

visibility:hidden zeigt das Element nicht an, reserviert aber den nötigen Platz. display:none reserviert noch nichtmal Platz.

 

[Lokke]

was ist eine "Auswirkung auf die Wirkung" ?

Wirkung = Anzeige war wohl gemeint.

Gruß

PS@Efchen:
Hab jetzt komplett auf CSS umgesattelt. Wird bestimmt noch nicht alles perfekt sein, aber wtf ist das einfach damit zu designen wenn man erstmal vom table-Gedöns weg ist :shock:

Danke für den heißen Tipp

 

[bieder-design]

Das mit collapse ist eine einfache Sache. Wie bereits zuvor gesagt wurde, ist collapse für Tabellen vorgesehen.
collapse blendet Reihen, bzw. Spalten aus und gibt den Platz frei, der zuvor für die ausgeblendeten Elemente vorgesehen war. Auf alle anderen Elemente wirkt collapse wie hidden.
Allerdings kann in Tabellen genausogut hidden oder none benutzt werden.

Der Knackpunkt an der ganzen Sache ist, das collapse nicht in IE7+, bzw Opera 9 funktioniert, deshalb rate ich dazu visibility:collapse komplett aus dem Kopf zu streichen und stattdessen immer hidden oder none zu verwenden.

 

[Lokke]

Allerdings kann in Tabellen genausogut hidden oder none benutzt werden.

Ich hab mit n bisl suchen rausgefunden warums collapse überhaupt gibt...ist (wie so oft) eigtl. sogar recht sinnvoll.

visibility: collapse exists only for table rows and columns and means: remove the row or column entirely (as display: none does, too), but do not recalculate the widths and heights of the TD's in the other rows.

Mir fallen da auch direkt Gründe ein warum man das machen will.
(CSS2 - visibility)

Allerdings:

collapse is supported by Explorer Mac, Mozilla, Opera and Safari

Wie du schon sagtest - IE kanns mal wieder ned :)

 

[stachelbeer]

danke für Deine Mühe.