Get your ticket! JETZT Ticket sichern! Contao Konferenz am 07. & 08. Juni 2018 & Contao College am 06. Juni 2018 im WYNDHAM GRAND Conference Center in Salzburg, Österreich
Ergebnis 1 bis 7 von 7

Thema: HRef: Titel und Logo vertikal zentrieren.

  1. #1
    Contao-Nutzer
    Registriert seit
    21.08.2017.
    Beiträge
    26

    Standard HRef: Titel und Logo vertikal zentrieren.

    Hallo liebe Community,

    ich weiß leider nicht mehr weiter.

    Ich möchte die Logos und den Titel zu Href vertikal zentrieren.
    Aber ich schaffe es nicht.

    Aktuell ist es so das die Elemente innterhalb von <p></p> vertikal wie folgt angeordnet sind:
    *) Das Logo liegt vertikal oben
    *) Der Text liegt vertikal unten.

    HeaderInfo.png
    HeaderInfo-NEU.png

    Mein Code:
    HTML-Code:
    <div id="HINFO">
      <div id="HMail">
        <p><a href="mailto:office@test.at">office@test.at - <img src="assets/images/1/Logo_Mail.png" alt="EMail" width="20" height="20"></a></p>
      </div>
      <div id="HTel">
        <p><a href="tel:+4301234567890">+43 (0) 123 456 789 0 - <img src="assets/images/0/Logo_Phone.png" alt="Telefon" width="20" height="20"></a></p>
      </div>
      <div id="HFace">
        <p><a href="https://www.facebook.com/test/" target="_blank" rel="noopener">Besuchen Sie uns auch auf - <img src="assets/images/b/Logo_Facebook.png" alt="Facebook" width="20" height="20"></a></p>
      </div>
      <div id="GPlus">
        <p><a href="https://plus.google.com/0001" target="_blank" rel="noopener">Folgen Sie uns auch auf - <img src="assets/images/8/Logo_GPlus.png" alt="Google Plus" width="20" height="20"></a></p>
      </div>
    </div>
    PHP-Code:
    ...
    #header #HINFO {
        
    text-align:right;
        
    justify-selfend;
        
    align-selfcenter;
        -
    ms-grid-row1;
        -
    ms-grid-column2;
        -
    ms-grid-column-alignend;
        -
    ms-grid-row-aligncenter;
    }
    #header #HINFO p {
        
    margin:0;
    }
    #header #HINFO a {
        
    margin:0;
        
    text-decoration:none;
    }
    #header #HLogo img {
        
    height:100%;
        
    text-decoration:underline;
    }... 
    Geändert von Christian001 (09.02.2018 um 07:59 Uhr)

  2. #2
    Alter Contao-Hase Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.431

    Standard

    Was genau möchtest du erreichen? Kannst du eine Skizze zeigen? Und gibt es vielleicht sogar schon eine URL, wo man deine Versuche sehen kann?

    Gruß, folkfreund
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  3. #3
    Contao-Nutzer
    Registriert seit
    21.08.2017.
    Beiträge
    26

    Standard

    Hallo folkfreund,

    die Skizze HeaderInfo-NEU.png

    Homepage ist noch offline - daher gibt es noch keinen URL.
    Geändert von Christian001 (09.02.2018 um 09:03 Uhr)

  4. #4
    Alter Contao-Hase Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.431

    Standard

    Ah, ok. Jetzt verstehe ich dein Anliegen.

    Deine Logos haben alle eine feste Größe von 20x20 Pixel. Es ist mir aber nicht ersichtlich, welche Schriftgröße zum Einsatz kommt.

    Ich würde es bei deiner HTML-Struktur mal so versuchen (ungetestet):
    Code:
    #header #HINFO p {
      line-height: 1.5em;
      min-height: 20px;
      vertical-align: middle;
    }
    #header #HINFO img {
      vertical-align: middle;
      width: 20px;
      height: 20px;
      display: inline-block;
    }
    Mein Favorit für solche Situationen wäre allerdings, die Bilder nicht als <img> einzubinden, sondern per CSS durch ::before oder ::after entweder als Zeichen aus einem Font (z.B. FontAwsome) oder als Background-Image. Vorteil: bei einer Designänderung musst du nicht den Seiteninhalt ändern, sondern du kannst einfach einen anderen Zeichensatz/andere Grafiken per CSS wählen.

    Edit: CSS ergänzt
    Geändert von folkfreund (09.02.2018 um 15:30 Uhr)
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  5. #5
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    557

    Standard

    Ich stimme folkfreund zu, würde das auch mit Pseudo-Klassen umsetzen, oder wenn Du es unbedingt so machen willst mit dem <img>, dann versuche es doch mit flexbox.
    Wenn ich mir oben anschaue was du versucht hast, wolltest du wohl flexbox nutzen aber display:flex; kommt nicht vor.
    Bei dem unteren Beispiel von folkfreund fehlt aber noch display:inline-block; , wenn ich das gewünschte Ergebnis richtig verstehe

    Ach nee sehe gerade Du willst wohl alles vom a tag (Bild und Text )umschlossen haben, dann wie gesagt Pseudoklassen verwenden!
    Geändert von Bennie (09.02.2018 um 12:38 Uhr)

  6. #6
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.494
    User beschenken
    Wunschliste
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  7. #7
    Alter Contao-Hase Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.431

    Standard

    So meinte ich das! Danke Andreas :-)
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •