zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden sidebar fixieren?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.05.2009, 15:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.07.2008
Beiträge: 11
florianhwm befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Hat jemand eine Idee?

Dankbar:

Florian
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.05.2009, 18:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.07.2008
Beiträge: 11
florianhwm befindet sich auf einem aufstrebenden Ast
Standard Gelöst!

Alles klar, hatte den Wald vor lauter Bäumen nicht gesehen.
Ist gelöst.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
elemente in der sidebar ausblenden broski CSS 3 23.06.2011 00:01
Content und Sidebar immer gleich lang 545 CSS 18 01.04.2010 00:40
active link soll hover-effekt erhalten zeitgeisth CSS 1 30.11.2008 15:47
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
ganz einfach CSS-Design: content + sidebar -Oliver- CSS 8 02.05.2006 21:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:09 Uhr.