|
|||
sidebar fixieren?
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; } Dankbar: Florian |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
elemente in der sidebar ausblenden | broski | CSS | 3 | 22.06.2011 23:01 |
Content und Sidebar immer gleich lang | 545 | CSS | 18 | 31.03.2010 23:40 |
active link soll hover-effekt erhalten | zeitgeisth | CSS | 1 | 30.11.2008 14:47 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 15:29 |
ganz einfach CSS-Design: content + sidebar | -Oliver- | CSS | 8 | 02.05.2006 20:30 |