Div "prozentual" zentriert

[Loc Dogg]

Hallo allerseits,

Ich dreh langsam durch.
Habe auf den ersten Eindruck ein simples Problem.

Ich möchte dass ein Div immer "prozentual" zum Browserfenster zentriert wird d.h.

I-------------------------I
I                         I
I     I--------I          I
I 33% I        I    67%   I
I<--->I  div   I<-------->I
I     I        I          I
I     I--------I          I
I                         I
I                         I
I-------------------------I
Browserfenster

Man kann auch sagen 1/3 leerraum zu 2/3 leerraum.

Hab im Netz versucht mich schlau zu machen, aber irgendwie find nicht die passende Antwort.

Gruss Loc Dogg

[*Markus]

Hallo,

soll es jetzt zentriert werden, oder 33% vom linken Abstand haben? Außerdem ergibt deine Grafik keinen Sinn. 33% + 67% = 100%, wodurch das Div keine Breite haben dürfte.
Bei Linksabstand:

div {margin-left:33%}

zentriert zB so:

div {position:absolute; left:50%, margin-left:-[HALBE BREITE DES DIVS]}

Markus

[*Markus]

div {position:absolute; left:50%, margin-left:-[HALBE BREITE DES DIVS]}

Das Komma sollte natürlich ein Strichpunkt sein.
--

http://www.apostrophitis.at

六 7東曲 人港ラ

[Loc Dogg]

Nicht das was ich suche, aber Danke für Dir für die schnelle Antwort.

Ja, meine Garfik kann misvestandenden werden.
Die 100% die Du errechnet hast sind NICHT auf das Browserfenster bezogen, sondern
auf den Leerraum der mir nach einfügen des Divs (760px) noch rechts davon übrig bleibt.

Dieser leerraum soll dann zu 1/3 links vom Div und zu 2/3 rechts vom div platziert werden.

Diese 1/3 und 2/3 sind natürlich keine fixe px Werte da sie sich je nach Browserfenster-grösse anpassen, aber eben im verhältnis zueinander gleich bleiben.

Ich hoffe ich konnte es einigermasen erklähren.
Und vielleicht ergibt nun meine Grafik auch einen Sinn :).

P.S. Die Lösung die Du mir gegeben hast hat z.B. ein verhältins 1 zu 1 oder
50% zu 50% (nach meiner logik;)).

[Shepard (nl)]

Hallo,

... sondern auf den Leerraum der mir nach einfügen des Divs (760px) noch rechts davon übrig bleibt.

Dieser leerraum soll dann zu 1/3 links vom Div und zu 2/3 rechts vom div platziert werden.

Die Größe dieses Leerraums ist Fenstergröße minus Divgröße. Fenstergröße=100% (aus Sicht der enthaltenen Elemente), Divgröße=xxx Pixel. Das ist nicht kompatibel.

Meines Erachtens geht das nur dann, wenn das Div eine zum Fenster prozentual konstante Größe hat. Bei <div style="width:40%"> bleiben z.B. 60% übrig, davon 1/3 sind 20% und 2/3 sind 40%, also <div style="width:40%; margin-left:20%; margin-right:40%">

Bei fester Breite des <div>s müßte bei jeder Fenstergrößenänderung die Fenstergröße in Pixeln per Javascript ermittelt, und daraufhin das <div> dynamisch neu positioniert werden. Ob das eine schöne und lohnende Lösung ist, mußt Du selbst entscheiden.

Shepard

[Loc Dogg]

Servus Shepard,

Ein sehr schöner Lösungsansatz mit dem prozentualen div.
Leider für meine Idee nicht einsetzbar aber werd sie mir für die Zukunft merken.

Mit Js komm ich leider gar nicht klar. Es fehlt mir momentan auch die zeit es zu lernen.
Hab bei meiner Diplomarbeit schon viel zu viel Zeit verloren (Browseranpassungen) als das ich jetzt noch etwas KOMPLET neus lernen könnte.

Aber Danke auch Dir für die Antwort. Mal schauen ob diese Idee halt ein anderes mal zu tragen kommt.

Gruss Loc Dogg

[Struppi]

Ja, meine Garfik kann misvestandenden werden.
Die 100% die Du errechnet hast sind NICHT auf das Browserfenster bezogen, sondern
auf den Leerraum der mir nach einfügen des Divs (760px) noch rechts davon übrig bleibt.

Das macht genau der Vorschlag mit den negativen margin Wert, den Markus dir gemacht hat.

Struppi.

[Powl]

Hallo,

div {position:absolute; left:50%, margin-left:-[HALBE BREITE DES DIVS]}

div {position:absolute; left:50%, margin-left:-507px;
käme das nicht ungefähr hin?

netten Tag
^da Powl

[Gunnar Bittersmann]

Hello out there!

Zuerst wollte ich auch sagen, mit CSS sei das nicht möglich, für die Berechnungen müsse JavaScript her. Weit gefehlt; es geht ohne.

Stell die eine vertikale Linie vor, die den Viewport im Verhältnis 1 : 2 teilt. Damit der line Rand halb so groß ist wie der rechte, muss sich ein Drittel der Box links der gedachten Linie befinden:

┌─────┬───────────┐
│  ┌──┼─────┐     │
│  │  │     │     │
│  └──┼─────┘     │
└─────┴───────────┘

Mit

  body {  
    padding-left: 33%;  
  }

würde die Box an der Drittellinie anfangen. Sie muss also noch um ein Drittel ihrer Breite (die ist ja in Pixeln bekannt) nach links verschobn werden:

  div {  
    position: relative;  
    left: -253px;  
  }

See ya up the road,
Gunnar

PS: Und wie findet ein Nutzer mit schmalem Viewport eine Box mit einer festen Breite von 760px? Da er sehr ungern horizontal scrollt, wohl ziemlich blöd.

[Gunnar Bittersmann]

Hello out there!

PS: Und wie findet ein Nutzer mit schmalem Viewport eine Box mit einer festen Breite von 760px? Da er sehr ungern horizontal scrollt, wohl ziemlich blöd.

Und wie findet es ein Nutzer mit schmalem Viewport, dass die Teile der Box, die durch die relative Positionierung nach links aus dem Viewport herausgeschoben wurden, für ihn gar nicht zu sehen sind, auch nicht durch Scrollen erreichbar? Wohl total blöd.

Meine Lösung eignet sich daher nur für Spezialfälle, wenn du etwas über die Gegebenheiten beim Nutzer weißt. Im Web weißt du darüber i.A. gar nichts.

Also doch JavaScript.

HTML:

<body>  
  <div id="container">  
    <p>Lorem ipsum dolor sit amet.</p>  
  </div>  
</body>

CSS hätte sein können:

#container  
{  
  [ref:self811;css/eigenschaften/positionierung.htm#max_width@title=max-width]: 760px;  
}

Durch die Eigenschaft 'max-width' wäre sichergestellt, dass bei schmalerem Viewport der Inhalt auch ohne horizontales Scrollen lesbar ist.

Dummerweise versteht _I_rgend_E_in Browser[tm] diese Eigenschaft nicht. Deshalb wird das auch im Script gemacht:

unobtrusive JavaScript:

window.onload = setContainerMargin;   // Funktion wird nach Laden der Seite aufgerufen  
  
window.onresize = setContainerMargin; // Funktion wird nach Veränderung der Viewportgröße erneut aufgerufen  
  
function setContainerMargin()  
{  
  var container = document.getElementById("container");  
  var containerWidth = container.[ref:self811;javascript/objekte/all.htm#offset_width@title=offsetWidth];  
  var viewportWidth = document.body.offsetWidth;  
  
  if (containerWidth > viewportWidth)  
  {  
    container.[ref:self811;javascript/objekte/style.htm@title=style].width = viewportWidth + "px";  
    container.style.marginLeft = "0";  
  }  
  else  
  {  
    container.style.marginLeft = ((viewportWidth - containerWidth) / 3) + "px";  
  }  
}

See ya up the road,
Gunnar