Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

HTML-Tabelle, in der eine einzelne Zelle scrollbar sein soll...





Frage

Hallo Leute! Mein Ausgangspunkt: eine Webseite, komplett in HTML, bestehend aus einer verschachtelten Tabelle, in der die "Hauptzelle", also die, in die der Content soll, eine feste Größe haben soll. Das Problem: Übersteigt der Content die Größe der Zelle, so wird die Zelle einfach nach unten vergrößert, was natürlich das Design zerreisst. gesuchte Lösung: eine Möglichkeit, der "Hauptzelle" Scrollbalken zu verleihen, ohne das restliche Design zu ändern, sprich, die Lösung muß innerhalb <tr> Hauptzelle </tr> stehen. Habt Ihr da ne Idee?? Danke schonmal!!!

Antwort 1 von Feuervogel

ja, da gibts ne möglichkeit, per javascript. sieht sogar sehr elegant aus, also die zwei scrollpunkte sind sind jeweils ein grafik. kann nur etwas dauern, bis ichs rausgesucht habe...

Antwort 2 von joey76

Och, ich hab Zeit! *gg*
Wär aber Super von Dir!! Danke schonmal!!
*Feuervogel zum persönlichen Held des Tages nominier*

Antwort 3 von -do_john_86-

Hi,
setze ein Iframe in die Content-Spalte.

Jens

Antwort 4 von joey76

Hey Jens!
Kannst Du das 'n bisschen näher ausführen? (obwohl ich ja eigentlich auf frames verzichten wollt)
Danke!!

Antwort 5 von -do_john_86-

Hi,
setzte in die Content-Zelle folgendes:


<iframe src="startseite.html" height="höhe" width="breite" border="0" frameborder="0"></iframe>


Das Ergebnis siehst Du dann...

mfg. Jens

Antwort 6 von joey76

Danke Jens!
Werd mal Feuervogels Variante (zwecks frame-losigkeit) abwarten, und mir dann angucken, was mir besser gefällt! Danke Dir jedenfalls!

Antwort 7 von Ravetti

iframe entspricht NICHT frame!

Du kannst auch das hier ausprobieren:

....<td><div style="width: 100%; height: 100%; overflow : auto;">
Hier kommt der scrollbare text rein
</div></td>....

Ravetti

Antwort 8 von joey76

Super, Leute!! Soweit schon genau das, was ich such! Bin trotzdem noch auf die JS-Version gespannt, Feuervogel hat mir mit den grafischen Scrollpfeilen den Mund wässrig gemacht! *gg*

Antwort 9 von joey76

Noch ne kurze Frage an Jens bzw. Ravetti:
hab in dem iframe jetzt ne größere Menge Text im Blocksatz, und der kuschelt sich jetzt bis zum letzten Pixel an den Scrollbalken, was net sooo dolle aussieht :-( Kann man den irgendwie vom Scrollbalken wegrücken?

Antwort 10 von -do_john_86-

Ja, in dem Du alles in eine Tabelle einbaust. Du kannst eventuell auch ein Blind-Gif (unsichtbares Bildchen) als Abstandshalter nehmen.

& n b s p ; (ohne Leerzeichen) kannst Du als Lehrzeichen verwenden.

Ich kann mir das bildlich nicht genau vorstellen, mit einer Tabelle klappt es aber auf jeden Fall.

Antwort 11 von joey76

klingt logisch...also quasi die Tabelle und net den Text scrollen!?

Antwort 12 von -do_john_86-

Nein nein,
die Seite die in dem IFrame dargestellt soll eine Tabelle enthalten wo der Text drin ist. Dann kannst Du rechts noch eine unsichtbare Spalte platzieren, die als Abstandshalter zum Scrollbalken fungiert.

Antwort 13 von joey76

Danke, Jens! Hat geklappt!

Antwort 14 von Ravetti

Benutzt die CSS, in diesem Fall margin-right: 10px bzw. margin-left: 10px.

In Selfhtml steht alles darüber.

Antwort 15 von reLuder

eine zelle scrollen:

<td style="width: 150px; height: 100px;">
<div style="width: 100%; height: 100%; overflow : auto;">
TextTextText TextTextText
TextTextText TextTextText
TextTextText TextTextText
TextTextText TextTextText
TextTextText TextTextText
vieeeel Text
</div></td>

Antwort 16 von reLuder

huch sorry ravetti, hab nur überflogen und antwort 7 verpennt ;)

Antwort 17 von joey76

So, danke Euch nochmal allen für die Hilfe, hab's jetzt mal mit Ravettis/reLuders Lösung realisiert, klappt auch hervorragend!!
Aber wo bleibt Feuervogel??? *gg* Bin schon gespannt auf das Script!
Schlaft's gut allesamt!

Antwort 18 von Feuervogel

so, ich habs!


<script language="JavaScript1.2">

//Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and TOS
//Visit http://www.dynamicdrive.com

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container" style="position:relative;width:470;height:400;border:0px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:470;left:0;top:0">')
}
</script>

<ilayer name="nscontainer" width=470 height=400 clip="0,0,470,400">
<layer name="nscontent" width=470 height=400 visibility=hidden>


<!--------------------------- MAIN CONTENT----------------------------------->
<center><font face="verdana, sans serif" size="1">

<b><h2>Wilkommen auf cocaxx.homelinux.com</h2></b>

<br>
Bei cocaxx.homelinux.com handelt es sich nicht um eine wirkich sinnvolle Seite sondern mehr eine kleine Seite, die die wichtigen Dateien des Lebens (:D ) auf zum Download anbietet.
Da mein Rechner über eine QSC Dsl Leitung seinen Weg ins Internet findet, bietet er einen Upstream von 256 kbit/s und ist somit ein guter Mirror für kleinere Datein.
<br><br>
<!--------------------------- MAIN CONTENT----------------------------------->



</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table width="470px"><td><p align="left">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>  <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>

</table>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",100)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",100)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>


ich hab zwar keinen plan von js, aber im code ist ja ne quell-angabe, vielleicht findest du da antworten auf deine fragen...

ich schau noch mal ob ich ne beispiel seite dazu finde...

Antwort 19 von Feuervogel

so, hab grad was gemerkt: bau doch den code einfach mal in deine td ein, pass die pfade zu den grafiken an, alle größen und schau was passiert...

hoffe es passt so...

Antwort 20 von Pete K.

Zitat:
iframe entspricht NICHT frame!
Das ist richtig, aber beiden Arten gemeinsam sind die bekannten Vor- und Nachteile. Insoweit würde zumindest ich auf jeden Fall darauf verzichten wollen.

Antwort 21 von rfb

also tabelle in iframe in tabelle - möglichst noch mit Blind-Gif und JavaScript zum Scrollen ...
also noch mehr geht kaum, um die accessibility (Zugänglichkeit der Seite - insbesondere für User mit nicht grafisch orientierten Browsern) auf 0 zu setzen.
Statt dieser veralteten Tabellen-Layouts, die in der Zeit der 4er-Browser-Generation ihren Sinn hatten (lang, lang ists her), gibt es inzwischen Browser die CSS und die Möglichkeiten von positionierten divs unterstützen.

Antwort 22 von -do_john_86-

@rfb
eine Seite komplett mit CSS zu gestalten ist fast so, als eine Seite nur mit JavaScript aufzubauen. Du widersprichst Dir in Deinem Posting selber, Tabellen werden mittlerweile von jedem Browser unterstützt, CSS nicht. Tabellen laufen selbst mit text-basierten Browsern unter Unix/Linux und sind klares/reines HTML und keine Scriptsprache.

Außerdem hast Du Dir nicht alles durchgelesen. Es sind hier ca. 3 bis 4 verschiedene Lösungs-Vorschläge genannt worden.
So hat es keiner geschrieben:
Zitat:

also tabelle in iframe in tabelle - möglichst noch mit Blind-Gif und JavaScript zum Scrollen ...


Ich kenne keine große Seite die ohne Tabellen arbeitet. CSS-Seiten (wo alles, aber absolut alles mit CSS gemacht ist), landen früher oder später auf der Schnautze. Es funktioniert, ja - aber nicht überall.

mfg. Jens

Antwort 23 von -do_john_86-

PS. ich weiß nicht ob Du weißt, was ein Blind-Gif ist, aber das benötigt man doch selbst bei CSS in manchen Fällen und ist das A und O bei komplexen Designs.

Antwort 24 von Ravetti

@Pete K., Antwort 20:

Zitat:
iframe entspricht NICHT frame!
Das ist richtig, aber beiden Arten gemeinsam sind die bekannten Vor- und Nachteile


Das klingt, als seinen die sich ähnlich, sind sie aber nicht: Braucht der iframe ein Frameset? Kann ein iframe alleine aufgerufen werden???


@Feuervogel, Antwort 18:

Diese Javascriptlösung ist wie mit Kanonen auf Fliegen schiessen, da sie nicht nötig ist bzw. zu aufwändig ist - ich sehe keinen Vorteil darin.

Was die CSS betrifft: Netscape 4.x ist der Pflegefall in der Unterstützung von CSS. Da der aber eh ein Auslaufmodel ist nehme ich keine grosse Rücksicht mehr auf ihn - das empfehle ich Euch auch.

Schönen Tag noch
Ravetti

Antwort 25 von Feuervogel

@ravetti: ja, ich sehe auch keinen direkten vorteil darin, aber es ist eine möglichkeit zum lösen des problems...
ein problem, das zu umgehen ist, wenn man einfach ein layout bastelt, welches sich vertikal strecken lässt...ich versuche js sowieso nur an stellen zu benutzen, die für die funktion einer seite nicht erheblich sind.
aber jedem das sein, gell? außerdem sollte man sich doch aller möglichkeiten bewusst sein, bevor man die sich die passende raussucht...

wie wärs denn, wenn man tables mit css kombiniert;-?

Antwort 26 von Ravetti

Zitat:
wie wärs denn, wenn man tables mit css kombiniert;-?


Mache ich sowieso, etwas komfortableres gibts nicht. :-)

Ravetti

Antwort 27 von rfb

@Jens
1. Ich weiß was ein Blind-Gif ist, benötige aber keins - danke.
2. mit CSS positionierte divs bewirken in textorientierten Browsern, dass sie einfach der Reihe nach angezeigt werden, da der Browser CSS ignoriert. Er versucht nicht, nicht-tabellarische Informationen in einer Tabelle darzustellen (ist so wie nen Brief mit Excel zu schreiben). Und ne vernünftige Reihenfolge der Infos hinzukriegen ist ja wohl nicht so schwer - diese Reihenfolge ignoriert ja der grafische Browser dank CSS dafür wieder, sie wirkt sich also dort aufs Layout nicht aus.
Übrigens widerspricht es sehr wohl den HTML-Regeln nicht-tabellarische Daten tabellarisch darzustellen. Es ist eine Grund-Forderung, HTML-Elemente nicht für Layout-Zwecke zu missbrauchen (denn dafür gibts ja CSS ;-).

Antwort 28 von Feuervogel

*rfbzumheiligenernennt*

seltsam nur, dass es jeder macht;-P

Antwort 29 von rfb

@Feuervogel
bist du "jeder"?

st. rfb ;-)

Antwort 30 von Feuervogel

nein, aber wie schon erwähnt, gibt es kaum eine größere seite (auch wenn das ein blödes argument ist), die sich nicht der tabellen als layout-werkzeug bedient...

Antwort 31 von rfb

um die Diskussion hier nicht unnötig aufzublähen (zumal dies nicht das erste mal ist): das http://www.webwriting-magazin.de/ beschäftigt sich intensiv mit dem Thema und bietet Beispiele (auch von "großen" Seiten), wie es auch ohne Tabellen-Layout geht.

Antwort 32 von Feuervogel

ich will ja nicht zu fies sein, aber diese seite benutzt neben spacern auch ein tabellen layout, und zwar 13 tabellen auf der startseite...

Antwort 33 von rfb

ich hatte auch nur gesagt, dass es dort weiterführende Infos und Links zu Beispielen gibt, nicht dass das Webmagazin das Beispiel ist.