Avatar billede nemlig Professor
29. november 2020 - 14:48 Der er 8 kommentarer og
1 løsning

Hvordan undgår jeg linjeskifte ved insættelse af DIV

Hejsa.
Jeg er ved at designe en html-mail, hvor mailteksten skrives i en texteditor. Jeg kan se på output, at alle afsnit starter og slutter med <p> og </p>. Det er helt fint.
Jeg har brug for at indsætte et link i teksten, og da jeg gerne vil style linket som en knap, har jeg defineret noget css på linket.

Output med tekst og link ser sådan her ud:
<p>G&aring; til din personlige side <div class='my_content_container'><a href='url.php'>Min Side</a></div></p>

Jeg vil gerne have knappen til at stå på samme linje som teksten, men der indsættes et linjeskift både før og efter henholdsvis <div> og </div>.
Er der et smart trik til dette?
Avatar billede nemlig Professor
29. november 2020 - 14:50 #1
Min css ser sådan her ud:
.my_content_container a {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px; 
    }
Avatar billede Slater Ekspert
29. november 2020 - 14:52 #2
Brug span i stedet for div.
Avatar billede nemlig Professor
29. november 2020 - 15:10 #3
Nice - hold da op, hvor simpelt. Tusinde tak - det var løsningen :)
29. november 2020 - 17:06 #4
Hej,

Bare til orientering:    <DIV> genererer et linieskift (det er lavet sådan) mens <SPAN> ikke genererer Liniekift ( jf. #2 og #3 ).
Avatar billede nemlig Professor
29. november 2020 - 17:54 #5
Hmmm... Css driller med hensyn til link-knappen.
I outlook på PC, står teksten korrekt og der er blå baggrund. Men ingen luft overhovedet.
På iPad og iPhone passer højde, bredde og padding, omend teksten ikke står præcis centreret lodret (står en smule for højt).
På Gmail app'en til iPhone er der slet ingen formattering med. Der er kun en understreget tekst.

Er der nogle nemme triks?

Her er min css:

.my_content_container a {
      background-color: #123453; /* Darkblue */
      border: none;
      color: white;
      height:25px;
      width:90px;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px; 
      font-weight: bold;
    }
Avatar billede Slater Ekspert
29. november 2020 - 18:35 #6
E-mails er noget af det sværeste at designe til, fordi mange e-mail-programmer bruger ekstremt forældede HTML-motorer til at rendere, og fordi mange webmails med vilje stripper indhold ud for at forhindre spam-mails i at camouflere farlige links osv.

Outlook 2003 bruger Internet Explorer 6's motor til at rendere, og nyere versioner af Outlook (2007-2013) bruger Microsoft Word til at rendere. Ja, slet ikke en browser, men et skriveprogram. Derfor kan du slet ikke regne med at tingene kommer til at se ens ud på tværs af platforme og software, og derfor anbefales det at designe e-mails så simpelt som muligt og generelt med forældet kode: højst HTML4 kompatibelt, gerne med <table> til layout og så lidt CSS brugt som muligt.

Gmail gør med vilje links blå for at øge tilgængelighed og sikkerhed. Du kan overskrive det - her står hvordan - men det anbefales at lade være, og dine mails kan muligvis blive tagget som spam hvis du gør det.
Avatar billede nemlig Professor
29. november 2020 - 21:03 #7
Tak for info. Jeg tror jeg benytter min første løsning med <img>, hvor jeg har lavet en knap, som jeg har indlejret i mailen. Den vises korrekt. Ulempen er at det er besværligt at ændre farven på knappen.
Avatar billede ejvindh Ekspert
30. november 2020 - 10:57 #8
Men (lige uden at vide helt så meget om sagen, som Slater) her tror jeg så også du skal være opmærksom på, at en række emailklienter også filtrerer billeder fra -- da disse kan bruges til at tracke modtagerens læsning af indholdet.
Avatar billede nemlig Professor
30. november 2020 - 11:24 #9
#8 Tak for input.
Jeg benytter et logo i min mailskabelon og nu også en knap til linket jf. ovenfor. Begge billeder er indlejret i mailen ved brug af "add embedded image". Det fungerer fint i Outlook, Gmail og æbleprodukterne.
Hvis mailklienten filtrerer billederne fra, så har jeg den opfattelse, at modtageren med et enkelt klik kan få dem vist.
Men jeg kan sagtens tage fejl.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester