Zeile im Header fixieren 
Autor: 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
Autor
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.