Text/Listenausrichtung in float-Umgebung

botnico · 21 März 2016

Ich will Text rechts um ein Bild fließen lassen. Das klappt soweit.
Aber die Ausrichtung passt nicht. Die <ul> Listen sind mit list-style-position: outside;
so eingestellt, dass die discs bündig zum Text sind. Neben dem Bild verhält sich das
aber anders: Jetzt ist der Text bündig zu den Listen-Texten. Also zu weit rechts. Weiss
jemand an was das liegt?

http://chaph.opaya.de/test.html

MrMurphy · 21 März 2016

Hallo

Weiss jemand an was das liegt?

Ja. Du verwendest float ohne dich vorher über dessen Auswirkungen informiert zu haben.

Die CSS-Anweisung

Code:

      div.clearfix ul {
         ...
         margin-left: 15px;
      }

funktioniert deshalb nicht. Du kannst ja mal 150px eingeben und wirst keinen Unterschied entdecken. Bei 650px sollte sich sichtbar etwas tun.

Weiterhin sollten grundsätzlich einige Regeln beachtet werden, die du aber nicht angewandt hast.

Andererseits haben sich einige HTML-Elemente und CSS-Anweisungen in der Praxis eher als hinderlich erwiesen und sollten vermieden werden. Ich habe deshalb mal einen sinnvollen Quelltext erstellt:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Float mit Liste 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>

   /* Float und Clearfix - Micro-Clearfix-Hack */
   @media all {
      .floatlinks {
         float: left;
      }
      .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: 100%;
         line-height: 1.3;
      }
      body {
         background-color: #666;
         margin: 0;
      }
      main {
         background-color: #E8E8E8;
         width: 72.8%;
         padding: 0 10px 10px 10px;
      }
      .liste01 p {
         margin-top: 0;
      }
      .liste01 ul {
         padding-left: 16px;
      }
      figure {
         margin: 0;
      }
      figure img {
         max-width: 100%;
         display: block;
      }
      figure.floatlinks {
         margin-left: 0px;
         margin-right: 35px;
         margin-bottom: 15px;
      }
   }

   </style>
</head>
<body>
   <main>
      <div class="liste01">
         <p>Die Vorteile:</p>
         <ul>
            <li>Vorteil 1</li>
            <li>Vorteil 2</li>
            <li>Vorteil 3</li>
         </ul>
      </div>
      <div class="cf">
         <figure class="floatlinks">
            <img src="http://chaph.opaya.de/test.jpg" alt="Testbild">
         </figure>
         <div class="liste01 floatlinks">
            <p>Die Nachteile:</p>
            <ul>
               <li>Nachteil 1</li>
               <li>Nachteil 2</li>
               <li>Nachteil 3</li>
            </ul>
         </div>
      </div>
      <p>Und hier gehts dann weiter.</p>
   </main>
</body>
</html>

Gruss

MrMurphy

Text/Listenausrichtung in float-Umgebung

botnico

Neues Mitglied

MrMurphy

Senior HTML'ler

Neueste Beiträge