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ß
Ah, ok.
Hier ist der Code des Accordions
<!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>Und hier der Link Zur Seite. http://www.a-brickwedde.de/17.html
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
Super, vielen Dank ich lese mich mal durch
Java würde noch gehe, aber CSS funktioniert nicht richtig mit dem WebAcapella oder ich bin zu dumm 
ja keine Ahnung ich versuche das immer in Englisch zu lernen. 
http://www.a-brickwedde.de/17.html
- - - Aktualisiert - - -
So hatte ich es erst programmiert allerdings habe ich es nicht geschafft das automatische sliden gegen klicken umzuprogrammieren.
<style>
#accordion .item {
width: 800px;overflow: hidden;
transition: height ease-in-out 500ms; /* This is the bit that makes the slider...slide */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border: 1px solid #009090; /* This sets the color and width of the border */
border-radius: 5px; /* This sets the roundness of the border corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 50px; /* This is the height of the gray portion of each section */
margin-bottom: 3px;
}
#accordion a {
display: block;
height: 50px;
line-height: 50px;
background: #eeeeee; /* This is for all the old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* This gradient is for firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* This one is for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* and of course we musn't forget ie */
padding: 2px;
color: #009090; /* This and the next few lines sets the font up for the header on each box */
text-decoration: none;
font-size: 1.5em;
font-family: Verdana, Arial, Tahoma, sans-serif;
}
#accordion p {
height: 1000px; /* This and the next few lines sets the font up for the content of each box */
padding: 5px;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 0.8em;
}
#accordion div:hover {
height: 1400px; /* This is the total height when the scroll unfolds see the 150px in the element above */
}
#accordion div:hover a {
border-bottom: 1px solid #009090;
}
</style>
<div id="accordion">
<div class="item">Hallöchen,
ich habe diesen Code in meinem Accordion (klingt echt komisch ::-D )
<!doctype html><
html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Customize icons</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script> $(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
icons: Icons
});
$( "#toggle" ).button().click(function() {
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
}
});
});
</script></head>Nun habe ich versucht Farbe ins ganze zubringen. Sprich die Rahmen, die Textfarbe. aber es gelingt mir nicht. habt ihr einen Tipp oder ein Beispiel für mich ?
Vielen Dank für Tipps und Kritik
Gruß
Marcus
Ok, werde ich mir anschauen.
Ich habe jetzt das Problem, das die Seite nicht Ordnungsgemäß angezeigt wird sondern sich verschiebt.
Wahrscheinlich liegt es am Programm.
Hier mal der Code den ich eingefügt habe und verändert habe.
margin-top:200px; /* Außenabstand oben */ Damit wollte ich erreichen das die Kästen in der Seite an einer bestimmten Stelle anfangen. Das klappt auch allerdings wie gesagt ist alles verschoben.
<style type="text/css"><!--
/* Hier die Breite anpassen */
#akkordeon {
width: 800px;
overflow: hidden;
margin-top:200px; /* Außenabstand oben */
}
/* Aussehen Titel */
#akkordeon h2 {
font-size: 20px;
color: #009090;
background: url(http://img.webme.com/pic/f/find-templates/rechts.png) no-repeat right; }
/* Feld um Titel */
.thema {
cursor: pointer;
padding: 5px 10px 5px;
margin-bottom: 5px;
transition: all .2s ease-in-out; }
/* ausklappbare Feld mit Inhalt */
#akkordeon .inhalt {
display: none;
background-color: #009090;
padding: 15px;
margin-bottom: 5px;
overflow: hidden;
border: 1px solid #c9c9c9; }
/* Farbe Titelfeld wenn ausgeklappt */
#akkordeon .open { background-color: #999999f!important; }
/* Grafik rechts wenn ausgeklappt */
#akkordeon .open h2 {
background: url(http://img.webme.com/pic/f/find-templates/unten.png) no-repeat right; }
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.top .thema').click(function(){
if($(this).hasClass('closed')) {
$(this).addClass('open').removeClass('closed');
$(this).siblings('.inhalt').slideDown(200);
} else {
$(this).addClass('closed').removeClass('open');
$(this).siblings('.inhalt').slideUp(200);
}
});
});
</script>Super , danke schon mal vorab
-EDIT: Das war genau richtig! TOP Danke funktioniert
Hallo und guten Morgen,
ich bin hier in dem Forum neu und habe ein paar erste Fragen. Zum Thema HTML muss ich zugeben bin ich auch recht neu, aber ich suche mir vorlagen die ich dann für mich umschreiben kann. Leider funktioniert das mit dem Vorhaben hier nicht. Vlt. könnt ihr mir auf die Sprünge helfen.
Meine Seite erstelle ich mit Webacapella 4 und Dreamweaver CC2015
Ich würde gerne für meine Seite eine Historie einbauen mit verschiedenen Jahrzehnten. Beim Klick auf ein Jahrzehnt soll dann unterhalb ein Fenster aufgehen oder angezeigt werden in dem die Historie steht.
So wie hier http://www.hamm-footwear.com/unternehmen/historie/
Vielen Dank schon mal
Gruß
Marcus