PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Wie bekomm ich das in der mitte?


headhunter
02-04-2003, 17:37
<body onload="if (document.all||document.layers){regenerate2();upda te()}">
<style>
<!--
#tickertape{position:left;layer-background-color:black;width:400;height:12;}
#subtickertape{background-color:black;position:absolute;border: 1px solid black;width:400;height:12;}
.subtickertapefont{font:bold 12px Verdana;text-decoration:none;color:white;}
.subtickertapefont a{color:white;text-decoration:none;}
-->
</style>

<div id="tickertape">
<div id="subtickertape" class="subtickertapefont">Initializing...</div>
</div>

<script language="JavaScript1.2">

var speed=3000
var news=new Array()
news[0]="<p align=center><a href='http://www.vfc-clan.d1e.de'>30.03.2003: -=[VFC]=- Clan geht Online</a>"
news[1]="<p align=center><a href='http://www.vfc-clan.d1e.de'>01.04.2003: Wir haben den ersten neuen Member, er heißt -=[VFC-t]=- MuTaNt. Herzlich Willkommen!!!</a>"
news[2]="<p align=center><a href='http://www.vfc-clan.d1e.de'>02.04.2003: Wenn ihr auch bei uns Member werden wollt, dann meldet euch bei den Leadern oder füllt das Join us Formular aus.</a>"

i=0
if (document.all)
tickerobject=document.all.subtickertape.style
else
tickerobject=document.tickertape.document
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}
function update(){
BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
if (document.layers){
document.tickertape.document.subtickertape.documen t.write('<span class="subtickertapefont">'+news[i]+'</span>')
document.tickertape.document.subtickertape.documen t.close()
}
else
document.all.subtickertape.innerHTML=news[i]
if (i<news.length-1)
i++
else
i=0
setTimeout("update()",speed)
}
function BgFade(red1, grn1, blu1, red2,
grn2, blu2, steps) {
sred = red1; sgrn = grn1; sblu = blu1;
ered = red2; egrn = grn2; eblu = blu2;
inc = steps;
step = 0;
RunFader();
}
function RunFader() {
var epct = step/inc;
var spct = 1 - epct;
if (document.layers)
tickerobject.bgColor =
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
else
tickerobject.backgroundColor=
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
if ( step < inc ) {
setTimeout('RunFader()',50);
}
step++;
}
</script>
Jana
03-04-2003, 21:11
Oh je, da fallen mir nur noch Frames ein.
Probier es mit folgendem Ticker von http://www.cross-browser.com/examples/newsticker.html
Ich hab ihn die zentriert.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CBE Newsticker (simple example)</title>
<style type='text/css'><!--
body {
color:#000000; background:#ccccff;
margin:0px; padding:0px;
}
.newsTicker {
position:absolute; visibility:hidden; overflow:hidden;
width:500px; height:22px; clip:rect(0,500px,22px,0);
color:#000000; margin:0px; padding:0px;
border-top:1px solid #000000; border-left:1px solid #000000;
border-bottom:1px solid #ffffff; border-right:1px solid #ffffff;
}
.newsTickerContent {
position:absolute; visibility:hidden; overflow:hidden;
margin:0px; padding:4px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px; color:#0000ff; background:transparent;
}
.tMarker {
display:inline;
position:relative; visibility:hidden;
width:1em; height:1em; left:0px; top:0px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px; color:#000000; background:transparent;
}
.note {
position:absolute; visibility:hidden;
width:500px; height:300px; clip:rect(0,500px,300px,0);
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px; color:#000000; background:#cccccc; margin:0px; padding:10px;
border-top:1px solid #000000; border-left:1px solid #000000;
border-bottom:1px solid #ffffff; border-right:1px solid #ffffff;
}
a:link, a:visited, a:active { font-family:verdana,arial,sans-serif; font-size:12px; color:#880000; }
a:hover { font-family:verdana,arial,sans-serif; font-size:12px; color:#000088; }
--></style>
<script type='text/javascript' src='../cbe_core.js'></script>
<script type='text/javascript' src='../cbe_event.js'></script>
<script type='text/javascript' src='../cbe_slide.js'></script>
<script type='text/javascript'><!--
var
t1,
tickerMarkerTotal = 11,
tickerSlideTime = 1000,
tickerPauseTime = 4000,
tickerMarker;
function windowOnload() {
tickerMarker = 1;
with (cbeGetElementById('n1').cbe) {
background('#cccccc');
resizeTo(500,300);
moveTo('n',75);
zIndex(10);
show();
}
with (t1 = cbeGetElementById('tickerContainer1').cbe) {
background('#cccccc');
resizeTo(500,22);
moveTo('center'); //******* moveTo(document.cbe.width()/2,document.cbe.height()/2');
show();
}
with (t1.firstChild) {
background('#cccccc');
moveTo(0, parentNode.height());
show();
// use the rate-type you like:
// slideRate = cbeSlideRateLinear;
slideRate = cbeSlideRateSine;
// slideRate = cbeSlideRateCosine;
addEventListener('slideEnd', tickerControl);
}
tickerControl(t1.firstChild, 1);
}
function tickerControl(tContent, slide) {
if (slide) {
if (tickerMarker > tickerMarkerTotal) {
tickerMarker = 1;
tContent.moveTo(0, tContent.parentNode.height());
}
var marker = cbeGetElementById('m' + tickerMarker).cbe;
tContent.slideTo(0, -marker.offsetTop(), tickerSlideTime);
++tickerMarker;
}
else setTimeout("tickerControl(t1.firstChild, 1)", tickerPauseTime);
}
//--></script>
</head>
<body marginwidth='0' marginheight='0'>

<div id="n1" class="note">
<h3>CBE News-Ticker</h3>
<p>This <a href="http://cross-browser.com/">CBE</a> example was in response to Frode's idea at the forum. We welcome your feedback at the <a href="http://www.helpfromtechs.com/ubb/ultimatebb.php?ubb=get_topic;f=8;t=000497">discussion</a>.</p>
<p>I improved it quite a bit in response to the <a href="http://www.helpfromtechs.com/ubb/ultimatebb.php?ubb=get_topic;f=8;t=000512">discussion</a> with RJA.</p>
<p><i>17 May 02</i>: I tested this on Win2K with IE5.01, Mozilla0.9.7, Opera6.01, and Navigator4.79. Opera and NN4 don't render the borders.</p>
<p><a href="http://mfoster.com/">Mike Foster</a></p>
</div>

<div id='tickerContainer1' class='newsTicker'>
<div id='tickerContent1' class='newsTickerContent'>
<p><span id="m1" class="tMarker">&gt;</span><a href="http://cross-browser.com/">Cross-Browser.com</a>&nbsp;-&nbsp;Home of CBE, my cross-browser dhtml library.</p>
<p><span id="m2" class="tMarker">&gt;</span><a href="http://lineoflight.com/">LineOfLight.com</a>&nbsp;-&nbsp;My first site.</p>
<p><span id="m3" class="tMarker">&gt;</span><a href="http://electcolene.com/">ElectColene.com</a>&nbsp;-&nbsp;Colene is running for a local office.</p>
<p><span id="m4" class="tMarker">&gt;</span><a href="#" onclick="return false">SardisCity.com</a>&nbsp;-&nbsp;My home town. (not yet live)</p>
<p><span id="m5" class="tMarker">&gt;</span><a href="http://lineoflight.com/fe/">Foster Electronics</a>&nbsp;-&nbsp;My Dad's communications business.</p>
<p><span id="m6" class="tMarker">&gt;</span><a href="http://mitchellfoster.com/">MitchellFoster.com</a>&nbsp;-&nbsp;My Brother's site.</p>
<p><span id="m7" class="tMarker">&gt;</span><a href="http://cross-browser.com/ss/solar_system2.html">Inner Solar System</a>&nbsp;-&nbsp;The inner planets orbiting the Sun.</p>
<p><span id="m8" class="tMarker">&gt;</span><a href="http://cross-browser.com/ss/solar_system.html">Sun Earth Moon</a>&nbsp;-&nbsp;More astronomy fun.</p>
<p><span id="m9" class="tMarker">&gt;</span><a href="http://lineoflight.com/w3a/">Mike's W3A</a>&nbsp;-&nbsp;My original cross-browser dhtml work.</p>
<p><span id="m10" class="tMarker">&gt;</span><a href="http://lineoflight.com/mt/">GogetaMT</a>&nbsp;-&nbsp;My Son's first site.</p>
<p><span id="m11" class="tMarker">&gt;</span><a href="http://lineoflight.com/reflekted/">Reflekted</a>&nbsp;-&nbsp;One of my first dhtml applications.</p>
</div>
</div>

</body>
</html>

Die Templates findest du auf der Hauptseite zum Runterladen.
bischi
10-04-2003, 17:00
Das sind keine Frames, sondern LAYER!!!

Sonst die einzige brauchbare Lösung.

MfG Bischi
Jana
10-04-2003, 17:42
Ja sicher, meine Lösung basiert auf Layern.

Das Ganze geht auch mit Fade Effekt.
Schaut auf der Seite "cross-browser" nach.
Allerdings funktioniert das nicht für alle Browser.
The Ripper
10-04-2003, 18:57
Das JavaScript funktioniert sowieso nur mit dem IE, mein Mozilla zeigt nur "Initializing..." an.

Ich würde das ganze in eine Tabelle einbetten (das JavaScript habe ich zugunsten der Übersichtlichkeit weggelassen):


<body onload="if (document.all||document.layers){regenerate2();upda te()}">
<style>
<!--
.subtickertapefont{font:bold 12px Verdana;text-decoration:none;color:white;}
.subtickertapefont a{color:white;text-decoration:none;}
#tickertape{background-color:black;width:400;height:12;}
#subtickertape{background-color:black;border: 1px solid black;width:400;height:12;}
-->
</style>

<table width="400" align="center">
<tr>
<td>
<div id="tickertape" align="center">
<div id="subtickertape" class="subtickertapefont">Initializing...</div>
</div>
</td>
</tr>
</table>