nicht angemeldet
Mit Javascript mittig positionieren?
Hallo miteinander!
Soviel ich mitgekriegt (und rumprobiert) habe ist es NICHT möglich irgendeinen Inhalt (aufgebaut mit divs) vertikal zu zentrieren...
Horizontal ist kein Problem (margin:auto; text-align:center; ) aber vertikal???
Ich will aber auf keinen Fall auf Tabellen zurückgreifen.
Irgendwo hab ich mal gehört dass man das auch mit einem Javacript-Code schaffen kann...
stimmt das?
Wenn ja wie könnte dieser aussehen? Irgendwelche Tipps wo ich das im Inet finde?
Vielen Dank!!!
-
Wenn ja wie könnte dieser aussehen? Irgendwelche Tipps wo ich das im Inet finde?
Was Du suchst, ist eine Kombination aus der Fensterhöhe (http://de.selfhtml.org/javascript/objekte/screen.htm#avail_height) und der Positionierung von Elementen mittels CSS (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position).
Im Detail: Mithilfe des screen-Objekts fragst Du die innere Höhe des nutzbaren Fensters ab, dividierst sie durch 2+(Elementhöhe-in-px/2) und erhältst so den top-Wert für die absolute Positionierung. Alles klar?
Herzlich, twb
-
Alles klar?»»
Herzlich, twbNein...gar nicht...;(
-
Hej,
Nein...gar nicht...;(
was hast Du denn an twb's Bauanleitung nicht verstanden?
Du erfragst mittels screen.availHeight die verfügbare Höhe des Fensters ab: zB. kommt da 600px raus.
Dein Element dass Du in diesen 600px vertikal positionieren möchtest ist zB. 400 px groß. Dein mathematische geschärftes Adlerauge verrät dir unmittelbar, dass die obere Position des Elements bei 100px liegen muss, die du mittels style.top (Guckst du noch hier) festlegst.
Nun nur nochmal die Frage wie du das mathematische Adlerauge deines Scripts schärfst:positionOben = (verfügbareHöhe-elementHöhe)/2
100px = ( 600px - 400px )/2jetzt klar?
Beste Grüße
Biesterfeld--
Selfcode:
fo:| br:> n4:? ie:{ mo:} va:} de:] zu:| fl:| ss:| ls:] -
Nein...gar nicht...;(
Weisst Du, Mel: _Self_HTML kommt von selber. So selber wie ich dieses Beispiel hier, ohne zu testen und als Beispiel für ein zentriertes Bild, ins Forums-Eingabefeld kritzle:
<script language="javascript">
netto=screen.availHeight;
anzeige="<center><img src="bildname.jpg" height="bildhoeheinpx" width="bildbreiteinpx" style="position:absolute;top:"+((netto-bildhoehe)/2)+""></center>";
document.getElementById("ID").innerHTML=anzeige;
</script>Herzlich, twb
-
Hej twb,
Das ist aber kein schönes JavaScript. Wenn ich JS deaktiviert habe, bekomme ich das Bild gar nicht angezeigt. Ein hoher Preis für eine Formatierung. Da sie Anfängerin zu sein scheint, sollte man ihr das dann auch vielleicht nicht so unschön beibringen.
function vertAl(){
netto = screen.availHeight;
divHoehe = document.getElementById("umMichGehts").style.height;
divPos = (netto-divHoehe)/2;
document.getElementById("umMichGehts").style.top = divPos;
}<body onLoad="vertAl()">
<div id="umMichGehts" style="position:abolute; top:20px; height:400px;"></div>
</body>ungetestet bezüglich Browserkompaitibilität und weiterer Unzulänglichkeiten, z.B. Fenstergrößenänderung.
Die erwähnten css-Varianten sind in jedem Fall vorzuziehen.Beste Grüße
Biesterfeld--
Selfcode:
fo:| br:> n4:? ie:{ mo:} va:} de:] zu:| fl:| ss:| ls:]-
function vertAl(){
netto = screen.availHeight;
divHoehe = document.getElementById("umMichGehts").style.height;
divPos = (netto-divHoehe)/2;
document.getElementById("umMichGehts").style.top = divPos;
}<body onLoad="vertAl()">
<div id="umMichGehts" style="position:abolute; top:20px; height:400px;"></div>
</body>Das, lieber Biesterfeld, ist selbstredend schöneres Javascript. (Ich _liebe_ Skripte mit Mittelscheitel!)
Herzlich, twb
PS: Und übrigens liebe ich auch das Design von softandlazy.de: Klasse!
-
Hej twb,
Das, lieber Biesterfeld, ist selbstredend schöneres Javascript. (Ich _liebe_ Skripte mit Mittelscheitel!)
pass mal auf, dein Ton passt mir nicht. Weder der wie du mich hier anhaust, noch der wie du hier manchmal Fragesuchende anredest. Möglicherweise habe ich hier in diesem Forum nicht den Stand der es mir erlaubt derart zu urteilen, aber du könntest dir dennoch überlegen warum ich dies so empfinde.
Ich habe erklärt warum ich deinen Code nicht schön fand. Ich habe erklärt warum ich es einem Anfänger gegenüber nicht sinnvoll finde derartigen Code zu posten. Welches Argument (Usability vs Mittelscheitel) tragender ist, darfst Du gerne selber entscheiden.
PS: Und übrigens liebe ich auch das Design von softandlazy.de: Klasse!
Damit allerdings hast du dich gerade wie ich finde ins Abseits gestellt. Auch wenn ich meine private HP hier verlinke, bin ich mir im klaren, dass das noch eine ganz große Baustelle ist. Dass man Baustellen am besten nicht verlinken sollte weiß ich auch. Allerdings habe ich mein Design nicht in diesem Thread zur Disposition gestellt.
Das ist so ähnlich wie wenn ich Dir auf der Straße sage: "Pass auf, tritt nicht in die Hundescheiße!" und du mir antwortest "Deine krumme Nase ist häßlich!"
In diesem Sinne wünsche ich Dir einen schönen Nachmittag.
Beste Grüße
Biesterfeld--
Selfcode:
fo:| br:> n4:? ie:{ mo:} va:} de:] zu:| fl:| ss:| ls:]-
pass mal auf, dein Ton passt mir nicht.
Das, lieber Biesterfeld, muss er auch nicht. Ganz besonders dann nicht, wenn Du Deinen Ironiefilter zu scharf einstellst.
twb
-
-
hi,
Das, lieber Biesterfeld, ist selbstredend schöneres Javascript.
unnötig bleibt es trotzdem.
wenn der div eine feste höhe hat, dann funktioniert die von Arx vorgeschlagene CSS-lösung doch genauso gut.wenn er keine feste höhe hat, oder keine explizit per style-attribut _am element selber_ vorgegebene höhe, dann könnte man diese über style.height nicht auslesen - sondern müsste offsetHeight o.ä. nutzen.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
-
-
-
-
-
-
Hallo Mel,
Soviel ich mitgekriegt (und rumprobiert) habe ist es NICHT möglich irgendeinen Inhalt (aufgebaut mit divs) vertikal zu zentrieren...
die Diskussion gab es ja schon öfter. Kennst du das Beispiel auf http://www.wpdfd.com/editorial/thebox/deadcentre4.html?
Vielleicht hilft es ja?
Mit freundlichen Grüßen
André
-
Привет, Mel!
Soviel ich mitgekriegt (und rumprobiert) habe ist es NICHT möglich irgendeinen Inhalt (aufgebaut mit divs) vertikal zu zentrieren...
Doch.
Horizontal ist kein Problem (margin:auto; text-align:center; ) aber vertikal???
Geht.
Ich will aber auf keinen Fall auf Tabellen zurückgreifen.
Das ist löblich.
Irgendwo hab ich mal gehört dass man das auch mit einem Javacript-Code schaffen kann...
Das geht auch ohne.
stimmt das?
Ja, aber...
Wenn ja wie könnte dieser aussehen? Irgendwelche Tipps wo ich das im Inet finde?
Da: http://forum.de.selfhtml.org/archiv/2005/1/t97833/ und http://skop.net/self/zentriertes_div.html
Пока!
Sven aus Bonn--
Do it yourSELF 'cause SELFmade is bestmade.
Selfcode: ie:% fl:( br:^ va:} ls:[ fo:) rl:( n4:{ ss:| de:> js:| ch:? mo:} zu:)
Selfcode dekodieren - Selfcode-Info