JavaScript + Größen

  • #1
C

cyberjunior

Bekanntes Mitglied
Themenersteller
Dabei seit
01.03.2003
Beiträge
233
Reaktionspunkte
0
Ort
Germany
HI leutz,

hab da ein kleines problem.
ich das immer auf froßen seiten, da regulieren sich die tabellengrößen nach einem javascript.
wenn man da z.B. ein Newsbereich in der mitte hat und dann verlängert der sich automatisch wenn der text nicht mehr rein passt.
Hat jemand ein Script oder eine Ahnung wo ich sowas finde?
Damit ich wie beim CSS vorbestimmen kann wie breit eine bestimmt tabelle sein soll???
Würde mich sehr über eure Postings freuen.

cyberjunior ;D
 
  • #2
Hi,
lies dir deine Postings vor dem Posten bitte noch mal durch oder schreiben sie mit etwas mehr Sorgfalt, dann weiß man auch, was du eigentlich willst.

Wenn ich dich richtig verstehe, dann willst du deine Tablellen dynamisch in der Länge verändern können, richtig?

Oder doch falsch?
In der Breite machst du jenes mit der Angabe width bzw. colgroup.
Dort brauchst du auch keine absoluten Werte an zu geben, sondern kannst mit dem * arbeiten. Jedoch musst du ungefähre Werte vorgeben.

Dies könnte z.B. so aussehen:
width=3*% width=3*% width=3*%

oder
width=40% width=*% width=40%

Dies ist mit CSS sowie mit normalem HTML möglich.
Cledith
 
  • #3
Jo hast ja recht. mein posting ist zeimlich scheiße sorry.

Die Sache ist die. Ich habe eine Grundtabelle und in ihr viele andere tabellen.
eine davon für navi, eine für news in der mitte und noch eine oben, usw.
Wenn ich jetzt in der MItte News schreibe und die tabelle für news so klein ist soll sich die selber verlägern, nicht verbreiten.
Die tabellen sollen sich alle abhängig voneinander verlängern, dass man nicht ständig per hand verlängern muss.
Und das geht mit Java Script sowas such ich.
Danke.
 
  • #4
Wenn du denn Spalten in der/den Tabellen eine bestimmte (=festgelegte) Breite gibst, wird diese Breite nicht mehr verändert.

Ausnahme: du überschreibst die Spaltenangaben mit Stylesheet Informationen, da diese ggfs. Vorrang haben.

Beispiel:
HTML: 
<table>
<tr>
<td width=200px>Spalte 1 (feste Breite)</td>
<td width=100%>Spalte 2 (Ausnutzung volle Breite)</td>
</tr>
</table>
Die erste Spalte bleibt immer 200 Pixel breit, die 2 Spalte bläht sich auf und nutzt denn erforderlichen Platz. Die Definition der Spaltenbreite reicht 1 mal je Spalte, d.h. in den folgenden td Anweisungen brauchst Du die width= Angabe nicht mehr anzugeben.

Gruß
VoiD

PS: Du kannst Dir ruhig die Mühe machen dein Problem ausführlich zu schildern, desto einfacher ist es für uns Andere das Problem zu erkennen/zu lösen

PSS: Es mag sein, dass es eine JavaScript Lösung gibt, die Dein Problem löst. Es muss allerdings auch allein mit HTML (+CSS) lösbar sein. Was allerdings gerne mit JavaScript gemacht wird, ist zu ermitteln, welchen Browser der User benutzt (IE oder Netscape oder...), um dann auf die Browsereigenheiten reagieren zu können
 
  • #5
Hi

Wenn du eine in einer Zelle mehr Text reinschreibst verlängert sich doch die Tabelle automatisch nach unten, wozu brauchst du da noch Scripts?

Hast du evtl mal eine Bespielseite?

Gruß, Michael
 
  • #6
Ich glaueb ich habe jetzt verstanden was er will....

3 Tabellen in einer Tabelle. Eine Tabelle links für Navi, eine in der Mitte für Inhalt, eine rechts für News (oder so, egal).

Nun solllen alle 3 Tabellen gleich lang sein. Die Tabellen sind ja nun nur so lang, wie Inhalt in ihnen ist. Per height kann man Tabellen ja auch in die Länge ziehen, ohne dass sie Inhalt beinhalten (siehe Wintotal.de).

Wenn in der Mitte viel Inhalt ist wird die Rahmentabelle ja automatisch in die Länge gezogen, jedoch nicht die Tabellen News und Navi. Die sollen jedoch auch ebenso lang sein, wie die Tabelle in der Mitte.

Quasi soll es so aussehen, wie auf Wintotal.de. Dort sind ja nun auch alle 3 Tabellen (Mitte, Links, Rechts) immer gleich lang.

Habe ich das nun richtig verstanden? Oder doch wieder falsch?
Cledith
 
  • #7
Das müsste dann in etwa so aussehen:

Code: 
<table>
<tr>
<td style=height:100%>
  <table>...die linke Tabelle...</table>
</td>
<td style=height:100%>
  <table>...die mittlere Tabelle...</table>
</td>
<td style=height:100%>
  <table>...die rechte Tabelle...</table>
</td>
</tr>
</table>
Hinweis:
1. bin mir nicht sicher, ob die Stylesheet Angabe style=height:100% richtig ist, müsste aber so stimmen
2. die inneren Tabellen sind nicht vollständig sondern nur angedeutet
3. wenn man den innerern Tabellen noch eine bestimmte Breite geben möchte, muss man in der dazugehörigen (äußeren) td Anweisung - am besten auch als Stylesheet Information - noch die Breite definieren

Aber so müsste es ja dann funktionieren.
 
  • #8
Nö, so geht das aber nicht.
Height mit 100% wird nicht interpretiert. Mit einer absoluten Angabe dagegen schon. Das hatte ich auch schon mal ausprobiert.

Jetzt interessiert es mich dann doch schon mal. Ich weiß nämlich auch nicht wie man es macht ;D

Cledith
 
  • #9
Mmmmh, also hier mal ein ausführlicher Text:

Code: 
<table border=1>
<tr>
<td style=width=100px>
  <table border=1><tr><td>...die linke Tabelle...</td></tr></table>
</td>
<td style=height:100%; width=100px>
  <table border=1><tr><td>...die mittlere Tabelle...die einen sehr langen Text und deren nachbarn zur linken als auch zur rechten genauso groß sind</td></tr></table>
</td>
<td style=height:100%; width=100px>
  <table border=1>
  <tr><td>...die rechte Tabelle... Zeile 1</td></tr>
  <tr><td>und Zeile 2</td></tr>
  </table>
</td>
</tr>
</table>
Stimmt. Das obige Script führt nicht unbedingt zum Ergebnis. Wenn man es testen will, Script ausschneiden und in eine neue Datei einfügen. Als HTML speichern und mit dem IE anschauen.

Das Problem bei Tabellen ist, dass man auf die Höheneigenschaft nicht richtig Einfluss nehmen kann. So wirkt die Angabe:
Code: 
<td style=height:100%>
nicht. Aber die Angabe von
Code: 
]<td style=height:100px>
wird durchaus beachtet. Noch komplizierter wird es dann, wenn man beachtet, dass die einzelnen Browser unterschiedlich auf solche CSS Formatierungen reagieren.
Hier gilt der alte Grundsatz: IE ist sehr fehlertolerant, was das schlampige HTML Programmieren eher unterstützt. Ich schaue mir daher meine HTML Seiten auch gerne mal in Mozilla an.

Um auf das eigentliche Problem zurückzukommen: ich habe jetzt leider auch keine Lösung, ausser der Frage, warum es so wichtig ist, dass alle 3 Tabellen die gleiche Größe besitzen sollen? Wegen der Hintergrundfarbe?
 
  • #10
Hi,

du mußt die Höhe nicht für die Zelle definieren, sondern für die Tabellen.

Das sieht dann z.B. so aus:


Code: 
<table border=1 style=height:100%; width=100px>
<tr>
<td>
  <table border=1 style=height:100%; width:100px><tr><td>...die linke Tabelle...</td></tr></table>
</td>
<td>
  <table border=1 style=height:100%><tr><td>...die mittlere Tabelle...die einen sehr langen Text und deren nachbarn zur linken als auch zur rechten genauso groß sind</td></tr></table>
</td>
<td>
  <table border=1 style=height:100%; width:200px>
     <tr><td>...die rechte Tabelle... Zeile 1</td></tr>
     <tr><td>und Zeile 2</td></tr>
  </table>
</td>
</tr>
</table>

Dann klappts auch so wies soll :)
 
  • #11
Hi,
ich verstehe hier was nicht so ganz.
Habe folgende Tabelle:
Code: 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//DE>

<html>
<head>
   <title></title>

<style>
      body               {background-color:#123465;
                        }
      table            {width:100%;
                         font-size:12pt;
                     color:#FFCC33;
                        }
      .rahmen            {border-width:1pt;
                         border-color:#FFCC33;
                     border-style:solid;
                     margin:0pt;
                     padding:0pt;
                        }
</style>

</head>

<body>

<table style=height:100%;>
      <tr><td>
               <!-- Head -->
            <table class=rahmen id=head>
                    <tr><td>
                         <table class=rahmen>
                              <tr><td><!--#include virtual=head.htm--></td></tr>
                       </table>
                 </td></tr>
            </table>
      </td></tr>
      <tr><td>
            <table class=rahmen style=margin-top:10pt;height:100%>
                  <colgroup>
                            <col width=150>
                         <col width=*>
                         <col width=200>
                  </colgroup>
                  <!-- Menu -->
                  <tr><td width=150>
                           <table class=rahmen style=height:100%>
                                <tr><td><!--#include virtual=menu.htm--></td></tr>
                        </table>
                  <!-- Mitte -->
                  </td><td width=*>
                           <table class=rahmen style=height:100%;>
                              <tr><td><!--#include virtual=mitte.htm--></td></tr>
                         </table>
                  <!-- Rechts -->
                  </td><td width=150>
                           <table class=rahmen style=height:100%;>
                              <tr><td><!--#include virtual=rechts.htm--></td></tr>
                        </table>
                  </td></tr>
            </table>
       </td></tr>
       <tr><td>
                <table class=rahmen  style=margin-top:10pt;>
                     <tr><td>
                          <!-- Footer -->
                          <table class=rahmen>
                                  <tr><td><!--#include virtual=footer.htm--></td></tr>
                         </table>
                     </table>
              </table>
       </td></tr>
</table>
</body>
</html>

Die Tabellen MENU, MITTE, LINKS werden nicht 100% dargestellt. Wenn ich jedoch die Rahmentabelle kopiere, die die 3 Tabellen zusammenhält und sie in ein neues HTML Dokument einfüge, dann sind sie auch 100% hoch.
Kannst du mir sagen woran das liegt?

Vielen Dank,
Cledith
 
  • #12
Hi,

hier der neue Code


Code: 
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>

<html>
<head>
   <title>Willkommen auf ichkanns.de | [url]www.ichkanns.de</title>[/url]

<style type=text/css>
<!--

     body              {background-color:#123465;
                      }
     table           {width:100%;
                        font-size:12pt;
                     color:#FFCC33;
                      }
     .rahmen           {border-width:1pt;
                        border-color:#FFCC33;
                     border-style:solid;
                     margin:0pt;
                     padding:0pt;
                      }
-->
</style>

</head>

<body>

<table style=height:100%>
     <tr><td>

             <!-- Head -->
           <table class=rahmen id=head>
                   <tr><td>
                         <table class=rahmen>
                              <tr><td>Oben<!--#include virtual=head.htm--></td></tr>
                       </table>
                 </td></tr>
            </table>

      </td></tr>
      <tr><td height=10></td></tr>
      <tr><td  style=height:100%>

    <table class=rahmen style=height:100%;>
                 <colgroup>
                           <col width=150>
                         <col width=*>
                         <col width=200>
                 </colgroup>
                 <!-- Menu -->
                 <tr><td width=150>
                         <table  class=rahmen style=height:100%;>
                               <tr><td>links<!--#include virtual=menu.htm--></td></tr>
                       </table>
                 <!-- Mitte -->
                 </td><td width=*>
                          <table class=rahmen style=height:100%;>
                             <tr><td>mitte<!--#include virtual=mitte.htm--></td></tr>
                         </table>
                 <!-- Rechts -->
                 </td><td width=200>
                          <table class=rahmen style=height:100%;>
                             <tr><td>rechts<!--#include virtual=rechts.htm--></td></tr>
                        </table>
                 </td></tr>
            </table>

       </td></tr>
       <tr><td height=10></td></tr>
       <tr><td>

<table class=rahmen>
                     <tr><td>
                          <!-- Footer -->
                          <table class=rahmen>
                                  <tr><td>Unten<!--#include virtual=footer.htm--></td></tr>
                         </table>
                     </td></tr>
              </table>

       </td></tr>
</table>
</body>
</html>
 
  • #13
Cool, danke dir.

Kannst du mir ncoh erklären, warum der Margin dafür ausschlaggebend war? Das kann ich im Moment noch nicht wirklich nachvollziehen.

Ansonsten klappt jetzt aber alles. Nochmals danke.
Cledith
 
  • #14
Hi,

das margin hab ich rausgenommen, weil es das Layout zerstört hat. Leider weiß ich nich wirklich warum :)


Was ich aber hauptsächlich geändert hab is die eine Zelle

<tr><td style=height:100%>

da hab ich auch die Höhe hinzugefügt.


Außerdem hattest du ein </table> zuviel und ein </td></tr> zuwenig (unten beim footer) :)
 
  • #15
Natürlich war die TD Zeile ausschlaggebende Zeile dafür, mein Fehler!

Ich meinte den margin, aber das hast du ja schon beantwortet ;D
Nun gut, dann werde ich den Margin wohl so akzeptieren (müssen) ;D

Von mir aus (nun doch nicht mehr) erledigt ;D
 
  • #16
So langsam ist das ja schon peinlich...
aber es funktioniert nicht.

Wenn ich durch die SSI Befehle weitere Tabellen einfüge, dann werden diese nicht mehr gestreckt. Ich hatte zunächst gedacht, dass es geht. Doch da hatte ich keine weiteren Tabellen per SSI eingefügt außer links, doch da diese Tabelle eh die höchste war, hat diese die Höhe für die ganze Tabelle festgelegt.

Für rechts habe ich mit selbigen SSI Befehl folgende Tabelle spaßeshalber einmal einfügen lassen:
Code: 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN>
<!--Index.htm Rechts-->
<html>
<head>
<title></title>
</head>

<body style=height:100%>
<table style=width:200pt;height:100%>
   <tr><td><img src=grafik/test1.gif width=200 height=150 border=0 alt=c2k-kanns.de></td></tr>
   <tr><td>Hallo</td></tr>
</table>
</body>
</html>

Wenn diese Tabelle dargestellt wird, dann wird sie (oder die andere, welche nun kürzer ist) nicht mehr gestreckt.

Weißt du, was es damit auf sich hat?

Nochmals vielen Dank und entschuldige diese Umstände!
Cledith
 
  • #17
Hallo,
wer suchet der findet. Das Problem lag daran, dass ich in der index.shtml die Breite der einzelnen Tabellen festgelegt habe. Wenn ich dies nicht tue, werden die Tabellen wirklich mit einer Höhe von 100% dargestellt, zumindest mit dem Mozilla, NN und IE. Nur der neue Opera ist der Verlierer. Mit ihm geht das ganze dennoch nicht.

Wenn jemand weiß, woran das ganze liegt, dann wäre ich ihm sehr dankbar mich das wissen zu lassen.

In diesem Sinne,
c2k
 
Thema:

JavaScript + Größen

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums

Themen
113.840
Beiträge
707.963
Mitglieder
51.494
Neuestes Mitglied
Flensburg45
Oben