HTML/CSS: Absolut positionierte Elemente sollen Breite von 100% breiten Containern beeinflussen

LaMi

Geek

Beiträge: 3 493

Geburtstag: 22.09.

Geschlecht: Männlich

Wohnort: München

Beruf: Berater / Entwickler

Anzahl Nagios-Server: x

Nagios-Version(en): 3.2.x

Verteiltes Monitoring: Nein

Redundantes Monitoring: Nein

Anzahl-Hosts: x

Anzahl Services: x

Betriebssystem(e): SLES,CentOS,Debian

Plugin-Version(en): x

NagVis-Version: Git

NDO-Version: -

IDO-Version: -

Perfparse-Version: -

Sonstige Addon's: PNP, Check_MK, Livestatus, Multisite

1

27.01.2011, 20:10

Hallo Leute,

mal schauen, ob jemand von euch dies Nuss knacken kann. Ich habe es nach langem rumprobieren noch nicht geschafft.

Ich habe folgendes Problem: Auf einer Webseite (Beispielcode unten) gibt es ein DIV, welches absolut positioniert ist (kleiner blauer Kasten). Das andere Element auf der Seite (roter Balken oben) ist mit 100% Breite definiert.
Eigentlich sollen die 100% Container (roter Streifen oben) die Seite in voller Breite ausfüllen. Das Problem hier: Wenn der Viewport (also das Browserfenster) kleiner als 2000px ist und so das blaue Element hinter dem rechten Rand verschwindet, dann ist der rote Streifen oben immer nur so breit, wie der Viewport breit ist. Das kann man begutachten, wenn man nach rechts zum blauen Kasten scrollt, oder aber sich das Bild im Anhang anschaut.

Demnach bezieht sich die Angabe 100% nicht auf die volle Breite der Seite, sondern in diesem Fall nur auf die Breite des Browserfensters.

Eine Erklärung ist relativ einfach: Wenn man ein Objekt absolut positioniert, dann wird es aus dem normalen Dokumentenfluss entfernt und wirkt sich erst mal auch nicht auf die Skalierung der Eltern-Elemente aus.

	Quellcode
1 2 3 4 5 6 7 8 9 10 11 12 13 14

Nun die Preisfrage: Hat jemand genug Skill um dafür nen reinen HTML bzw. CSS Fix/Hack/Workaround zu bauen?

Grüße,
Lars

»LaMi« hat folgendes Bild angehängt:

NagVis: [ Sourceforge.net | NagVis.org | ]
LarsMichelsen.com about Nagios

/(bb|[^b]{2})/

Zum Seitenanfang

LaMi

Geek

Beiträge: 3 493

Geburtstag: 22.09.

Geschlecht: Männlich

Wohnort: München

Beruf: Berater / Entwickler

Anzahl Nagios-Server: x

Nagios-Version(en): 3.2.x

Verteiltes Monitoring: Nein

Redundantes Monitoring: Nein

Anzahl-Hosts: x

Anzahl Services: x

Betriebssystem(e): SLES,CentOS,Debian

Plugin-Version(en): x

NagVis-Version: Git

NDO-Version: -

IDO-Version: -

Perfparse-Version: -

Sonstige Addon's: PNP, Check_MK, Livestatus, Multisite

2

03.02.2011, 14:19

*push*

Kein l33t hax0r hier, der das Problem lösen kann?

NagVis: [ Sourceforge.net | NagVis.org | ]
LarsMichelsen.com about Nagios

/(bb|[^b]{2})/

Zum Seitenanfang

rbrinkmo

Fortgeschrittener

Beiträge: 412

Geschlecht: Männlich

Wohnort: Filderstadt (nähe Stuttgart)

Anzahl Nagios-Server: 3

Nagios-Version(en): 2.9

Verteiltes Monitoring: Ja

Redundantes Monitoring: Nein

Anzahl-Hosts: ca. 2.600+

Anzahl Services: ca. 15.000+

Betriebssystem(e): CentOS 5

Plugin-Version(en): 1.4.9

NagVis-Version: 1.2.2

NDO-Version: 1.4b7

Sonstige Addon's: Nagios Grapher, Nagios Portal, fruity, NRPE, NSCA, NSClient++

3

03.02.2011, 15:32

RE: HTML/CSS: Absolut positionierte Elemente sollen Breite von 100% breiten Containern beeinflussen

Hallo Lars,

eine "reine" HTML bzw. CSS Lösung fällt mir dazu nicht ein ... abgesehen von:

	Quellcode
1

Also ein 1px breites und 10px hohes rotes Image beim Body nur in der ersten Zeile des Body wiederholen lassen.
Ich weiss aber nicht ob das deinem Zweck dienlich ist.

Zitat von »LaMi«

Nun die Preisfrage: Hat jemand genug Skill um dafür nen reinen HTML bzw. CSS Fix/Hack/Workaround zu bauen?

Javascript ist inakzeptabel?

Oder anders ... wie kommen die Werte der Position des blauen Objektes in den Source der HTML-Seite?
Hardcoded => Dann nutze doch die Summe aus Position und Breite für die Angabe der Breite des roten Div (ok, blödsinn weil zu einfach - streichen)
Generiert (z.B. PHP-Output) => Dann setze doch den Wert der Breite des roten Div indem du die Summe aus Position und Breite des blauen ebenfalls generierst

Aber ich geh mal davon aus, dass du diese Varianten bereits in Betracht gezogen hättest wenn deine Anforderungen dies zuliessen.

Welche Bedingungen sind denn noch zu erfüllen?
Was genau ist dein Ziel, bzw. was sind absolute NoGo?

Gruss,
Rainer
(kein l33t hax0r)

NagIncidents

Zum Seitenanfang

LaMi

Geek

Beiträge: 3 493

Geburtstag: 22.09.

Geschlecht: Männlich

Wohnort: München

Beruf: Berater / Entwickler

Anzahl Nagios-Server: x

Nagios-Version(en): 3.2.x

Verteiltes Monitoring: Nein

Redundantes Monitoring: Nein

Anzahl-Hosts: x

Anzahl Services: x

Betriebssystem(e): SLES,CentOS,Debian

Plugin-Version(en): x

NagVis-Version: Git

NDO-Version: -

IDO-Version: -

Perfparse-Version: -

Sonstige Addon's: PNP, Check_MK, Livestatus, Multisite

4

06.02.2011, 17:57

Hallo Rainer,

danke für deine Rückmeldung.

Im Prinzip wäre das mit dem Hintergrund schonmal ein Anfang. Allerdings bin ich mir noch nicht so sicher, ob das zufriedenstellend wäre.

Ich hatte zunächst die Befürchtung, dass ich einen Knoten im Hirn habe und einfach nur nicht auf eien womöglich naheliegende Lösung via CSS komme. Mittlerweile glaube ich aber, dass das tatsächlich nicht so einfach machbar ist.
Nun, ich wollte von Javascript absehen, weil das mal wieder ein übler Hack wäre. Denn es reicht nicht einfach im PHP das Element zu finden, welches am weitesten rechts positioniert ist. z.B. bei Textboxen oder Labels ist es möglich, dass diese automatisch breiter werden (width=auto). Also muss man tatsächlich im Javascript schauen, welches Element am weitesten nach rechts ragt. Also Position+Breite. Das geht schon ... aber es resultiert ungefähr in folgendem Code:

Quellcode

/**
 * Hack to scale elements which should fill 100% of the windows viewport. The
 * problem here is that some map objects might increase the width of the map
 * so that the viewport is not enough to display the whole map. In that case
 * elements with a width of 100% don't scale to the map width. Instead of this
 * the elements are scaled to the viewports width.
 * This changes the behaviour and resizes the 100% elements to the map size.
 *
 *   Lars Michelsen <>
 */
function scaleView() {
  // First get the rightmost element
  var container, obj;
  var width = 0;
  for(var i in oMapObjects) {
    container = oMapObjects[i].parsedObject;
    for(var i = 0, len = container.childNodes.length; i < len; i++) {
      obj = container.childNodes[i];
      if(obj.offsetLeft + obj.clientWidth > width) {
        width = obj.offsetLeft + obj.clientWidth;
      }
    }
  }
  obj = null;
  container = null;

  // Now resize the objects to be scaled to the whole maps width
  var header = document.getElementById('header');
  if(header) {
    header.style.width = width + 'px';
    header = null;
  }
}

Funktioniert zwar, ist aber dann doch irgendwie nicht so toll.

Gut, nachdem ich das nun mit Javascript ausprobiert habe, muss ich gestehen, dass das Problem wohl noch etwas komplexer ist. Das Header-Menu in NagVis hat ja sowohl links, als auch rechts Menupunkte. Wenn man nun das Header-Menu auf die volle breite der Map skaliert, kann es sein, dass die Menupunkte rechts verschwinden. Dann muss man womöglich ein paar Meter scrollen um die Menupunkte zu erreichen. Das ist nicht der Sinn der Sache.

Ich tendiere gerade dahin das Header Menu einfach mitscrollen zu lassen, also es 'fixed' zu positionieren. Das würde auch das bisherige Problem lösen. Je mehr ich drüber nachdenke, desto mehr gefällt mir das.

Meinungen?

Grüße,
Lars

NagVis: [ Sourceforge.net | NagVis.org | ]
LarsMichelsen.com about Nagios

/(bb|[^b]{2})/

Zum Seitenanfang

rbrinkmo

Fortgeschrittener

Beiträge: 412

Geschlecht: Männlich

Wohnort: Filderstadt (nähe Stuttgart)

Anzahl Nagios-Server: 3

Nagios-Version(en): 2.9

Verteiltes Monitoring: Ja

Redundantes Monitoring: Nein

Anzahl-Hosts: ca. 2.600+

Anzahl Services: ca. 15.000+

Betriebssystem(e): CentOS 5

Plugin-Version(en): 1.4.9

NagVis-Version: 1.2.2

NDO-Version: 1.4b7

Sonstige Addon's: Nagios Grapher, Nagios Portal, fruity, NRPE, NSCA, NSClient++

5

07.02.2011, 09:57

Hallo Lars,

Zitat von »LaMi«

Ich tendiere gerade dahin das Header Menu einfach mitscrollen zu lassen, also es 'fixed' zu positionieren. Das würde auch das bisherige Problem lösen. Je mehr ich drüber nachdenke, desto mehr gefällt mir das.

Bei entsprechend breiten Maps scheint auch mir das die beste Lösung zu sein.
Die Frage wäre aber... ab welcher "Überbreite" lohnt sich das? Und wie oft kommen so breite Maps vor?
Inwieweit macht eventuell eine Zoom-Funktion mehr Sinn? Oder ein kleines mitwanderndes Übersichtsfenster auf der Map, anhand dessen man den sichtbaren Bereich festlegen kann. Das könnte ein ein-/ausblendbares Popup-Fenster sein in dem man anhand eines verschiebbaren Rechtecks den Darstellungsbereich festlegt. Oder halt eine Zoom-Funktion für die gesamte Map anhand der man über Plus/Minus-Taste oder Mausrad zoomen kann.
Die Frage ist nur inwiefern das alles wirklich effektiver bzw. besser händelbare wäre als über die Scrollbalken des Browser zum gewünschten Sichtbereich zu wandern.

Als weitere Lösungsmöglichkeit möchte ich noch einmal auf ein ausklappbares links- oder rechtsbündiges Menü zurück kommen in dem man zusätzlich eine Baumstruktur zur Verwaltung der Maps integrieren könnte. Vielleicht wäre die Feature-Kombination aus dem "Übersichtsfenster" und einem ausblendbarem, seitlichem Menü mit Baumstruktur ja eine Kombination die man für eines der nächsten, größeren Versionswechsel ins Auge fassen könnte.

Gruss,
Rainer

NagIncidents

Zum Seitenanfang

LaMi

Geek

Beiträge: 3 493

Geburtstag: 22.09.

Geschlecht: Männlich

Wohnort: München

Beruf: Berater / Entwickler

Anzahl Nagios-Server: x

Nagios-Version(en): 3.2.x

Verteiltes Monitoring: Nein

Redundantes Monitoring: Nein

Anzahl-Hosts: x

Anzahl Services: x

Betriebssystem(e): SLES,CentOS,Debian

Plugin-Version(en): x

NagVis-Version: Git

NDO-Version: -

IDO-Version: -

Perfparse-Version: -

Sonstige Addon's: PNP, Check_MK, Livestatus, Multisite

6

07.02.2011, 16:35

Zitat

Die Frage wäre aber... ab welcher "Überbreite" lohnt sich das? Und wie oft kommen so breite Maps vor?

Ich habs gestern Abend umgesetzt. Soviel Arbeit war das nicht. Das wars schon wert, fühlt sich viel besser an.

Zitat

Inwieweit macht eventuell eine Zoom-Funktion mehr Sinn?

Mir fällt keine Möglichkeit ein, wie man das mit den aktuell genutzten Techniken sinnvoll umsetzen kann. Da müsste man im Frontend einen ziemlich großen Wurf machen, damit das geht. Langfristig sehe ich das aber schon als Ziel.

Zitat

Als weitere Lösungsmöglichkeit möchte ich noch einmal auf ein ausklappbares links- oder rechtsbündiges Menü zurück kommen in dem man zusätzlich eine Baumstruktur zur Verwaltung der Maps integrieren könnte. Vielleicht wäre die Feature-Kombination aus dem "Übersichtsfenster" und einem ausblendbarem, seitlichem Menü mit Baumstruktur ja eine Kombination die man für eines der nächsten, größeren Versionswechsel ins Auge fassen könnte.

Wenn du magst, kannst du dir mal den Code aus dem aktuellen Git Master schnappen. Da wandert das Header-Menu mit und man kann es ein und ausblenden (links ist ein kleiner Knopf dafür). Wenn du im Header-Menu auf den 'Open' Menupunkt klickst, öffnet sich einen Sidebar, die man auf dem Gleichen Weg auch wieder schließen kann. Vielleicht noch nicht so ganz rund, aber so wäre es doch schon mal nicht schlecht...
Grüße,
Lars

NagVis: [ Sourceforge.net | NagVis.org | ]
LarsMichelsen.com about Nagios

/(bb|[^b]{2})/

Zum Seitenanfang

rbrinkmo

Fortgeschrittener

Beiträge: 412

Geschlecht: Männlich

Wohnort: Filderstadt (nähe Stuttgart)

Anzahl Nagios-Server: 3

Nagios-Version(en): 2.9

Verteiltes Monitoring: Ja

Redundantes Monitoring: Nein

Anzahl-Hosts: ca. 2.600+

Anzahl Services: ca. 15.000+

Betriebssystem(e): CentOS 5

Plugin-Version(en): 1.4.9

NagVis-Version: 1.2.2

NDO-Version: 1.4b7

Sonstige Addon's: Nagios Grapher, Nagios Portal, fruity, NRPE, NSCA, NSClient++

7

08.02.2011, 10:52

Zitat von »LaMi«

Zitat

Inwieweit macht eventuell eine Zoom-Funktion mehr Sinn?

Mir fällt keine Möglichkeit ein, wie man das mit den aktuell genutzten Techniken sinnvoll umsetzen kann. Da müsste man im Frontend einen ziemlich großen Wurf machen, damit das geht. Langfristig sehe ich das aber schon als Ziel.

Ohne mich jetzt weiter damit auseinandergesetzt zu haben frag ich mal ganz naiv ... geht das nicht unter Verwendung der gleichen Technik die du auf der Übersichtsseite für die Map-Vorschau verwendest?

Zitat von »LaMi«

Wenn du magst, kannst du dir mal den Code aus dem aktuellen Git Master schnappen. Da wandert das Header-Menu mit und man kann es ein und ausblenden (links ist ein kleiner Knopf dafür). Wenn du im Header-Menu auf den 'Open' Menupunkt klickst, öffnet sich einen Sidebar, die man auf dem Gleichen Weg auch wieder schließen kann. Vielleicht noch nicht so ganz rund, aber so wäre es doch schon mal nicht schlecht...

Klingt interessant. Ich werde es mir bei Gelegenheit mal anschauen.
Gruss,
Rainer

NagIncidents

Zum Seitenanfang

Nagios-/Icinga-Portal