✔ Tabellen-Ausrichtung

A

as333

Erfahrenes Mitglied
Hi,

ich habe eine Tabelle in PHP erstellt.
Diese würde ich gerne mit CSS so ausrichten dass sie sich in der rechten oberen Ecke des Bildschirms befindet.
Genau darunter soll dann auch noch etwas Text kommen.
Das Ausrichten des Textes mit
Code: 
text-align: center;
funkioniert.
Nur die Tabelle wird nicht nach rechts verschoben sondern bleibt auf der linke Seite.

Kann mir vielleicht jemand sagen wie ich das am besten mache?
 
Moin,

nutze in der verlinkten CSS-Layout-Vorlage den rechten Spaltenblock #info, um darin die Tabelle und den nachfolgenden Text einzubinden:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

  h1 {
    font-size: 1.5em;
    margin: 0 0 0.7em; padding: 0.3em;
    text-align: center;
    background-color: #fed;
    border: 2px ridge silver;
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em 0;
    background-color: #eee; border: 1px dashed silver;
  }

  div#Inhalt {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 1px solid silver;
  }
</style>
</head>
<body>

<h1>CSS-basierte Layouts</h1>

<ul id="Navigation">
  <li><a href="./einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
  <li><a href="./mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
  <li><a href="./fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
  <li><a href="./navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
  <li><a href="./browserweichen.htm">CSS-Browserweichen</a></li>
</ul>

<div id="Info">
  <table border="1" width="100%">
         <tr>
             <td>Ich bin die Tabelle</td>
         </tr>
  </table>
  <p>Ich bin der nachfolgende Text</p>
</div>

<div id="Inhalt">
  <h2>3-spaltiges Layout mit Kopf- und Fußzeile</h2>
  <p>Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.</p>
  <p>Die Kopfzeile ist als Seitenüberschrift mit &lt;h1&gt; ausgezeichnet
     und kann genauso gut wie ein &lt;div&gt; über CSS formatiert
     - hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
     Auch eine Grafik könnte in &lt;h1&gt; als Hintergrundbild definiert
     oder über &lt;img&gt; eingebunden werden.</p>
  <p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
     Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
     und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
     experimentieren Sie mit den Größenangaben, Farben und Rändern
     und fügen Sie z.B. individuelle grafische Elemente ein.</p>
</div>

<p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
   den Elementenfluss wieder her.</p>

<p><a style="color:black" href="./mehrspaltige.htm#kopf_fuss">zurück</a></p>
</body>
</html>


mfg Maik
 
Hi Maik,

das sieht schonmal sehr gut aus.
Nur ich möchte dort eine Tabelle die ich mit PHP erstellt habe einbinden.
Wenn ich diese per include einbinde wird mir an der Stelle nichts angezeigt.
Hier ein Teil meiner mit PHP erstellten Tabelle

PHP: 
         echo "<table width=\"150\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\">";
         echo "<tr>";
         echo "<td width=\"70\" bgcolor=\"#FF1F00\">Testanzeige</td>";
         echo "</tr>";
 
Und wie wird die Tabelle in das Hauptdokument eingebunden?

Das sollte mit [phpf]include[/phpf] eigentlich kein Problem darstellen:
HTML: 
<div id="info">
    <?php include 'tabelle.php'; ?>
</div>


mfg Maik
 
Stimmt der Pfad zur PHP-Datei? Wird vom Server eine PHP-Fehlermeldung ausgeworfen?

mfg Maik
 
Hi Maik,

ja der Pfad stimmt.
Fehlermeldung wird keine ausgegeben.

Bei mir sieht es so aus:

Einbinden der Tabelle
Code: 
<div id="Info">
  <? php
  include 'tabelle3.php';
  ?>
  <p>Ich bin der nachfolgende Text.</p>
</div>

und der dazugehörige PHP-Code was in tabelle3.php steht
PHP: 
         echo "<table width=\"150\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\">";
         echo "<tr>";
         echo "<td width=\"70\" bgcolor=\"#FF1F00\">Testanzeige</td>";
         echo "</tr>";

Wenn ich es so mache wird bei mir nur "Ich bin der nachfolgende Text." angezeigt.
Darüber ist einfach nichts.
 
Bei mir wird da sehr wohl eine Fehlermeldung ausgeworfen:
Parse error: syntax error, unexpected T_INCLUDE in D:\xampp\htdocs\test\as333\kopfundfuss.php on line 104
Zum Vergrößern anklicken....
Ursache ist das Leerzeichen zwischen "<?" und "php".

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück