Verschiedene Tabellenformatierung

[B-ellanna]

Hallo,
Ich finde es irgendwie nicht im Selfhtml also möchte ich gerne fragen ob jemand von euch mir einen Hinweis geben kann.
Ich habe verschiedene Tabellen in mein Dokument eingebau und möchte diese unterschiedlich formatieren.
Die eine über die ganze Breite und Text zentriert, die andere über die halbe Breite und den Text links. Das Ganze sollte über CSS realisiert werden.
Ich freue mich über eine Erklärung oder einen erklärenden Link.
Dankeschön für eure Hilfe!
B-ellanna

[RichardWotzlaw]

Hallo,

Ich finde es irgendwie nicht im Selfhtml

kein wunder

Ich habe verschiedene Tabellen in mein Dokument eingebau und möchte diese unterschiedlich formatieren.

uuuh, ganz schlechter stil!!!

Die eine über die ganze Breite und Text zentriert,

width:100%; text-align:center

die andere über die halbe Breite und den Text links.

width:50%; text-align:left

Gruß aus MeckPomm

[B-ellanna]

Ich habe verschiedene Tabellen in mein Dokument eingebau und möchte diese unterschiedlich formatieren.

uuuh, ganz schlechter stil!!!

Was wäre denn besser? Das eine mal ist es eine Terminauflistung (eine Spalte Datum die Andere Orte) und das andere mal um Bei Bildern den Text daneben zu positionieren. Weiß leider nicht wie man das besser löst. Bin gerne für Verbesserungsvorschläge zu haben.

width:100%; text-align:center
width:50%; text-align:left

Das ist mir auch klar, nur möchte ich es nciht einzeln in den HTML Text schreiben sondern über id oder class irgendwie in den CSS Code.

Danke, und Grüße aus Thüringen
B-ellanna

[RichardWotzlaw]

Hallo,

width:100%; text-align:center
width:50%; text-align:left
Das ist mir auch klar, nur möchte ich es nciht einzeln in den HTML Text schreiben sondern über id oder class irgendwie in den CSS Code.

Das sollst du auch nicht in den HTML-Code schreiben. Sondern so:

.table1 { width:100%; text-align:center }
.table2 { width:50%; text-align:left }

Und in HTML schreibst du:

<table class="table1" bzw. class="table2">
...

Gruß aus MeckPomm

[Hopsel]

Hi B!

[...] das andere mal um Bei Bildern den Text daneben zu positionieren. Weiß leider nicht wie man das besser löst. Bin gerne für Verbesserungsvorschläge zu haben.

Du solltest dich dringend mit der Positionierung von Elementen beschäftigen, insbesondere float.

Das ist mir auch klar, nur möchte ich es nciht einzeln in den HTML Text schreiben sondern über id oder class irgendwie in den CSS Code.

Dann solltest du uns das Problem beschreiben, das dabei auftritt.

MfG H☼psel

[B-ellanna]

Du solltest dich dringend mit der Positionierung von Elementen beschäftigen, insbesondere float.

Die Bilder sollen ungefähr so dargestellt werden wie hier zu sehen (die ganze Seite gestalte ich z.Z. nämlich um)
MusRusticus
Zu finden ist das ganze unter "über uns" --> "Gefolge" für die eine Tabelle und unter "Termine" für die andere.
Da der Aufbau halt einmal so war hab ich mich dran orientiert. Mit den Tabellen ists halt so schön einfach.
Wie macht man das ganze mit float und so? Gibts da irgendwo ein schönes Beispiel an dem ich mich orientieren könnte?

Tausend Dank!
B-ellanna

[RichardWotzlaw]

Hallo,

Wie macht man das ganze mit float und so? Gibts da irgendwo ein schönes Beispiel an dem ich mich orientieren könnte?

Guck doch mal hier!

Gruß aus MeckPomm

[B-ellanna]

[http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss@title=Beispiels ]

Du meinst also mit divs in meinem div#inhalt?
Ich hab nämlich mein Layout schon anhand des [http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss@title=Beispiels ]mit Kopf und Fußzeile aufgebaut.
<div id="Seite">
 <h1>Oberüberschrift</h1>
 <ul id="Navigation">
     <li><a href="Termine.htm">Termine</a></li>
   </ul>
 <div id="Inhalt">
    <h2>Mittlere Überschrift</h2>
    <h3>Kleine Überschrift</h3>
    Das ist nur normaler Text.
   </div>
 <p id="Fusszeile">
  Fußzeile
      </p>
</div>
Wie wechselt man denn dann die Bildposition mal rechts und mal links neben den text? Irgendwie wird es mir jetzt zu kompliziert. So div in divs.
Hua, Vielleicht ist es auch einfach schon zu spät.
B-ellanna

[Hopsel]

Hi B!

Wie wechselt man denn dann die Bildposition mal rechts und mal links neben den text?

Mit float. Den Link habe ich dir in einem früheren Post schon gegeben.

MfG H☼psel

[B-ellanna]

Hi Hopsel
Nun hab ich das alles mit float gemacht und es sieht ganz schrecklich aus.
Es verschiebt sich alles wild hin und her. Was ist da los? Was kann ich tun damit der Text in der Liste und das Bild in der Liste nebeneinander dargestellt werden? Dabei sollte der Text zusätzlich noch in sich Zentriert sein.
Ich kann mir irgendwie nicht vorstellen wie das mit CSS gehen soll.
Bin wiederum für alle Hinweise offen
B-ellanna

Hier kurz das Html und ein CSS Ausschnitt.

<ol>
<li>Roger Kommandant <p>Alter: 37 Sommer <p>Adliger eines ünvermögenden Hauses, jedoch Söldner aus Überzeugung <p>"je länger je besser"
<img src="./Bilder/Gefolge/Olaf.gif" alt="Roger" border="0" width="160" height="160" class="left"></li>
<li>Apelles Lagermeister <p>Alter: 32 Sommer <p>Vermögender Bürger, der aus Freude an der Kriegskunst ein Söldner wurde<p>"1 1/2-händer und alles Andere"
<img src="./Bilder/Gefolge/Stefan.gif" alt="Apelles" border="0" width="160" height="160" class="right"></li>
</ol>

.right{
  margin:0 1em 0 1em;
  float:right;
  }
.left{
  float:left;
  }

[Hopsel]

Hi B!

Ich kann mir irgendwie nicht vorstellen wie das mit CSS gehen soll.

Du verstehst nicht, was float tut: Es hebt die Elemente aus dem Textfluss.

Bin wiederum für alle Hinweise offen

Ich habe dir eine kleine Beispielseite online gestellt. Lerne daraus und versuche dein Glück. :)
Wichtig ist, dass du viel mit Abständen arbeitest bzw. sie korrekt definierst.

MfG H☼psel

[Der Martin]

Hallo,

<ol>
<li>Roger Kommandant <p>Alter: 37 Sommer <p>Adliger eines ünvermögenden Hauses, jedoch Söldner aus Überzeugung <p>"je länger je besser"

du liebe Güte, die vielen Absätze, die du hier anfängst, solltest du auch wieder beenden! Außerdem: Warum steht "Alter: 37 Sommer" in einem Absatz, aber "Roger Kommandant" dagegen nicht? Das ist doch inkonsequent.

So long,
 Martin

[Tim Tepaße]

Hallo Martin,

<li>Roger Kommandant <p>Alter: 37 Sommer <p>Adliger eines ünvermögenden Hauses, jedoch Söldner aus Überzeugung <p>"je länger je besser"
du liebe Güte, die vielen Absätze, die du hier anfängst, solltest du auch wieder beenden!

Nicht unbedingt. Angenommmen, es handelt sich um HTML 4, dann ist das durchaus richtig [1]. Dort ist das End-Tag des p-Elementes optional, das p-Element darf jedoch keine weiteren Block-Elemente beinhalten. Daraus folgt automatisch, dass bei einem neuen Auftreten eines Start-Tags des p-Elementes der vorhergehende Absatz geschlossen und ein neuer aufgemacht wird. Vorausgesetzt, der Browser macht es »richtig«, natürlich. ;)

[1] Schöner Stil ist natürlich etwas anderes. Ich halte es für besser, auch in HTML strikte Wohlgeformtheit durchzuhalten, und sei es nur, damit der Quellcode besser verständlich wird.

Tim

[Der Martin]

Hallo Tim,

du liebe Güte, die vielen Absätze, die du hier anfängst, solltest du auch wieder beenden!

Nicht unbedingt. Angenommmen, es handelt sich um HTML 4, dann ist das durchaus richtig [1].

Ich weiß.

[1] Schöner Stil ist natürlich etwas anderes. Ich halte es für besser, auch in HTML strikte Wohlgeformtheit durchzuhalten, und sei es nur, damit der Quellcode besser verständlich wird.

Deswegen schrieb ich ganz bewusst "solltest" (SHOULD *g*) und nicht "musst".

Ciao,
 Martin

[B-ellanna]

Deswegen schrieb ich ganz bewusst "solltest" (SHOULD *g*) und nicht "musst".

Ich habe jetzt auch. Ist zwar umständlicher und ich finde auch unübersichtlicher, aber was solls, viel mehr Arbeit machts auch nciht.
B-ellanna

[Hopsel]

Hi B!

Da der Aufbau halt einmal so war hab ich mich dran orientiert. Mit den Tabellen ists halt so schön einfach.

Nö. Einfacher wird es, wenn du die float-Eigenschaft nutzt.

Wie macht man das ganze mit float und so?

Erstelle deine Webseite ganz normal und sauber strukturiert. Danach legst du dein CSS darüber.

Gibts da irgendwo ein schönes Beispiel an dem ich mich orientieren könnte?

Ohje. Ich habe diese Regeln konsequenz auf einer kleinen Seite eingehalten: http://web.inf.tu-dresden.de/~s2976169/weisiwo/sites/matze.htm.
Allerdings wird dir der Inhalt wenig bis gar nichts sagen. Unter http://web.inf.tu-dresden.de/~s2976169/weisiwo/styles/style.css findest du die noch recht übersichtliche CSS-Datei.

Beachte, dass du in deinem Fall mit der border-Eigenschaft arbeiten kannst.

MfG H☼psel

[Jonathan]

uuuh, ganz schlechter stil!!!

Was wäre denn besser? Das eine mal ist es eine Terminauflistung (eine Spalte Datum die Andere Orte)

Stopp. In dem Fall ist eine Tabelle natürlich das beste. Tabellen sind nur schlecht, wenn Sie für Design-zwecke misbraucht werden, aber um tabellarische Daten da rein zu packen sind sie natürlich ideal. ;)

Jonathan

[Hopsel]

Hi B!

Wenn CSS nutzen möchtest, hast du dich sicher auch schon mit Klassen und IDs beschäftigt. Diese werden dir helfen, deine tabellarischen Daten schön dastehen zu lassen.

MfG H☼psel

[B-ellanna]

Wenn CSS nutzen möchtest, hast du dich sicher auch schon mit Klassen und IDs beschäftigt. Diese werden dir helfen, deine tabellarischen Daten schön dastehen zu lassen.

Beschäftigt schon aber wohl ncoh nciht verinnerlicht. ich habs so probiert <table id="x"> für die eine definiert und für die andere nicht.
und dann hab ich nach table#x das passende css geschrieben, hat aber irgendwie nciht geklappt. Wo liegt denn da mein Struktur- oder Denkfehler? Ist es vilelicht so das ein Element da übergeordnet ist? Ich möchte praktisch nur die eine Tabelle anders haben als alle anderen. Schwierig erklärbar...
Bis Bald,
B-ellanna

[Hopsel]

Hi B!

Beschäftigt schon aber wohl ncoh nciht verinnerlicht.

Hat bei mir Jahre gedauert. ;-)

Löse dich von dem Gedanken, alles fest und unbedingt zu plazieren. Gib eine Richtung an, aber nicht das Ziel. :)

ich habs so probiert <table id="x"> für die eine definiert und für die andere nicht.
und dann hab ich nach table#x das passende css geschrieben, hat aber irgendwie nicht geklappt. Wo liegt denn da mein Struktur- oder Denkfehler?

Das kann ich dir auch nicht sagen. Ich vermute, dass der Fehler woanders zu finden ist.

Ich möchte praktisch nur die eine Tabelle anders haben als alle anderen. Schwierig erklärbar...

Nein nein. Das kennt wahrscheinlich jeder.

MfG H☼psel