formázás széttörik emailben kiküldve
Sziasztok!
Segítene valaki megformázni a következő HTML-t, hogy emailben megnyitva (gmail) is ugyanúgy nézzen ki mint a php alkalmazásban ?
Most mintha a felsorolás betűmérete miatt törne meg.
Jó lenne, ha más méretű kijelzőkön is megmaradna az elrendezés.
Képernyőképek:
PHP
Gmail
A php-s kimenetem:
Gmailben ha kiküldöm összetörik:
Köszi: ZS0LT
■ Segítene valaki megformázni a következő HTML-t, hogy emailben megnyitva (gmail) is ugyanúgy nézzen ki mint a php alkalmazásban ?
Most mintha a felsorolás betűmérete miatt törne meg.
Jó lenne, ha más méretű kijelzőkön is megmaradna az elrendezés.
Képernyőképek:
PHP
Gmail
A php-s kimenetem:
<div id="szallas_301" style="padding-bottom: 10px; padding-top: 10px; height: 100px;">
<div class="megjelenit" style="padding-top: 0px; padding-left: 145px; border-top-width: 0px; margin-top: 0px; padding-right: 0px; height: 0px;">
301 apartman, Balatonőszöd 3 szoba+nappali 2.em. 0 méter a Balaton távolsága gyalogosan, balatoni teljes panoráma, 6 felnőtt, klíma, 2 fürdőszoba, lift, horgász lehetőség, stég, kerékpár, parkoló, kötelezően fizetendő: kerékpár, stég, étkezési lehetőség a közelben, végtakarítás, biztonsági kaució,
</div>
<a title="Ezt a nyaralót választom" href="http://mydomain.com/index.php?option=com_osproperty&task=property_details&id=143" target="_blank">0301.<img src="http://mydomain.com/images/osproperty/properties/143/thumb/301_balaton_parti_szallas_lakoparkban_apartman_kiado_11.jpg" alt="nyaraló" style="padding-left: 5px; padding-right: 10px;" height="67" width="85""></a><span style="color:blue">0601-0701 30 éj </span> <img src="http://mydomain.com/images/piktogramok/apartman.png" alt="apartman," title="apartman," height="24" width="24"> Balatonőszöd 3 szoba+nappali 2.em. 0<img src="http://mydomain.com/images/piktogramok/balaton3.png" alt=" méter a Balaton távolsága gyalogosan," title=" méter a Balaton távolsága gyalogosan," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/teljes_panorama1.png" alt="balatoni teljes panoráma," title="balatoni teljes panoráma," height="24" width="24"> 6<img src="http://mydomain.com/images/piktogramok/adult.png" alt=" felnőtt," title=" felnőtt," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/klima1.png" alt="klíma," title="klíma," height="24" width="24"> 2<img src="http://mydomain.com/images/piktogramok/furdoszoba1.png" alt=" fürdőszoba," title=" fürdőszoba," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/lift1.png" alt="lift," title="lift," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/horgasz1.png" alt="horgász lehetőség," title="horgász lehetőség," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/steg.png" alt="stég," title="stég," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/kerekpar1.png" alt="kerékpár," title="kerékpár," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/parkolo1.png" alt="parkoló," title="parkoló," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/penz6.png" alt="kötelezően fizetendő:" title="kötelezően fizetendő:" height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/kerekpar1.png" alt="kerékpár," title="kerékpár," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/steg.png" alt="stég," title="stég," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/etkezes.png" alt="étkezési lehetőség a közelben," title="étkezési lehetőség a közelben," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/takaritas2.png" alt="végtakarítás," title="végtakarítás," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/kaucio.png" alt="biztonsági kaució," title="biztonsági kaució," height="24" width="24"> </div>
<div class="megjelenit" style="padding-top: 0px; padding-left: 145px; border-top-width: 0px; margin-top: 0px; padding-right: 0px; height: 0px;">
301 apartman, Balatonőszöd 3 szoba+nappali 2.em. 0 méter a Balaton távolsága gyalogosan, balatoni teljes panoráma, 6 felnőtt, klíma, 2 fürdőszoba, lift, horgász lehetőség, stég, kerékpár, parkoló, kötelezően fizetendő: kerékpár, stég, étkezési lehetőség a közelben, végtakarítás, biztonsági kaució,
</div>
<a title="Ezt a nyaralót választom" href="http://mydomain.com/index.php?option=com_osproperty&task=property_details&id=143" target="_blank">0301.<img src="http://mydomain.com/images/osproperty/properties/143/thumb/301_balaton_parti_szallas_lakoparkban_apartman_kiado_11.jpg" alt="nyaraló" style="padding-left: 5px; padding-right: 10px;" height="67" width="85""></a><span style="color:blue">0601-0701 30 éj </span> <img src="http://mydomain.com/images/piktogramok/apartman.png" alt="apartman," title="apartman," height="24" width="24"> Balatonőszöd 3 szoba+nappali 2.em. 0<img src="http://mydomain.com/images/piktogramok/balaton3.png" alt=" méter a Balaton távolsága gyalogosan," title=" méter a Balaton távolsága gyalogosan," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/teljes_panorama1.png" alt="balatoni teljes panoráma," title="balatoni teljes panoráma," height="24" width="24"> 6<img src="http://mydomain.com/images/piktogramok/adult.png" alt=" felnőtt," title=" felnőtt," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/klima1.png" alt="klíma," title="klíma," height="24" width="24"> 2<img src="http://mydomain.com/images/piktogramok/furdoszoba1.png" alt=" fürdőszoba," title=" fürdőszoba," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/lift1.png" alt="lift," title="lift," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/horgasz1.png" alt="horgász lehetőség," title="horgász lehetőség," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/steg.png" alt="stég," title="stég," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/kerekpar1.png" alt="kerékpár," title="kerékpár," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/parkolo1.png" alt="parkoló," title="parkoló," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/penz6.png" alt="kötelezően fizetendő:" title="kötelezően fizetendő:" height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/kerekpar1.png" alt="kerékpár," title="kerékpár," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/steg.png" alt="stég," title="stég," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/etkezes.png" alt="étkezési lehetőség a közelben," title="étkezési lehetőség a közelben," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/takaritas2.png" alt="végtakarítás," title="végtakarítás," height="24" width="24"> <img src="http://mydomain.com/images/piktogramok/kaucio.png" alt="biztonsági kaució," title="biztonsági kaució," height="24" width="24"> </div>
Gmailben ha kiküldöm összetörik:
<div id=3D"szallas_301" style=3D"padding-bottom:10px;padding-top:10=
px;height:100px">
<div class=3D"" style=3D"padding-top:0px;padding-left:145px;border=
-top-width:0px;margin-top:0px;padding-right:0px;height:0px">
=09
301 apartman, Balaton=C5=91sz=C3=B6d 3 szoba+nappali 2.em. 0 m=
=C3=A9ter a=20
Balaton t=C3=A1vols=C3=A1ga gyalogosan, balatoni teljes panor=C3=A1ma, 6 fe=
ln=C5=91tt,=20
kl=C3=ADma, 2 f=C3=BCrd=C5=91szoba, lift, horg=C3=A1sz lehet=C5=91s=C3=A9g,=
st=C3=A9g, ker=C3=A9kp=C3=A1r, parkol=C3=B3,=20
k=C3=B6telez=C5=91en fizetend=C5=91: ker=C3=A9kp=C3=A1r, st=C3=A9g, =C3=
=A9tkez=C3=A9si lehet=C5=91s=C3=A9g a k=C3=B6zelben, =20
v=C3=A9gtakar=C3=ADt=C3=A1s, biztons=C3=A1gi kauci=C3=B3,=20
=09
</div>
<a title=3D"Ezt a nyaral=C3=B3t v=C3=A1lasztom" href=3D"http://mydomain.com/index.php?option=3Dcom_osproperty&task=3Dproperty_details&i=
d=3D143" target=3D"_blank">0301.<img src=3D"http://mydomain.com/images/=
osproperty/properties/143/thumb/301_balaton_parti_szallas_lakoparkban_apart=
man_kiado_11.jpg" alt=3D"nyaral=C3=B3" style=3D"padding-left: 5px; padding-=
right: 10px;" height=3D"67" width=3D"85""></a><span style=3D"color:blu=
e">0601-0701 30 =C3=A9j </span> <img src=3D"http://mydomain.com/images/=
piktogramok/apartman.png" alt=3D"apartman," title=3D"apartman," height=3D"2=
4" width=3D"24"> Balaton=C5=91sz=C3=B6d 3 szoba+nappali 2.em. 0<img src=3D=
"http://mydomain.com/images/piktogramok/balaton3.png" alt=3D" m=C3=A9te=
r a Balaton t=C3=A1vols=C3=A1ga gyalogosan," title=3D" m=C3=A9ter a Balaton=
t=C3=A1vols=C3=A1ga gyalogosan," height=3D"24" width=3D"24"> <img src=3D"h=
ttp://mydomain.com/images/piktogramok/teljes_panorama1.png" alt=3D"bala=
toni teljes panor=C3=A1ma," title=3D"balatoni teljes panor=C3=A1ma," height=
=3D"24" width=3D"24"> 6<img src=3D"http://mydomain.com/images/piktogram=
ok/adult.png" alt=3D" feln=C5=91tt," title=3D" feln=C5=91tt," height=3D"24"=
width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/klima=
1.png" alt=3D"kl=C3=ADma," title=3D"kl=C3=ADma," height=3D"24" width=3D"24"=
> 2<img src=3D"http://mydomain.com/images/piktogramok/furdoszoba1.png" =
alt=3D" f=C3=BCrd=C5=91szoba," title=3D" f=C3=BCrd=C5=91szoba," height=3D"2=
4" width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/lif=
t1.png" alt=3D"lift," title=3D"lift," height=3D"24" width=3D"24"> <img src=
=3D"http://mydomain.com/images/piktogramok/horgasz1.png" alt=3D"horg=C3=
=A1sz lehet=C5=91s=C3=A9g," title=3D"horg=C3=A1sz lehet=C5=91s=C3=A9g," hei=
ght=3D"24" width=3D"24"> <img src=3D"http://mydomain.com/images/piktogr=
amok/steg.png" alt=3D"st=C3=A9g," title=3D"st=C3=A9g," height=3D"24" width=
=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/kerekpar1.p=
ng" alt=3D"ker=C3=A9kp=C3=A1r," title=3D"ker=C3=A9kp=C3=A1r," height=3D"24"=
width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/parko=
lo1.png" alt=3D"parkol=C3=B3," title=3D"parkol=C3=B3," height=3D"24" width=
=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/penz6.png" =
alt=3D"k=C3=B6telez=C5=91en fizetend=C5=91:" title=3D"k=C3=B6telez=C5=91en =
fizetend=C5=91:" height=3D"24" width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/kerekpar1.png" alt=3D"ker=C3=A9kp=C3=A1r," title=
=3D"ker=C3=A9kp=C3=A1r," height=3D"24" width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/steg.png" alt=3D"st=C3=A9g," title=3D"st=
=C3=A9g," height=3D"24" width=3D"24"> <img src=3D"http://mydomain.com/=
images/piktogramok/etkezes.png" alt=3D"=C3=A9tkez=C3=A9si lehet=C5=91s=C3=
=A9g a k=C3=B6zelben," title=3D"=C3=A9tkez=C3=A9si lehet=C5=91s=C3=A9g a k=
=C3=B6zelben," height=3D"24" width=3D"24"> <img src=3D"http://mydomain=
.com/images/piktogramok/takaritas2.png" alt=3D"v=C3=A9gtakar=C3=ADt=C3=A1s,=
" title=3D"v=C3=A9gtakar=C3=ADt=C3=A1s," height=3D"24" width=3D"24"> <img s=
rc=3D"http://mydomain.com/images/piktogramok/kaucio.png" alt=3D"biztons=
=C3=A1gi kauci=C3=B3," title=3D"biztons=C3=A1gi kauci=C3=B3," height=3D"24"=
width=3D"24"> </div>=20
<div id=3D"szallas_302"
px;height:100px">
<div class=3D"" style=3D"padding-top:0px;padding-left:145px;border=
-top-width:0px;margin-top:0px;padding-right:0px;height:0px">
=09
301 apartman, Balaton=C5=91sz=C3=B6d 3 szoba+nappali 2.em. 0 m=
=C3=A9ter a=20
Balaton t=C3=A1vols=C3=A1ga gyalogosan, balatoni teljes panor=C3=A1ma, 6 fe=
ln=C5=91tt,=20
kl=C3=ADma, 2 f=C3=BCrd=C5=91szoba, lift, horg=C3=A1sz lehet=C5=91s=C3=A9g,=
st=C3=A9g, ker=C3=A9kp=C3=A1r, parkol=C3=B3,=20
k=C3=B6telez=C5=91en fizetend=C5=91: ker=C3=A9kp=C3=A1r, st=C3=A9g, =C3=
=A9tkez=C3=A9si lehet=C5=91s=C3=A9g a k=C3=B6zelben, =20
v=C3=A9gtakar=C3=ADt=C3=A1s, biztons=C3=A1gi kauci=C3=B3,=20
=09
</div>
<a title=3D"Ezt a nyaral=C3=B3t v=C3=A1lasztom" href=3D"http://mydomain.com/index.php?option=3Dcom_osproperty&task=3Dproperty_details&i=
d=3D143" target=3D"_blank">0301.<img src=3D"http://mydomain.com/images/=
osproperty/properties/143/thumb/301_balaton_parti_szallas_lakoparkban_apart=
man_kiado_11.jpg" alt=3D"nyaral=C3=B3" style=3D"padding-left: 5px; padding-=
right: 10px;" height=3D"67" width=3D"85""></a><span style=3D"color:blu=
e">0601-0701 30 =C3=A9j </span> <img src=3D"http://mydomain.com/images/=
piktogramok/apartman.png" alt=3D"apartman," title=3D"apartman," height=3D"2=
4" width=3D"24"> Balaton=C5=91sz=C3=B6d 3 szoba+nappali 2.em. 0<img src=3D=
"http://mydomain.com/images/piktogramok/balaton3.png" alt=3D" m=C3=A9te=
r a Balaton t=C3=A1vols=C3=A1ga gyalogosan," title=3D" m=C3=A9ter a Balaton=
t=C3=A1vols=C3=A1ga gyalogosan," height=3D"24" width=3D"24"> <img src=3D"h=
ttp://mydomain.com/images/piktogramok/teljes_panorama1.png" alt=3D"bala=
toni teljes panor=C3=A1ma," title=3D"balatoni teljes panor=C3=A1ma," height=
=3D"24" width=3D"24"> 6<img src=3D"http://mydomain.com/images/piktogram=
ok/adult.png" alt=3D" feln=C5=91tt," title=3D" feln=C5=91tt," height=3D"24"=
width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/klima=
1.png" alt=3D"kl=C3=ADma," title=3D"kl=C3=ADma," height=3D"24" width=3D"24"=
> 2<img src=3D"http://mydomain.com/images/piktogramok/furdoszoba1.png" =
alt=3D" f=C3=BCrd=C5=91szoba," title=3D" f=C3=BCrd=C5=91szoba," height=3D"2=
4" width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/lif=
t1.png" alt=3D"lift," title=3D"lift," height=3D"24" width=3D"24"> <img src=
=3D"http://mydomain.com/images/piktogramok/horgasz1.png" alt=3D"horg=C3=
=A1sz lehet=C5=91s=C3=A9g," title=3D"horg=C3=A1sz lehet=C5=91s=C3=A9g," hei=
ght=3D"24" width=3D"24"> <img src=3D"http://mydomain.com/images/piktogr=
amok/steg.png" alt=3D"st=C3=A9g," title=3D"st=C3=A9g," height=3D"24" width=
=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/kerekpar1.p=
ng" alt=3D"ker=C3=A9kp=C3=A1r," title=3D"ker=C3=A9kp=C3=A1r," height=3D"24"=
width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/parko=
lo1.png" alt=3D"parkol=C3=B3," title=3D"parkol=C3=B3," height=3D"24" width=
=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/penz6.png" =
alt=3D"k=C3=B6telez=C5=91en fizetend=C5=91:" title=3D"k=C3=B6telez=C5=91en =
fizetend=C5=91:" height=3D"24" width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/kerekpar1.png" alt=3D"ker=C3=A9kp=C3=A1r," title=
=3D"ker=C3=A9kp=C3=A1r," height=3D"24" width=3D"24"> <img src=3D"http://mydomain.com/images/piktogramok/steg.png" alt=3D"st=C3=A9g," title=3D"st=
=C3=A9g," height=3D"24" width=3D"24"> <img src=3D"http://mydomain.com/=
images/piktogramok/etkezes.png" alt=3D"=C3=A9tkez=C3=A9si lehet=C5=91s=C3=
=A9g a k=C3=B6zelben," title=3D"=C3=A9tkez=C3=A9si lehet=C5=91s=C3=A9g a k=
=C3=B6zelben," height=3D"24" width=3D"24"> <img src=3D"http://mydomain=
.com/images/piktogramok/takaritas2.png" alt=3D"v=C3=A9gtakar=C3=ADt=C3=A1s,=
" title=3D"v=C3=A9gtakar=C3=ADt=C3=A1s," height=3D"24" width=3D"24"> <img s=
rc=3D"http://mydomain.com/images/piktogramok/kaucio.png" alt=3D"biztons=
=C3=A1gi kauci=C3=B3," title=3D"biztons=C3=A1gi kauci=C3=B3," height=3D"24"=
width=3D"24"> </div>=20
<div id=3D"szallas_302"
Köszi: ZS0LT
kisebbet
- így át futva is látszik: class (id) attribútum jobb esetben nem kerül feldolgozásra, rosszabbkor amiatt lesz gebasz, mert esetleg próbálja takarítani.
- ha azért van class, mert van rajta külső CSS, akkor az máris kiesett a mailből. :)
- általában egész más template kell mail nek, mint frontend re.
- mailben (sajnos) a "jo" öreg table design a nyerő (nem kizárólag, de többnyire).
Szerk. Színes kódot (és rövidebbet!) több eséllyel nézünk át.