Problem mit der Länge der Seite

Arimon

Hallo,

ich habe nun meinen Accordion Effekt beisammen und er funktioniert auch. Allerdings haut er mir voll in den Footer rein. Den Code dazu damit die Seite automatisch mitgeht suche ich nun noch. Hat wer ne Idee ?

Vielen Dank schon mal

MrMurphy

Hallo

Du hast den Link zu der Problemseite vergessen.

Accordion-Effekt ist ein Oberbegriff für den es viele Erstellungsmöglichkeiten gibt. Ohne deinen Quelltext können wir dir nicht konkret helfen.

Du verwendest wahrscheinlich position:absolute. Das ist in diesem Fall nicht geeignet.

Gruss

MrMurphy

Arimon

Ah, ok.
Hier ist der Code des Accordions

HTML

<!DOCTYPE html>
<html>


<head>


<style>


button.accordion {


    background-color: #eeeeee;


    color: #444;


    cursor: pointer;


    padding: 18px;


    width: 100%;


    border: 1px solid #009090;


    text-align: left;


    outline: none;


    font-size: 15px;


    transition: 0.4s;


}




button.accordion.active, button.accordion:hover {


    background: #eeeeee;


    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);


    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee));


    color: #009090; 


    border-bottom: 1px solid #009090;


}




button.accordion:after {


    content: '\02795';


    font-size: 13px;


    color: #777;


    float: right;


    margin-left: 5px;


}




button.accordion.active:after {


    content: "\2796";


}




div.panel {


    padding: 0 18px;


    display: none;


    background-color: white;


}




div.panel.show {


    display: block !important;


}


</style>


</head>


<body>




<h2>Chronik in Jahren</h2>




<button class="accordion">Die Jahre 1879 - 1945</button>


<div class="panel">


  <p>


 <FONT Size="3"><b>1879 </b>- Gründung der Firma  A. Brickwedde, Hasestraße 52, Osnabrück,<br><span style="padding-left:47px;">durch Senator Ing. Albert Brickwedde </span><br></font><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/senator.png" width="150" height="200" alt=""/></span><br>


             <FONT Size="3"><b>1886</b> - Umzug zum Breiten Gang 7 in Osnabrück</font><br>


             <FONT Size="3"><b>1887</b> - Erstes Telefon in Osnabrück mit der Telefonnummer 1 für A. Brickwedde <br></font><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/breitergang.png" width="150" height="200" alt=""/></span><br> 


    <FONT Size="3"><b>1894</b> - Ausstellung Handwerk und Gewerbe in Luxemburg </font><br>


    <FONT Size="3"><b>1904</b> - Eintritt August Brickwedde in das Unternehmen <br></font><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/august.png" width="150" height="200" alt=""/></span><br>


    <FONT Size="3"><b>1914</b> - Erster Weltkrieg</font><br>


    <FONT Size="3"><b>1928</b> - Tod des Gründers Senator Ing. Albert Brickwedde </font><br>


    <FONT Size="3"><b>1941</b> - Eintritt Margarete Münnich in das Unternehmen </font><br>


    <FONT Size="3"><b>1941</b> - Tod der Söhne Albert und Paul Brickwedde im 2. Weltkrieg </font><br>


    <FONT Size="3"><b>1944</b> - Zerstörung der Gebäude im 2. Weltkrieg</font><br>


    <FONT Size="3"><b>1945</b> - Wiederaufbau der Gebäude</font>


</p>


</div>




<button class="accordion">Die Jahre 1951 - 1971</button>


<div class="panel">


  <p>


     <FONT Size="3"><b>1951</b> - Eintritt Dipl.-Ing. Klemens Münnich in das Unternehmen<br></font><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/klemens.png" width="150" height="200" alt=""/</span><br>


     <FONT Size="3"><b>1951</b> - Eintritt Ursula Brickwedde in das Unternehmen</font><br>


     <FONT Size="3"><b>1965</b> - Eröffnung der Filiale in Lingen, Am Schneewall 12</font><br>


     <FONT Size="3"><b>1970</b> - Tod August Brickwedde</font><br>


     <FONT Size="3"><b>1970</b> - Dipl.-Ing. Klemens Münnich übernimmt die alleinige Firmenleitung <br><span style="padding-left:47px;">und erweitert das Firmengebäude am Breiten Gang</span></font><br><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/breitergang2.png" width="200" height="200" alt=""/></span><br>


     <FONT Size="3"><b>1971</b> - Neubau in Lingen, Haselünner Str. 47</font><br><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/lingen.png" width="200" height="200" alt=""/></span><br>


</p>


</div>




<button class="accordion">Die Jahre 1972 - 1998</button>


<div class="panel">


  <p>


    <FONT Size="3"><b>1972</b> - Eintritt Helmut Münnich in das Unternehmen<br></font><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/hm.png" width="200" height="133" alt=""/></span><br>


     <FONT Size="3"><b>1974</b> - Umzug und Verlagerung des Hauptsitzes zum Großhandelsring 10<br></font><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/os.png" width="250" height="200" alt=""/></span><br>


     <FONT Size="3"><b>1978</b> - Übernahme der Fa. Paul Miehlmann in Göttingen<br></font><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/miehlmann.png" width="200" height="200" alt=""/></span><br>


       <FONT Size="3"><b>1979</b> - 100-jähriges Firmenjubiläum und Gründung der Senator Ing. Albert Brickwedde Stiftung</font><br>


     <FONT Size="3"><b>1982</b> - Gründung Niederlassung Espelkamp</font><br>


     <FONT Size="3"><b>1982</b> - Neubau Niederlassung Göttingen</font><br>


     <FONT Size="3"><b>1986</b> - Tod Dipl.-Ing. Klemens Münnich</font><br>


     <FONT Size="3"><b>1986</b> - Eintritt Wolfgang Münnich in das Unternehmen<br></font><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/1m.png" width="200" height="133" alt=""/></span><br>


     <FONT Size="3"><b>1995</b> - Schliessung der Niederlassung Espelkamp</font><br>


     <FONT Size="3"><b>1996</b> - Einstellung eigener Fuhrpark, Auslieferung mit Frachtführern</font><br>


     <FONT Size="3"><b>1997</b> - Übernahme der Verkaufsstelle für Technische Gase von der Westfalen AG</font><br>


 <FONT Size="3"><b>1998</b> - Verkauf der Niederlassung Göttingen an Fa. H. Lutze, Einbeck</font><br>


</p>


</div>




<button class="accordion">Die Jahre 2002 bis Heute</button>


<div class="panel">


  <p>


<FONT Size="3"><b>2002</b> - Eröffnung des neuen Verkaufsraumes mit über 700qm Verkaufsfläche</font><br><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/tresen.png" width="250" height="200" alt=""/></span></br>


   <FONT Size="3"><b>2003</b> - Einrichtung und Eröffnung des "Brickwedde Technologiezentrums" in Osnabrück</font><br>


   <FONT Size="3"><b>2004</b> - 125-jähriges Firmenjubiläum</font><br><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/ballon.png" width="200" height="200" alt=""/></span></br>


   <FONT Size="3"><b>2005</b> - Umbenennung der Straße "Großhandelsring 10 in "Albert-Brickwedde-Str.2"<br><span style="padding-left:47px;">durch den Oberbürgermeister der Stadt Osnabrück am 11.05.2005</span></font><br><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/strasse.png" width="250" height="200" alt=""/></span></br>


   <FONT Size="3"><b>2008</b> - Umzug der Niederlassung Lingen von der Haselünner Str. 47<br><span style="padding-left:47px;"> zur Rheiner Straße 131 am 01.05.2008</span></font></br>


   <FONT Size="3"><b>2016</b> - Die heutigen Geschäftsführer <b>  Helmut und Wolfgang Münnich </b></font><br><span style="padding-left:47px;"><img src="http://www.a-brickwedde.de/images/2013.png" width="200" height="300" alt=""/></span>


</p>


</div>




<script>


var acc = document.getElementsByClassName("accordion");


var i;




for (i = 0; i < acc.length; i++) {


    acc[i].onclick = function(){


        this.classList.toggle("active");


        this.nextElementSibling.classList.toggle("show");


  }


}


</script>




</body>


</html>

Alles anzeigen

Und hier der Link Zur Seite. http://www.a-brickwedde.de/17.html

MrMurphy

Hallo

Danke für den Link.

An der Website (gesamte Homepage) ist leider nichts mehr zu retten.

Das Grundproblem ist, das so ziemlich alle Container per position:absolute auf der Webside plaziert wurden, sogar einzelne Wort und Sätze. Dabei gibt es noch nicht mal einen Zusammenhang zwischen der Reihenfolge im Quelltext und der Darstellung auf der Webside (einzelne Webseite).

Deutlich wird das, wenn einfach mal ein Teil der einzelnen Websides markiert wird. Dadurch ist es auch kaum möglich die Webside mit Hilfsmitteln wie "Element untersuchen" im Firefox zu ergründen.

Erschwerend kommt hinzu, das Inline-CSS verwendet wird. Bei der Positionsänderung eines Elements müssen also gleichzeitig viele Änderungen an anderen, im Voraus nicht nachzuvollziehenden Stellen, getätigt werden.

Die gesamte Website sollte mit aktuellem HTML5 und CSS3 neu erstellt werden. Das erfordert wahrscheinlich weniger Zeit als die bestehende Webside anzupassen und spart bei zukünftigen Änderungen extrem viel Zeit.

Zumal der Quelltext zusätzlich viele sachliche Fehler enthält, die zwar mit deinem Problem direkt nichts zu tun haben, die aber trotzdem beseitigt werden sollten.

Ich hätte dir lieber direkt geholfen, aber das ist bei dem Quelltext leider nicht möglich.

Gruss

MrMurphy

Arimon

OK, ich danke Dir für Deine Beratung. Habe ich mir schon gedacht. Das Programm Webacappella ist nicht das beste für Java und CSS, aber sollte auch erst mal nur eine Notlösung sein.
Ich arbeite bereits an w3.css, aber ist halt nicht einfach.

Ok. Dann vielen Dank noch mal.
Gruß

Tags