eine Verständnisfrage: Suchst du ein Akkordeon rein auf CSS-Basis darf auch JavaScript / jQuery im Spiel sein?
Naja Vorzugsweise mit CSS und Javascript. Wenns unbedingt mit jQuery sein muss, dann meinetwegen auch.
Das Komische ist, wenn ich mein Menu blanko (also ohne Textinhalt in meiner Website) teste, funktioniert alles einwandfrei. Alleine wenn ich Text unter dem "Accordion Menü" habe oder daneben, fängt es an, dorthin zu scrollen. Warum???? 
Hallo,
ich habe an sich nur ein kleines Problem, jedoch komme ich ums Verrecken auf keine Lösung:
Ich habe ein simples Accordion Menü erstellt, funktioniert auch soweit, wie gewünscht. Jedoch! Wenn ich auf einen Button klicke, bei dem Unterpunkte aufgleiten sollen, "scrollt" es immer bis zu dem Punkt runter wo sich der Button befindet. Ich möchte aber, dass alleine die Unterpunkte aufgleiten, ohne dass es herunterscrollt. Der "Standpunkt", an dem die Seite war, soll also bleiben.
Hier mal der simple Aufbau (ich hab Dinge über und unter das Menü gesetzt, um es zu veranschaulichen):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="website">
<div id="teaser">
<img src="" alt="bild" id="teaser" height="200px"/>
</div>
<div id="inhalt">
<div id="wrapper">
<div id="nav">
<ul>
<li id = "home">
<span id="onsite">Home</span>
</li>
<li id = "angebot">
<a href="#angebot">Angebotsformen</a>
<ul>
<li><a href="kleinkinderbetreuung.html">Kleinkinderbetreuung</a></li>
<li><a href="kitabetreuer.html">Kitabetreuer</a></li>
<li><a href="anmelden.html">Anmelden</a></li>
</ul>
</li>
<li id = "leistungen">
<a href="#leistungen">Spiel & Spaß</a>
<ul>
<li><a href="konzeption.html">Konzeption</a></li>
<li><a href="tagesablauf.html">So sieht ein Tag aus</a></li>
<li><a href="projekte.html">Projekte</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="main">
<span class="willkommen"><span style="font-weight:bold;font-size:23px;"><br /><br />Überschrift</span><br /><br />Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.<br /><br />Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.<br /><br />Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.Hier steht viel Text.<br /><br /></span>
</div>
</div>
</div>
</body>
</html>...und das zugehörige CSS...
#nav {
width: 200px;
}
#nav ul {
padding: 0px;
margin: 0px;
}
#nav ul li {
list-style: none;
background: #96cf34 !important;
margin-bottom:4px;
margin-top:4px;
}
#nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 8px 10px;
font-size: 17px;
font-weight:bold;
}
#nav ul li:target > a {
color: gray;
background: #dbff80 !important;
}
#nav ul li:target > ul {
max-height: 200px;
}
#nav ul li ul{
display: block;
position: relative;
padding: 0px;
border: none;
box-shadow: none;
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 0.3s ease-out;
-moz-transition: max-height 0.3s ease-out;
-o-transition: max-height 0.3s ease-out;
-ms-transition: max-height 0.3s ease-out;
transition: max-height 0.3s ease-out;
}
#nav ul li ul li{
float: none;
display: block;
border: none;
}
#nav ul li ul li a {
padding-left: 10px;
}
#nav ul li ul li a:hover{
color:white;
background: #96cf34 !important;
}
#nav ul li a:hover{
color:white;
background: #96cf34 !important;
}
#onsite {
width:180px;
background: #dbff80 !important;
display: block;
padding: 8px 10px;
color: gray;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}Vielen Dank, schonmal im Vorraus 
Hallo Leute,
ich hab (mal wieder) eine Frage 
Ich hätte gerne einen Art "Gefällt mir"-Button auf meiner Seite (unter geschriebenen Artikeln). Natürlich soll das nichts mit Facebook zu tun haben! Jedes Mal, wenn jemand daraufgklickt, soll sich der Wert um 1 erhöhen und direkt daneben stehen. Etwa so vom Aussehen:
<html>
<head></head>
<body>
<input type="button" value="+1"><input type="text" value="22" style="text-align:center;width:20px;">
</body>
</html>Wie kann man das praktisch realisieren? Hat jemand ein Tutorial bzw. kann mir helfen?
Vielen Dank 
Ich stehe irgendwie gerade auf dem Schlauch 
Es geht wahrscheinlich um etwas total lächerliches, ich bekomms aber einfach nicht hin und im Web hab ich nichts dergleichen gefunden...
Ich habe auf meiner Website links eine längliche Box, in der Termine aufgelistet sind. Meist ist die kleine linke Box kürzer, als die Hauptbox rechts davon, da nicht so viele Termine verzeichnet sind. Ich möchte aber, dass sich die Termine-Box soweit automatisch nach unten verlängert, bis sie auf gleicher Höhe mit der Hauptbox ist, obwohl ja keine Termine dort stehen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body {
background-color:#d0e2f3;
background-repeat: no-repeat;
background-attachment:fixed;
text-align:center;
overflow-x: hidden;
}
#website {
width:1100px;
margin:0 auto;
background:;
}
#inhalt {
position:;
float:left;
height:;
width:1100px;
background-color:#79a133;
margin-left:px;
margin-top:px;
margin-bottom:5px;
}
#termine {
text-align:left;
position:relative;
float:left;
width:230px;
margin-left:10px;
margin-top:5px;
margin-bottom:15px;
padding:1px 1px;
background-color:#d0e2f3;
}
</style>
</head>
<body>
<div id="website">
<div id="inhalt">
<div id="termine">
Termine<br /> Termine<br />Termine<br />Termine<br />Termine<br />Termine<br />Termine<br />Termine<br />Termine<br />Termine<br />Termine<br />Termine<br /><br /><br />verlängern nach unten<br />
</div>
<div id="main">
<div id="main_sub_artikel">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
</body>
</html>Vielen Dank im Vorraus
Keiner, der helfen kann??? 
Hallo MrMurphy,
erstmal vielen Dank für die schnelle Antwort!
Der Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Ob CSS oder JavaScript ist mir im Prinzip egal, hauptsache es funktioniert
Das ganze sollte auf jeden Fall mit Firefox, Chroome funktionieren, möglicherweiße auch mit IE (ab Version 8/9 oder höher), Opera oder Safari (weiß nicht, inwieweit das geht, oder nötig ist), aber das ist nicht soo wichtig.
Hoffe, es ist im Rahmen des Machbaren
Hallo Leute
Folgendes:
Ich habe hier eine schmale Box mit einer "Überschrift" und einem Pfeil an der linken Seite (in Form eines Bildes). Wenn man auf den Pfeil klickt, öffnet sich diese Box nach unten und zusätzlich kommt ein Text zum Vorschein (unter die Überschrift), sie klappt sozusagen auf. Das funktioniert auch ganz wunderbar, nur hätte ich gerne, dass sich diese Box langsam nach unten öffnet. Ich habe zwar einige Funktionen im Web gefunden, bin jedoch irgendwie nicht klargekommen...
Hier mal der nackte Code (ohne irgendwelche Verschönerungen):
<html>
<head>
<script type="text/javascript">
function showHideLayer(id){
e = document.getElementById(id);
if(e.style.display=="block"){
e.style.display = "none";
} else {
e.style.display = "block";
}
}
</script>
</head>
<body>
<div id="box" style="padding:6px 90px;margin-bottom:8px;background-color:green;">
<span id="header_style">...Ueberschrift...</span>
<a href="alternativerLink" onclick="showHideLayer('meinLayer1');return(false)"><span id="mehr_anzeigen1" onClick="javascript:changeText1()" style="position:absolute;left:19px;top:9px;" title="mehr/weniger anzeigen..."><img src="pfeil_unten_klein.png" height="25" onmouseover="this.src='pfeil_unten_groß.png'" onmouseout="this.src='pfeil_unten_klein.png'"/></span></a>
<div id="meinLayer1" style="display:none;"><br />
<span id="text" style="font-size:15px;font-weight:bold;">TextTextTextTextTextTextTextTextTextTextTextTextTextText<br /><br /></span>
</div>
</div>
</body>
</html>Ich wäre sehr dankbar über hilfreiche Antworten
Liebe Grüße