Telefon, Fax, E-Mail ordentlich sortiert im Header

Thema wurde von Anonymous, 22. Januar 2018 erstellt.

  1. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    6. April 2017
    Beiträge:
    51
    Danke erhalten:
    0
    Danke vergeben:
    32
    #1 Anonymous, 22. Januar 2018
    Zuletzt bearbeitet: 29. Januar 2018
    ich bekomme ums verrecken nicht 3, 4 Angaben im

    Content: Header

    untereinander ordentlich sortiert geschrieben. Dass Zahlen und Buchstaben auch kerzengerade übereinander stehen. Und nicht versetzt. Habe schon versucht es einfach mit einem Bild hochzuladen, in Photoshop ist das schließlich kein Problem. Dann geht aber natürlich nicht mehr der Link zum E-Mail Client wenn man auf die Mailadresse klickt. Schaue ich mir den HTML Code an, sehe ich auch nichts was meinem Ziel entgegenstehen würde. Stelle mich sicherlich wieder nur an.

    Kleiner Tipp irgendwer?

    Ist das überhaupt eine gute Idee, die E-Mail nicht als Bild zu setzen, wegen E-Mail Crawlern --> Spam?
     
  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    6. April 2017
    Beiträge:
    51
    Danke erhalten:
    0
    Danke vergeben:
    32
    An was habe ich diesmal nicht gedacht, dass ich keine Antwort bekomme?
     
  3. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Das machen alte Schreibmaschinen, da war jeder Buchstabe und jede Zahl gleich breit, egal ob ein W oder ein I
    Die meisten modernen Schriften passen die Buchstaben- / Zahlenbreite aber an. Und so ist ein W breiter als ein I.

    Du musst also eine Schrift nutzen, die das so macht, oder den Zeichenabstand anders einstellen (wobei ich nicht wüsste wo man das macht)
     
  4. Ein Bild oder die html wie das jetzt bei dir aussieht, wäre gut.
    Schau mal bei mir im Shop, der Header Text lässt sich doch gut anpassen
     
  5. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    25. Oktober 2017
    Beiträge:
    406
    Danke erhalten:
    137
    Danke vergeben:
    81
    #5 Anonymous, 29. Januar 2018
    Zuletzt bearbeitet: 29. Januar 2018
    Warum lässt sich das Bild nicht entsprechend verlinken?

    Auch heute noch gibt´s Monospace-Schriften. 15 Unterschiedliche bei Google Fonts. Rechts oben ist da ein Filter.
     
  6. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Ja, aber "normale" moderne Schriften machen das eher nicht. Wenn man das haben möchte, muss man eine solche Schrift einbinden.
     
  7. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    6. April 2017
    Beiträge:
    51
    Danke erhalten:
    0
    Danke vergeben:
    32
    Naja, dann müsste ich ein BIld der E-Mail in Kombination mit den anderen Daten einbinden, oder? Und das scheint mir schlecht um ein halbwegs ordentliches Bild (Aufgeräumtheit, Lesbarkeit, Raum) zu bekommen, da man dann ja auch noch die Konstante Bild passend einbinden (Habe reichlich wenig Ahnung von HTML/CSS) statt nur Text gebacken zu bekommen, hat.

    Jo, das finde ich sogar OK. Wobei ich mir aber nicht sicher bin, ob ich das zentriert haben wöllte. Jetzt hast mich auf die Idee mit dem Kontaktformular gebracht, um Spam vorzubeugen, falls das Sinn macht. Ausserdem finde ich es angenehmer für den Kunden als einen E-Mail client zu starten. Werde mal versuchen mich schlau zu machen, wie man da ein Kontaktformular hinbekommt.

    OK, "kerzengerade" war übertrieben, aber bei mir, das ist ja Katastrophe. Ich probiere einfach mit anderen Schriftarten rum? oder im HTML nicht mit non breaking space arbeiten, sondern mit ... ?

    Ich bekomme dieses feine "Buchstabengerücke" (kerning) in dieser Web-Welt hier einfach nicht gebacken.
     

    Anhänge:

  8. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Das geht mit einer kleinen Tabelle
    Und ein Kontakt-Formular hat der Shop im Standard schon
    Hänge mal ein
    /info/kontakt.html
    an Deine Domain
     
  9. Kai Stejuhn
    Kai Stejuhn Beta-Held
    Registriert seit:
    26. September 2014
    Beiträge:
    1.454
    Danke erhalten:
    743
    Danke vergeben:
    92
    Vielleicht ist das hier eine Lösung für Dich?
    HTML:
    <span style="width:100px; display:inline-block;">Telefon:</span>
    <span style="width:100px; ">0 00 00 / 00 00 00 0</span><br>
    <span style="width:100px; display:inline-block;">Telefax:</span>
    <span style="width:100px; ">0  00 00 / 00 00 00 0</span><br>
    <span style="width:100px; display:inline-block;">E-Mail:</span>
    <span style="width:100px; "><a href="mailto:xyz.xy">xyz@xyz.xy</a></span>
    
     
  10. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    6. April 2017
    Beiträge:
    51
    Danke erhalten:
    0
    Danke vergeben:
    32
    @Kai Stejuhn He, das mag ich. Vielen Dank. Verstehe nur nicht warum die px bei

    <span style="width:100px;

    nicht so wirklich hinhauen wenn ich andere Werte ausprobiere.

    @barbara

    ich glaube ich habe da irgendetwas zerschossen. Bin jetzt dabei mir da Gewissheit zu verschaffen.

    (Link nur für registrierte Nutzer sichtbar.)

    Wo bekomme ich denn einen ordentlichen HTML/CSS code her um wieder so ein Kontaktformular hinzukriegen? Oder liegt da irgendwie irgendwo was bei gambio?
     
  11. Kai Stejuhn
    Kai Stejuhn Beta-Held
    Registriert seit:
    26. September 2014
    Beiträge:
    1.454
    Danke erhalten:
    743
    Danke vergeben:
    92
    Welche Werte hast Du denn wie geändert?
     
  12. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    6. April 2017
    Beiträge:
    51
    Danke erhalten:
    0
    Danke vergeben:
    32
    @Kai Stejuhn Nur die px. Die Verhältnisse waren halt irgendwie nicht korrekt beim anpassen. Bei 50%weniger px ist es extrem rangerutsch beispielsweise. Ist aber kein Problem, bin gerade immer noch dran, jetzt versuche ich ein "Direkt Kontakt aufnehmen" bündig drunter zu setzen um dies dann mit einem Kontaktformular zu verlinken. Geht aber wohl nicht mit inline block, weil ich da Leerzeichen verwende? Einmal als ich es probiert habe ist alles zusammen gerückt "DirektKontaktaufnehmen" und in einer anderen Variante die ich probiert hatte sind die 3 Wörter untereinander gerutscht. Weiß aber jetzt nicht mehr, wie der Code jeweils dann aussah.
     
  13. Kai Stejuhn
    Kai Stejuhn Beta-Held
    Registriert seit:
    26. September 2014
    Beiträge:
    1.454
    Danke erhalten:
    743
    Danke vergeben:
    92
    Die Werte für den 1., 3., und 5. Wert müssen immer gleich sein. Zeig mal Deinen Code, dann schau ich mal drauf.
     
  14. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    6. April 2017
    Beiträge:
    51
    Danke erhalten:
    0
    Danke vergeben:
    32
    @Kai Stejuhn

    Hatte ursprünglich, warum auch immer Zeilen 2, 4 und 6 nicht übernommen aus deinem Code. Jetzt aber. Wenn ich da die px z. B. auf 50 jeweils ändere, rückt das ziemlich arg zusammen.

    Jetzt Verusche ich nur noch statt "Mail: xyz@xyz.xy" "Direkt Kontakt aufnehmen" bündig links darunter zu bekommen und das dann zum Kontaktformular zu verlinken.

    <span style="width:50px; display:inline-block;">Telefon:</span>
    <span style="width:100px; ">0 00 00 / 00 00 00 0</span><br>
    <span style="width:50px; display:inline-block;">Telefax:</span>
    <span style="width:100px; ">0 00 00 / 00 00 00 0</span><br>
    <span style="width:50px; display:inline-block;">Direkt Kontakt aufnehmen</span>


    So macht er
    -----

    Telefon: 0 00 00 / 00 00 00 0
    Telefax: 0 00 00 / 00 00 00 0
    Direkt
    Kontakt
    aufnehmen


    ----

    Sollte abermehr so:

    ---

    Telefon: 0 00 00 / 00 00 00 0
    Telefax: 0 00 00 / 00 00 00 0

    Direkt Kontakt aufnehmen

    ----

    Finde in diesem Forum übrigens keine Funktion um Text als Code zu markieren ... :/
     
  15. Kai Stejuhn
    Kai Stejuhn Beta-Held
    Registriert seit:
    26. September 2014
    Beiträge:
    1.454
    Danke erhalten:
    743
    Danke vergeben:
    92
    code.jpg
    Code kannst Du bei + einfügen.

    Nehme mal:
    HTML:
    <span style="width:55px; display:inline-block;">Telefon:</span>
    <span style="width:100px; ">0 00 00 / 00 00 00 0</span><br>
    <span style="width:55px; display:inline-block;">Telefax:</span>
    <span style="width:100px; ">0 00 00 / 00 00 00 0</span><br>
    <span style="width:250px; display:inline-block;">Direkt Kontakt aufnehmen</span>
    Das dürfte so sein wie Du es haben möchtest.
     
  16. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    6. April 2017
    Beiträge:
    51
    Danke erhalten:
    0
    Danke vergeben:
    32
  17. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    18. Januar 2015
    Beiträge:
    867
    Danke erhalten:
    96
    Danke vergeben:
    129
    Und falls nochmal jemand mit Bildern arbeiten möchte - früher hat man mit sowas gearbeitet (was immer noch gut funktioniert):
    (Link nur für registrierte Nutzer sichtbar.)

    LG: Tammy
     
  18. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    18. Januar 2015
    Beiträge:
    867
    Danke erhalten:
    96
    Danke vergeben:
    129
    Nachtrag:

    Im übrigen bevorzuge ich eine Klasse zu erstellen, die entweder in der usermod.css eingebunden wird, oder direkt im Content-Container.
    Das hat den Vorteil, wenn man mal eine Änderung z.B. der Breite vor hat, muss man nicht an x-verschiedenen Stellen rumfrickeln, sondern nur einmal in der Klasse. Sinnvoll wenn man vielleicht auch nochmal die Handynummer nachträgt oder andere Daten. Irgendwann schauts dann auch nicht mehr wirklich übersichtlich aus.

    Beispiel:

    im Content-Container direkt:

    HTML:
    <style type="text/css">
    .nummern-text {width:55px;display:inline-block;}
    .nummern {width:100px;}
    .infotext {width:255px;display:inline-block;}
    
    @media screen (max-width:400px) {
         .nummern-text {width:85px;display:inline-block;font-size:115%;}
         .nummern {width:130px;font-size:115%;}
         .infotext {width:315px;display:inline-block;font-size:115%;}
    }
    </style>
    
    <span class="nummern-text">Telefon:</span>
    <span class="nummern">0 00 00 / 00 00 00 0</span><br>
    <span class="nummern-text">Telefax:</span>
    <span class="nummern">0 00 00 / 00 00 00 0</span><br>
    <span class="infotext">Direkt Kontakt aufnehmen</span>
    
    Wenn Du den mediaquery noch verwendest, weil Du auf einem anderen Gerät noch eine andere Ansicht haben möchtest, ist das die bessere Lösung.

    Ansonsten die <style...> Geschichte weglassen, und nur den css Code in die usermod.css kopieren:

    HTML:
    /* Hier (D)einen Kommentar einfügen, z.b.: Meine Kontaktdaten in Header und Infobox3 */
    .nummern-text {width:55px;display:inline-block;}
    .nummern {width:100px;}
    .infotext {width:255px;display:inline-block;}
    
    @media screen (max-width:400px) {
         .nummern-text {width:85px;display:inline-block;font-size:115%;}
         .nummern {width:130px;font-size:115%;}
         .infotext {width:315px;display:inline-block;font-size:115%;}
    
    Nun kannst Du diesen Text:

    HTML:
    <span class="nummern-text">Telefon:</span>
    <span class="nummern">0 00 00 / 00 00 00 0</span><br>
    <span class="nummern-text">Telefax:</span>
    <span class="nummern">0 00 00 / 00 00 00 0</span><br>
    <span class="infotext">Direkt Kontakt aufnehmen</span>
    
    überall hinkopieren wo Du ihn haben willst. Z.B. im Header, im Footer und in einer der Infoboxen.

    Änderst Du nun z.B. die Breite von 55px auf 65px (was bei Dir ja jetzt nicht notwendig ist), gilt das für alle 3 eingefügten Elemente.
    Meine obigen Daten sind jetzt irgendwelche Werte - alles ungetestet. MediaQuery muss eh angepasst werden - vielleicht auch kleiner statt grösser. Soll nur ein Beispiel sein.

    LG: Tammy