André: Karte neben neben Adresse platzieren

SELF-Forum

Karte neben neben Adresse platzieren

André
– Informationen zu den Bewertungsregeln

Hallo,

ist es möglich ohne weiteres divs einfügen zu müssen die Karte links von der Adresse zu platzieren? Die h4 soll weiterhin über allem stehen.

<section class="adresse"> <img src="img/standorte.png" alt="Unsere Standorte">
  <h4>Kontakt</h4>
  <p>Name<br>
    Straße<br>
    PLZ / Ort</p>
  <p>E-Mail: <a href="mailto:info@example.com">info@example.com</a></p>
</section>
Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Karte neben neben Adresse platzieren

    MrMurphy1
    – Informationen zu den Bewertungsregeln

    Hallo

    ist es möglich ohne weiteres divs einfügen zu müssen die Karte links von der Adresse zu platzieren? Die h4 soll weiterhin über allem stehen.

    Theoretisch: Ja. Sinnvoll: Nein.

    Das Hauptproblem ist, dass sich die Karte im Quelltext oberhalb der Überschrift befindet.

    Gruss

    MrMurphy

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Karte neben neben Adresse platzieren

      André
      – Informationen zu den Bewertungsregeln

      Hallo,

      Theoretisch: Ja. Sinnvoll: Nein.

      also lieber ein DIV um die zwei Bereiche legen?

      Das Hauptproblem ist, dass sich die Karte im Quelltext oberhalb der Überschrift befindet.

      Da bi ich flexibel, wenn ich es anderes platzieren soll, ist dieses jederzeit möglich.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Karte neben neben Adresse platzieren

        MrMurphy1 (Versionen)
        – Informationen zu den Bewertungsregeln

        Hallo

        Da bi ich flexibel, wenn ich es anderes platzieren soll, ist dieses jederzeit möglich.

        Wenn im Quelltext zunächst die Überschrift steht, dann das Bild und dann der Rest muss das Bild doch nur nach links gefloatet werden und das section-Element bekommt ein clearfix mit auf den Weg.

        Zudem sollte auf die br-Elemente verzichtet werden, da sie die Gestaltung erschweren.

        Das könnte zum Beispiel so aussehen:

        <!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Bild nach links 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /* Clearfix - Micro-Clearfix-Hack */
   @media all {
      .cf::before,
      .cf::after {
         content: " "; /*Leerstelle ist wichtig*/
         display: table;
      }
      .cf::after {
         clear: both;
      }
   }

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 90%;
         margin: 1rem auto;
      }
      .adresse img {
         float: left;
         margin-right: 1rem;
      }
   }

   </style>
</head>
<body>
   <section class="adresse cf">
      <h4>Kontakt</h4>
      <img src="http://lorempixel.com/300/200/transport/1" alt="Unsere Standorte">
      <p>Name</p>
      <p>Straße</p>
      <p>PLZ / Ort</p>
      <p>E-Mail: <a href="mailto:info@example.com">info@example.com</a></p>
   </section>
</body>
</html>

        Gruss

        MrMurphy

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Karte neben neben Adresse platzieren

          André
          – Informationen zu den Bewertungsregeln

          Hallo,

          Wenn im Quelltext zunächst die Überschrift steht, dann das Bild und dann der Rest muss das Bild doch nur nach links gefloatet werden und das section-Element bekommt ein clearfix mit auf den Weg.

          Zudem sollte auf die br-Elemente verzichtet werden, da sie die Gestaltung erschweren.

          vielen lieben Dank für das Beispiel, ich teste es auf meiner Seite. Wenn ich Name, Straße, PLZ / Ort in einzelne <p> packe, dann haben die so viel Abstand dazwischen, deshalb habe ich es mit <br> umgesetzt.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Karte neben neben Adresse platzieren

            Der Martin
            – Informationen zu den Bewertungsregeln

            Hi,

            Wenn ich Name, Straße, PLZ / Ort in einzelne <p> packe, dann haben die so viel Abstand dazwischen, deshalb habe ich es mit <br> umgesetzt.

            Abstände sind Sache von CSS, da wäre also der richtige Ansatzpunkt.

            Allerdings finde ich, dieses Beispiel ist einer der Fälle, wo <br> durchaus zu vertreten ist. Ob das umschließende Element dann aber ein <p> sein sollte, kann man noch in Frage stellen - ein Textabsatz im eigentlichen Sinn ist es ja eher nicht.

            So long,
             Martin

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          2. Karte neben neben Adresse platzieren

            MrMurphy1
            – Informationen zu den Bewertungsregeln

            Hallo

            Wenn ich Name, Straße, PLZ / Ort in einzelne <p> packe, dann haben die so viel Abstand dazwischen

            Das wird mit CSS angepasst. In diesem Fall zum Beispiel durch hinzufügen von

                  .adresse p {
         line-height: 1;
         margin-top: 0;
         margin-bottom: 0.3rem;
      }

            Gruss

            MrMurphy

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          3. Karte neben neben Adresse platzieren

            Matthias Apsel
            – Informationen zu den Bewertungsregeln

            Hallo André,

            vielen lieben Dank für das Beispiel, ich teste es auf meiner Seite. Wenn ich Name, Straße, PLZ / Ort in einzelne <p> packe, dann haben die so viel Abstand dazwischen, deshalb habe ich es mit <br> umgesetzt.

            Hast du dich aus einem ähnlichen Grund für h4 entschieden? Auch section scheint mir fehl am Platz. Für mich sieht das nach einem Anwendungsfall von address aus.

            Bis demnächst
            Matthias

            --
            Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Karte neben neben Adresse platzieren

              Matthias Apsel Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hallo Matthias Apsel,

              Hast du dich aus einem ähnlichen Grund für h4 entschieden? Auch section scheint mir fehl am Platz. Für mich sieht das nach einem Anwendungsfall von address aus.

              Also so:

              <h2>Kontakt</h2>
<address> 
  <img src="img/standorte.png" alt="Unsere Standorte">
  <p>Name<br>
     Straße<br>
     PLZ / Ort<br>
     Telefon: <a href="tel:+492111226600">+49 (0)2111 226600</a><br>
     E-Mail: <a href="mailto:info@example.com">info@example.com</a></p>
</address>

              address {
  display: flex;
}

              Beachte auch die klickbare Telefonnummer.

              Bis demnächst
              Matthias

              --
              Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Karte neben neben Adresse platzieren

                Gunnar Bittersmann Homepage des Autors
                – Informationen zu den Bewertungsregeln

                @@Matthias Apsel

                <address> 
  <img src="img/standorte.png" alt="Unsere Standorte">

                Gehört die Karte wirklich ins address-Element? Muss nicht unbedingt falsch sein …

                „Unsere Standorte“ ist aber kein wirklich hilfreicher Alternativtext. Da sollten schon die Städte genannt sein.

                     Telefon: <a href="tel:+492111226600">+49 (0)2111 226600</a><br>

                Wobei im tel-URI auch Bindestriche erlaubt sind, IIRC: "tel:+49-2111-226600".

                Was soll der Unsinn mit der eingeklammerten 0? Entweder +49 2111 226600 oder 02111 226600.

                LLAP 🖖

                --
                „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                „Hat auf dem Forum herumgelungert …“
                (Wachen in Asterix 36: Der Papyrus des Cäsar)
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Karte neben neben Adresse platzieren

                  Matthias Apsel Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  Hallo Gunnar Bittersmann,

                  Was soll der Unsinn mit der eingeklammerten 0? Entweder +49 2111 226600 oder 02111 226600.

                  Das ist für die Überschlauen. Aber da hab ich nicht wirklich drüber nachgedacht. Es ist eine Schreibweise, die mir häufig begegnet.

                  Bis demnächst
                  Matthias

                  --
                  Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

        2. Karte neben neben Adresse platzieren

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@MrMurphy1

          Zudem sollte auf die br-Elemente verzichtet werden, da sie die Gestaltung erschweren.

          ?? Inwiefern?

          Das könnte zum Beispiel so aussehen:

                <p>Name</p>
      <p>Straße</p>
      <p>PLZ / Ort</p>
      <p>E-Mail: <a href="mailto:info@example.com">info@example.com</a></p>

          Nö, die Bestandteile einer Adresse sind keine einzelnen Textabschnitte.

          Entweder br verwenden oder span (bzw. ein custom element wie x-l) mit display: block.

          LLAP 🖖

          --
          „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
          „Hat auf dem Forum herumgelungert …“
          (Wachen in Asterix 36: Der Papyrus des Cäsar)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Karte neben neben Adresse platzieren

            Gunnar Bittersmann Homepage des Autors (Versionen)
            – Informationen zu den Bewertungsregeln

            @@Gunnar Bittersmann

            Nö, die Bestandteile einer Adresse sind keine einzelnen Textabschnitte.

            Entweder br verwenden oder span (bzw. ein custom element wie x-l) mit display: block.

            Wie Kontaktdaten mit Schema.org/RDFa ausgezeichnet werden können siehe http://schema.org/PostalAddress unter „Examples“, Reiter „RDFa“.

            LLAP 🖖

            --
            „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
            „Hat auf dem Forum herumgelungert …“
            (Wachen in Asterix 36: Der Papyrus des Cäsar)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln