Formularfeld in Tabellenzelle immer zweizeilig
0 0 
dedlfix
Formularfeld in Tabellenzelle immer zweizeilig
Guten Abend miteinander,
bei meiner aktuellen Arbeit habe ich natürlich auch wieder ein Problem. Den aktuellen Stand könnt ihr euch hier ansehen:
http://www.tc-blaugold.de/dings/test.php
Wie ihr seht, stimmt etwas in der gelben Leiste zwischen dem Logo oben und dem Inhalt unten nicht, die Leiste wird nämlich zu groß (über 2 Zeilen) dargestellt. Schuld daran ist ein Newstickerscript, das sich aus unserer SQL Datenbank die neuesten 3 Schlagzeilen zieht und diese mittig in der gelben Leiste ausgibt. Technisch funktioniert die Ausgabe innerhalb eines Formulars in einem einzeiligen Textfeld. Nur sorgt dieses Textfeld dummerweise dafür, daß meine schöne einzeilige Tabelle, aus der die gelbe Leiste besteht, zweizeilig wird. Ich finde einfach nicht raus warum.
Die gelbe Leiste an sich ist ein Div, in dem sich eine Tabelle mit 3 Spalten und einer Zeile befindet. In der mittleren Spalte ist der Newsticker und das zugehörige Textfeld
Der Code von der mittleren <td> mit dem gesamten Newsticker und Formular Code sieht wie folgt aus, weiß jemand die Ursache?
<td height="20" align="center" background="images/design/ticker_back.gif">
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
// © Autor Dietmar Rabich
// http://www.rabich.de
function StartTicker()
{
document.NewsTicker.Zeile.value = "Bitte nutzen Sie einen aktuelleren Browser."
}
// Tickermeldungen
// Es muessen alle drei Werte angegeben werden.
// Effekte fuer Start:
// 1: einrollen
// 2: blinken
// Effekte fuer Ende:
// 1: ausrollen
// 2: blinken
var tickernews =
[
{meldung:"<?timestamp1();?>: <?printnews1();?>", starteffekt:1, endeeffekt:1},
{meldung:"<?timestamp2();?>: <?printnews2();?>", starteffekt:1, endeeffekt:1},
{meldung:"<?timestamp3();?>: <?printnews3();?>", starteffekt:1, endeeffekt:1}
]
// Tickerparameter
var ticker_start = 500 // Wartezeit bis zur ersten Meldung
var ticker_effekt1_start_a = 75 // Darstellungsgeschwindigkeit [ms]
var ticker_effekt1_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt2_start_max_blink = 3 // Anzahl der Blinkdarstellungen
var ticker_effekt2_start_a = 100 // Blinkgeschwindigkeit [ms]
var ticker_effekt2_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt1_ende_a = 50 // Scrollgeschwindigkeit [ms]
var ticker_effekt1_ende_b = 100 // Wartezeit bis zur naechsten Meldung [ms]
var ticker_effekt2_ende_max_blink = 3 // Anzahl der Blinkdarstellungen
var ticker_effekt2_ende_a = 100 // Blinkgeschwindigkeit [ms]
var ticker_effekt2_ende_b = 1000 // Wartezeit bis zur naechsten Meldung [ms]
// Interne Variablen
var msgnr = 0
// Aufruf der naechsten Meldung
function nextTicker()
{
msgnr++
if(msgnr >= tickernews.length)
msgnr = 0
setTimeout("showTicker(0)", 1000)
}
// Effekte fuer Meldungsende
function hideTicker(cnt)
{
switch(tickernews[msgnr].endeeffekt)
{
// Effekt 2
case 2:
document.NewsTicker.Zeile.value = ((cnt % 2) == 1) ? tickernews[msgnr].meldung : ""
if(cnt > (2 * ticker_effekt2_ende_max_blink + 1))
setTimeout("nextTicker(0)", ticker_effekt2_ende_b)
else
setTimeout("hideTicker(" + String(cnt + 1) + ")", ticker_effekt2_ende_a)
break
// Effekt 1
default:
document.NewsTicker.Zeile.value =
tickernews[msgnr].meldung.substring(cnt, tickernews[msgnr].meldung.length)
if(cnt >= tickernews[msgnr].meldung.length)
setTimeout("nextTicker()", ticker_effekt1_ende_b)
else
setTimeout("hideTicker(" + String(cnt + 1) + ")", ticker_effekt1_ende_a)
}
}
// Effekte fuer Meldungsanfang
function showTicker(cnt)
{
switch(tickernews[msgnr].starteffekt)
{
// Effekt 2
case 2:
document.NewsTicker.Zeile.value = ((cnt % 2) == 1) ? "" : tickernews[msgnr].meldung
if(cnt > (2 * ticker_effekt2_start_max_blink + 1))
setTimeout("hideTicker(0)", ticker_effekt2_start_b)
else
setTimeout("showTicker(" + String(cnt + 1) + ")", ticker_effekt2_start_a)
break
// Effekt 1
default:
document.NewsTicker.Zeile.value = tickernews[msgnr].meldung.substring(0, cnt)
if(cnt >= tickernews[msgnr].meldung.length)
setTimeout("hideTicker(0)", ticker_effekt1_start_b)
else
setTimeout("showTicker(" + String(cnt + 1) + ")", ticker_effekt1_start_a)
}
}
// Start des Tickers
function StartTicker()
{
// Standardmeldung
document.NewsTicker.Zeile.value = "Nachrichten werden geladen..."
// Ticker starten
setTimeout("showTicker(0)", ticker_start)
}
//-->
</SCRIPT>
<form name="NewsTicker">
<input name="Zeile" type="text" style="border: none; background-image: url(images/design/ticker_back.gif);
color: #000000; font-weight: bold; font-size: 13px; font-family: tahoma;" value="" size="60" readonly="readonly">
</form>
</td>
-
Hallo,
<form name="NewsTicker">
<input name="Zeile" type="text" style="border: none; background-image: url(images/design/ticker_back.gif);
color: #000000; font-weight: bold; font-size: 13px; font-family: tahoma;" value="" size="60" readonly="readonly">
</form>Ein FORM ist ein Block-Element in HTML. Diese haben, je nach Browswer unterschiedliche, standardmäßig voreingestellte Werte für margin-bottom. Es gibt hier zwei Möglichkeiten.
1. Du setzt via CSS margin und padding des FORM-Elements auf 0.
2. Du machst mit Hilfe der CSS-Eigenschaft display aus dem FORM-Element ein inline-Element.Das hättest Du aber auch leicht im Archiv http://suche.de.selfhtml.org/cgi-bin/such.pl?suchausdruck=form+abstand+zeile&lang=on&feld=alle&index_5=on&hits=100#Forums-Archiv 2005 finden können.
viele Grüße
Axel
-
Super, das Stichwort Inline brachte mich dann auch bei der Suche weiter.
Vielen Dank!
-
-
echo $begrueszung;
<form name="NewsTicker">
<input name="Zeile" ...>
</form>INPUT, SELECT, TEXTAREA, LABEL und BUTTON müssen nicht zwingend durch ein FORM eingerahmt werden.
FORM ist ein block level Element und das wird meist mit Abstand vorher und nachher dargestellt. Entweder du stellst den Abstand deinen Wünschen gemäß ein oder du lässt es einfach weg.
echo "$verabschiedung $name";