MrMurphy1: Positionierungs eines Bildes mit position:absolute

Beitrag lesen

SELF-Forum

Positionierungs eines Bildes mit position:absolute

MrMurphy1 (Versionen)
– Informationen zu den Bewertungsregeln

Hallo,

der Container könnte zum Beispiel folgendermaßen erstellt werden:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title> Text positionieren 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      .contactbox {
         width: 560px;
         box-shadow:
            0 0 0 1px #dfdfdf,
            0 0 9px rgba(0, 0, 0, 0.2)
            ;
         padding: 0 0 0.5rem 0;
         border: 1px solid #dfdfdf;
         margin: 0.5rem;
      }
      .contactbox img {
         display: block;
         max-width: 80%;
         border-top: 4px solid #ec8624;
         margin: 0 auto;
      }
      .contactbox span {
         text-align: center;
         font-style: normal;
         display: block;
      }
      .contactbox span:nth-child(2) {
         color: #ec8624;
         font-size: 3rem;
         line-height: 1;
         margin: 0.5rem 0 0 0;
      }
      .contactbox span:nth-child(3) {
         color: #ec8624;
         font-size: 1.5rem;
         line-height: 1;
         margin: 0 0 0.5rem 0;
      }
      .contactbox span:nth-child(4) {
         color: gray;
         font-size: 1rem;
         margin: 0 0 0.5rem 0;
      }
   }
   </style>
</head>
<body>
   <address class="contactbox">
      <img src="http://lorempixel.com/500/350/business" alt="">
      <span>&#9743;</span>
      <span>0176/65123789</span>
      <span>Ihre Express-Schnittstelle</span>
   </address>
</body>
</html>

Größen, Abstände, Farben, Schriftarten, das Telefonsymbol und alles andere kann natürlich noch angepasst werden.

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln