Probleme bei Ausrichtung von Zelleninhalt einer Tabelle

[Roca]

Hallo Ihr lieben,

ich bin ganz neu hier. dahr sei mir vergeben, falls es ein allgemeines Thema zu Tabellen in PHP gibt. Über die Suche habe ich unter "Tabelle" leider nichts gefunden.

Meine Frage bezieht sich auf den php Befehl: valign

Obwohl ich ihn anwende, richtet sich mein Text nicht mittig aus. Was ich aber gerne haben würde, damit er mit den Hacken, die hier als Aufzählung fungieren auf einer Ebene ist.

Hier die Website dazu und unten mein Code...

Clinical Studies

Zu sagen ist, das ich absoluter Anfänger bin (was man an der Einfachheit des Codes) vermutlich sieht.


<table width="810" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h1>Clinical studies / -support</h1>
<p> </p>
</td>
</tr>
</tbody>
</table>
<table width="810" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="bottom"> <img src="images/pfeil.png" border="0" alt="" /></td>
<td valign="top">
<p style="text-align: left;">Propose and perform neccessary registration studies</p>
</td>
</tr>
<tr>
<td valign="bottom"> <img src="images/pfeil.png" border="0" alt="" /></td>
<td valign="top">
<p style="text-align: left;">Guide clinical studies with relevant KOL´s</p>
</td>
</tr>
<tr>
<td valign="bottom"> <img src="images/pfeil.png" border="0" alt="" /></td>
<td valign="top">
<p style="text-align: left;">Support marketing with relevant clinical studies</p>
</td>
</tr>
<tr>
<td valign="bottom"> <img src="images/pfeil.png" border="0" alt="" /></td>
<td valign="top">
<p style="text-align: left;">Organize global multicenter studies</p>
</td>
</tr>
<tr>
<td valign="bottom"> <img src="images/pfeil.png" border="0" alt="" /></td>
<td valign="top">
<p style="text-align: left;">Discuss and decide effective scientific positioning with important opinionleaderss</p>
</td>
</tr>
</tbody>
</table>

Ich verwende das CMP Joomla.

Kann mir jemand helfen?

Vielen Dank

Roca

 

[threadi]

Das Attribut valign ist nicht PHP sondern HTML.

Dein CMS ist kein CMP sondern ein CMS.

Die Antwort auf deine Frage findest Du im CSS, da CSS zur Gestaltung da ist - weder PHP noch HTML. Daher habe ich dein Thema in den CSS-Bereich verschoben.

Wenn Du Inhalte einer einzelnen Tabellenzelle horizontal zentrieren willst, dann musst Du diese nur per

<td style="text-align: center;">

horizontal zentrieren.

Wenn Du hingegen vertikal zentrieren willst, kannst Du

<td style="vertical-align: middle;">

verwenden.

 

[Roca]

Hallo threadi,

vielen Dank dafür.

Leider sehe ich keine Änderung anhand der Website...

<table width="810" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h1>Clinical studies / -support</h1>
<p> </p>
</td>
</tr>
</tbody>
</table>
<table width="810" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> <img src="http://www.html.de/images/pfeil.png" border="0" alt="" style="cursor: se-resize !important;" /></td>
<td style="vertical-align: middle;">
<p style="text-align: left;">Propose and perform neccessary registration studies</p>
</td>
</tr>
<tr>
<td> <img src="http://www.html.de/images/pfeil.png" border="0" alt="" /></td>
<td style="vertical-align: middle;">
<p style="text-align: left;">Guide clinical studies with relevant KOL´s</p>
</td>
</tr>
<tr>
<td> <img src="http://www.html.de/images/pfeil.png" border="0" alt="" /></td>
<td style="vertical-align: middle;">
<p style="text-align: left;">Support marketing with relevant clinical studies</p>
</td>
</tr>
<tr>
<td style="vertical-align: middle;"> <img src="http://www.html.de/images/pfeil.png" border="0" alt="" /></td>
<td>
<p style="text-align: left;">Organize global multicenter studies</p>
</td>
</tr>
<tr>
<td> <img src="http://www.html.de/images/pfeil.png" border="0" alt="" /></td>
<td style="vertical-align: middle;">
<p style="text-align: left;">Discuss and decide effective scientific positioning with important opinionleaderss</p>
</td>
</tr>
</tbody>
</table>

kann es sein, dass ich einen weiteren Fehler im Code habe, der dies überschreibt?
Im CSS code für das Template verwende ich nur angaben für den Hintergrund und für die Textfarbe...

Gruß

Roca

 

[threadi]

Du hast keinen Fehler im Code, nur einen gedanklichen Fehler gemacht. Ich nahm an Du willst in einem <td> enthaltene Inline-Elemente vertikal ausrichten. Dann hätte mein Vorschlag funktioniert. In deinem jetzigen Code erkenne ich aber, dass Du Blockelemente darin hast.

<td style="vertical-align: middle;">
<p style="text-align: left;">Support marketing with relevant clinical studies</p>
</td>

Das kann natürlich nicht funktionieren. Die Eigenschaft vertical-align wirkt sich nur auf Inline-Elemente innerhalb des Elements aus, welches die Eigenschaft hat. <p> ist ein Blockelement. Wenn Du das vertikal zentrieren willst, würde ich eher empfehlen dem <p> eine Zeilenhöhe (CSS-Eigenschaft "line-height") zu geben, wodurch der Text darin jeweils zentriert in der Tabellenzelle steht.

Da ich hier nur den HTML-Code sehe und Du keinen Link zur Seite zeigst, weiß ich nicht, welchen Wert "line-height" in all deinen Fällen haben müsste.

Im Übrigen würde ich dir dringend davon abraten diese Webseite weiter so aufzubauen. Du missbrauchst eine Tabelle als Grundstruktur deiner Webseite. Das macht man heute nicht, u.a. weil man dann genau auf die Probleme stößt die Du gerade hast. Ich würde dir empfehlen die Seite neu zu machen, statt über mögliche Darstellungsprobleme anhand dieses HTML-Codes nachzudenken.

Und bitte verwende Code-Tags wenn Du im Forum Quellcode zeigst.

 

[Roca]

Du hast keinen Fehler im Code, nur einen gedanklichen Fehler gemacht. Ich nahm an Du willst in einem <td> enthaltene Inline-Elemente vertikal ausrichten. Dann hätte mein Vorschlag funktioniert. In deinem jetzigen Code erkenne ich aber, dass Du Blockelemente darin hast.

<td style="vertical-align: middle;">
<p style="text-align: left;">Support marketing with relevant clinical studies</p>
</td>

Das kann natürlich nicht funktionieren. Die Eigenschaft vertical-align wirkt sich nur auf Inline-Elemente innerhalb des Elements aus, welches die Eigenschaft hat. <p> ist ein Blockelement. Wenn Du das vertikal zentrieren willst, würde ich eher empfehlen dem <p> eine Zeilenhöhe (CSS-Eigenschaft "line-height") zu geben, wodurch der Text darin jeweils zentriert in der Tabellenzelle steht.

Da ich hier nur den HTML-Code sehe und Du keinen Link zur Seite zeigst, weiß ich nicht, welchen Wert "line-height" in all deinen Fällen haben müsste.

Im Übrigen würde ich dir dringend davon abraten diese Webseite weiter so aufzubauen. Du missbrauchst eine Tabelle als Grundstruktur deiner Webseite. Das macht man heute nicht, u.a. weil man dann genau auf die Probleme stößt die Du gerade hast. Ich würde dir empfehlen die Seite neu zu machen, statt über mögliche Darstellungsprobleme anhand dieses HTML-Codes nachzudenken.

Und bitte verwende Code-Tags wenn Du im Forum Quellcode zeigst.

Okay, in Ordnung... ich hätte den Text eben gern Linksbündig und den Text in der Mitte der Zelle platziert. Aber wenn es eine bessere Möglichkeit so etwas zu lösen, was weniger Probleme bereitet, dann bin ich für alle Vorschläge offen. Leider ist mit keine andere Möglichkeit bekannt etwas zu positionieren, ohne eine Tabelle zu nutzen... Vor allem, da ich größere Probleme hatte mit der Einheitlichkeit von div und es dem Inhaber der Website wichtig ist, dass es im Explorer gut aussieht.

Die Line height ist bei mir im CSS festgeschrieben. Da habe ich bei paragraph 14px also einen Zeilenabstand von 1/1....
Der Hacken ist ein Bild mit den Ausmaßen: 15 x 15 px

Die Website ist hier: Clinical Studies

 

[Tronjer]

Aber wenn es eine bessere Möglichkeit so etwas zu lösen, was weniger Probleme bereitet, dann bin ich für alle Vorschläge offen.

Lösche die Tabelle. Tabellen-Design ist der größte anzunehmende Unfall in der Frontend-Entwicklung.

 

[Roca]

Gibt es dann innerhalb der Css Datei für mich eine Möglichkeit die in allen Browsern funktioniert um dem Text zu sagen, wo er stehen darf und wo nicht?
Wenn ich in Joomla dann einfach Text rein hauen könnte ohne zu justieren wäre das natürlich eine enorme Erleichterung.

 

[threadi]

Per CSS sagt man wie ein Text aussehen soll, ggfs. auch wie er sich verhalten soll. Die "Position" wird primär von der Reihenfolge im HTML-Code bestimmt, wobei man auch per CSS sagen kann, dass ein HTML-Element z.B. umflossen werden soll.

 

[Roca]

Per CSS sagt man wie ein Text aussehen soll, ggfs. auch wie er sich verhalten soll. Die "Position" wird primär von der Reihenfolge im HTML-Code bestimmt, wobei man auch per CSS sagen kann, dass ein HTML-Element z.B. umflossen werden soll.

Wie stelle ich das denn am Besten an? Wie gesagt, ich bin noch absolut grün hinter den Ohren und habe keine Ahnung, wie ich so etwas in HTML hardcoden kann, ohne eine Tabelle zu nutzen...

Wenn ich die Tabelle lösche, passiert mir nämlich entweder das:



Oder der Text läuft mir ins Menü herein...
beides nicht gerade etwas, was ich möchte.

 

[Roca]

Wie stelle ich das denn am Besten an? Wie gesagt, ich bin noch absolut grün hinter den Ohren und habe keine Ahnung, wie ich so etwas in HTML hardcoden kann, ohne eine Tabelle zu nutzen...

Wenn ich die Tabelle lösche, passiert mir nämlich entweder das:

Anhang anzeigen 3022

Oder der Text läuft mir ins Menü herein...
beides nicht gerade etwas, was ich möchte.

Kann mir wirklich keiner helfen? :(
Ich bin echt am verzweifeln...

 

[Tronjer]

Welche Form von Hilfe erwartest du denn? Solange du die Grundlagen von CSS nicht kennt, kann diese nur darin bestehen, dass jemand die Seite für dich erstellt, und in dem Fall solltest du dich an die Job-Börse wenden.

Alternativ dazu könntest du dir ein Buch oder Video-Tutorial besorgen und die Basics erlernen. Ausgerüstet mit dem notwendigen Grundlagenwissen wäre es dir möglich, gezielt Fragen zu stellen und die Antworten auch zu verstehen.