Hauptelemente in der Benutzerschnittstelle

[FuXz]

Hi Gerold!

Ich probiere es nochmal!
Hoffe verstehen Du wirst!

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.

[gerold]

Hi FuXz!

Hoffe verstehen Du wirst!

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

[gerold]

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