MrMurphy1: Karte neben neben Adresse platzieren

Beitrag lesen

SELF-Forum

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