Hauptelemente in der Benutzerschnittstelle

Django, Flask, Bottle, WSGI, CGI…
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

FuXz hat geschrieben:"Web Developer -> Informationen -> ID & Klassendetails einblenden"
Hi FuXz!

Das habe ich mir noch nie richtig angesehen. -- Werde ich ab jetzt sicher öfter verwenden.

lg
Gerold
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Hi Gerold!

Also es gibt an dem Tool schon paar sehr nette Sachen.
Das wäre "ID & Klassendetails einblenden" und "Reihenfolge der Div'
s Anzeigen" und "Z-Index einblenden" oder "Verwendete Farbe anzeigen"!
Nun dachte ich, ich hab das Design soweit angepasst ... denkste!
Jetzt habe ich mir die Seite im IE angeschaut.
Und jetzt gehts mir weider dreckig!
Bild

Im oberen Beispiel sieht man das ganze mit dem Firefox.
Hier habe ich das Problem, dass wenn der "intelligente Ordner" angezeigt wird, sich "Aktion" und "Ansicht" (was eigentlich die ersten beiden Reiter-Bestandteile sind) als letztes angezeigt werden und das auch noch links bündig.

Im unteren Beispiel das ganze mit dem IE!
Was zur Hölle macht der da? Warum schluckt er die Reiter-Bestandteile "
Bearbeiten, Eigenschaften, Kriterien, Unterordner, Zugriffsrechte"? Und mit dem darunter genau das gleiche...
Ich dachte, da die plone Geschichte W3C norm ist, sollte es sowas nicht geben?!?

Liegt das an mir? Wahrcheinlich hab ich etwas verändert, dass der IE nicht so mag!
Dank des neuen Tools wei ich ja, dass es sich "nur" um

Code: Alles auswählen

#portal-column-content   #content .documentEditable
.hiddenStructure
Ansichten
.contentViews

    * #contentview-folderContents .plain Inhalte
    * #contentview-view .selected Anzeigen
    * #contentview-edit .plain Bearbeiten
    * #contentview-metadata .plain Eigenschaften
    * #contentview-local_roles .plain Zugriffsrechte

.contentActions

    * #statusMenu .actionMenu deactivated

      .actionMenuHeader
      Status: .state-visibleÖffentlicher Entwurf
      .actionMenuContent
              o Privat schalten
              o Veröffentlichen
              o Einreichen
              o .actionSeparator Erweitert

    * #objectMenu .actionMenu deactivated

      .actionMenuHeader
      Zu Ordner hinzufügen
      .actionMenuContent
              o .contenttype-event Termin
              o .contenttype-file Datei
              o .contenttype-folder Ordner
              o .contenttype-image Bild
              o .contenttype-link Link
              o .contenttype-news-item Nachricht
              o .contenttype-document Seite
              o .contenttype-topic Intelligenter Ordner

    * #templateMenu .actionMenu deactivated

      .actionMenuHeader
      Ansicht
      .actionMenuContent
handeln kann :(
Danke!
MfG FuXz!
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Oh Man!
Nachdem ich jedes Ding durchgegangen bin und nichts fand, überlegte ich mit gleich komplette costum dateien rauszunehmen ... brachte auch keinen Erfolg.

Dann kam die Lösung... natürlich die dümmste die es gab!
Ich hatte mich im FireFoX unter Admin angemeldet ... und im IE unter einem User (dem ich ALLE Rechte gab).
Ich dachte mir, wenn ich einem User alle Rechte gebe (Manager, ...) hat er dieselben Optionen wie der Admin ... aber so kann man sich irren.
.... Oh man
aber das Problem von dem oberen Bild steht immer noch!
Danke!
MfG FuXz!
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Also auch im Quellcode ist die Reihenfolge:
- Status
- intelligenter Ordner
- Ansicht
- Aktionen

Warum steht der intelligente Ordner ganz Vorne?
Ich vermute fast, dass es irgendwas mit dem Zeilenumbruch zu tun hat!

-edit-
Als würde er Rechts anfangen: Status schreiben, dann I.O.(Links daneben) dann kommt ein Zeilenumbruch, dann kommt Ansicht , dann Aktionen (links daneben).
Danke!
MfG FuXz!
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

FuXz hat geschrieben:Also auch im Quellcode ist die Reihenfolge:
- Status
- intelligenter Ordner
- Ansicht
- Aktionen
Hi FuXz!

Vielleicht hast du die Reihenfolge in den "portal_actions" verändert.

Wenn du das Fenster überbreit machst, so dass alles in einer Zeile Platz hat. Passt es dann? (zum Probieren, Bildschirmauflösung erhöhen...)

lg
Gerold
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Hi Gerold!

Die Reihenfolge bei Portal_actions habe ich nie angefasst!
Und wenn ich den Ausschnitt vergrößere werden mehr Elemente auf der ersten Zeile angezeigt bzw. komplett ... je nachdem wie groß der Content Container wird.
Eine Idee?
Danke
Danke!
MfG FuXz!
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

FuXz hat geschrieben:wenn ich den Ausschnitt vergrößere werden mehr Elemente auf der ersten Zeile angezeigt bzw. komplett
... in der richtigen Reihenfolge?

Wenn Ja, und wenn es dich stört, dann kümmere dich darum, dass du mehr Platz bekommst. Du kannst nicht einfach den Hauptbereich (Content) so schmal machen und dich dann wundern, warum alles untereinander (verschoben) da steht.

lg
Gerold
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Ja in der richtigen Reihenfolge ... das ist ja das verwunderliche!
Mir ist klar, dass wenn ich den Content verkleinere automatische die Dinge in einer neuen Zeile erscheinen. Mir ist nur unklar, warum die Reihenfolge durcheinander gehauen wird, wenn es 2 zeilig wird!
Danke!
MfG FuXz!
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

FuXz hat geschrieben:Mir ist nur unklar, warum die Reihenfolge durcheinander gehauen wird, wenn es 2 zeilig wird!
Hi FuXz!

Plone ist so gestaltet, dass es auch von sehbehinderten Menschen gut gelesen werden kann. Dafür ist es notwendig, relativ wenig Tabellen und mehr Listen einzusetzen.
Damit diese Listen für nicht sehbehinderte Menschen wie eine Tabelle aussehen, werden diese mit viel Aufwand per CSS so umdesigned, dass diese nicht untereinander, sondern nebeneinander stehen. Allerdings ist das so kompliziert, teilweise unausgereift und für solche optische Fehler so sehr anfällig, dass ich auch ab und zu mal wieder einen nicht gut gemeinten Fluch in Richtung Plone-Designer ausstoße.

Der Grund für diese unlogisch anmutenden Verschiebungen sind wahrscheinlich die vielen "float: left;", "float: right", "block: ..." in den CSS-Files.

Ich persönlich habe mich damit abgefunden, und versuche erst gar nicht, irgendetwas kompliziertes an den Document-Tabs oder diesen Menüs zu ändern. Maximal Padding und Margin anpassen... aber das kann auch schon schief gehen.

Ich kann dir bei so komplexen Dingen nicht helfen, da es mich dann zu viel Zeit kosten würde und ich ja auch noch einen Job habe, auf den ich mich konzentrieren muss.

lg
Gerold
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Ich glaub auch, dass ich das jetzt einfach sein lasse ...
Ich kann dir bei so komplexen Dingen nicht helfen, da es mich dann zu viel Zeit kosten würde und ich ja auch noch einen Job habe, auf den ich mich konzentrieren muss
Ok - ein Wink mit dem Zank Speitel .... Ich stell keine Fragen mehr!
Hab zwar noch einige aber naja... :roll:
Danke!
MfG FuXz!
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

FuXz hat geschrieben:.... Ich stell keine Fragen mehr! Hab zwar noch einige aber naja... :roll:
Hi FuXz!

Falsch verstanden! Ich kann dir nur bei diesem komplizierten Thema nicht helfen, da ich da auch nur durch experimentieren auf eine eventuelle Lösung komme. Da ich so etwas schon öfter gemacht habe, weiß ich, dass ich dafür wohl Stunden brauchen werde, die ich nicht für so eine Kleinigkeit opfern kann.

Je eine Frage in einem neuen Thread, am besten mit Bild und Erklärung was du machen möchtest -- dann ist das Antworten nicht schwer. --> Das ist der Wink mit dem Zaunpfahl. ;-) Vorheriger Beitrag war komplett zaunpfahllos. :-)

lg
Gerold
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

okilidokili!
Dachte ich mir auch schon öfter ...
Danke!
MfG FuXz!
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Hi!

Das gehört wieder zum Topic!
Wir hatten dich mal so einen Balken zu Hauptreitern gemacht.
Die geschah mit:
<div style="z-index:2;">
<img src="hintergrund_reiter.jpeg" width="100%" height="21px">
</div>
ok, alles ganz fein, aber.
Jetzt habe ich versucht in einem bestehenden Ordner einen Ordner zu erstellen.
Das passierte im IE und im FF dies
Bild
Ich muss noch dazu sagen, dass der Balken erst erscheint, dann aber, verschwindet!
Im IE bleibt ein ungeladenes Bild stehen und im FF erscheint der Balken auch kurz verschwindet dann aber ganz.
-upd-
So nun hab ich den Balken mal absolute positioniert.
Im FF verschwindet er komplett und im IE ist wieder nur so ein ungeladenes Bild zu sehen.
Eine idee?
Danke!
MfG FuXz!
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

FuXz hat geschrieben:Eine idee?
Hi FuXz!

...keine Idee! Schon zu verworren die Geschichte ist.

mfg
Gerold
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Es ist komisch.
wie als würde sich #portal-columns plötzlich nach dem aufbau hoch schieben.Und das Bild wird nicht angezeigt weil ... keine Ahnung.
Danke!
MfG FuXz!
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Hi Gerold!

Ich probiere es nochmal!
Hoffe verstehen Du wirst!
Bild
Hier siehst du mein Problem.
Oben: So sieht es mit dem IE aus.
Man erkennt das er Img laden will, dass nicht vorhanden ist.
Es IST! aber da und funktioniert ja sonst tadellos. Aber wenn ich ein Artikel oder Ähnliches erstellen will wird dieses Img nur so(s.o.) geladen.
Unten: So sieht es im FF aus.
Das Img wird erst geladen (richtige Stelle alles ok) dann beim weiteren Ladde-Vorgang verschwindet das Img komplett und der Reiter rückt eine Zeile tiefer.
----
Ich merke gerade, dass dieses "event" nur geschieht, wenn ich in einem Ordner einen neuen Ordner erstellen will. (Bei dem anderen kommt ja ein Fehler)
Und es passiert dies:
0. von ordentlich funktionierender Seite kommend
1. SEite baut sich auf
2. Img (mit Kreuz drin - Bild wird nicht dargestellt) wird geladen an richtiger Stelle
3. Seite baut sich weiter auf
4. der gesamte content (column) schiebt sich um ein paar Zeilen höher, auf die Position wo das Img eigentlich anfangen würde.
- edit -
selbst wenn ich die gesamte ploneCostum.css rausnehme hab ich das selbe Resultat!
- edit -
Also ich habe noch nen bissl weiter rumprobiert!

Code: Alles auswählen

<div style="background-image:url(hintergrund_reiter.jpeg); width:100%; height:21px">
<img src="hintergrund_reiter.jpeg" width="100%" height="21px">
</div>
Bild wird zwar nicht angezeigt, aber die Reiter sind schonmal richtig positioniert!
Also ich hab auch noch mit background-color rumgespielt.
Da funktioniert es problemlos!
Also anscheinend liegt es nur am IMG!
wenn ich nur

Code: Alles auswählen

<div style="background-image:url(hintergrund_reiter.jpeg); width:100%; height:21px;">
</div>
mache, ist wenigstens die Reiter richtig plaziert!
Aber das img will es nicht laden!
- edit -
Ich habe es auch absolute positioniert!
Er will das img nicht laden!
Momentane Lösung:

Code: Alles auswählen

<div style="background-color:lightblue; width:100%; height:21px">
<img src="hintergrund_reiter.jpeg" width="100%" height="21px">
</div>
Da wird normal das IMG angezeigt und wenn der "böse-Bereich" kommt, erscheint anstatt des Hintergrundbildes ein lightblue Balken.
Danke!
MfG FuXz!
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Hi FuXz!
FuXz hat geschrieben:Hoffe verstehen Du wirst!
:lol:
FuXz hat geschrieben:4. der gesamte content (column) schiebt sich um ein paar Zeilen höher, auf die Position wo das Img eigentlich anfangen würde.
- edit -
selbst wenn ich die gesamte ploneCostum.css rausnehme hab ich das selbe Resultat!

Es sieht so aus, als ob du dir die "main_template" verhaut hättest.

Zeig doch mal die "main_template" her.

lg
Gerold
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Hier ein Balken mit Hintergrundgrafik:

Ausschnitt aus der "main_template":

Code: Alles auswählen

[...]
             <div metal:use-macro="here/global_sections/macros/portal_tabs">
               The global sections tabs. (Welcome, News etc)
             </div>

              <div metal:use-macro="here/global_personalbar/macros/personal_bar">
                 The personal bar. (log in, logout etc...)
              </div>
    
              <div metal:use-macro="here/global_pathbar/macros/path_bar">
                 The breadcrumb navigation ("you are here")
              </div>

          </div>

      </div>

      <div class="visualClear"><!-- --></div>
      


      <div style="background-image: url(book_icon.gif); height: 2em;"></div>



      <tal:comment replace="nothing">
      The wrapper table. It contains the three columns. There's a table-less
      alternative in the plone_tableless skin layer that you can use if you
      prefer layouts that don't use tables.
      </tal:comment>

      <table id="portal-columns">
        <tbody>
          <tr>
            <tal:comment replace="nothing"> Start of the left column </tal:comment>
[...]
Achte darauf, dass ich den Balken zwischen das "div" mit der Klasse "visualClear" und der Tabelle mit den Spalten (portal-columns) lege. Das Kommentar (tal:comment replace="nothing") ist irrelevant. Der Balken wird mir im Firefox und im IE korrekt angezeigt.

Dieses "visualClear" hat eine wichtige Aufgabe. Damit werden alle "float: left;" usw. zurück gesetzt. An diesem Punkt beginnt alles schön aufgeräumt von vorne. Wenn du nichts absolut positioniert hast, dann wird diese Grenze nicht überschritten und keine Spalte wird sich über das Bild schieben, das auch an dieser Stelle positioniert ist.

lg
Gerold
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
Antworten