DIV, float, clear og alt det der ...

[Kurt Hansen]

Jeg har følgende kode i et nyhedsbrev, men det wrapper ikke på en
mobiltelefon.
Loading Image...

Hvordan får jeg det til det?

<p>
<img align="left" alt="CD cover"
src="Loading Image..."
style="float: left; padding-right:10px; padding-bottom:10px;"
width="250" /></p>
<h2>
What is Lorem Ipsum?</h2>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
<p>
1 CD: <b>149,50</b>: <a
href="https://www.danacordbutik.dk/product_info.php?products_id=46654"><img
alt="Køb knap" border="0"
src="Loading Image..."
width="150" /></a></p>
<hr />

[Kim Ludvigsen]

Post by Kurt Hansen
Jeg har følgende kode i et nyhedsbrev, men det wrapper ikke på en
mobiltelefon.
https://danacord.dk/Screenshot_20200612-104830.png
Hvordan får jeg det til det?

Det wrapper da fint, problemet er bare, at du har plads til tekst til
højre for billedet, og så placeres der tekst der. Den nemmeste måde til
at undgå det i dit tilfælde er nok at angive en minimums-bredde på din
h2, fx:
<h2 style="min-width:100px">What is Lorem Ipsum?</h2>

[Kurt Hansen]

Post by Kim Ludvigsen

Post by Kurt Hansen
Jeg har følgende kode i et nyhedsbrev, men det wrapper ikke på en
mobiltelefon.
https://danacord.dk/Screenshot_20200612-104830.png
Hvordan får jeg det til det?

Det wrapper da fint, problemet er bare, at du har plads til tekst til
højre for billedet, og så placeres der tekst der. Den nemmeste måde til
at undgå det i dit tilfælde er nok at angive en minimums-bredde på din
<h2 style="min-width:100px">What is Lorem Ipsum?</h2>

Tø-hø, så simpelt kan det altså gøres. Mange tak :-)

Nu skal jeg så bare have prisen og Se/køb-knappen til at stå på een linje.

[Kim Ludvigsen]

Post by Kurt Hansen
Nu skal jeg så bare have prisen og Se/køb-knappen til at stå på een linje.

Der kan være andre ting i din kode, som kan påvirke placeringen, så det
ville være nemmere med et live eksempel, men du kan prøve med:

<img alt="Køb knap" border="0"
src="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
width="150" style="display:inline" />

[Kurt Hansen]

Post by Kim Ludvigsen

Post by Kurt Hansen
Nu skal jeg så bare have prisen og Se/køb-knappen til at stå på een linje.

Der kan være andre ting i din kode, som kan påvirke placeringen, så det
<img alt="Køb knap" border="0"
src="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
width="150" style="display:inline" />

De løste en del af problemet, men knappen og teksten hopper i forhold
til hinanden.
http://danacordrecords.cmail19.com/t/ViewEmail/r/B183A00F829587122540EF23F30FEDED

"Problemet" er at det er et "system" jeg bruger. Det eneste jeg selv har
kontrol over er selve vareteksten.

[Kurt Hansen]

Post by Kurt Hansen

Post by Kim Ludvigsen

Post by Kurt Hansen
Nu skal jeg så bare have prisen og Se/køb-knappen til at stå på een linje.

Der kan være andre ting i din kode, som kan påvirke placeringen, så
<img alt="Køb knap" border="0"
src="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
width="150" style="display:inline" />

De løste en del af problemet, men knappen og teksten hopper i forhold
til hinanden.
http://danacordrecords.cmail19.com/t/ViewEmail/r/B183A00F829587122540EF23F30FEDED
"Problemet" er at det er et "system" jeg bruger. Det eneste jeg selv har
kontrol over er selve vareteksten.

Jeg har forsøgt mig med dette, men vil gerne holde venstre kant med teksten.

<div style="display: flex;justify-content: center;align-items: center;">
<div>1 CD: <b>149,50</b>:&nbsp;&nbsp;</div>
<div><img alt="Køb knap" border="0"
src="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
style="display:inline" width="150" /></div>
</div>

[Kurt Hansen]

Post by Kurt Hansen

Post by Kurt Hansen

Post by Kim Ludvigsen

Post by Kurt Hansen
Nu skal jeg så bare have prisen og Se/køb-knappen til at stå på een linje.

Der kan være andre ting i din kode, som kan påvirke placeringen, så
<img alt="Køb knap" border="0"
src="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
width="150" style="display:inline" />

De løste en del af problemet, men knappen og teksten hopper i forhold
til hinanden.
http://danacordrecords.cmail19.com/t/ViewEmail/r/B183A00F829587122540EF23F30FEDED
"Problemet" er at det er et "system" jeg bruger. Det eneste jeg selv
har kontrol over er selve vareteksten.

Jeg har forsøgt mig med dette, men vil gerne holde venstre kant med teksten.
<div style="display: flex;justify-content: center;align-items: center;">
   <div>1 CD: <b>149,50</b>:&nbsp;&nbsp;</div>
   <div><img alt="Køb knap" border="0"
src="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
style="display:inline" width="150" /></div>
</div>

Det blev løst ved at fjerne "justify-content", men det er altså med
hovedet under armen og pluk fra et eksempel jeg fandt derude.

[Jan Hansen]

Post by Kurt Hansen

Post by Kurt Hansen
Jeg har forsøgt mig med dette, men vil gerne holde venstre kant med teksten.
<div style="display: flex;justify-content: center;align-items: center;">
   <div>1 CD: <b>149,50</b>:&nbsp;&nbsp;</div>
   <div><img alt="Køb knap" border="0"
src="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
style="display:inline" width="150" /></div>
</div>

Det blev løst ved at fjerne "justify-content", men det er altså med
hovedet under armen og pluk fra et eksempel jeg fandt derude.

Hvis det er meningen, at prisen skal stå imod venstre kant, og buy
knap imod højre kant, skal der stå justify-content:space-between;
se
https://css-tricks.com/wp-content/uploads/2018/10/justify-content.svg

[Jan Hansen]

Post by Jan Hansen
Hvis det er meningen, at prisen skal stå imod venstre kant, og buy
knap imod højre kant, skal der stå justify-content:space-between;
se
https://css-tricks.com/wp-content/uploads/2018/10/justify-content.svg

Og hvis du skulle have opdateret for meget til at din browser
understøtter svg, har w3schools en side hvor space-between kan prøves:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify-content_space-between

[Kurt Hansen]

Post by Jan Hansen

Post by Jan Hansen
Hvis det er meningen, at prisen skal stå imod venstre kant, og buy
knap imod højre kant, skal der stå justify-content:space-between;
se
https://css-tricks.com/wp-content/uploads/2018/10/justify-content.svg

Og hvis du skulle have opdateret for meget til at din browser
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify-content_space-between

Kringe-ling. Tak for hjælpen :-)

[Kurt Hansen]

Post by Kurt Hansen
Jeg har følgende kode i et nyhedsbrev, men det wrapper ikke på en
mobiltelefon.
https://danacord.dk/Screenshot_20200612-104830.png
Hvordan får jeg det til det?

Her er et nyt skærmbillede fra en mobiltelefon:
Loading Image...

Overskriften står stadig lodret ved siden af billedet. Jeg gengiver den
komplette kode i systemet *Campaign Monitor*, som automatisk sætter <p>.

<p>
<img align="left" alt="CD cover"
src="Loading Image..."
style="float: left; padding-right:10px; padding-bottom:10px;"
width="250" /></p>
<h2 style="min-width:200px">
Tidens store tenor</h2>
<p>
En af de mest popul&aelig;re tenorer i dag og en af de mest elskede,
for ikke alene kan Joseph Calleja synger som en dr&oslash;m, men han kan
ogs&aring; karakterisere og leve sig ind i alle roller. Her er et stort
udvalg af alle de bedste arier fra Verdis operaer.</p>
<div style="display: flex;align-items: center;">
<div style="display: flex;justify-content: flex-start;">
<div style="margin: 5px;">
1 CD<br />
F&Oslash;R 149,50<br />
<span style="font-size:130%;font-weight: bold;">NU 49,50</span></div>
<div>
<img alt="Køb knap" border="0"
src="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
style="display:inline" width="150" /></div>
</div>
</div>

[Kim Ludvigsen]

Post by Kurt Hansen
Overskriften står stadig lodret ved siden af billedet. Jeg gengiver den
komplette kode i systemet *Campaign Monitor*, som automatisk sætter <p>.
<h2 style="min-width:200px">

Det er svært at finde årsagen, når man ikke har en prøveside, hvor man
kan se hele koden. Du kan prøve at tilføje !important:

<h2 style="min-width:200px !important">

[Kurt Hansen]

Post by Kim Ludvigsen

Post by Kurt Hansen
Overskriften står stadig lodret ved siden af billedet. Jeg gengiver
den komplette kode i systemet *Campaign Monitor*, som automatisk
sætter <p>.
<h2 style="min-width:200px">

Det er svært at finde årsagen, når man ikke har en prøveside, hvor man
<h2 style="min-width:200px !important">

Tak, nu prøver jeg at ændre og sende en testmail til en medarbejder der
har en smartphone.

[Jan Hansen]

Post by Kurt Hansen
Tak, nu prøver jeg at ændre og sende en testmail til en medarbejder der
har en smartphone.

Har du ikke selv sådan en?
Siden ser sådan ud i Thunderbird, når jeg laver vinduet smalt
Loading Image...
Jeg har sendt den til mig selv med

<?php
$modtager='***@digselv.dk';
$afsender='***@digselv.dk';
$emne='en test mail';
$besked= <<<EOT
<h1>Jespers lange overskrift</h1>
<p>
<img align="left" alt="CD cover"
src="https://www.danacordbutik.dk/mediafiles/images/covers/Decca/calleja.jpg"
style="float: left; padding-right:10px; padding-bottom:10px;" width="250"
/></p>
<h2 style="min-width:200px">
Tidens store tenor</h2>
<p>
En af de mest popul&aelig;re tenorer i dag og en af de mest elskede,
for ikke alene kan Joseph Calleja synger som en dr&oslash;m, men han kan
ogs&aring; karakterisere og leve sig ind i alle roller. Her er et stort
udvalg af alle de bedste arier fra Verdis operaer.</p>
<div style="display: flex;align-items: center;">
<div style="display: flex;justify-content: flex-start;">
<div style="margin: 5px;">
1 CD<br />
F&Oslash;R 149,50<br />
<span style="font-size:130%;font-weight: bold;">NU 49,50</span></div>
<div>
<img alt="Køb knap" border="0"
src="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
style="display:inline" width="150" /></div>
</div>
</div>
EOT;

$besked=str_replace("\n"," ",$besked);
$besked=str_replace("\t","",$besked);
$besked='<html><body>'.$besked.'</body></html>';

$mailheaders .= 'From: '.$afsender."\r\n".
'Reply-To: '.$afsender."\r\n".
'Content-Type: text/html; charset=utf-8'."\r\n".
'X-Mailer: PHP/'.phpversion();

if (mail ($modtager, $emne, $besked, $mailheaders)) {
echo "det er sendt";
} else {
echo "Der er kludder";
}
?>

[Kurt Hansen]

Post by Jan Hansen

Post by Kurt Hansen
Tak, nu prøver jeg at ændre og sende en testmail til en medarbejder der
har en smartphone.

Har du ikke selv sådan en?

Jo, sådan en købte jeg for nyligt, men jeg har opgivet at finde ud af at
betjene den :-(

Post by Jan Hansen
Siden ser sådan ud i Thunderbird, når jeg laver vinduet smalt
http://www.sniper-pistol.com/mail.jpg
Jeg har sendt den til mig selv med

Det er jo lige præcist sådan jeg gerne vil have det til at se ud, men
det vil ikke rigtig lykkes :-(