Accordion-balken verschwinden beim Browserfenster-verkleinern
Kaimon
- html
ich habe ein accordion erstellt, was an sich optimal funktioniert.
wenn man aber das browserfenster verkleinert werden entsprechend viele balken "abgeschnitten" (verschwinden), statt dass ein browser-scrollbalken angezeigt wird und man einfach die restlichen balken per scrollen erreicht.
dasselbe passiert mit den accordion-contents wenn man das fenster klein genug macht. es verschwindet dann einfach alles... -.-
hat jemand eine idee, woran das liegen könnte?
danke fürs lesen und noch mehr danke wenn mir jemand helfen könnte...
Lieber Kaimon,
ich habe ein accordion erstellt, was an sich optimal funktioniert.
und wenn man kein JavaScript nutzen kann, "funktioniert" es dann auch noch optimal? Ist Deine Seite dann überhaupt noch benutzbar? Denk mal an einen Suchmaschinen-Bot...
Liebe Grüße aus Ellwangen,
Felix Riesterer.
und wenn man kein JavaScript nutzen kann, "funktioniert" es dann auch noch optimal?
Wenn man es richtig macht *, werden alle Inhaltsbereiche schlicht ausgegeben, und es fehlt lediglich die Accordion-Funktion.
(* display: none für eingeklappte Accordion-Bereiche nicht statisch setzen, sondern dynamisch per JS vergeben.)
Viele Grüße!
_Dirk
hallo,
ich habe ein accordion erstellt, was an sich optimal funktioniert.
Das klingt in zweierlei Hinsicht verdächtig:
1. Du meinst vermutlich ein Akkordeon. Und das bedeutet, du hast mindestens ein grafisches Element auf deiner Seite
2. Wenn es so "optimal" funktioniert, warum teilst du dann die Adresse deiner Seite nicht mit?
wenn man aber das browserfenster verkleinert werden entsprechend viele balken "abgeschnitten" (verschwinden), statt dass ein browser-scrollbalken angezeigt wird und man einfach die restlichen balken per scrollen erreicht.
Was für "Balken" sind denn das? Meinst du die Tasten, die bei den meisten Instrumenten dieser Art auf der rechten Seite angebracht sind? Oder sind das die "Züge" des Blasebalgs?
hat jemand eine idee, woran das liegen könnte?
Erst nach genauerer Kenntnis deiner Seite bzw. des von dir eingesetzten Quelltextes. Vermutlich wirst du kaum ohne irgendwelches Scripting (muß nicht Javascript sein) ausgekommen sein.
Grüße aus Berlin
Christoph S.
- Du meinst vermutlich ein Akkordeon
Nein, er meint ein Accordion.
Das soll dich aber nicht davon abhalten, weiter über Musikinstrumente zu reden oder anzubringen, dass Javascript nicht funktioniert, wenn Javascript nicht vorhanden ist.
Viele Grüße!
_Dirk
hat jemand eine idee, woran das liegen könnte?
Vermutlich ein reines CSS-Problem. Rufe die Seite doch mal ohne Javascript auf, so dass alle Elemente aufgeklappt sind (ggfls das display:none für eingeklappte Elemente im Quelltext entfernen), und arbeite dann am CSS: es fehlt vielleicht ein abschließendes Blockelement hinter den Accordion-Blöcken, das die floats aufhebt (-> clear:both verwenden), oder aber deine Elemente werden absolut positioniert, so dass sie nicht mehr im Seitenfluss stehen (-> position: static verwenden). Irgendwas in der Art wird »falsch« sein.
Viele Grüße!
_Dirk
das ist die seite und hier der quellcode:
__________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FAK-Online - Schülerzeitung Gymnasium Pullach</title>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);
function loadAccordions() {
var topAccordion = new accordion('horizontal_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 800
},
direction : 'horizontal'
});
topAccordion.activate($$('#horizontal_container .horizontal_accordion_toggle')[0]);
}
</script>
<style type="text/css">
.horizontal_accordion_toggle {
float: left;
display: block;
height: 420px;
width: 30px;
background: url(images/h_accordion_toggle.jpg) no-repeat top left #7f0000;
color: #ffffff;
text-decoration: none;
outline: none;
border-right: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.horizontal_accordion_toggle_active {
background: url(images/h_accordion_toggle_active.jpg) no-repeat top left #c00000;
border-right: 1px solid #f68263;
}
.horizontal_accordion_content {
height: 420px;
float: left;
overflow: hidden;
background-color: #ffffff;
color: #444444;
}
.horizontal_accordion_content p {
width: auto;
line-height: 150%;
padding: 5px 10px 15px 10px;
overflow: auto;
}
#horizontal_container {
width: auto;
height: 420px;
overflow: hidden;
margin-top: 1px;
margin-right: auto;
margin-bottom: 20px;
margin-left: 0px;
}
#banner {
left: 0px;
top: 0px;
}
body {
background-color: #000000;
}
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="horizontal_container" align="center">
<h3 align="center" class="horizontal_accordion_toggle"><img width="30px" src="images/h_accordion_toggle1c.png" /></h3>
<div style="width: 645px; display: block; overflow: auto;" class="horizontal_accordion_content">
<iframe src="News.html"; height="420px"; width="800px"></iframe>
</div>
<div align="center">
</div>
<h3 align="center" class="horizontal_accordion_toggle"><img width="30px" src="images/h_accordion_toggle2c.png" /></h3>
<div style="width: 645px; display: block; overflow: auto;" class="horizontal_accordion_content">
<iframe src="Artikel.html"; height="420px" width="800px"></iframe>
</div>
[usw...]
<h3 align="center" class="horizontal_accordion_toggle"><img width="30px" src="images/h_accordion_toggle7c.png" /></h3>
<div style="width: 645px; display: none; overflow: auto;" class="horizontal_accordion_content">
<iframe src="Redaktion.html"; height="420px"; width="800px"></iframe>
</div>
</div>
</body>
</html>
____________