bgcolor Probleme bei mehren Spalten

html.de-Forum HTML, XHTML & CSS
1

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

2

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 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
3

[CODE]

Kontakt:

Hans Müller fax: +
fone: +

[/CODE]

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:

//Nach oben ausgerichtet //Mittig zentriert //Nach unten ausgerichtet
4

Soll heißen
[php]

text
Peter Mobb
Tel.: 0123456789
Fax: 0123456789
[/php][code] dl dt { float: left; background-color: #e6edf6; } [/code]Nix Tabelle und so...
5

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).

6

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

7

Praktischt an

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

[code]

[/code]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

... ...
als min-height werten.

8

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

Praktischt an

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.

9