• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Padding TXT neben Float IMG

rantanplan2000

rantanplan2000

Mitglied
Ich habe schon öfters ein Prolblem, welches ich mit tricksen immer umgangen habe. Doch jetzt reichts mir! :D

elefant1dbkac3fep.jpg


Ihr erkennt mein problem sicher, wenn nicht:
bis jetzt habe ich immer dem img einen padding oder margin gegeben, doch wenn ich jetzt der schrift einen hintergrund geben will, habe ich kein abstand zum bild. also muss ich mal forschen wie ich das richtig machen kann, das der text auch den abstand zu bild bekommt.

hier mein code:


Code: 
<!DOCTYPE html>
<html lang="de">

<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Debugger</title>
                                                                 
<style type="text/css">
   
    .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto; }
 
  .same-lane-container {
    overflow: hidden;
  }
  .same-lane h1 {
    position: relative;
    margin-left: 0;
    padding-left: 20px;
  }
  .same-lane img {
    display: block;
    float: left;
  }
 
</style>
</head>   

<body>

<div class="container">
<div class="same-lane-container">
<div class="same-lane">
<img src="http://www.nature-rings.de/media/product/29/elefant_hires.jpg" alt=""/>
<h1>Hallo Elefant - töröööööööh</h1>
</div>
</div>

</body>
</html>
 
Danke für deine Mühe. :-) Ja, eventuell muss ich doch mal Flexbox einsetzen. :-) Mit einem <span> geht mein Beispiel übrigens. Nur keine H und Ps :D Merkwürdig.
 
rantanplan2000 schrieb:
Mit einem <span> geht mein Beispiel übrigens. Nur keine H und Ps :D Merkwürdig.
Zum Vergrößern anklicken....
Daran ist überhaupt nichts merkwürdig :D

<span> = Inline-Element & <h1>, <p> = Block-Element.

Probier's mal zum Vergleich in Deiner Float-Umgebung mit
CSS: 
.same-lane h1 {
  display: inline; /* Inline-Box */
  margin: 0 0 0 20px;
  padding-left: 0;
  background: red
  }
oder
CSS: 
.same-lane h1 {
  margin: 0 0 0 452px; /* Bildbreite + 20px */
  padding-left: 0;
  background: red
  }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben