bgcolor Probleme bei mehren Spalten

[Malmo]

Hallo,
folgendes Problem: Ich habe 2 Spalten. Linke Spalte ist ein Foto und rechts daneben steht Text. Der Hintergrund der Spalten soll farbig sein. (Eigentlich nur der der rechten Spalte).
Nun gibt es das Problem, dass der mittige Spaltenrand weiß bleibt und die Spalte mit dem Foto höher ist als das Foto (auch wenn ich "height" nutze).D.h. der farbige Hintergrund ist größer als das Foto.

Der Code lautet:

<table>
<tr>
<td width="200" bgcolor="#e6edf6"><img src="bilder/gebaeude.jpg" width="200" border="0"></td>
<td width="287" bgcolor="#e6edf6">
<b>Kontakt:</b><br>
<br>
Hans Müller
fax: +<br>
fone: + <br><br>
</td>
</tr>
</table>

Was ich auch nicht verstehe ist, dass das Bild kleiner als 200pix ist, wie ist das möglich? Die Auflösung beträgt ebenfalls 200x133pix.
Ich hoffe ihr könnt mir helfen :roll:
Danke
Malmo

 

[Efchen]

Hallo,

gemäß HTML ist eine Tabelle kein geeignetes Mittel zum Layout. Wenn Du ein Bild mit erklärendem Text hast, solltest Du das über eine Definitionsliste auszeichnen.

Des weiteren, weil HTML nicht für das Layout und Design gedacht ist, solltest Du Angaben zur Größe oder Farbe von Elementen (ausgenommen width/height im img-Tag) mit CSS definieren, der Sprache für Layout&Design. Ebenso sollte zumindest <b> aus dem Code verschwinden, weil es nicht zur Definition der Struktur ist, sondern Design beschreibt, und damit mit CSS gelöst werden sollte.

Deine Probleme rühren vermutlich von CSS her. Da werden Abstände gesetzt sein, wo Du keine willst (margin oder padding). Aber wenn Du es im Sinne von HTML und CSS umsetzt, wirst Du diese Probleme sowieso nicht mehr haben.

Gruß,
-Efchen

 

[Nightmare]

<table cellspacing="0" cellpadding="0">
<tr>
<td width="200" bgcolor="#e6edf6"><img src="bilder/gebaeude.jpg" width="200" border="0"></td>
<td width="287" bgcolor="#e6edf6">
<b>Kontakt:</b><br>
<br>
Hans Müller
fax: +<br>
fone: + <br><br>
</td>
</tr>
</table>

So sollte es funktionieren, allerdings musst du bedenken, wenn du in der Textspallte eine Texthöhe erreichst die Größer als das Bild ist entsteht in der Bilderspallte natürlich auch ein Rand. Normalerweise werden die Ellemente dann von der höhe Zentriert.

Willst du es ganz oben oder unten haben so nutze folgende Tags:
<td valign="top"> //Nach oben ausgerichtet
<td valign="middle"> //Mittig zentriert
<td valign="bottom"> //Nach unten ausgerichtet

 

[_Thor_]

Hallo,

gemäß HTML ist eine Tabelle kein geeignetes Mittel zum Layout. Wenn Du ein Bild mit erklärendem Text hast, solltest Du das über eine Definitionsliste auszeichnen.

Des weiteren, weil HTML nicht für das Layout und Design gedacht ist, solltest Du Angaben zur Größe oder Farbe von Elementen (ausgenommen width/height im img-Tag) mit CSS definieren, der Sprache für Layout&Design. Ebenso sollte zumindest <b> aus dem Code verschwinden, weil es nicht zur Definition der Struktur ist, sondern Design beschreibt, und damit mit CSS gelöst werden sollte.

Deine Probleme rühren vermutlich von CSS her. Da werden Abstände gesetzt sein, wo Du keine willst (margin oder padding). Aber wenn Du es im Sinne von HTML und CSS umsetzt, wirst Du diese Probleme sowieso nicht mehr haben.

Gruß,
-Efchen

Soll heißen

<dl>
  <dt><img src="image.jpg" alt="text" /></dt>
  <dd>
    <address>
      Peter Mobb<br />
      Tel.: 0123456789<br />
      Fax: 0123456789
    </adress>
  </dd>
</dl>

dl dt {
  float: left;
  background-color: #e6edf6;
}

Nix Tabelle und so...

 

[ohrflieger]

Zusatz zu den Lösungsansätzen oben:
Normalerweise haben Bilder (Tabellen in Einzelfällen auch) von HTML aus vordefinierte Ränder. Wenn die Lösung oben nicht reicht, einfach ein

style="margin:0;padding:0;"

in das img-Tag einfügen (oder es per CSS extern definieren).

 

[Malmo]

;JumpDanke an alle! Funktioniert. Habe die einfache (und vorübergehende) Variante von Nightmare und Ohrflieger genutzt.

 

[neuroleptika]

Praktischt an <table> ist, daß sich alle Zellen der jeweils höchsten Zelle in einer Zeile anpassen. Deshalb ist dieser Code Unfug:

<tr>
<td width="200" bgcolor="#e6edf6">...</td>
<td width="287" bgcolor="#e6edf6">...</td>
</tr>

Die erste td hat auch 287px Höhe. Eine Unterschreitung ist nicht möglich.


Eine dl, wie sie Thor vorgeschlagen hat, ist wohl das richtigste was html für diesen Inhalt zu bieten hat.
Eine Tabelle währe aber auch kein Verbrechen.

Wozu dienen die Höhenangaben überhaupt?
Text ist skalierbar. Höhenangaben in px für Elemente aber nicht.
Hinzu kommt, daß die Browser (per default) height in <td> als min-height werten.

 

[Malmo]

Danke für den Tip, aber jetzt bin ich verwirrt.

Praktischt an <table> ist, daß sich alle Zellen der jeweils höchsten Zelle in einer Zeile anpassen. Deshalb ist dieser Code Unfug:

Es geht mir nicht um die Höhe sondern um die Breite und die ist für Spalte 1 nun mal geringer. VOn Höhe steht da meiner Meinung nach nichts (da width="200").
Da ich sonst keine Erfahrung mit html habe und immer nur aktuelle Einträge in bestehende COdes setze, will ich es mir nicht unnötig kompliziert machen. Das Ergebnis stimmt jetzt und ich denke es ist fürs Erste okay so.

 

[Efchen]

Praktischt an <table> ist, daß sich alle Zellen der jeweils höchsten Zelle in einer Zeile anpassen. Deshalb ist dieser Code Unfug

Da "width" aber "Breite" heißt, ist Dein Einwand...nunja, nicht ganz richtig ;-)

Eine Tabelle währe aber auch kein Verbrechen.

Es gibt ja auch (noch) keine Web-Polizei, die die Einhaltung der Standards des W3C überwacht. Eine Tabelle wäre hier ncihtmal barrierebehaftet. Und man könnte immer noch sagen, dass einem das Antidiskriminierungsgesetz egal ist, solange es noch nicht auf private Websites angewendet wird.

Da ich sonst keine Erfahrung mit html habe und immer nur aktuelle Einträge in bestehende COdes setze, will ich es mir nicht unnötig kompliziert machen.

Keine Erfahrung mit etwas haben, es aber trotzdem selber machen wollen, führt oft genug zum Desaster. Viele nutzen Unwissen als Ausrede dafür, sich mit etwas nicht beschäftigen zu müssen. Und tatsächlich ist es eher unnötig kompliziert, wenn man sich mit etwas NICHT beschäftigt und immer nur Kuddelmuddel rauskommt und man 1001 mal nachfragen muss, als wenn man sich einmal ein bisschen Zeit nimmt und anschließend viel schneller fertig ist, ein besseres Ergebnis dabei rauskommt und man nicht mehr so viel nachfragen muss.

Mein Rat: Nimm Dir die Zeit oder beauftrage jemanden, der damit seine Familie durchbringen muss.

Gruß,
-Efchen