tabellen und xhtml

[webby]

Also es handelt sich nicht wie im Themenbereich gesagt um HTML sondern um XHTML 1.1 (aber das gab es nicht zu Auswahl).

Meine Frage. Wie kann ich eine Tabelle nach XHTML 1.1 zentrieren?
align="center" im Table-Tag geht, ist aber nicht xhtml 1.1 konform. wenn ich es in das Stylesheet packe gehts nicht mehr.
center ist ja kein gültiger Tag in XHTML und überhaupt, mir gehen die Ideen aus ;)
Also ich will einfach eine Tabelle in die Mitte vom Bildschirm bringen ;)

und dann hab ich noch ein problem mit einer Tabellenspalte. Hier mal ein Bild:

http://www.bida-design.de/upload/stranded/menu.jpg

ihr könnt jetzt auf dem Bild ein Menu sehen. Problem ist aber dass unter dem Bild eine 1px linie ist die eigentlich nicht da sein darf. Aber ich weiß einfach nicht so wie herkommt.

Hier noch der htmlcode der zeile:

<td class="menu"><a href="index.htm"><img src="images/menu/start.jpg" width="53" height="20" border="0" alt="" /></a><img src="images/menu/produkte.jpg" width="75" height="20" alt="" /><img src="images/menu/messen.jpg" width="63" height="20" alt="" /><img src="images/menu/kontakt.jpg" width="67" height="20" alt="" /><a href="impressum.htm"><img src="images/menu/impressum.jpg" width="78" height="20" border="0" alt="" /></a><img src="images/menu/space.jpg" width="263" height="20" alt="" /></td>

Gut, soviel mal fürs erste.

Gruss

[Jan L.]

Hallo,

1. http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm
2. http://www.dodabo.de/html+css/img-table/

Gruß, Jan

[webby]

Hallo,

danke für die Links. Also die Tabelle hab ich jetzt zentriert bekommen, aber wenn ich das ganze mit einem Bild machen will klappt es nicht:

div.right img {
     margin-left:auto;
     margin-right:0;
}

und:

<div class="right"><img src="images/banner.jpg" width="308" height="67" alt="" /></div>

und die 1px linie an den tabellen hab ich durch deinen 2ten link auch nicht wegbekommen, könntest du mir da eventuell ein wenig genauer helfen?
wie muss das dann aussehen? Wäre nett

Gruss

Hallo,

1. http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm
2. http://www.dodabo.de/html+css/img-table/

Gruß, Jan

[Jan L.]

Hallo,

danke für die Links. Also die Tabelle hab ich jetzt zentriert bekommen, aber wenn ich das ganze mit einem Bild machen will klappt es nicht:

Bilder sind keine Blöcke, sondern inline-Elemente. Deshalb kannst du sie nicht mit 'margin: 0 auto;' zentrieren, sondern dadurch, daß du dem umgebenden Element ein 'text-align: center;' zuweist.

und die 1px linie an den tabellen hab ich durch deinen 2ten link auch nicht wegbekommen, könntest du mir da eventuell ein wenig genauer helfen?
wie muss das dann aussehen? Wäre nett

Ähm, was hast du denn versucht? In dem Artikel sind doch einige Lösungsmöglichkeiten beschrieben. Kannst du vielleicht eine kleine Testseite hochladen, auf der man sich das mal anschauen kann?

Gruß, Jan

[MS-2001]

Ähm, was hast du denn versucht? In dem Artikel sind doch einige Lösungsmöglichkeiten beschrieben. Kannst du vielleicht eine kleine Testseite hochladen, auf der man sich das mal anschauen kann?

Also das mit dem Bild hat geklappt, danke dafür ;)
Nein, eine Seite habe ich noch nicht hochgeladen, kann ich jetzt auch leider nicht machen da ich den Webspace noch nicht habe.
Aber ich füge mal die Tabelle an die ich verwende ;)

ich habe versucht den <tr> tag des menus mit dem <tr> tag des textes darunter zu verbinden und dann ein <hr> tag dazwischen zu setzten, aber das hilft auch nicht wirklich.

also hier mal die tabelle:

<div class="center">
    <table style="border-collapse: collapse" border="1" cellpadding="0" cellspacing="0" width="600" id="tab_main">
      <tr>
        <td class="colored_top">
          <table border="0" cellpadding="0" cellspacing="0" width="100%" id="tab_inline1_tab_main">
            <tr>
              <td class="banner_left"><div class="right"><img src="images/banner.jpg" width="308" height="67" alt="" /></div></td>
              <td class="banner_right"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="menu"><a href="index.htm"><img src="images/menu/start.jpg" width="53" height="20" alt="" /></a><img src="images/menu/produkte.jpg" width="75" height="20" alt="" /><img src="images/menu/messen.jpg" width="63" height="20" alt="" /><img src="images/menu/kontakt.jpg" width="67" height="20" alt="" /><a href="impressum.htm"><img src="images/menu/impressum.jpg" width="78" height="20" alt="" /></a><img src="images/menu/space.jpg" width="263" height="20" alt="" /></td>
      </tr>
      <tr>
        <td>
          <table border="0" cellpadding="10" cellspacing="0" width="100%" id="tab_inline2_tab_main">
            <tr>
              <td>
                text text text<br /><br />
  <p class="center"><img src="images/main_3pics.jpg" width="388" height="81" alt="" /></p><br />
       </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="colored_bottom">
          <p class="center"><b>Webdesign 2004</b></p>
        </td>
      </tr>
    </table>
    </div>

[Jeena Paradies]

Hallo,

Ich mache dir mal einen Vorschlag. Mach das ganze ohne Tabelle.

<!DOCTYPE [...]>
<html>
 <head>
  [...deine head Angaben...]
 </head>
 <body>
  <div id="top">
   <p id="menu">
    <a href="start.html"> » Start </a>
    <a href="produkte.html"> » Produkte </a>
    <a href="messen.html"> » Messen </a>
    <a href="kontakt.html"> » Kontakt </a>
    <a href="inpressum.html"> » Impressum </a>
   </p>
  </div>
  <div id="main">
   [Hier kommt dann der ganze Inhalt deiner Seite rein.]
  </div>
 </body>
</html>

In die CSS Datei kommt dann folgendes:

/* ----- CSS Datei für meine Seite http://www.meineseite.de ------ */
body {
 font-family: arial, sans-serif;
 text-align: center; /* für den IE */
 background-color: white;
 color: black;
}
#top {
 width: 600px;
 text-align: left;
 background-color: green;
 border: 1px solid black;
 border-top: none;
 margin: 0;
 padding: 0;
 padding-top: 20px;
}
#menu {
 padding: 0.5em;
 margin: 0;
 background-color: #aaa;
 border-top: 1px solid black;
}
#main {
 border: 1px solid black;
 border-top: 0;
 margin: 0;
 padding: 0.5em;
 background-color: #ddd;
}

Ich bin jetzt mal nicht näher auf die Banner eingegangen aber die zu positionieren ist auch nicht schweer. Was hälst du von dieser Idee? Ich denke es würde der Seite gut tun, und vor allem verwendest du dann keine Tabellen für das Layout und Auszeichnung und Formatierung sind auch getrennt.

Grüße
Jeena Paradies

[webby]

ok, ich hab mir das jetzt mal angeschaut. inzwischen bin ich beim x-ten entwurf und solangsam will ich eigntlich auch nichtmehr. ich kann nicht immer wieder von vorne anfangen nur weil etwas nicht geht.

aber egal:
das gestaltet sich ein wenig mysteriös, warum muss #main 584px breit sein um den 600px von #top gleich zu sein?!?!?!?!?

sobald ich folgendes entferne stimmen die 600px von #top wieder:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

das würde ja heißen, dass sich da irgendwas nicht mit xhtml 1.1 verstehen will.

gruss

[Jeena Paradies]

Hallo,

das würde ja heißen, dass sich da irgendwas nicht mit xhtml 1.1 verstehen will.

Ja, und zwar verwendest du welchen Browser? Verstehst du das Box Modell? Ich glaube das habe ich vergessen in mein beispiel mit einzuberechnen.

Grüße
Jeena Paradies

[Jeena Paradies]

Hallo,

Ich zitiere aus einem Thread ein paar px weiter oben [pref:t=72360&m=416801]:

du hast nicht bedacht, dass sich die gesamtbreite eines elementes aus width + padding + border ergibt.

Das gleiche ist bei dir.

Grüße
Jeena Paradies

[webby]

du hast nicht bedacht, dass sich die gesamtbreite eines elementes aus width + padding + border ergibt.

da scheinst du wohl recht zu haben ;) klappt.
in gottes nahmen mach ichs eventuell noch so, aber dann hab ich echt kein bock mehr drauf *wut*

[Jeena Paradies]

Hallo,

da scheinst du wohl recht zu haben ;) klappt.

Super!

in gottes nahmen mach ichs eventuell noch so, aber dann hab ich echt kein bock mehr drauf *wut*

Wie gesagt dein Quellcode ist wesentlich aufgeräumter und kleiner. Was ich dir noch auf den Weg geben wollen würde ist die Breite nicht starr zu machen sondern eventuell höchstens rechts und links 5% margin zu lassen. Dann kann sich die Seite an den jeweiligen Bildschirm anpassen, auch wenn der nur (wie bei Handys) 200px oder weniger hat. Dann werden auch keine Scrollbalken angezeigt.

ich mache meine Seiten eigentlich fast grundsätzlich so:

http://jeenaparadies.de
http://jeenaparadies.servebeer.com/open/Webs/gutgesell5/gutgesell3/
http://jeenaparadies.servebeer.com/open/Webs/vivosgreen/
http://jeenaparadies.de/test/b24

Und habe wirklich viel weniger Probleme. Außerdem Stichwort Barierefreiheit [Zugänglichkeit]

Grüße
Jeena Paradies

[webby]

Was ich dir noch auf den Weg geben wollen würde ist die Breite nicht starr zu machen sondern eventuell höchstens rechts und links 5% margin zu lassen. Dann kann sich die Seite an den jeweiligen Bildschirm anpassen, auch wenn der nur (wie bei Handys) 200px oder weniger hat. Dann werden auch keine Scrollbalken angezeigt.

das gehört aber zum konzept der seite. die seiten("spalte") soll 600px breit sein, dann ist sie auch bei 800*600 noch gut zu erkennen. mehr brauchts nicht. basta

[Ingo Turski]

Hi,

die seiten("spalte") soll 600px breit sein, dann ist sie auch bei 800*600 noch gut zu erkennen. mehr brauchts nicht. basta

und bei kleineren Fenstern gibt's Scrollbalken und bei größeren Fenstern sieht die Seite immer verlorener aus. Aber bitte...

freundliche Grüße
Ingo

[webby]

und bei kleineren Fenstern gibt's Scrollbalken und bei größeren Fenstern sieht die Seite immer verlorener aus. Aber bitte...

naja, also bei 800*600 ist es ok, bei 1280*1024 auch noch, darüber haben nur wenige aber selbst da gehts noch.
abgesehen davon. wenn ich die breite variabel mache, dann geht das design auch kaputt wenn man das fenster kleiner schiebt.

des ist in aller regel geschmacksache. ich für meinen teil surfe nur mit maximiertem browser. anders hab ich das noch nie erlebt.

jedem das seine ;)

[Jeena Paradies]

Hallo,

das gehört aber zum konzept der seite. die seiten("spalte") soll 600px breit sein, dann ist sie auch bei 800*600 noch gut zu erkennen. mehr brauchts nicht. basta

War ja nur nett für die Zukunft gemeint. Und das mit den Handys scheidet bei der div Variante warscheinlich eh aus da sie kein/nicht solches CSS interpretieren. Tabellen dagegen schon so dass du da jetzt auch viel weniger Probleme haben wirst. Der einzige Nachteil der eigentlich auch nicht so gravierend ist ist dass die 600px auf einem großen Bildschirm recht klein wirken und man sich denkt wozu man so einen rießigen Bildschirm gekauft hat wenn doch alles so zusammengepfercht wird. Da man aber sowieso die Textbreite so auf 60 Zeichen begrenzen sollte fällt dieses Argument natürlich auch flach.

Grüße
Jeena Paradies

[MS-2001]

das ist egal welchen browser man verwendet, ob IE oder mozilla, in beiden wird es falsch dargestellt.
aber abgesehen davon, hättest du nicht eventuell doch noch ne lösung für das tabellenproblem?
ich will nicht nochmal neu anfangen, das wäre arbeit von weiß gott wie vielen tagen :-(

gruss

Hallo,

das würde ja heißen, dass sich da irgendwas nicht mit xhtml 1.1 verstehen will.
Ja, und zwar verwendest du welchen Browser? Verstehst du das Box Modell? Ich glaube das habe ich vergessen in mein beispiel mit einzuberechnen.

Grüße
Jeena Paradies

[Jeena Paradies]

Hallo,

das ist egal welchen browser man verwendet, ob IE oder mozilla, in beiden wird es falsch dargestellt.

Stimmt ist mir erst nachher eingefallen.

aber abgesehen davon, hättest du nicht eventuell doch noch ne lösung für das tabellenproblem?

Nein leider nicht da ich mich wegen solcher Probleme von Layout Tabellen absolut verabschiedet habe seitdem ich XHTML 1.1 schreibe.

Aber ich habe die Lösung für das nichtTabellen Problem: [pref:t=72253&m=416925]

Grüße
Jeena Paradies

PS: lass bitte die Fullquotes, sie blähen nur das Archiv auf.

[Avalon]

Sind Tabellen überhaupt noch Bestandteil von XHTML1.1?
Gruß
Avalon

[Jan L.]

Hallo,

Sind Tabellen überhaupt noch Bestandteil von XHTML1.1?

Sicher. Wie sonst sollte man tabellarische Daten auszeichnen?
Iedalerweise verwendet man sie nicht für Layoutzwecke. Das sollte man aber auch in HTML nicht.

Gruß, Jan

[Avalon]

Iedalerweise verwendet man sie nicht für Layoutzwecke. Das sollte man aber auch in HTML nicht.

Stimmt! Leider findet man im Web aber Tabellen vorwiegend für Layoutzwecke mißbraucht.

Meine Frage war auch nur als kleine Provokation zu verstehen, war mir sicher, daß einer darauf anspringt.

Gruß Avalon