Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Chriss1987" data-source="post: 1168250" data-attributes="member: 23088">AW: mitlaufende MenüleisteHi,hab mal grad schnell ein Script zusammengebastelt:[code]// Quelle: http://www.signalwerk.de/web-code-library/javascript/scroll-position-ermitteln// ermittelt die aktuelle Scrollpositionfunction get_scroll_position()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var scroll_x = 0, scroll_y = 0;&nbsp; &nbsp; &nbsp; &nbsp; if (typeof( window.pageYOffset ) == &#039;number&#039;)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { // Netscape&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scroll_y = window.pageYOffset; scroll_x = window.pageXOffset;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else if (document.body &amp;&amp; (document.body.scrollLeft || document.body.scrollTop))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { // DOM&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scroll_y = document.body.scrollTop; scroll_x = document.body.scrollLeft;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else if (document.documentElement &amp;&amp; (document.documentElement.scrollLeft || document.documentElement.scrollTop))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { // IE6&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scroll_y = document.documentElement.scrollTop; scroll_x = document.documentElement.scrollLeft;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return scroll_y;&nbsp; &nbsp; }// prüft die Scrollposition des Fenstersfunction position_fenster()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; position = get_scroll_position();&nbsp; &nbsp; &nbsp; &nbsp; // wenn die Scrollposition größer als die Position deiner Navigationsleise ist (hab mal grob gemessen, sollten 166px sein)&nbsp; &nbsp; &nbsp; &nbsp; if (position &gt; 166)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // ändern des CSS-Atributes &quot;position&quot; auf &quot;fixed&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;navigation&#039;).style.position = &quot;fixed&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // bei den anderen beiden Attributen bin ich mir nicht sicher, funtionieren zwar, aber geben in der Fehlerkonsole einen Fehler zurück //// EDIT: Fehler gefunden: nicht &quot;0&quot; sondern &quot;0px&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;navigation&#039;).style.top = &quot;0px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;navigation&#039;).style.marginTop = &quot;0px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // wenn die Scrollposition kleiner als die Position deiner Navigationsleise ist&nbsp; &nbsp; &nbsp; &nbsp; else if (position &lt;= 166)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // ändern des CSS-Atributes &quot;position&quot; auf &quot;relative&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;navigation&#039;).style.position = &quot;relative&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Standartwerte wieder herstellen (hier ist wieder ein Fehler dirn, siehe oben) //// EDIT: Fehler gefunden: nicht &quot;0&quot; sondern &quot;0px&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;navigation&#039;).style.top = &quot;0px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;navigation&#039;).style.marginTop = &quot;40px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }// Intervallstarten und die Funktion &quot;position_fenster()&quot; aufrufen (Intervallangabe in Millisekunden)var aktiv = window.setInterval(&quot;position_fenster()&quot;, 100);[/code]musst du nurnoch als .js-Datei speichern und im Head einbinden:[html]&lt;script type=&quot;text/javascript&quot; src=&quot;test.js&quot;&gt;&lt;/script&gt;[/html]Hoffe, das hilft dir iwie weiter?Schöne Grüße aus dem Sauerland und gute Nacht!ChrissEDIT #3: Schau mal in deiner style.css in Zeile 196, da stimmt was nicht mit den öffnenden und schließenden geschweiften Klammern!EDIT #4: Wenn du die Breite der Menüleiste beibehalten möchtest, dann schreibe in der style.css die Weite der Navigation mit rein (width: 670px<img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" />EDIT #5: deine css sollte dann so aussehen, dann gibt es auch keine Fehlermeldungen mehr:[code]* {&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; padding: 0px;}body {&nbsp; &nbsp; font-family: &quot;Trebuchet MS&quot;, &quot;Bitstream Vera Sans&quot;, &quot;Helvetica&quot;, sans-serif;&nbsp; &nbsp; font-size: 10pt;&nbsp; &nbsp; background: #000000 url(&quot;images/main_bg2.png&quot;) top center repeat-y;&nbsp; &nbsp; color: white;}a {&nbsp; &nbsp; color: #1b65c8;}a:hover {&nbsp; &nbsp; color: #e41000;}&nbsp;em&nbsp; {&nbsp; &nbsp; color: #e41000;}hh&nbsp; {&nbsp; &nbsp; color: #007836;}h1,h2,h3,h4,h5,h6 {&nbsp; &nbsp; color: #e41000;&nbsp; &nbsp; border-bottom: 1px dotted #e41000;&nbsp; &nbsp; font-family: &quot;Palatino Linotype&quot;, &quot;Palatino&quot;, &quot;URW Palladio L&quot;, serif;&nbsp; &nbsp; margin-bottom: 5px;}h1 { font-size: 180%; }h2 { font-size: 125%; }h3 { font-size: 100%; }img {&nbsp; &nbsp; }p {&nbsp; &nbsp; line-height: 140%;&nbsp; &nbsp; text-align: justify;&nbsp; &nbsp; margin-bottom: 15px;}table thead th, table thead td {&nbsp; &nbsp; background: #e3e3e3;&nbsp; &nbsp; color: #000000;&nbsp; &nbsp; text-align: left;}table th, table td {&nbsp; &nbsp; border-bottom: 1px solid black;&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; padding: 2px 5px;}#main-container {&nbsp; &nbsp; width: 675px;&nbsp; &nbsp; margin: 40px auto 20px auto;}#branding p {&nbsp; &nbsp; font-size: 80%;&nbsp; &nbsp; text-align: right;&nbsp; &nbsp; float: right;}#navigation {&nbsp; &nbsp; clear: right;&nbsp; &nbsp; border: 1px solid #000;&nbsp; &nbsp; margin-top: 40px;&nbsp; &nbsp; margin-bottom: 1px;&nbsp; &nbsp; padding: 5px 10px 5px 0px;&nbsp; &nbsp; background: url(&quot;images/navi_bg0.png&quot;) bottom left repeat-x;&nbsp; &nbsp; width: 670px;}#navigation a {&nbsp; &nbsp; padding: 5px 10px;&nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; text-decoration: none;}#navigation a:hover {&nbsp; &nbsp; background: url(&quot;images/navi_bg1.png&quot;) bottom left repeat-x;}#navigation ul li {&nbsp; &nbsp; display: inline;}#inhalt {&nbsp; &nbsp; margin-top: 20px;}#inhalt-haupt {&nbsp; &nbsp; width: 420px;&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding-right: 15px;&nbsp; &nbsp; border-right: 1px dotted #999999; &nbsp; &nbsp; margin-bottom: 10px;}#inhalt-haupt2 {&nbsp; &nbsp; width: 675px;&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding-right: 15px; &nbsp; &nbsp; margin-bottom: 10px;}#inhalt-sub {&nbsp; &nbsp; width: 225px;&nbsp; &nbsp; float: right;}#inhalt-haupt .portrait-foto {&nbsp; &nbsp; float: left;&nbsp; &nbsp; margin: 0px 10px 0px 0px;&nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; border: 1px dotted #999999;}#inhalt-sub #navigation-sub ul li {&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; list-style-image: url(&quot;images/li_image.png&quot;);&nbsp; &nbsp; margin-left: 20px;}#inhalt-sub #navigation-sub ul {&nbsp; &nbsp; margin: 15px 0px;}#navigation-sub img{&nbsp; &nbsp; float: left;margin: 5px 5px 5px 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }#fusszeile {&nbsp; &nbsp; clear: both;&nbsp; &nbsp; border-top: 1px solid black;&nbsp; &nbsp; padding-top: 10px;}#fusszeile .bottom-right {&nbsp; &nbsp; float: right;}/* Galerie */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #inhalt-haupt .galerie-foto {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 90px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 117px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 4px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #aaaaaa;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #e3e3e3;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #inhalt-haupt .galerie-foto img {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid gray;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #inhalt-haupt .galerie-foto a:hover img {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #inhalt-haupt table {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #inhalt-haupt table th,#inhalt-haupt table td { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vertical-align: top;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #inhalt-haupt input, #inhalt-haupt textarea {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 2px 2px 0px 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 3px 3px 0px 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #e3e3e3;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #aaa;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #inhalt-haupt table td {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }/* ERROR &amp; SUCCESS */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .error {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .success {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: green;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [/code]</blockquote>

[QUOTE="Chriss1987, post: 1168250, member: 23088"] [b]AW: mitlaufende Menüleiste[/b] Hi, hab mal grad schnell ein Script zusammengebastelt: [code] // Quelle: http://www.signalwerk.de/web-code-library/javascript/scroll-position-ermitteln // ermittelt die aktuelle Scrollposition function get_scroll_position() { var scroll_x = 0, scroll_y = 0; if (typeof( window.pageYOffset ) == 'number') { // Netscape scroll_y = window.pageYOffset; scroll_x = window.pageXOffset; } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) { // DOM scroll_y = document.body.scrollTop; scroll_x = document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { // IE6 scroll_y = document.documentElement.scrollTop; scroll_x = document.documentElement.scrollLeft; } return scroll_y; } // prüft die Scrollposition des Fensters function position_fenster() { position = get_scroll_position(); // wenn die Scrollposition größer als die Position deiner Navigationsleise ist (hab mal grob gemessen, sollten 166px sein) if (position > 166) { // ändern des CSS-Atributes "position" auf "fixed" document.getElementById('navigation').style.position = "fixed"; // bei den anderen beiden Attributen bin ich mir nicht sicher, funtionieren zwar, aber geben in der Fehlerkonsole einen Fehler zurück //// EDIT: Fehler gefunden: nicht "0" sondern "0px" document.getElementById('navigation').style.top = "0px"; document.getElementById('navigation').style.marginTop = "0px"; } // wenn die Scrollposition kleiner als die Position deiner Navigationsleise ist else if (position <= 166) { // ändern des CSS-Atributes "position" auf "relative" document.getElementById('navigation').style.position = "relative"; // Standartwerte wieder herstellen (hier ist wieder ein Fehler dirn, siehe oben) //// EDIT: Fehler gefunden: nicht "0" sondern "0px" document.getElementById('navigation').style.top = "0px"; document.getElementById('navigation').style.marginTop = "40px"; } } // Intervallstarten und die Funktion "position_fenster()" aufrufen (Intervallangabe in Millisekunden) var aktiv = window.setInterval("position_fenster()", 100);[/code] musst du nurnoch als .js-Datei speichern und im Head einbinden: [html]<script type="text/javascript" src="test.js"></script>[/html] Hoffe, das hilft dir iwie weiter? Schöne Grüße aus dem Sauerland und gute Nacht! Chriss EDIT #3: Schau mal in deiner style.css in Zeile 196, da stimmt was nicht mit den öffnenden und schließenden geschweiften Klammern! EDIT #4: Wenn du die Breite der Menüleiste beibehalten möchtest, dann schreibe in der style.css die Weite der Navigation mit rein (width: 670px;) EDIT #5: deine css sollte dann so aussehen, dann gibt es auch keine Fehlermeldungen mehr: [code]* { margin: 0px; padding: 0px; } body { font-family: "Trebuchet MS", "Bitstream Vera Sans", "Helvetica", sans-serif; font-size: 10pt; background: #000000 url("images/main_bg2.png") top center repeat-y; color: white; } a { color: #1b65c8; } a:hover { color: #e41000; } em { color: #e41000; } hh { color: #007836; } h1,h2,h3,h4,h5,h6 { color: #e41000; border-bottom: 1px dotted #e41000; font-family: "Palatino Linotype", "Palatino", "URW Palladio L", serif; margin-bottom: 5px; } h1 { font-size: 180%; } h2 { font-size: 125%; } h3 { font-size: 100%; } img { } p { line-height: 140%; text-align: justify; margin-bottom: 15px; } table thead th, table thead td { background: #e3e3e3; color: #000000; text-align: left; } table th, table td { border-bottom: 1px solid black; text-align: left; padding: 2px 5px; } #main-container { width: 675px; margin: 40px auto 20px auto; } #branding p { font-size: 80%; text-align: right; float: right; } #navigation { clear: right; border: 1px solid #000; margin-top: 40px; margin-bottom: 1px; padding: 5px 10px 5px 0px; background: url("images/navi_bg0.png") bottom left repeat-x; width: 670px; } #navigation a { padding: 5px 10px; color: #ffffff; text-decoration: none; } #navigation a:hover { background: url("images/navi_bg1.png") bottom left repeat-x; } #navigation ul li { display: inline; } #inhalt { margin-top: 20px; } #inhalt-haupt { width: 420px; float: left; padding-right: 15px; border-right: 1px dotted #999999; margin-bottom: 10px; } #inhalt-haupt2 { width: 675px; float: left; padding-right: 15px; margin-bottom: 10px; } #inhalt-sub { width: 225px; float: right; } #inhalt-haupt .portrait-foto { float: left; margin: 0px 10px 0px 0px; padding: 5px; border: 1px dotted #999999; } #inhalt-sub #navigation-sub ul li { list-style-type: none; list-style-image: url("images/li_image.png"); margin-left: 20px; } #inhalt-sub #navigation-sub ul { margin: 15px 0px; } #navigation-sub img{ float: left; margin: 5px 5px 5px 5px; } #fusszeile { clear: both; border-top: 1px solid black; padding-top: 10px; } #fusszeile .bottom-right { float: right; } /* Galerie */ #inhalt-haupt .galerie-foto { height: 90px; width: 117px; float: left; padding: 4px; margin: 5px; border: 1px solid #aaaaaa; background: #e3e3e3; } #inhalt-haupt .galerie-foto img { border: 1px solid gray; } #inhalt-haupt .galerie-foto a:hover img { border: 1px solid white; } #inhalt-haupt table { width: 100%; } #inhalt-haupt table th,#inhalt-haupt table td { vertical-align: top; text-align: left; } #inhalt-haupt input, #inhalt-haupt textarea { padding: 2px 2px 0px 2px; margin: 3px 3px 0px 3px; background: #e3e3e3; border: 1px solid #aaa; } #inhalt-haupt table td { border: none; } /* ERROR & SUCCESS */ .error { color: red; } .success { color: green; } [/code] [/QUOTE]

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

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?