nemlig Forsker
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?
nemlig Forsker
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; 
    }
Slater Ekspert
29. november 2020 - 14:52 #2
Brug span i stedet for div.
nemlig Forsker
29. november 2020 - 15:10 #3
Nice - hold da op, hvor simpelt. Tusinde tak - det var løsningen :)
snestrup2000 Professor
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 ).
nemlig Forsker
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;
    }
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.
nemlig Forsker
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.
ejvindh Professor
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.
nemlig Forsker
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.
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

Opret Preview

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





Premium
Test: Kæmpestort gaming-headset er perfekt til dine lange Teams-møder - men har også nogle besværligheder
Længe før vi andre blev slået hjem til hjemmekontorets endeløse webmøder har gamerne gennemskuet behovet for komfortabelt grej. Så vi tog danske EPOS top gamingheadset med på arbejde. Læs testen her.
Computerworld
Biden sender skjult besked til kode-folket: "Hvis du læser dette, har vi brug for din hjælp”
En stående invitation er blevet opdaget i kildekoden på Det Hvide Hus' hjemmeside. Men den er kun til de eksperter, der selv kan finde den.
CIO
Podcast: Hos Viking Life-Saving Equipment er it gået fra at være backend til at være noget, som kunderne spørger aktivt efter
Podcast, The Digital Edge: Viking leverer en stadig større del af deres produkt som en tjeneste. Som en del af tjenesten tager Viking ansvar for sikkerheden ved at levere, dokumentere og vedligeholde det nødvendige sikkerhedsudstyr. Hør hvordan Henrik Balslev senior digital director hos Viking har løftet den opgave.
White paper
Sådan kan du arbejde effektivt uanset tid, sted og type af enhed
Hvad nu hvis dit arbejde, din information, dine processer og teknologien bag ved, var organiseret på en måde så det passede til din organisation – alt sammen guidet af en intelligent udgave af det digitale arbejdsrum? Det er visionen bag Atea og Citrix´s samarbejde med digital workspace – en smartere og mere effektiv måde at arbejde på. I dette whitetpaper kan du derfor læse om, hvordan du kan skabe et mere effektivt og brugervenligt arbejdsrum uanset tid, sted og enhed. En løsning der på en gang er både enkel og som sætter brugeren i centrum.