✔ mit css ein js-script positionieren

Status
Nicht offen für weitere Antworten.
B

buddha

Erfahrenes Mitglied
Hallo,
Meine Frage- wie kann man ein js - script im content fixieren. Ich möchte damit erreichen das, falls der content zu groß ist die Navigation immer noch sichtbar ist auch wenn man scrollen muß.
HTML: 
<!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=iso-8859-1" />
<title>TEST</title>
<link href="css/layout.css" rel="stylesheet"  type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
</head>
<body>
<div id="content">
  <script type="text/javascript" language="JavaScript1.2" >
<!--
stm_bm(["menu5df9",730,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","100%",67108955,0,1,2,"default","hand",""],this);
stm_bp("p0",[0,4,0,0,0,0,18,0,100,"",-2,"",-2,50,0,0,"#799BD8","transparent","tclback.gif",3,0,0,"#000000"]);
stm_ai("p0i0",[0,"HOME","","",-1,-1,0,"#","_self","","","","tclarrow.gif",18,7,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"","tclbackup.gif",2,3,0,0,"#FFFFF7","#000000","#666666","#FFFFFF","bold 8pt Arial","bold 8pt Arial",0,0],60,22);
stm_aix("p0i1","p0i0",[0,"LEISTUNGEN","","",-1,-1,0,"#","_self","","","","tclarrow.gif",18,7,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"","tclbackup.gif",3],115,22);
stm_aix("p0i2","p0i1",[0,"REFERENZEN"],105,22);
stm_bpx("p1","p0",[0,4,0,0,0,0,18,0,100,"",-2,"",-2,50,0,0,"#799BD8","#EEEEEE","tclbackmove.gif"]);
stm_aix("p1i0","p0i0",[0,"Dach","","",-1,-1,0,"#","_self","","","","tclarrowblack.gif",18,7,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"","",3,3,0,0,"#FFFFF7","#000000","#336699","#000000","8pt Arial","8pt Arial"],65,22);
stm_aix("p1i1","p1i0",[0,"Bauer Lindemann"],65,22);
stm_aix("p1i2","p1i0",[0,"Zimmermannsarbeiten"],65,22);
stm_ep();
stm_aix("p0i3","p0i1",[0,"KONTAKT"],105,22);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i0",[0,"Email"],100,22);
stm_aix("p2i1","p1i0",[0,"Kontaktformular"],145,22);
stm_ep();
stm_aix("p0i4","p0i1",[0,"IMPRESSUM"],160,22);
stm_ep();
stm_em();
//-->
  </script>
  <p class="top"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
  </div>
</body>
</html>

Code: 
/* CSS Document */
html { 
  padding:0px;
  margin:0px;
}

body {
  background-color: #e1ddd9; background-image: url(../images/kachel.gif); background-repeat: repeat-x;
  font-size: 12px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color:#564b47;  
  padding:0px;
  margin:0px;
}

#content {
  margin: 100px 190px 50px 190px; height: 650px; overflow: auto;
  border: solid; 
  border-color: Black; 
  border-width: 1px;
  padding: 0px;
  background-color: transparent; 
  background-image: url(../images/golden.jpg); 
  background-repeat: no-repeat; 
  background-position: top;
}

p{
	padding: 0px; margin: 10px; font-style: oblique;
}
p.top {
	 margin-top: 50px;
}

Für ein paar Tipps :)
 
Hi,

du könntest das Script bzw. Menü in einem weiteren DIV unterbringen, und dieses mit position:fixed auszeichnen.
 
Hi,
Wenn ich es mit fixed auszeichne kommt ein Fehler
-fixed is not a valid value for position -:confused:

Habe es trotzdem probiert, aber es klappt noch nicht.
 
Das wäre mir aber neu, dass fixed kein valider Wert für die position-Eigenschaft ist, und der CSS-Validator beanstandet diese Wertangabe auch nicht :suspekt:

Ansonsten funktioniert es, abgesehen vom IE (kleiner als Version 7), der diesen Wert nicht unterstützt, auf Anhieb in allen mir zur Verfügung stehenden Browsern einwandfrei.
 
Hi,
Den Fehler gibt das Programm Topstyle aus.Im übrigen klappt das bei mir nicht mit fixed obwohl ich das script in einem div positioniert habe.
Gruß
 
Wie gesagt, bei mir funktioniert's einwandfrei:
 

Anhänge

  • demo_fixed.jpg
    demo_fixed.jpg
    88,3 KB · Aufrufe: 23
Hi,
Habe es hingekriegt jetzt ist aber die Navileiste rechts aus dem content raus, und wenn ich das ganze im IE anschau ist die Navileiste links im content und rechts ebenfalls aus dem content raus. Hier der code
Code: 
html { 
  padding:0px;
  margin:0px;
}

body {
  background-color: #e1ddd9; background-image: url(../images/kachel.gif); background-repeat: repeat-x;
  font-size: 12px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color:#564b47;  
  padding:0px;
  margin:0px;
}

#content {
  margin: 100px 190px 50px 190px; height: 650px; overflow: auto;
  border: solid; 
  border-color: Black; 
  border-width: 1px;
  padding: 0px;
  background-color: transparent; 
  background-image: url(../images/golden.jpg); 
  background-repeat: no-repeat; 
  background-position: top;
}

p{
	padding: 0px; margin: 10px; font-style: oblique;
}
p.top {
	 margin-top: 50px;
}
.navi {
	position: fixed;
}
HTML: 
<!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=iso-8859-1" />
<title>TEST</title>
<link href="css/layout.css" rel="stylesheet"  type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
</head>
<body>
<div id="content"><div class="navi">
  <script type="text/javascript" language="JavaScript1.2" >
<!--
stm_bm(["menu5df9",730,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","100%",67108955,0,1,2,"default","hand",""],this);
stm_bp("p0",[0,4,0,0,0,0,18,0,100,"",-2,"",-2,50,0,0,"#799BD8","transparent","tclback.gif",3,0,0,"#000000"]);
stm_ai("p0i0",[0,"HOME","","",-1,-1,0,"#","_self","","","","tclarrow.gif",18,7,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"","tclbackup.gif",2,3,0,0,"#FFFFF7","#000000","#666666","#FFFFFF","bold 8pt Arial","bold 8pt Arial",0,0],60,22);
stm_aix("p0i1","p0i0",[0,"LEISTUNGEN","","",-1,-1,0,"#","_self","","","","tclarrow.gif",18,7,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"","tclbackup.gif",3],115,22);
stm_aix("p0i2","p0i1",[0,"REFERENZEN"],105,22);
stm_bpx("p1","p0",[0,4,0,0,0,0,18,0,100,"",-2,"",-2,50,0,0,"#799BD8","#EEEEEE","tclbackmove.gif"]);
stm_aix("p1i0","p0i0",[0,"Dach","","",-1,-1,0,"#","_self","","","","tclarrowblack.gif",18,7,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"","",3,3,0,0,"#FFFFF7","#000000","#336699","#000000","8pt Arial","8pt Arial"],65,22);
stm_aix("p1i1","p1i0",[0,"Bauer Lindemann"],65,22);
stm_aix("p1i2","p1i0",[0,"Zimmermannsarbeiten"],65,22);
stm_ep();
stm_aix("p0i3","p0i1",[0,"KONTAKT"],105,22);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i0",[0,"Email"],100,22);
stm_aix("p2i1","p1i0",[0,"Kontaktformular"],145,22);
stm_ep();
stm_aix("p0i4","p0i1",[0,"IMPRESSUM"],160,22);
stm_ep();
stm_em();
//-->
  </script></div>
  <p class="top"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
  </p>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Kann ich jetzt nicht nachvollziehen, da es vermutlich an der eingebundenen Navigation liegt.
 
Ich empfehle dir in diesem Fall, das Layout bzw. das DIV #content mit einer fixen Breite auszustatten, und diese Breite ebenfalls für das DIV .navi zu deklarieren, dann gibt's auch keine unerwünschten Überlappungen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück