Innhalt innerhalb einer Tabelle flexibel verschieben

[MrBean06]

Hallo,

ich wollte mal fragen, ob es möglich ist einen Text innerhalb einer Tabelle flexibel zu verschieben, so dass dieser nicht so an den Rand gequetscht ist?

hier mal ein Beispiel:

<table border="0" cellspacing="30" cellpadding="0" width="532" height="800" >
<tr style="background-image:url(Image/Hintergrund.png); background-repeat:no-repeat">
<td valign="top">
<p> Test</p>
</td>
</tr>
</table>

Test soll dabei flexibel verschoben werden.

Danke schon mal im Voraus.

PS: Gibt es hier eine Quelltextformatierung, dass sieht sonst so unformatiert aus?

 

[clemo]

hab nichts gesagt.....

 

[Junny]

Auf gar keinen Fall center nehmen, das gehört zum Aussehen und hat keine Daseinsberechtigung auf einer modernen Webseite.
Gleiches gilt für sämtliche andere Tags und Attribute, die nur dem Aussehen dienen, z.B. border, cellpadding, cellspacing, width (außer bei Bildern), height (außer bei Bildern), valign, align etc.

Aussehen wird mit CSS gemacht. Probiere z.B. diese Styleangabe im head:

table {
  border: 0;
  width: 532px;
}
  table tr {
    background: url(Image/Hintergrund.png) no-repeat top left;
  }
    table tr td {
      vertical-align: top;
      [B]padding: 2em;[/B]
    }

Das fett markierte (padding ist Innenabstand) macht einen Abstand von der Höhe des großen M mal zwei. Es gibt etliche weitere CSS-Eigenschaften, um das Aussehen zu verändern.

Gruß
Junny

PS: Code-Tags findest Du im Editor unter dem #-Zeichen oder rechts daneben. Die HTML-Tags sind aber kaputt, verwende normale Code-Tags oder PHP-Tags stattdessen.

 

[MrBean06]

Das meiste mache ich schon mit CSS, da aber nur die eine Seite so auschauen soll, muss ich das irgendwie im html-Code unterbringen, oder sehe ich das falsch?

 

[Junny]

Auch das geht mit CSS:

• Überlegen, ob dieses Element einmalig auf der Einzelseite ist
  • Bei Einmaligkeit (z.B. Seitenüberschrift, Inhaltsbereich, Navigation, Footer...) :arrow: eine id vergeben
  • Bei mehrmaligem Auftreten (z.B. Newseintrag, besonderes mehrfach auftretendes Formularelement...) :arrow: eine class vergeben
• Einen den Inhalt beschreibenden Wert für id bzw. class vergeben (z.B. navi-main, header, footer, content, entry, uncomplete)

Anschließend kannst Du mit einem entsprechendem Selektor nur auf diese Elemente zugreifen.
Vor einer id steht

#

, vor einer Klasse

.

Beispiel:

<table class="mitglieder">
  <!-- ... -->
</table>

Diese Tabelle wird so selektiert:

table.mitglieder {
  /* ... */
}

Dabei kann table davor auch weggelassen werden, dann werden alle Elemente der Klasse mitglieder selektiert. Bei selektieren per id einfach den Punkt durch eine Raute ersetzen.
Man kann einem Element auch mehrere Klassen geben, indem man diese durch ein Leerzeichen getrennt angibt.

<table class="mitglieder neu">
  <!-- ... -->
</table>

Bedenke stets, dass Klassennamen wie rechts, links, rot, gruen usw. (also alle, die Aussehen und nicht Inhalt beschreiben) nicht ins Konzept von Trennung Inhalt/Layout passen.

Gruß
Junny

 

[Efchen]

Wozu ist eigentlich die Tabelle? Um einen Textabsatz auszugeben, muss man ihn nicht in eine Tabelle packen. Es wird dadurch sogar falsch, weil ja keine tabellarischen Daten vorliegen.

 

[MrBean06]

Ursprünglich hatte ich die Tabelle angelegt, weil ich diese Seite individuell etas anders gestallten wollte, aber ich sehe schon, es ist wohl sinnvoller dies über div-Container und CSS zu machen.

 

[Efchen]

Ursprünglich hatte ich die Tabelle angelegt, weil ich diese Seite individuell etas anders gestallten wollte, aber ich sehe schon, es ist wohl sinnvoller dies über div-Container und CSS zu machen.

Nein. Nur mit CSS. Das <div> hat wie jedes andere HTML-Tag eine bestimmte semantische Bedeutung. <div> verwendet man zum Gruppieren mehrerer Elemente, meist zwecks gemeinsamer Formatierung in CSS.

Für das Layout verwendet man ausschließlich CSS - kein HTML-Tag, egal ob <table>, <div> oder <p>. HTML ist nicht für das Layout gedacht!

 

[MrBean06]

Danke für den Hinweis. Dann muss ich also demnach für die bestimmt Elemente einen Klassennamen oder eine ID vergeben damit ich sie individuell m.H. von CSS layouten kann?

 

[Efchen]

Naja, um Elemente individuell zu formatieren, machen IDs und Klassen durchaus Sinn, auch bei Tabellen, aber der Zusammenhang zu meiner Aussage ist mir nicht klar geworden.

Wenn Du bisher - aus welchem Grund auch immer - eine Tabelle um ein Element gelegt hast, um das irgendwie anders zu formatieren, dann stehst Du doch vor dem selben Problem, wenn Du zwei Tabellen hast, die unterschiedlich aussehen sollen.
Und, bei Deiner Tabelle hast Du ja auch nen Klassennamen verwendet.

Was ich meinte ist, dass sowohl Layout mit Tabellen als auch Layout mit div Quatsch ist. Layout macht man mit CSS, aber Tabellen wie auch divs sind HTML. HTML ist für die logische Auszeichnung (Semantik) des Inhalts.

 

[MrBean06]

An sich ist mir das schon klar, und ich wollte auch auf die Tabelle zum layouten verzichten, was ich ja jetzt auch machen möchte.

Dann bau ich meine Frage mal neu auf. Ich möchte auf eine einzelnen Seite vom Grundlayout abweichen und noch eine weiter Grafik, als Teil des Hintergrundes, mit einbauen und dazu passend den Text und kleine Bilder formatieren. Wie spreche ich das in meine CSS-Datei an, wohl gemerkt, dass ich nur auf dieser einen Seite dieses Layout verwenden möchte?

 

[Efchen]

Durch eine ID oder Klasse, hört sich für mich an wie eine Anwendung für eine ID, da es ja ein eindeutig zu kennzeichnendes Element ist, was abweicht.