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

[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?

<p>
<img align="left" alt="CD cover"
src="https://www.danacordbutik.dk/mediafiles/images/covers/Dist/Eloquence/ELQ%20480%201276.jpg"
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="http://danacordbutik.dk/mediafiles/images/buyshopknap.png"
width="150" /></a></p>
<hr />

--
Venlig hilsen
Kurt Hansen

[Kim Ludvigsen]

Den 13.06.2020 kl. 05.50 skrev 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>

--
Mvh. Kim Ludvigsen

[Kurt Hansen]

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]

Den 13.06.2020 kl. 11.27 skrev 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" />

--
Mvh. Kim Ludvigsen

[Kurt Hansen]

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]

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]

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]

Kurt Hansen skrev:

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



--
mvh Jan.
Help Microsoft stamp out piracy. Give
Linux to a friend today!

[Jan Hansen]

Jan Hansen skrev:

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

Den 14/06/2020 kl. 12.13 skrev Jan Hansen:
> Jan Hansen skrev:
>
>> 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

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

[Kurt Hansen]

Den 13/06/2020 kl. 05.50 skrev 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:
https://danacord.dk/dump.jpg

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="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>

[Kim Ludvigsen]

Den 18.06.2020 kl. 10.06 skrev 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">

--
Mvh. Kim Ludvigsen

[Kurt Hansen]

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

[Jan Hansen]

Kurt Hansen skrev:

> 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
http://www.sniper-pistol.com/mail.jpg
Jeg har sendt den til mig selv med

<?php
$modtager='din_t...@digselv.dk';
$afsender='din...@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]

Den 18/06/2020 kl. 17.07 skrev Jan Hansen:
> Kurt Hansen skrev:
>
>> 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 :-(

> 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 :-(