✔ DIV-width wird ignoriert

WiZdooM

WiZdooM

Erfahrenes Mitglied
Hi Leute,

ich verschicke innerhalb einer PHP-Datei eine HTML-Email.
Diese habe ich mit DIVs strukturiert ähnlich einer Tabelle, da das mit zur Verfügung stehende Mailprogramm nicht in der Lage ist Tabellen in Mails zu verwenden.

Ich habe dazu je zwei Tupel bestehend aus Label und Value definiert, also eine 4 spaltige "DIV-Tabelle".
Da ich diese "Tabelle" über PHP aus einem Formular heraus fülle, können hier Felder leer sein. Ist das Formular komplett ausgefüllt, sieht alles prima aus was ankommt. Sind jedoch "Zellen" leer geblieben, rutscht das Folgediv auf das vorige Label.
Das Ganze hat zur Folge, dass die gesamte Struktur zusammenbricht, obwohl jede Spalte eine feset Breite hat (Spalte 1: 150px, Spalte 2: 250px, Spalte 3: 150px, Spalte 4:250px).

Gibt es eine Möglichkeit (via CSS) diese DIVs festzupinnen, dass die - egal ob Spalte 2 oder Spalte 4 gefüllt sind oder nicht IMMER die gleiche Größe haben ?
 
Hi,

und wie lautet dein HTML- und CSS-Code für die "4-spaltige-DIV-Tabellen"-Konstruktion im Detail?

Es gibt dafür ja schliesslich diverse Möglichkeiten mit CSS ;)

Nur ob dein Mailprogramm in der Lage ist, diese auch zu verwenden / umzusetzen, weiß ich nicht :p:-)

mfg Maik
 
Grundsätzlich funktioniert dein Vorhaben des "Festpinnens" mit absoluten Positionsangaben, damit die leeren Boxen nicht von den nachfolgenden Boxen mit Inhalt überlagert werden - also:

HTML: 
<div id="box1"></div>
<div id="box2">box2 mit Inhalt</div>
<div id="box3"></div>
<div id="box4">box4 mit Inhalt</div>
CSS: 
#box1 {
position:absolute;
left:0;
width:150px;
background:red;
}
#box2 {
position:absolute;
left:150px;
width:250px;
background:yellow;
}
#box3 {
position:absolute;
left:400px;
width:150px;
background:green;
}
#box4 {
position:absolute;
left:550px;
width:250px;
background:blue;
}


Die Betonung liegt hier auf "grundsätzlich", denn ob dein Mailprogramm das auch so umsetzt, entzieht sich meiner Kenntnis.

mfg Maik
 
Hallo Maik,

Meine DIV-Table sieht in etwa so aus:

HTML: 
<div id="root">
<div id="Gruppenblock1">
<div class='label'>Label</span></div><div class='element'>Value</div>
<div class='label'>Label</span></div><div class='element'>Value</div><br />
// entspricht einer Zeile der "Tabelle", n-mal für alle Zeilen der Grp.
</div> //Ende Gruppenblock1, 4 mal für die Gruppen (nicht zu verwechseln mit den Spalten)
<div>

und das css sieht so aus:

CSS: 
.label {font-Size:8pt;width:150px;height:20px;font-weight:bold;float:left}
.element {font-Size:8pt;width:250px;height:20px;float:left}
Mir ist heute morgen so die Idee gekommen, dass man jede Zeile (also jedes DIV-Tupel) in einem weiteren DIV verpacken könnte, sodaß ja - rein theoretisch - die Zeilen nicht mehr umbrechen können. Ob sich allerdings intern die Felder trotzdem verschieben weiß ich jetzt nicht genau...

"Mein" Email-Programm kann das mittlerweile umsetzen, ich habe ja die Grundidee daraufhin ausprobiert und weitergestrickt bis zu dem derzeitgen Ergebnis.
 
Zuletzt bearbeitet:
Die float:left-Deklaration führt auch in den standardkonformen Webbrowsern (FF, Opera, Safari, usw.) zu dem von dir beschriebenen Verhalten, dass die inhaltsleeren Spaltenblöcke von den Nachfolgenden mit Inhalt überdeckt werden, und das Layout in sich zusammenbricht.

Vielleicht hast du ja mit meinem Vorschlag, der in diesem Fall zumindest in den o.g. Browsern funktioniert, mehr Erfolg.

mfg Maik
 
Hey Maik,

Ich habe das eben mal ausprobiert. Die gute Nachricht ist, es werden keine leeren Zellen überschrieben. Die schlechte Nachricht ist, er schreibt jedes div in eine eigene Zeile.
 
Interessant.

Und hiermit?

CSS: 
#box1 {
float:left;
position:absolute;
left:0;
width:150px;
background:red;
}
#box2 {
float:left;
position:absolute;
left:150px;
width:250px;
background:yellow;
}
#box3 {
float:left;
position:absolute;
left:400px;
width:150px;
background:green;
}
#box4 {
float:left;
position:absolute;
left:550px;
width:250px;
background:blue;
}

Ansonsten versuch es mal in den inhaltsleeren Blöcken mit einem geschützten Leerzeichen &nbsp;, das in den Browsern große Wirkung zeigt, wenn wegen mangelnden Inhalts in einem floatenden Spaltenblock das komplette Layout zusammenfällt.

mfg Maik
 
So, nachdem ich nun 2 Tage Photoshoppen musste, kann ich mich nun endlich wieder meinem Mailproblem widmen.

Auch die Verwendung des float:left mit position:absolute bringt nicht den gewünschten Effekt. Aber, man kann beim visuellen IMMER so toll faken:
HTML: 
<input type='hidden' name='placeholder'>

Durch das setzen eines Hidden-Inputfeldes ist immer in jeder Zeile ein Item. Somit bricht die Struktur Leerzellen nicht zusammen. Allerdings verschluckt er da Trenn und Formatierungs-Zeichen.

Mit dem &nbsp; hingegen in jeder Datenzelle bricht er auch nicht um. Doch leider ist auch hier ein Problem, dass z.b. der Straßenname verschluckt wird.

Generell denke ich, dass Strukturierungen in HTML-Emails niemals vorgesehen waren und dieser Mailtyp einfach nur dazu bestimmt ist "schick" auszusehen (mit bunten Bildchen und Grafiksignaturen und so weiter), und nich um Daten strukuriert darzustellen. Getestet wurden die HTML-Mails mit Outlook und The Bat! (wobei sie in Outlook gar nicht strukturiert werden, und dieses Programm alle Formatierungsversuche wehement ignoriert).

Edit:

Die Verwendung von Tabellen in HTML-Emails ist erstaunlicherweise doch möglich, was ich nicht gedacht hätte und funktioniert besser als alle anderen Lösungsmöglichkeiten.
 
Zuletzt bearbeitet:
CSS und E-Mail kann man zum größten Teil vergessen, da werden meistens noch Tabellen genutzt, da Outlook 2007 bspw auf die Engine von Word zugreift... und damit mit CSS Befehlen teilweise nicht klar kommt...

wir mussten leider die Erfahrung machen, dass man CSS momentan für E-Mail leider nicht geht, dank Microsoft...

Mehrere eigen Tests haben dieses bestätigt, es gab immer nur probleme mit Outlook (oder Windows Mail)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück