Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Crackp0t" data-source="post: 1397600" data-attributes="member: 55692">Ich bins mal wieder. <img src="/styles/default/xenforo/smilies/biggrin.gif"&nbsp; class="smilie" loading="lazy" alt=":D" title="Big Grin&nbsp; &nbsp; :D" data-shortname=":D" />Habe an meiner HP kräftig weitergebastelt und stehe nun vor folgendem Problem:Da ich nicht weiß, welche Bildschirmauflösung der Betrachter genau verwendet möchte ich meine (absolut positionierten) DIV horizontal als auch vertikal zentrieren. Ersteres ist ja kein Problem in Verbindung mit einem entsprechenden Parent-Element welches relativ mit Margin:auto zentriert wird. Zweiteres bereitet aber schon ehr schwierigkeiten.Ich habe <a href="http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html" target="_blank">Vertical centering in valid CSS</a> in Google bereits gefunden und in dem Beispiel scheint es einigermaßen zu funktionieren. Aber ich brauche nur den Quelltext in meinen Editor zu kopieren, als HTML abzuspeichern und im selben Browser anzeigen lassen... und schon funktioniert es nicht mehr.Leider bin ich auch etwas ratlos, wie ich die Lösung in meinen jetzigen Quelltext implementieren sollte. Stellt das &quot;outer&quot; in meinem Fall den DIV &quot;main_box&quot; da? Und &quot;middle&quot; den DIV &quot;centering&quot;? Oder muss ich noch mehr DIV verschachteln?[html]&lt;html&gt;&lt;head&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;&nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; function overlay() {&nbsp; &nbsp; &nbsp; &nbsp; if (document.getElementById(&quot;pic_overlay_box&quot;).style.display == &quot;none&quot;) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;pic_overlay_box&quot;).style.display = &quot;block&quot;;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;pic_overlay_box&quot;).style.display = &quot;none&quot;;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp; &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;main_box&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;pic_overlay_box&quot; style=&quot;display: none&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;big_pic_box&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p id=&quot;close&quot; onclick=&quot;overlay()&quot;&gt;x&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;image_menu&quot; onmouseover=&#039;document.getElementById(&quot;menu_inner&quot;).style.display=&quot;block&quot;&#039; onmouseout=&#039;document.getElementById(&quot;menu_inner&quot;).style.display=&quot;none&quot;&#039; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;menu_inner&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;div id=&quot;centering&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;thumb_box&quot;&gt;&nbsp; &nbsp;&nbsp; &lt;div id=&quot;thumb_box_inner&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;thumbnail&quot; onclick=&quot;overlay()&quot;&gt;&lt;/div&gt;&nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;content_box&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;prev_image&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;info_box&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/html][code]/*##################global stuff##################*/body {&nbsp; &nbsp; background-color:#000;&nbsp; &nbsp; margin: 0px;}#main_box {&nbsp; &nbsp; /*border:1px solid #FFFFFF;*/&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin:auto;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }#centering {position: relative;margin: auto;width: 750px;height: 98%}&nbsp; &nbsp; /*##################content##################*/#prev_image {background-color: #FFF;position: relative;margin: 40px 10px;height: 350px;width: 350px;float: left;}#info_box {background-color: #FFF;position: relative;margin: 40px 10px;height: 350px;width: 350px;float: right;}/*##################thumbnails##################*/#thumb_box {&nbsp; &nbsp; /*background-color: #515151;*/&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; padding: 0px 0px;&nbsp; &nbsp; bottom: 5%;&nbsp; &nbsp; width: 750px;&nbsp; &nbsp; height: 120px;}#thumb_box_inner {&nbsp; &nbsp; background-color: #000;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; width: 720px;&nbsp; &nbsp; height: 120px;}#thumbnail {&nbsp; &nbsp; background-color: #FFF;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin: 10px 10px;&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; float: left;}/*##################overlay box##################*/#pic_overlay_box {&nbsp; &nbsp; /*border:1px solid #3C3;*/&nbsp; &nbsp; background-image: url(&quot;t_back2.png&quot;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; top: 0px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; z-index: 9998;}#big_pic_box {&nbsp; &nbsp; /*border: 1px solid #FFF;*/&nbsp; &nbsp; background-color: #000;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; top: 1%;&nbsp; &nbsp; width: 420px;&nbsp; &nbsp; height: 550px;&nbsp; &nbsp; z-index: 9999;}/*##################overlay box menu##################*/#image_menu {&nbsp; &nbsp; /*border: 1px solid #FFF;*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; bottom: 0px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 50px;}#menu_inner {&nbsp; &nbsp; background-image: url(&quot;t_back2.png&quot;);&nbsp; &nbsp; /*border: 1px solid #FFF;*/&nbsp; &nbsp; /*display: none;*/&nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; bottom: 0px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 50px;}p#close {&nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; font-size: 14pt;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: -25px;&nbsp; &nbsp; right: 2px;&nbsp; &nbsp; &nbsp; &nbsp; }p#close:hover {&nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; }[/code]</blockquote>

[QUOTE="Crackp0t, post: 1397600, member: 55692"] Ich bins mal wieder. :D Habe an meiner HP kräftig weitergebastelt und stehe nun vor folgendem Problem: Da ich nicht weiß, welche Bildschirmauflösung der Betrachter genau verwendet möchte ich meine (absolut positionierten) DIV horizontal als auch vertikal zentrieren. Ersteres ist ja kein Problem in Verbindung mit einem entsprechenden Parent-Element welches relativ mit Margin:auto zentriert wird. Zweiteres bereitet aber schon ehr schwierigkeiten. Ich habe [URL="http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html"]Vertical centering in valid CSS[/URL] in Google bereits gefunden und in dem Beispiel scheint es einigermaßen zu funktionieren. Aber ich brauche nur den Quelltext in meinen Editor zu kopieren, als HTML abzuspeichern und im selben Browser anzeigen lassen... und schon funktioniert es nicht mehr. Leider bin ich auch etwas ratlos, wie ich die Lösung in meinen jetzigen Quelltext implementieren sollte. Stellt das "outer" in meinem Fall den DIV "main_box" da? Und "middle" den DIV "centering"? Oder muss ich noch mehr DIV verschachteln? [html]<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript"> function overlay() { if (document.getElementById("pic_overlay_box").style.display == "none") { document.getElementById("pic_overlay_box").style.display = "block"; } else { document.getElementById("pic_overlay_box").style.display = "none"; } } </script> </head> <body> <div id="main_box"> <div id="pic_overlay_box" style="display: none"> <div id="big_pic_box"> x <div id="image_menu" onmouseover='document.getElementById("menu_inner").style.display="block"' onmouseout='document.getElementById("menu_inner").style.display="none"' > <div id="menu_inner"></div> </div> </div> </div> <div id="centering"> <div id="thumb_box"> <div id="thumb_box_inner"> <div id="thumbnail" onclick="overlay()"></div> </div> </div> <div id="content_box"> <div id="prev_image"></div> <div id="info_box"></div> </div> </div> </div> </body> </html>[/html][code]/*##################global stuff##################*/ body { background-color:#000; margin: 0px; } #main_box { /*border:1px solid #FFFFFF;*/ position: relative; margin:auto; height: 100%; width: 100%; } #centering { position: relative; margin: auto; width: 750px; height: 98% } /*##################content##################*/ #prev_image { background-color: #FFF; position: relative; margin: 40px 10px; height: 350px; width: 350px; float: left; } #info_box { background-color: #FFF; position: relative; margin: 40px 10px; height: 350px; width: 350px; float: right; } /*##################thumbnails##################*/ #thumb_box { /*background-color: #515151;*/ position: absolute; margin: auto; padding: 0px 0px; bottom: 5%; width: 750px; height: 120px; } #thumb_box_inner { background-color: #000; position: relative; margin: auto; width: 720px; height: 120px; } #thumbnail { background-color: #FFF; position: relative; margin: 10px 10px; height: 100px; width: 100px; float: left; } /*##################overlay box##################*/ #pic_overlay_box { /*border:1px solid #3C3;*/ background-image: url("t_back2.png"); position: absolute; margin: auto; top: 0px; width: 100%; height: 100%; z-index: 9998; } #big_pic_box { /*border: 1px solid #FFF;*/ background-color: #000; position: relative; margin: auto; top: 1%; width: 420px; height: 550px; z-index: 9999; } /*##################overlay box menu##################*/ #image_menu { /*border: 1px solid #FFF;*/ position: absolute; bottom: 0px; width: 100%; height: 50px; } #menu_inner { background-image: url("t_back2.png"); /*border: 1px solid #FFF;*/ /*display: none;*/ display: none; position: absolute; bottom: 0px; width: 100%; height: 50px; } p#close { color: #FFF; font-size: 14pt; font-weight: bold; position: absolute; top: -25px; right: 2px; } p#close:hover { cursor: pointer; }[/code] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?