4. tabellen

tabellen

  • H

    Normalerweise hast du recht und es richtet sich an den Rändern des Dokumentes aus.

    Die Definition ist aber anders: Es wird an dem Element ausgerichtet, dass ein anderes "position" hat, als static (default). Deshalb habe ich für das <td> position:relative; festgelegt. Daraufhin wird mit das Child-Element mit position:absolute an dieser Box ausgerichtet. Und das ist alles was wir haben wollen.

    Das ist alles schon eine sehr schön flexible und mächtige Sache. Ich weiß nicht, wie ihr da auf Tabellen kommt (und dann noch auf 3 tds, mit 2 wäre es auch gegangen ;)).

    0
  • G

    Original erstellt von Loggy:
    Ich weiß nicht, wie ihr da auf Tabellen kommt (und dann noch auf 3 tds, mit 2 wäre es auch gegangen ;)).

    bisher habe ich zum thema html nur das tabellen kapitel aus selfhtml gelesen, der rest meiner um style arbeit ist löschen und copy & past
    und bis jetzt bin ich damit gut gefahren 🙂
    also nix zu wundern wenn auf tabellen komme

    0
  • H

    Ich meinte dich ja gar nicht.... aber flenders hat ja noch mitgemacht! 🙄

    0
  • G

    zwei neue probleme
    mit oben und unten hatt alles geklapt
    nur jetzt macht der rechte tabellen rand probleme, die zelle richtet sich nur nach POSTER_NAME und das in den <div> überschreibt einfach den zellen rand

    -------------------------------------------
| Autor     |       MESSAGE               |
-------------------------------------------
| POSTER_NA | POST_DATE ....              |
|           |                             |
|           |                             |
|           |                             |
|           |                             |
| PROFILE_BLABLA                          |
|           |                             |
-------------------------------------------

    und auf den mozilla taucht POSTER_NA erst garnicht auf und PROFILE ist am unteren Bildschirm rand 😞

    ich habe es hier mal upgeloadet http://home.arcor.de/gerard.choinka/index.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

<body>
<table width="100%" cellspacing="1" cellpadding="3" border="1">
<tr>
    <th width="150" height="28">AUTHOR</th>
    <th width="100%">MESSAGE</th>
</tr>
<!-- BEGIN postrow -->
<tr>

    <td style="position:relative;">
                POSTER_NAME
            <div style="position:absolute;left:0px;right:0px;bottom:0px;">
                PROFILE<br />
                XXXXXXXXXXXXXXXXXX<br />
                POSTER_POSTS<br />
                IP
            </div> 
    </td>

    <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td nowrap="nowrap" align="left" valign="top">POST_DATE   POST_SUBJECT:   
                <td align="left">POST_SUBJECT</td>
                <td align="right" valign="top" nowrap="nowrap"><span>   DELETE   EDIT   QUOTE</span></td>
            </tr>
        </table>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td valign="top"><hr />MESSAGE</td>
            </tr>
            <tr>
                <td height="40" valign="bottom">SIGNATURE</td>
            </tr>
            <tr>
                <td valign="bottom" >EDITED_MESSAGE<br /><br /><br /><br /><br /></td>
            </tr>
        </table>
    </td>
</tr>
<!-- END postrow -->
</table>

</body>
</html>

    [ Dieser Beitrag wurde am 25.04.2003 um 14:04 Uhr von Dimah editiert. ]

    0
  • H

    Mhmm... also <spam> gibts schonmal gar nicht (vielleicht <span>?).

    Und sonst verstehe ich vor allem Mozillas verhalten nicht. Behebe erstmal den einen Fehler, dann schaue ich nochmal.

    Achso, aktuelle HTML Version ist 4.01, nicht 4.0.

    [ Dieser Beitrag wurde am 25.04.2003 um 13:44 Uhr von Loggy editiert. ]

    0
  • G

    ok habe ich (upgeloadet und code im posting geändert) aber immer noch gleiche probleme

    [ Dieser Beitrag wurde am 25.04.2003 um 14:03 Uhr von Dimah editiert. ]

    0
  • K

    noch ein versuch ohne div:

    <td>
    <table border="0" height="100%" width="100%">
        <tr>
            <td valign="top">POSTER_NAME</td>
            <td valign="bottom">PROFILE<br>
                XXXXXXXXXXXXXXXXXX<b>
                POSTER_POSTS<br>
                IP
            </td>
        </tr>
    </table> 
</td>

    sollte diese ausgabe machen:

    +-----------------------------------+
|+----------++----------------------+
||Name      ||                      |
||          ||                      |
|+----------+|                      |
||          ||                      |
||          ||                      |
||Profile   ||                      |
||IP        ||                      |
|+----------+|                      |
+------------+----------------------+

    wobei der rahmen der tabelle, die name und ip beinhaltet nicht angezeigt wird

    0
  • G

    hmm das wird zu

    +-----------------------------------+
|+----------+----------++-----------+
||Name      |Profile   ||           |
||          |IP        ||           |
|+----------+----------+|           |
|                       |           |
|                       |           |
|                       |           |
|                       |           |
+-----------------------------------+

    und mit

    <td>
    <table border="0" height="100%" width="100%">
        <tr>
            <td valign="top">POSTER_NAME</td>
        </tr>
        <tr>
            <td valign="bottom">PROFILE<br>
                XXXXXXXXXXXXXXXXXX<b>
                POSTER_POSTS<br>
                IP
            </td>
        </tr>
    </table> 
</td>

    wird das zu

    +-----------------------------------+
+------------+----------------------+
|+----------+|                      |
||Name      ||                      |
|+----------+|                      |
|| Profile  ||                      |           
|| IP       ||                      |           
|+----------+|                      |           
|            |                      |
|            |                      |
+------------+----------------------+

    😞

    0
  • H

    der Mozilla mag das irgendwie nicht, wenn man für <td>s was anderes als position:static (default) festlegt. Also muss man noch ein <div> erstellen, sieht ca. so aus:

    <td>
  <div style="position:relative;height:100%;width:100%;">
    TEXT
    <div style="position:absolute;left:0px;right:0px;bottom:0px;">
       XXXXXXXXXXXXXXXXX
    </div>
  </div>
</td>

    Wie man das mit dem overflow lösen kann, muss ich mich nochmal informieren.

    0
  • G

    Original erstellt von Loggy:
    Wie man das mit dem overflow lösen kann, muss ich mich nochmal informieren.

    das ist nicht das einzigste problem,

    <td>
          <div style="position:relative;height:100%;width:100%;">
            POSTER_NAME
            <div style="position:absolute;left:0px;right:0px;bottom:0px;">
                    PROFILE<br>
                    XXXXXXXXXXXXXXXXXX<b>
                    POSTER_POSTS<br>
                    IP
            </div>
          </div>
    </td>

    IP steht genau über POSTER_NAME, vielleicht habe ich schon zu viel zeit damit verschwendet und machts ohne besondere ausrichtung

    0
  • F

    Ich finde eh, dass die vordere Spalte ruhig eine fixe Breite haben kann.
    Und der Bereich des Userpost sollte unbedingt ein overflow Regel bekommen. Weil bisher nervt es mich immer, wenn durch lange Code-Zeile die komplette Seite zerschossen wird (das man immer horizontal scrollen muss) - dann lieber nur ein Scrollbalken für den Post mit dem Quelltext mit zu langen Zeilen 🙄

    0
  • G

    der code bereich sollte ein scrollbalken bekommen, da ran habe ich auch schon gedacht

    0
  • H

    Mhmm, wahrscheinlich muss man es doch mit Tabellen ( 🙄 ) machen, aber dann nicht so komisch, sondern so:

    <table>
 <tr>
  <th>Benutzername, Infos und IP</th>
  <th>Kommentar</th>
 </tr>
 <tr>
  <td style="vertical-align:top;">Name</td>
  <td rowspan="2">Text</td>
 </tr>
 <tr>
  <td style="vertical-align:bottom;">
    infos, ip
  </td>
 </tr>
  ...
</table>

    Das mit dem overflow ist aber trotzdem eine gute Idee. Und ändere nochmal nach meiner letzten Vorgabe dein Beispiel!

    Und über max-width ( http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-min-width ) könntest du sogar verhindern, dass das Fenster zu breit wird, obwohl es bei kurzen Namen noch platzsparend ist (weils noch relativ positioniert wird).

    [ Dieser Beitrag wurde am 26.04.2003 um 21:59 Uhr von Loggy editiert. ]

    0
  • G

    Original erstellt von Loggy:
    [QB]Und ändere nochmal nach meiner letzten Vorgabe dein Beispiel!

    meinst du die index.html die ich auf mein webspeace upgeladen habe?

    neues problem zwischen Name und (infos, ip) ist ein weiße linie, kuck mal ins testforum

    habe schon nach eine lösung gesucht, nix gefunden, weis du rat?

    [ Dieser Beitrag wurde am 27.04.2003 um 23:16 Uhr von Dimah editiert. ]

    0
  • F

    die weiße Linie kommt (weißt du wohl auch 🙄 ) von cellSpacing=1 im table-tag. Ich hab aber grad auch keine Lösung dafür gefunden (mit HTML oder CSS)

    BTW: das ASCII Logo mag ich irgendwie nicht 😞

    0
  • H

    Wie war nochmal die URL (Passwort habe ich)?

    0
  • F

    wovon? Von Testboard? 😕

    [ Dieser Beitrag wurde am 28.04.2003 um 14:40 Uhr von flenders editiert. ]

    0
  • G

    [phpbb] Forum Style
    posting 12

    0
  • H

    Mhmm, musst du mal mit border-collapse und border-top rumspielen. Keine Ahnung ob das geht.

    border-spacing hilft wahrscheinlich auch: http://www.w3.org/TR/REC-CSS2/tables.html#borders

    [ Dieser Beitrag wurde am 28.04.2003 um 16:54 Uhr von Loggy editiert. ]

    0
  • G

    ich vergesse es einfach :p

    0
Anmelden zum Antworten