mehrzeiliges display:table-cell hat Lücken

[Carsten77]

Hallo!

Ich habe ein Problem beim erstellen einer CSS-Box mit Divs.
Anstatt mit Tabelle, habe ich vor ein paar Tagen gelesen, kann man mit Divs ein Tabelle simulieren. Ich wollte gleich mal versuchen, eine Box mit runden Ecken damit zu basteln.
Hat auch eigentlich ganz gut funktioniert, auch wenn ich (noch) nicht weiß, was es für Vorteile hat. Der Aufbau sieht folgendermaßen aus:

tr td td td tr
tr td td td tr
tr td td td tr

Alles mit Divs und "display".

Das Problem ist, dass zwischen den Zeilen eine Lücke entsteht, die ich nicht wegbekomme. Diese Lücke taucht sowohl im IE8 als auch im Firefox 3 auf.
Die Bilder in den tds stimmen mit den Größenangaben der tds überein. Dennoch ist der Übergang nicht lückenlos.
Beispiel
Ich scheine wohl etwas grundlegendes falsch zu machen und komme nicht auf die Lösung.
Wäre toll, wenn mir jemand helfen könnte...

MfG
Carsten

[Simon]

Hi,
setz einmal für alles Margin und Padding auf 0.

* {  
  margin: 0px;  
  padding: 0px;  
} 

Sollte helfen.

MfG
Simon

[Carsten77]

Hi Simon!

Daran hatte ich auch schon mal gedacht. Funktioniert leider auch nicht.
Auch  margin/padding -XXpx hat nichts gebracht.

Was mir noch aufgefallen ist, ist, dass der Abstand geringer wird, wenn ich in der oberen Zeile beim linken und rechten td die Eigenschaft table-cell entferne. ...warum das dann überhaupt noch funktioniert ist ein wenig seltsam, aber auch wenn, eine kleine Lücke bleibt.
Und ohne Bild scheint es zu funktionieren.

[Simon]

Ok, hab mir das ganze nochmal angeschaut.
Also wie Gunther schon gesagt hat, ID's dürfen nur einmal verwendet werden.
Wenn du die selben Eigenschaften mehrmals vergeben möchtest verwende class="".

Du solltest dir auch das Ergebnis in allen Browsern anschauen.
Zum jetzigen Zeitpunkt wird die Seite im ie richtig, aber in den anderen Browsern falsch angezeigt.

Eine Hilfe ist auch der validator

MfG
Simon

[Carsten77]

Dürfen den Ids auch dann nur einmal verwendet werden, wenn man im CSS vor die ID den passenden (oder einen anderen) Tag schreibt (tag#id)?
OK, werde ich mal ändern.

Der Tipp von ChrisB hat schon fast ganz geholfen. Ich dachte, wenn ich die Zelle der Bilgröße anpassen würde, würde das reichen. Was jetzt genau display:block verursacht hat, und es besser aussieht (siehe jetzt noch mal hier), weiß ich nicht. Ich werde mich wohl noch einmal mit verschiedenen Befehlen und Eigenschaften auseinandersetzen müssen.

@simon: was meinst du mit anderen Browsern? Ich teste mit IE8 und Firefox 3.5. Wenn es bei denen funktioniert müsste es doch einigermaßen konform sein, oder?

Vielen Dank an euch schon einmal für die Hilfe und die Tipps!

[Simon]

@simon: was meinst du mit anderen Browsern? Ich teste mit IE8 und Firefox 3.5. Wenn es bei denen funktioniert müsste es doch einigermaßen konform sein, oder?

Ja du hast recht: im IE und FF passt die Seite.
Aber in Opera, Safari und Google Chrome passt sie nicht.

MfG
Simon

[Carsten77]

Ja ne, is klar! Ich bin nicht einmal in der Lage, die passende Größe der Bilder abzulesen... jetzt passt es. ...ich habe mich um einen Pixel vertan.

Im IE Kompatiblitätsmodus fällt die Seite auch auseinander...
Liegt das denn jetzt an den doppelten IDs? das W3C zeigt mir auch haufenweise Fehler (doppelte Ids) im html an. Muss ich wohl noch mal ran.

Warum hat denn jetzt display:block geholfen? im selfhtml steht, "block" erzeuge eine neue Zeile und erzwinge den Block.
Ich wollte doch gar keine neue Zeile. Ist "block" nicht das gleiche wie ein Block-Element (z.B. <p>) ?

[Simon]

Dürfen den Ids auch dann nur einmal verwendet werden, wenn man im CSS vor die ID den passenden (oder einen anderen) Tag schreibt (tag#id)?
OK, werde ich mal ändern.

Hab ich noch vergessen.
Nein, eine ID darf nur einmal verwendet werden.

MfG Simon

[Gunnar Bittersmann]

@@Carsten77:

nuqneH

Dürfen den Ids auch dann nur einmal verwendet werden, wenn man im CSS vor die ID den passenden (oder einen anderen) Tag schreibt (tag#id)?

Die Frage ist äquivalent zu der, ob ein Mann und eine Frau dieselbe Personalausweisnummer haben dürfen.

Die Frage ist äquivalent zu der, ob ein Käfer und ein Porsche dasselbe Kennzeichen haben dürfen.

Die Frage ist äquivalent zu der, ob Kloreiniger und Edelpralinen denselben Barcode haben dürfen.

@simon: was meinst du mit anderen Browsern? Ich teste mit IE8 und Firefox 3.5. Wenn es bei denen funktioniert müsste es doch einigermaßen konform sein, oder?

Die Unterschiede zwischen IE 8 und Firefox dürften geringer sein als die zwischen IE 8 und IE 7. Und IE 6 ist nochmal was ganz anderes, falls der noch von Bedeutung sein sollte.

Qapla'

[Gunther]

Hallo Carsten!

Ich habe ein Problem beim erstellen einer CSS-Box mit Divs.

Bevor es sich überhaupt lohnt, sich dein Problem etwas näher anzugucken, solltest du bitte erstmal die ganzen mehrfach verwendeten IDs korrigieren. Und dann scheint es mir so, als ob dir die Verwendung von/ der Unterschied zwischen Klassen und IDs nicht ganz klar ist. Siehe dazu <http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=Formate für Klassen definieren> ff.!

Gruß Gunther

[ChrisB]

Hi,

Anstatt mit Tabelle, habe ich vor ein paar Tagen gelesen, kann man mit Divs ein Tabelle simulieren.
[...]
Das Problem ist, dass zwischen den Zeilen eine Lücke entsteht, die ich nicht wegbekomme.

Du hast also vermutlich das von "normalen" Tabellen altbekannte Unterlängen-Problem damit "erfolgreich" auch für per CSS zu Tabellenelementen gemachten simuliert.

display:block für die Bilder oder vertical-align:bottom sollten hier vermutlich genauso helfen, wie sonst auch.

MfG ChrisB

[Detlef G.]

Hallo Carsten77

Anstatt mit Tabelle, habe ich vor ein paar Tagen gelesen, kann man mit Divs ein Tabelle simulieren.

Wer schreibt denn so einen Blödsinn?
Es stimmt, dass Tabellen nicht fürs Layout missbraucht werden sollen. Es ist aber überhaupt nicht besser, <div>s anstatt von Tabellenelementen zu verwenden!

Der Sinn der Verwendung von CSS besteht darin, das HTML der Seite logisch (semantisch) zu strukturieren und im CSS zu beschreiben, wie es dann dargestellt werden soll.

Ich wollte gleich mal versuchen, eine Box mit runden Ecken damit zu basteln.

Das ist bei Seiten mit festen Breiten sehr einfach.

Das, was du gemacht hast, ist eine unbekömmliche Div-Suppe.
Lobenswert ist, dass du die Navigation als Liste ausgeführt hast, aber keine Überschrift, kein Absatz, nur <div>.
Dein HTML sollte etwa so aussehen:

<body>  
  <div id="LAYOUT">  
    <div id="HEAD">  
      <h1>  
        <a href="index.html"><img src="images/page_logo.png" alt="Carsten Schrick"></a>  
      </h1>  
      <ul id="SPECIAL">  
        <li><a href="kontakt.html">Kontakt</a></li>  
        <li><a href="impressum.html">Impressum</a></li>  
        <li><a href="gaestebuch.html">Gästebuch</a></li>  
      </ul>  
      <ul id="NAVIGATOR">  
        <li><a href="start.html">Start</a></li>  
        <li><a href="aktuelles.html">aktuelles</a></li>  
        <li><a href="projekte.html">Projekte</a></li>  
        <li><a href="links.html">Links</a></li>  
       </ul>  
    </div>  
    <div id="CONTENT">  
      <!-- hier dann der eigentliche Inhalt -->  
      <h2>Unterüberschrift</h2>  
      <p>der Text dazu</p>  
      <!-- usw. -->  
    </div>  
    <ul id="FOOTER">  
      <li>&copy;2009 Carsten Schrick</li>  
      <li>&sim;</li>  
      <li>v0.5</li>  
    </ul>  
  </div>  
</body>  

Wie du siehst, ist es durchaus übersichtlich und auch ohne CSS ist alles übersichtlich und gut benutzbar. Es dürften auch ausreichend Elemente vorhanden sein, um dein gewünschtes Design ohne Änderung der HTML-Struktur nur mittels CSS umzusetzen.

PS: Ist der Footer wirklich eine Liste (Auflistung)?
    Für mich seiht es eher so aus, als ob es nur eine Textzeile wäre, dann also:
    ~~~html <div id="FOOTER">
      &copy;2009 Carsten Schrick &sim; v0.5
    </div>

  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!