Zeile im Header fixieren 
Author: Ingo D.Hallo
ich habe so was wie Erklärungs Seite erstellt. Leider Steht der Erklärte Begriff nicht fest, sondern scrollt nach oben mit. Hat jemand eine Idee?
<h1 style="color: #ffffff;font-size: 20px;">Rassehunde Liste und Erklärungen</h1>.
<script>
<!--
var content=new Array()
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have
content[0]='<big><center> Hier kommt die Erklärung </big>'
<!-- Die Hunde erklärungen eingeben, content zu Hunde eingeben anpassen -->
content[1]='<big><center> Text1'
content[2]='<big><center> Text2'
content[3]='<big><center> Text3'
content[4]='<big><center> Text4'
content[5]='<big><center> Text5'
content[6]='<big><center> Text6'
content[7]='<big><center> Text7'
content[8]='<big><center> Text8'
content[9]='<big><center> Text9'
content[10]='<big><center> Text10'
content[11]='<big><center> Text11'
content[12]='<big><center> Text12'
content[13]='<big><center> Text13'
content[14]='<big><center> Text14'
content[15]='<big><center> Text15'
content[16]='<big><center> Text16'
content[17]='<big><center> Text17'
content[18]='<big><center> Text18'
content[19]='<big><center> Text19'
content[20]='<big><center> Text20'
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",50)
}
function changetext(whichcontent){
if (document.all){
descriptions.innerHTML=''+whichcontent+''}
else if (document.layers){
document.d1.document.d2.document.write(''+whichcontent+'')
document.d1.document.d2.document.close()
}
else {
document.getElementById("descriptions").innerHTML=''+whichcontent+''}
}
//-->
</script>
</head>
<style>
table {
color: #FFFFFF;font-size: 20px; /* weiss */
}
</style>
<body >
<br><br><br>
<div align="center">
<center>
<table border="0" height="80" cellspacing="0" width="100%" cellpadding="0" bgcolor="#FFFFFF" >
<tr>
<td width="100%" align="center" valign="middle">
<center>
<div id="descriptions" align="right" height = "80" width = "755">
<p align="center">
<center><ILAYER id="d1" align="center" >
<p>
<p>
<p>
<p>
<p>
</b>
</div>
</center>
</center></center>
</td>
</tr>
</table>
</div>
<div>
<p>
<style type="text/css">
a, a:link, a:visited, a:focus, a:active {
color:white;font-size: 14
px;
}
a:hover {
color:black; font-size: 18;
}
</style>
<br>
<!-- Hunde Namen eingeben -->
<a href="javascript:void(0)" onMouseover="changetext(content[1])" onMouseout="changetext(content[0])">Text 1</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[2])" onMouseout="changetext(content[0])">Text 2</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[3])" onMouseout="changetext(content[0])">Text 3</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[4])" onMouseout="changetext(content[0])">Text 4</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[5])" onMouseout="changetext(content[0])">Text 5</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[6])" onMouseout="changetext(content[0])">Text 6</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[7])" onMouseout="changetext(content[0])">Text 7</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[8])" onMouseout="changetext(content[0])">Text 8</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[9])" onMouseout="changetext(content[0])">Text 9</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[10])" onMouseout="changetext(content[0])">Text 10</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[11])" onMouseout="changetext(content[0])">Text 11</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[12])" onMouseout="changetext(content[0])">Text 12</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[13])" onMouseout="changetext(content[0])">Text 13</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[14])" onMouseout="changetext(content[0])">Text 14</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[15])" onMouseout="changetext(content[0])">Text 15</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[16])" onMouseout="changetext(content[0])">Text 16</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[17])" onMouseout="changetext(content[0])">Text 17</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[18])" onMouseout="changetext(content[0])">Text 18</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[19])" onMouseout="changetext(content[0])">Text 19</a>
<br>
<br>
<a href="javascript:void(0)" onMouseover="changetext(content[20])" onMouseout="changetext(content[0])">Text 20</a>
</div>
Also die Erklärung sollte immer zu sehen sein. Bspiel https://idws.ch/hunderassen.html
Ich bin kein JAvascript Experte, aber ich weis nicht wie und wo du den Code eingebunden hast.
Aber muss man nicht beim "Hier kommt die Erklärung" nicht das </center> schließen?
Ausserdem benötigt man nicht <body> im HTML Code.
Hallo:
Dein Code ist unübersichtlich…
Ich habe ihn überarbeitet und übersichtlicher gestaltet. Das Bild zeigt, wie es mit einem Objektstil aussieht. Im Code habe ich der Infobox einen Hintergrund hinzugefügt. Du kannst die Textfarben und den Stil an deine Website anpassen.(Füge den Code dazu in ein HTML-Objekt ein.)
HINWEIS: Du kannst die Anzahl der Namen pro Zeile auf 5, 10 oder 15 aufteilen. Ich habe sie mit dem <br>-Tag auf 10 pro Zeile aufgeteilt.
– Der Code –
<style>
table {
color: #444444;
font-size: 20px;
margin: 20px;
width: 100%;
border-collapse: collapse;
}
a, a:link, a:visited, a:focus, a:active {
color: #ff5555;
font-size: 14px;
text-decoration: none;
margin: 5px;
}
a:hover {
color: green;
font-size: 16px;
}
#descriptions {
background-color: #f2f2f2; /* Informationskasten */
padding: 20px;
min-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div style="text-align:center;">
<h1 style="color:#212124; font-size:20px;">Rassehunde Liste und Erklärungen</h1>
<div id="descriptions">
Hier kommt die Erklärung
</div>
<!-- Hunde Namen eingeben -->
<div>
<a href="javascript:void(0)" onmouseover="changetext(content[1])" onmouseout="changetext(content[0])">Text 1</a>
<a href="javascript:void(0)" onmouseover="changetext(content[2])" onmouseout="changetext(content[0])">Text 2</a>
<a href="javascript:void(0)" onmouseover="changetext(content[3])" onmouseout="changetext(content[0])">Text 3</a>
<a href="javascript:void(0)" onmouseover="changetext(content[4])" onmouseout="changetext(content[0])">Text 4</a>
<a href="javascript:void(0)" onmouseover="changetext(content[5])" onmouseout="changetext(content[0])">Text 5</a>
<a href="javascript:void(0)" onmouseover="changetext(content[6])" onmouseout="changetext(content[0])">Text 6</a>
<a href="javascript:void(0)" onmouseover="changetext(content[7])" onmouseout="changetext(content[0])">Text 7</a>
<a href="javascript:void(0)" onmouseover="changetext(content[8])" onmouseout="changetext(content[0])">Text 8</a>
<a href="javascript:void(0)" onmouseover="changetext(content[9])" onmouseout="changetext(content[0])">Text 9</a>
<a href="javascript:void(0)" onmouseover="changetext(content[10])" onmouseout="changetext(content[0])">Text 10</a>
<br>
<a href="javascript:void(0)" onmouseover="changetext(content[11])" onmouseout="changetext(content[0])">Text 11</a>
<a href="javascript:void(0)" onmouseover="changetext(content[12])" onmouseout="changetext(content[0])">Text 12</a>
<a href="javascript:void(0)" onmouseover="changetext(content[13])" onmouseout="changetext(content[0])">Text 13</a>
<a href="javascript:void(0)" onmouseover="changetext(content[14])" onmouseout="changetext(content[0])">Text 14</a>
<a href="javascript:void(0)" onmouseover="changetext(content[15])" onmouseout="changetext(content[0])">Text 15</a>
<a href="javascript:void(0)" onmouseover="changetext(content[16])" onmouseout="changetext(content[0])">Text 16</a>
<a href="javascript:void(0)" onmouseover="changetext(content[17])" onmouseout="changetext(content[0])">Text 17</a>
<a href="javascript:void(0)" onmouseover="changetext(content[18])" onmouseout="changetext(content[0])">Text 18</a>
<a href="javascript:void(0)" onmouseover="changetext(content[19])" onmouseout="changetext(content[0])">Text 19</a>
<a href="javascript:void(0)" onmouseover="changetext(content[20])" onmouseout="changetext(content[0])">Text 20</a>
<!-- ... verbleibende Links ... -->
</div>
</div>
<script>
var content = [];
content[0] = '<big>Hier kommt die Erklärung</big>';
content[1] = '<big>Text 1</big>';
content[2] = '<big>Text 2</big>';
content[3] = '<big>Text 3</big>';
content[4] = '<big>Text 4</big>';
content[5] = '<big>Text 5</big>';
content[6] = '<big>Text 6</big>';
content[7] = '<big>Text 7</big>';
content[8] = '<big>Text 8</big>';
content[9] = '<big>Text 9</big>';
content[10] = '<big>Text 10</big>';
content[11] = '<big>Text 11</big>';
content[12] = '<big>Text 12</big>';
content[13] = '<big>Text 13</big>';
content[14] = '<big>Text 14</big>';
content[15] = '<big>Text 15</big>';
content[16] = '<big>Text 16</big>';
content[17] = '<big>Text 17</big>';
content[18] = '<big>Text 18</big>';
content[19] = '<big>Text 19</big>';
content[20] = '<big>Text 20</big>';
// ... Rest der Texte ...
function changetext(whichcontent) {
document.getElementById("descriptions").innerHTML = whichcontent;
}
</script>
– Ende des Codes –
Viele Grüße
Author
Dank dir vielmal, ist super.
Jetzt ist nur noch das Problem, bei mehr Zeilen (<a href="javascript:void(0)" onmouseover="changetext(content[1])" onmouseout="changetext(content[0])">Affenpinscher</a><br>)
zb 25 scrollt sich das Erklärungsfenster nach oben raus.
Muchasgracias.
Okay, verstanden. Geben Sie mir etwas Zeit, den Code anzupassen. Ich muss die Links so formatieren, dass sie hinter der fixierten Infobox scrollen.
Okay…
So bleibt die Infobox fixiert, auch wenn man durch die Links scrollt.
Ich hoffe, das war gemeint.
– Der Code –
<style>
h1 {
color: #212124;
font-size: 20px;
text-align: center;
margin: 20px 0;
}
#descriptions {
background-color: #f2f2f2; /* Informationskasten */
padding: 20px;
min-height: 80px;
text-align: center;
font-size: 18px;
margin: 4px;
border-radius: 8px;
}
.links-container {
display: flex;
justify-content: center;
margin: 5px;
}
.links-container a {
color: #111111;
font-size: 14px;
text-decoration: none;
margin: 5px;
padding: 8px 12px;
border: 1px solid #777777;
border-radius: 6px;
background-color: #888888;
transition: all 0.3s ease;
}
.links-container a:hover {
color: green;
font-size: 14px;
border: 1px solid #91ba91;
background-color: #e6ffe6;
}
/* Festes Informationsfeld. */
/* Mobile */
@media (max-width: 1440px) {
.scroll-wrapper {
max-height: 50vh; /* Der Link-Container hat eine begrenzte Höhe. */
overflow-y: auto; /* Das Scrollen findet hier statt.*/
-webkit-overflow-scrolling: touch;
}
#descriptions {
position: sticky; /* Es wird am oberen Rand des Behälters befestigt. */
top: 0;
background: #f2f2f2;
z-index: 150000;
}
.links-container {
flex-direction: column;
align-items: center;
margin: 4px;
}
.links-container a {
width: 80%;
margin: 4px;
text-align: center;
font-size: 14px;
}
}
</style>
<div class="page">
<h1>Rassehunde Liste und Erklärungen</h1>
<div class="scroll-wrapper">
<div id="descriptions">
Hier kommt die Erklärung
</div>
<!-- Hunde Namen eingeben -->
<div class="links-container">
<a href="javascript:void(0)" onmouseover="changetext(content[1])" onmouseout="changetext(content[0])">Text 1</a>
<a href="javascript:void(0)" onmouseover="changetext(content[2])" onmouseout="changetext(content[0])">Text 2</a>
<a href="javascript:void(0)" onmouseover="changetext(content[3])" onmouseout="changetext(content[0])">Text 3</a>
<a href="javascript:void(0)" onmouseover="changetext(content[4])" onmouseout="changetext(content[0])">Text 4</a>
<a href="javascript:void(0)" onmouseover="changetext(content[5])" onmouseout="changetext(content[0])">Text 5</a>
<a href="javascript:void(0)" onmouseover="changetext(content[6])" onmouseout="changetext(content[0])">Text 6</a>
<a href="javascript:void(0)" onmouseover="changetext(content[7])" onmouseout="changetext(content[0])">Text 7</a>
<a href="javascript:void(0)" onmouseover="changetext(content[8])" onmouseout="changetext(content[0])">Text 8</a>
<a href="javascript:void(0)" onmouseover="changetext(content[9])" onmouseout="changetext(content[0])">Text 9</a>
<a href="javascript:void(0)" onmouseover="changetext(content[10])" onmouseout="changetext(content[0])">Text 10</a>
<a href="javascript:void(0)" onmouseover="changetext(content[11])" onmouseout="changetext(content[0])">Text 11</a>
<a href="javascript:void(0)" onmouseover="changetext(content[12])" onmouseout="changetext(content[0])">Text 12</a>
<a href="javascript:void(0)" onmouseover="changetext(content[13])" onmouseout="changetext(content[0])">Text 13</a>
<a href="javascript:void(0)" onmouseover="changetext(content[14])" onmouseout="changetext(content[0])">Text 14</a>
<a href="javascript:void(0)" onmouseover="changetext(content[15])" onmouseout="changetext(content[0])">Text 15</a>
<a href="javascript:void(0)" onmouseover="changetext(content[16])" onmouseout="changetext(content[0])">Text 16</a>
<a href="javascript:void(0)" onmouseover="changetext(content[17])" onmouseout="changetext(content[0])">Text 17</a>
<a href="javascript:void(0)" onmouseover="changetext(content[18])" onmouseout="changetext(content[0])">Text 18</a>
<a href="javascript:void(0)" onmouseover="changetext(content[19])" onmouseout="changetext(content[0])">Text 19</a>
<a href="javascript:void(0)" onmouseover="changetext(content[20])" onmouseout="changetext(content[0])">Text 20</a>
</div>
</div>
</div>
</div>
<script>
var content = [];
content[0] = '<big>Hier kommt die Erklärung</big>';
content[1] = '<big>Text 1</big>';
content[2] = '<big>Text 2</big>';
content[3] = '<big>Text 3</big>';
content[4] = '<big>Text 4</big>';
content[5] = '<big>Text 5</big>';
content[6] = '<big>Text 6</big>';
content[7] = '<big>Text 7</big>';
content[8] = '<big>Text 8</big>';
content[9] = '<big>Text 9</big>';
content[10] = '<big>Text 10</big>';
content[11] = '<big>Text 11</big>';
content[12] = '<big>Text 12</big>';
content[13] = '<big>Text 13</big>';
content[14] = '<big>Text 14</big>';
content[15] = '<big>Text 15</big>';
content[16] = '<big>Text 16</big>';
content[17] = '<big>Text 17</big>';
content[18] = '<big>Text 18</big>';
content[19] = '<big>Text 19</big>';
content[20] = '<big>Text 20</big>';
function changetext(whichcontent) {
document.getElementById("descriptions").innerHTML = whichcontent;
}
</script>
– Ende des Codes –
Viele Grüße.
Author
Hallo
Vielen Dank, nur bei mir sind alle Textfelder (die grauen) nebeneinander.
Vielen Dank
Liebe Gruss Ingo
Author
Hallo Nochmal
Ich habe auch festgestellt, das dass Erklärungsfeld noch unter dem Banner verschwindet
Vor dem scrollen
Nach dem Scrollen
Liebe Gruss Ingo
(It > De) ... ...Ihre Webseite enthält mehrere Fehler:
.
ciao
.
...auf Ihrer aktuellen Webseite mit meinem EXTRA-Code erhalten Sie dasselbe Ergebnis wie in diesem STAMP
.
... Meiner Meinung nach würden Sie es zunächst besser und auf elegante Weise machen, wenn Sie das Accordion-Objekt verwenden würden ...
.
ciao
Author
Hallo
ich würde die stellen gerne korregieren, ich finde nur die angegeben fehler stellen nicht.??
Danke
... der erste Fehler sind die beiden rot markierten Kommentare... <! -- xxxx -->
... beim zweiten Fehler dürfen Sie die reservierten Seitentags html, head und body keinesfalls verwenden...
... beim dritten Fehler haben Sie einige Tags ohne übergeordnetes Element, zum Beispiel </b>...
... Ich habe das nicht weiter untersucht...
.
ciao
.
Author
Hallo
Ist ja liebe von IHnen, aber ich habe den Code rauf und runter durchsucht, ich finde die Text stellen nicht.
In welchem Code sehensie die Fehler, im letzten?
Es gibt z.B keinen Text mit Fixiert Banner! Die Zeilen nummern gibt es auch nicht . Es geht nur bis Zeile 139
Können sie die Fehler nicht bitte im Orginal Code markieren?
Danke
Man könnte auch ganz einfach das Objekt "Text" und dort die Registerkarten verwenden, siehe
----- (1) Anleitung -----
So organisieren Sie Ihre Texte mit Registerkarten
>> https://guide.websitex5.com/de/support/solutions/articles/44000819441
----- (2) Beispiel als Screenshot -----
Mit CSS können die Tabs farblich gestaltet werden, siehe
Testseite >> https://findelinks.de/123test-aufklappmenue-2/text-objekt-mit-tabs.html
----- (1) CSS-Code -----
a.selected-text-tab { background-color: gold !important; }
.tab { background-color: lightskyblue !important; }
----- (2) Screenshot WebSite X5 -----
----- (3) Screenshot Browser -----
Author
Das hatte ich mir auch überlegt, aber wenn man ein ABC macht, kann man die Registerkarten nicht mit einme Anker versehen. Das Textfeld versteht nur ein Anker. Man kann dadurch auch keinen bestimmten Hund als Anker setzen.
In der Hunderasse kämen dann die einzelenen Hunde und ihre Erklärung. Dann müsste in der Register karte beim anklicken vom Hund, ein Popup auf machen
Die anderen umsetzungen gefallen mir, nur die Erklärung müsste noch fixiert werden und das scheint schwierig zu sein.
Danke euch allen
Okay: Im zweiten Codeabschnitt ist „max-width“ auf 1440px (meine Monitorauflösung) eingestellt. Bei Bildschirmauflösungen unter 1440px werden die Schaltflächen wie im Bild dargestellt untereinander angezeigt. Die Scrollleiste erleichtert die Lesbarkeit.
Wenn Ihr Projekt (und/oder Monitor) eine höhere Auflösung als 1440px hat, ändern Sie einfach den Wert auf die maximale Auflösung: 1920, 2560, 3840 usw.
Sobald ich Zeit habe, werde ich den Code weiter anpassen, sodass die Schaltflächen bei höheren Bildschirmauflösungen in Fünferblöcken angezeigt werden. (Am liebsten würde ich sie jedoch in einem kleineren Block anordnen, anstatt sie über die gesamte Bildschirmbreite zu verteilen, damit es wie im Bild aussieht.)
Viele Grüße
Das Banner, das im Vordergrund erscheint und die Infobox verdeckt, benötigt einen Z-Index über 150000, den ich im Code bereits festgelegt habe. Sie können diesen Wert auch erhöhen oder den Z-Index Ihres Banners verringern.
Viele Grüße
Nun gut: KolAsim hat bereits einige Fehler auf Ihrer Website aufgezeigt…
Ich verstehe, dass Sie auf einem größeren Monitor keine Probleme mit fixierten Elementen wie dem Header (den Sie vermutlich als Banner bezeichnen) haben. Das Problem mit fixierten Headern besteht meiner Meinung nach darin, dass auf kleineren Monitoren der Platz reduziert wird und alles komprimiert dargestellt wird, was die korrekte Ansicht erschwert.
Ich empfehle Ihnen daher, den Header nicht zu fixieren, sondern scrollbar zu gestalten und stattdessen eine „Stickybar“ zu verwenden, damit der Benutzer das Menü in einer schmaleren Leiste sieht. (Das ist die Funktion der „Stickybar“.)
Viele Grüße
...Hallo, die Fehler sind die, die ich dir zuvor gemeldet und rot hervorgehoben habe...
... Allerdings können Sie mit dem gleichen Code, aber frei von Fehlern und Inkonsistenzen und mit einer EXTRA-Erfindung von mir, die Ergebnisleiste an einer festen Position erhalten, wie in meinem STAMP... zu sehen ist.
... Wenn Sie daran interessiert sind, lassen Sie es mich wissen... Tschüss, ciao
.