Hallo,
ich weiß, dass ich lange suchen kann und auch sicher eine Lösung finden würde, aber vielleicht hat jemand von Euch einen schnellen Tipp:
Ich möcht gerne die Menu-Leiste auf folgender Seite fixieren, dass sie nicht mitscrollt.
Hier ist die Beispiel-Seite.
HTML-Code:
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>titel</title>
<link href="css/basis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="includes/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast" //speed of animation: "fast", "normal", or "slow"
})
</script>
</head>
<body class="spalter" onLoad="ddaccordion.expandone('expandable'); return true;">
<div id="box">
<div id="links">
<div id="titel"><img src="images/logo.jpg" /></div>
<div class="arrowlistmenu">
<h3 class="menuheader expandable">a</h3>
<ul class="categoryitems">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<h3 class="menuheader expandable">b</h3>
<ul class="categoryitems">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
<h3 class="menuheader expandable">c</h3>
<ul class="categoryitems">
<li><a href="foto_alle.php">1</a></li>
<li><a href="wdr.php">2</a></li>
<li><a href="schatten.php">3</a></li>
<li><a href="seat.php">4</a></li>
<li><a href="spring.php">5</a></li>
</ul>
<h3 class="menuheader expandable">d</h3>
<ul class="categoryitems">
<li><a href="wdr.php">1</a></li>
<li><a href="schatten.php">2</a></li>
<li><a href="seat.php">3</a></li>
</ul>
</div></div>
<div id="inhalt">
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
<p>inhalt </p>
</div>
</div>
</body>
</html>
Code:
body {
margin:0 30;
background-image:url("../images/bg.gif");
font: Normal 9px verdana, sans-serif;
color:#444;
line-height:14px;
}
.column1 {
font-size : 9px;
width : 145px;
float : left;
background-color : #fff;
margin-right : 10px;
padding : 10px 10px 10px 10px;
text-align : left;
}
h1 {
font-size : 10px;
}
h3 {
font-size : 10px;
}
a {
font-size : 10px;
background-color : transparent;
text-decoration : none;
outline : none;
}
a img {
border : 0 none;
}
#box {
width : 1000px;
padding : 0;
float: left;
position: absolute;
margin: 0 auto;
}
#titel {
font-size : 12px;
height : 125px;
width : 125px;
}
#links {
width : 125px;
padding : 0;
float : left;
vertical-align : bottom;
font-weight : normal;
text-align:right;
color : #000;
margin-left:10px
}
#links a:hover {
color : #ff99cc;
}
#links a {
color : #969696;
}
#inhalt {
width : 700px;
padding : 0;
float : left;
overflow : auto;
margin-left : 20px;
}
#inhalt_alle {
width : 600px;
padding : 0;
float : left;
overflow : auto;
margin-left : 150px;
}
ol, ul {
list-style : none;
}
#rechts {
width : 100px;
padding : 0;
float : left;
background-color : #ff99cc;
}
.spalter #container {
width : 930px;
background : #ffffff;
text-align : left;
border-top-width : 30px;
border-right-width : 30px;
border-bottom-width : 30px;
border-left-width : 30px;
border-top-style : solid;
border-right-style : solid;
border-bottom-style : solid;
border-left-style : solid;
border-top-color : #ffffff;
border-right-color : #ffffff;
border-bottom-color : #ffffff;
border-left-color : #ffffff;
margin-top : 0;
margin-right : auto;
margin-bottom : 0;
margin-left : auto;
}
.arrowlistmenu {
width : 125px;
padding : 5px 5px 5px 0;
margin-top : 10px;
background-color : #fff;
}
.arrowlistmenu .menuheader {
color : #666666;
cursor : pointer;
cursor : pointer;
padding-top : 0;
margin-bottom : 15px;
}
.arrowlistmenu .openheader {
margin-bottom : 5px;
}
.arrowlistmenu ul {
list-style-type : none;
margin : 0;
padding : 0;
margin-top : 5px;
margin-bottom : 5px;
}
.arrowlistmenu ul li {
padding-bottom : 2px;
line-height : 1.5em;
}
li.news {
line-height : 15px !important ;
margin-bottom : 10px;
color : #989096;
}
.arrowlistmenu ul li a {
color : #666666;
display : block;
text-decoration : none;
}
.arrowlistmenu ul li a:hover {
color : #0066cc;
}
Hat jemand eine Idee?
Dankbar:
Florian