HTML/CSS Text über Tabelle legen

[M3Y3R]

Hallo,

ich habe eine leere Tabelle mit zwei spalten generiert und die Breite der beiden spalten festgelegt.

Hier ein Bild wie ich das meine:



Nun möchte ich über die gesammte Tabelle einen Text legen...
Problem ist, dass ich nicht weiß, wo die Tabelle angezeigt wird, als ab welcher Höhe. Ich weiß auch nicht, wie groß diese Tabelle ist...

Wie kann ich nun den Text über die Tabelle legen ?
Mit einem <DIV>-Tag hat das nie funktioniert....


MFG
Papenburger

 

[MiD]

Eventuell mit "colspan" und "align" Wäre eine Möglichkeit

 

[Astrodan]

Was auch funktionieren könnte: Definiere die Position der tabelle im tabellen tag als "position: relative" ohne Verschiebung. Das ändert an der Tabelle selber ja nichts. Dann legst du in eine deiner Tabellen-Zellen ein span oder div rein, welches du mit "position: absolute" positionierst. Dadurch orientiert sich seine Position am nächsthöheren Element, welches nicht mit static (default) definiert ist, also in dem Fall an deiner Tabelle. Nun kannst du dem div-(span) die entsprechende Höhe und Breite deiner Tabelle geben und da reinschreiben.

Weiß aber nicht ob die Technik mit Tabellen auch funktioniert, da das irgendwie die Verschachtelung sinnlos machen und damit der Logik im HTML widersprechen würde.. aber gut, Try & Error

 

[M3Y3R]

Eventuell mit "colspan" und "align" Wäre eine Möglichkeit

Funktioniert das? Ich glaube nicht, da ich immer zwei verschiedene Hintergrundbilder habe....

 

[MiD]

Rein theoretisch sollte es funktionieren - try out

 

[M3Y3R]

Rein theoretisch sollte es funktionieren - try out

Leider nicht, da ich damit nur die darüberliegende Zelle miteinander verbinde und nicht den Text über die beiden Zellen legen kann....

 

[Raze]

vielleicht hilft https://www.css4you.de/z-index.html ?

mfg Raze

 

[M3Y3R]

vielleicht hilft https://www.css4you.de/z-index.html ?

mfg Raze

Das heißt ohne CSS komm ich da wohl nicht weit mit.
Eigentlich sollte das eine Progress-Bar werden, wo die Prozentzahl über die gesammte Tabelle gelegt werden sollte....

Naja, dann kann hier wohl geschlossen werden......

 

[MiD]

Leider nicht, da ich damit nur die darüberliegende Zelle miteinander verbinde und nicht den Text über die beiden Zellen legen kann....

Eine Frage: Reicht es nicht wenn du den Text exakt in die Mitte der beiden Zellen reinschreibst? Du verbindest die Zellen mit colspan - ja. Aber mit aligne=middle zentrierst du doch den darüber liegenden Text exakt über die beiden Zellen - ergo mittig.

 

[paddya]

Das heißt ohne CSS komm ich da wohl nicht weit mit.
Eigentlich sollte das eine Progress-Bar werden, wo die Prozentzahl über die gesammte Tabelle gelegt werden sollte....

Naja, dann kann hier wohl geschlossen werden......

Warum realisierst du die Progressbar mit einer Tabelle? Da gibt es aber auf jeden Fall bessere Lösungen.

Greetz

paddya

 

[Raze]

also ich würde pauschal sagen, das sich das mit 3 divs leicht lösen lässt.

etwas in der art:

<div id="progress_bar">
  <div id="progress" style="width:123px"></div>
  <div id="text">
     59%
  </div>
</div>

und ein solches css dazu:

#progress_bar{
   width:100px;
   background-color:red;
   height:20px;
}

#progress_bar #progress{
    background-color:green;
}

#progress_bar #text{
     position:relative;
     bottom:25px;
}

bei style="width:xx px" würde ich dann einfach den forschritt in sein px equivalent bringen und dort einfügen.

Der code ist ungetestet, aber dürfte in die Richtung gehen.

mfg Raze

 

[M3Y3R]

Eine Frage: Reicht es nicht wenn du den Text exakt in die Mitte der beiden Zellen reinschreibst? Du verbindest die Zellen mit colspan - ja. Aber mit aligne=middle zentrierst du doch den darüber liegenden Text exakt über die beiden Zellen - ergo mittig.

Nein, weil wenn ich die beiden Zellen verbinde, ich nur noch eine Farbe dort habe und nicht mehr beide ! Der text soll auf dem farbigen Hintergrund liegen und nicht dadrüber stehen in einer weiteren Zeile !

Warum realisierst du die Progressbar mit einer Tabelle? Da gibt es aber auf jeden Fall bessere Lösungen.

Greetz

paddya

Welche denn zum Beispiel ?

also ich würde pauschal sagen, das sich das mit 3 divs leicht lösen lässt.

etwas in der art:

<div id="progress_bar">
  <div id="progress" style="width:123px"></div>
  <div id="text">
     59%
  </div>
</div>

und ein solches css dazu:

#progress_bar{
   width:100px;
   background-color:red;
   height:20px;
}

#progress_bar #progress{
    background-color:green;
}

#progress_bar #text{
     position:relative;
     bottom:25px;
}

bei style="width:xx px" würde ich dann einfach den forschritt in sein px equivalent bringen und dort einfügen.

Der code ist ungetestet, aber dürfte in die Richtung gehen.

mfg Raze

Ich würde das ganz gerne ohne CSS machen wollen. Allerdings weis ich nun nicht, wie sich das verhällt, wenn ich die Styles direkt dem DIV-Tag zuweise bzw. direkt in das DIV-Tag schreiben würde.....
Das müsste ich erstmal ausprobieren. Dazu komme ich aber wahrscheinlich erst heute haben !