✔ Kann ich ein JavaScript mittels CSS positionieren?

Hab hier auf der Arbeit nur FF 3.6 und den ollen IE6 an Bord.

Von daher kann ich wegen der anderen Browser erst einen Blick drauf werfen, wenn ich (ab 14h) zu Hause bin.

mfg Maik
 
Achja, meinen lokalen funktionstüchtigen Code (im FF 3.6) kann ich dir noch kredenzen :D

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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"  xml:lang="en" lang="en">
<head>
<title>Fahrschule Knuf - Bergkamen</title>
<meta name="description" content="Fahrschule Knuf in Bergkamen, Ausbildung alle Klassen" />
<meta name="keywords" content="f&uuml;hrerschein,autofahren,roller,motorrad,bus,auto,quad,fahrschule,knuf,bergkamen,kamen,unna,b&ouml;nen,r&uuml;nthe,oberaden,a,a1,m,c,c1,ce,c1e,b,b1,b1e,l,t" />
<meta name="author" content="Ralf Schepp" />
<meta name="robots" content="index, follow" />
<meta name="language" content="de" />
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="date" content="03.03.2010" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css; charset=iso-8859-1" />
<meta http-equiv="content-type" content="text/javascript; charset=iso-8859-1" />

<style type="text/css">
body { background-color: #E5E5E5;}
h1 { color: #000000; font-family: arial,verdana, sans-serif; font-style: italic; font-size: 120%; font-weight: bold; }
p { color: #000000; font-family: arial,verdana, sans-serif; /*font-style: italic;*/ font-size: 100%; /*font-weight: bold;*/ }
ul { color: #000000; font-family: arial,verdana, sans-serif; /*font-style: italic;*/ font-size: 100%; /*font-weight: bold;*/ }
#bgtop { position: fixed; left: 50%; margin-left: -400px; top: 0px; z-index: 5; }
#box1 { position: fixed; left: 50%; margin-left: -400px; top: 0px; z-index: 8; }
#boxtop { position: fixed; left: 50%; margin-left: -395px; top: 30px; z-index: 7; }
#gif1 { position: fixed; left: 50%; margin-left: -349px; top: 108px; z-index: 9; }
#gif2 { position: fixed; left: 50%; margin-left: -167px; top: 108px; z-index: 9; }
#menu { position: fixed; left: 50%; margin-left: -400px; top: 200px; z-index: 6; }
#menutop { position: fixed; left: 50%; margin-left: -400px; top: 200px; z-index: 6; }
#ticker {font-family:arial,sans-serif; font-size:13px;}
#scriptBox { position: fixed; left: 50%; margin-left: -380px; top: 158px; width: 760px;   /*Breite im 'marquee-tag' muss mit width &uuml;bereinstimmen*/ z-index: 9; }

#h1 { position: absolute; left: 50%; margin-left: -325px; top: 240px; width: 700px; z-index: 3; }
#text1 { position: absolute; left: 50%; margin-left: -325px; top: 300px; width: 650px; text-align: justify; z-index: 1; }
#pic1 { float: right; top: 350px; width: 300px; padding: 3px; z-index: 2; }
</style>
</head>
<body link="#E5223F" alink="#7F7F7F" vlink="#0000FF">
<div id="bgtop"><img src="http://www.tutorials.de/forum/img/bg_top_3.png" alt="Fahrschule Knuf GbR - Bergkamen" border="0" width="800" height="230" /></div>
<div id="box1"><img src="http://www.tutorials.de/forum/img/top_dummy_3.png" alt="Fahrschule Knuf GbR - Bergkamen" border="0" width="800" height="30" /></div>
<div id="boxtop"><img src="http://www.tutorials.de/forum/img/top_img_3.png" alt="Fahrschule Knuf GbR - Bergkamen" border="0" width="800" height="170" /></div>
<div id="gif1"><img src="http://www.tutorials.de/forum/img/rad_final.gif" alt="Fahrschule Knuf GbR - Bergkamen" border="0" width="35" height="35" /></div>
<div id="gif2"><img src="http://www.tutorials.de/forum/img/rad_final.gif" alt="Fahrschule Knuf GbR - Bergkamen" border="0" width="35" height="35" /></div>
<div id="menu"><img src="http://www.tutorials.de/forum/img/top_menu_3.png" alt="Fahrschule Knuf GbR - Bergkamen" border="0" width="800" height="30" usemap="#menutop" /></div>
<map name="menutop" id="menutop">
<area shape="rect" coords="0,0,80,30" href="index.html" alt="" />
<area shape="rect" coords="80,0,190,30" href="fahrschulen.html" alt="" />
<area shape="rect" coords="190,0,300,30" href="fahrzeuge.html" alt="" />
<area shape="rect" coords="300,0,385,30" href="team.html" alt="" />
<area shape="rect" coords="385,0,485,30" href="klassen.html" alt="" />
<area shape="rect" coords="485,0,595,30" href="unterricht.html" alt="" />
<area shape="rect" coords="595,0,685,30" href="kontakt.html" alt="" />
<area shape="rect" coords="685,0,800,30" href="impressum.html" alt="" />
</map>
<div id="scriptBox">
<script type="text/javascript">
<!--
/* * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */
tNews=new Array();

//°°°°°°°°°°Die News
tNews.push('<b>Anerkannte Ausbildungsstätte nach §7(1) Berufskraftfahrerqualifikationsgesetz (BkrFqG)</b>');


//°°°°°°°°°°Delimiter zwischen den einzelnen News
tDelimiter  ='***';

//°°°°°°°°°°Interval in ms
tInterval   =5;

//°°°°°°°°°°Stop bei mouseover?true:false
tStop       =false;

//°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
tRepeat     =5;

//°°°°°°°°°°Rahmen
tBorder     ='0';

//°°°°°°°°°°Breite
tWidth      =760;

//°°°°°°°°°°Höhe
tHeight     =13;

//Abstand Rahmen->Inhalt (top+bottom)
tPadding    =0;

//Das Aussehen per CSS anpassbar unter Verwendung des Selectors #ticker

/* * * * * * * * * * * * * * * * * * D E R  T I C K E R * * * * * * * * * * * * * * * * * * * * * */
IE  = document.all&&!window.opera;
DOM = document.getElementById&&!IE;

if(DOM||IE)
    {
    var tGo,
        tPos  = 0,
        tStop = tStop?'onmouseover="clearInterval(tGo)"'+ 'onmouseout="tGo=setInterval(\'DM_ticken()\','+tInterval+')"':'',
        tTxt  = tDelimiter+tNews.join(tDelimiter),
        tNews = tTxt;
        
        for(i = 1; i < tRepeat; ++i)
          {
            tNews+=tTxt;
          }
          
        document.write('<div style="overflow:hidden;border:' + tBorder +
                       ';width:' + tWidth + 'px;height:' + tHeight + 'px;' +
                       'padding:' + tPadding + 'px 0px ' + tPadding + ' px 0px;">' +
                       '<div style="position:absolute;width:' + tWidth + 'px;height:' + tHeight + 'px;'+
                       'overflow:hidden;clip:rect(0px '+tWidth+'px '+tHeight+'px 0px)">'+
                       '<span id="ticker"style="white-space:nowrap;position:relative;"' + tStop + '>' + tNews + 
                       '</span></div></div>');
        
        tObj = IE ? document.all.ticker : document.getElementById('ticker');
    
    function DM_ticken()
      {
        tOffset = tObj.offsetWidth/tRepeat;
        if(Math.abs(tPos) > tOffset)
          {
            tPos=0;
          }
        tObj.style.left=tPos+'px';
        tPos=parseInt(tPos)-1;
      }
    
    tGo=setInterval('DM_ticken()',tInterval);
    }
</script>
</div>
<div id="h1"><h1>Fahrschule Knuf - Seit 35 Jahren Ihr Partner<br />auf dem Weg zum F&uuml;hrerschein</h1></div>

<div id="text1"><p>Im Dschungel der EU-F&uuml;hrerscheinklassen verliert man schnell den &Uuml;berblick!<br />
                   Unsere Fahrlehrer beraten Sie umfassend bei der Auswahl Ihrer F&uuml;hrerscheinklasse und begleiten Sie auf dem
                   Weg zu Ihrem F&uuml;hrerschein.</p>
                   <div id="pic1"><img src="http://www.tutorials.de/forum/img/img_dummy.png" alt="Fahrschule Knuf GbR - Bergkamen" border="0"
                        width="300" height="225" /></div>
                   <p>
                   <br />
                   Berufskraftfahrer m&uuml;ssen alle f&uuml;nf Jahre eine Weiterbildung nach dem BKrFQG nachweisen (Ziffer 95 im F&uuml;hrerschein).<br />
                   Diese Weiterbildung k&ouml;nnen Sie bei uns durchf&uuml;hren.<br />
                   <a href="weiterb.html">weitere Informationen...</a>
                   <br />
                   Aufbauseminare f&uuml;r Fahranf&auml;nger (ASF)<br />
                   <a href="asf.html">weitere Informationen...</a>
                   <br />
                   Aufbauseminare f&uuml;r "Punkteauff&auml;llige" (ASP)<br />
                   <a href="asp.html">weitere Informationen...</a>
                   <br />
                   Freiwilliges Fortbildungsseminar f&uuml;r Fahranf&auml;nger<br />
                   Verk&uuml;rzung der Probezeit um ein Jahr mit dem FSF<br />
                   <a href="fsf.html">weitere Informationen...</a>
                   </p>
                   <p>N&uuml;tzliche Informationen rund um Kraftfahrzeuge und Strassenverkehr gibt es beim
                   <a href="http://www.kba.de" target="_blank">Kraftfahrtbundesamt (KBA)</a></p>
                   </div>

</body>
</html>


mfg Maik
 
Noch eine ineressante Info....
ich habe jetzt auch mal den Gamerechner meiner Kids hinzugenommen:

win 7, IE8 mit 17" 4:3 Monitor..... hier läuft der Ticker zwar über die gesamte Bildschrimbreite, die Gif's drehen aber und das sogar richtig schön flüssig.

Somit bleibt zumindest bei einem Rechner nur noch das Problem mit der Anzeigebreite des Tickers.

Da wir mittlerweile viel gepostet haben, nochmal zur Erinnerung:
Wenn Du im Menu irgendeine Seite anwählst, findest Du noch die Variante mit dem "marquee". Diese sollte vom rechten roten Rahmen mit etwa 2 Pixelen Abstand nach innen, zum linken roten Rahmen mit etwa demselben Abstand nach innen laufen. Nicht über den roten Rahmen hinaus. Das ist die Darstellung die ich anstrebe.
Ich habe bisher nur auf der Index.html gearbeitet, so dass wir immer auf die alte Version zurückgreifen können und das bleibt auch so, bis ich eine Lösung gefunden habe.... oder aufgebe :eek:

//edit:
hast Du das Script "ein wenig" angepasst?

ich sehe da Dinge, die ich vorher nicht sah.....

Code: 
<span id="ticker"style="white-space:nowrap;position:relative;"' + tStop + '>' + tNews +  '</span></

das zum Beispiel.....


Ich bin mal so frei und werde mein script komplett durch Deins ersetzen.....
 
Wie gesagt, alles, was die übrigen Browser neben FF3.6 und IE6 betrifft, kann ich derzeit nichts nachschauen und mich zu äußern.

Du hörst dann diesbezüglich im Laufe des Nachmittags von mir.

mfg Maik
 
Ranger 1281 hat gesagt.:
//edit:
hast Du das Script "ein wenig" angepasst?

ich sehe da Dinge, die ich vorher nicht sah.....

Code: 
<span id="ticker"style="white-space:nowrap;position:relative;"' + tStop + '>' + tNews +  '</span></

das zum Beispiel.....
Zum Vergrößern anklicken....
Da hatte ich vorhin zum lokalen Testen Svens Original-Scriptcode eingesetzt.

mfg Maik
 
ja gut, bis hierher ist jetzt ein riesiger Schritt nach vorn passiert, der Ticker ist schon mal da wo er hingehört.
Ich werde jetzt noch ein wenig an der Geschwindigkeit basteln, chrome hat es da etwas sehr eilig, der Ticker rast dort förmlich, aber das sehe ich jetzt auch als lösbar.
Dann kann ich mich jetzt auch nochmal den gif`s widmen, ist ja komisch, dass diese unter XP zicken machen und unter Win7 vernünftig laufen.
Der Win7 Rechner hat zwar gut doppelt soviel Power wie der XP- Rechner aber das darf normal nicht der Grund sein, sonst könnnte ich die gesamte Site in die Tonne werfen, da ja immer noch viele mit älteren Rechnern surfen.....
Ich spreche beim XP-Rechner immerhin auch schon von 3GHz und 1,5GB RAM und 256MB Grafik, das sollte doch locker reichen um so ein bisschen Website vernünftig darzustellen....

Es kann sein, dass ich erst heut Abend oder gar morgen wieder im Forum bin, da ich jetzt erst eine andere Site bearbeiten muß und später noch an meinem Auto was reparieren muß.

Bis hierher nochmal vielen Dank

Ralf
 
Code: 
<span id="ticker"style="white-space:nowrap;position:relative;"' + tStop + '>' + tNews +  '</span></

aaahhhrrrggg, den Eintrag "white-space...." muß ich gekillt haben, als ich die "position-Anweisung zwischenzeitlich mal rausgelöst hatte, um zu sehen, ob die "Doppelanweisung" (im CSS-Block hatte ich ja auch #ticker - Anweisungen)
die Ursache für das Problem war......

wer Augen hat, ist klar im Vorteil.....
 
Ranger 1281 hat gesagt.:
Leider tickert er bei mir nicht so schön....

Vielleicht mal ein paar ergänzende Info`s:

IE8, Win XP-SP3, alternativ kann ich auf alle IE- Versionen ab 5+ über "IE-Tester" zugreifen, zusätzlich habe ich google-chrome installiert.
Zum Vergrößern anklicken....
Svens Original-Ticker http://www.doktormolle.de/temp/ticker2.htm kann ich im IE8 (WinXP) ebenso in Zeitlupe betrachten.

IE5.x, IE6 und IE7 hingegen können auf meinem System die Tickerfrequenz mithalten, die z.B. Firefox, Opera und Safari anschlagen.

Na, und Google-Chrome hat's bei mir offensichtlich extrem eilig, die Nachrichten über den Ticker laufen zu lassen - so schnell kann manch einer garnicht mitlesen :-)

Ranger 1281 hat gesagt.:
Noch eine ineressante Info....
ich habe jetzt auch mal den Gamerechner meiner Kids hinzugenommen:

win 7, IE8 mit 17" 4:3 Monitor..... hier läuft der Ticker zwar über die gesamte Bildschrimbreite, die Gif's drehen aber und das sogar richtig schön flüssig.
Zum Vergrößern anklicken....
Win7 hab ich (noch) nicht in meinen VMs eingerichtet.

Ranger 1281 hat gesagt.:
In den IE ist es leider in allen Versionen gleich, ausser das in 5 und 6 die gesamte Seite falsch dargestellt wird....
Zum Vergrößern anklicken....
Das liegt daran, dass die IE-Familie die Positionierungsart position:fixed erst seit dem IE7 interpretiert, sofern das (X)HTML-Dokument den Browsern auch im standardkonformen Modus übergeben wird. Im proprietären Darstellungsmodus "Quirksmode" würden sich IE7 u. IE8 wie die Versionen aus dem letzten Jahrhundert anstellen, und das Layout gleichermaßen falsch darstellen.

Folglich ist hier für die älteren IEs ein Workaround vonnöten.

http://code.google.com/p/ie7-js/ ist da meine erste Empfehlung, da dieses Script im IE5.x und IE6 noch weitere ihrer Mangelerscheinungen und Fehlinterpretationen bzgl. der CSS-Spezifikationen ausgleicht - siehe hierzu die Beispiel-Übersicht IE7.js Test Pages :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück