André Blisse: Text im paragraph wird zerschossen wenn ich Teile fette

Liebe Forumsmitglieder,

dies ist mein erstes Posting, vorab vielen Dank an alle für die Hilfe und Inspirationen hier!

Zu meinem Problem: Ich habe einen Text in einem DIV in einem paragraph. Sobald ich Teile mit <strong> oder <h2> auszeichne wird der Text zerschossen. Teile rutschen hinter die im Layout veränderte Textstelle. Langes googeln brachte leider keine Hilfe. Nun hoffe ich auf Tipps von euch!

Vielen Dank im Voraus,

André

Hier der betroffene CSS und html-Teil:

* {
margin: 0;
padding: 0;
float: inherit;
}

html, body {
width: 100%;
height: 100%;
font-size: 100.01%;
}

body {
overflow: scroll;
background-image: url(graphics/logo_bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center 10%;
}

body,p,ul,ol,li,h1,h2,h3 {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
line-height: 19px;
font-weight: normal;
color: #000000;
}

p {
margin: 0;
padding: 0;
text-align: justify;
}

h1 {
font-weight: bold;
color: #971d2d;
margin: 0 0 8px 0;
padding: 0;
}

h2 {
font-weight: bold;
margin: 0;
padding: 0;
}

em {
font-style: italic;
}

strong {
font-weight: bold;
}

ul {
list-style-type: none;
margin:0;
padding:0;
}

li a {
display: block;
width: 170px;
margin:0;
padding-bottom: 1.5em;
text-decoration: none;
}

/* Layout-Container */

#distance {
width: 1px;
height: 50%;
margin-bottom: -300px;
float: left;
}

#wrapper {
position: relative;
clear: left;
left: 0px;
width: 20000px;
height: 600px;
margin: 0 auto;
padding: 0;
}

#line {
position: absolute;
top: 299px;
left: 0px;
margin: 0;
padding: 0;
width: 10000px;
height: 2px;
border-top: 2px solid #DEDEDE;
}

#navi {
position: relative;
float: left;
width: 170px;
margin: 0;
padding: 0 100px 0 30px;
}

.ankervor {
position:relative;
float:left;
height: 600px;
width: 100px;
margin: 0;
padding: 0;
}

.ankerleft {
position:relative;
float:left;
height: 600px;
width: 20px;
margin: 0;
padding: 0;
}

#team {
position: relative;
float: left;
width: 650px;
height: 550px;
margin: 0;
padding: 50px 0 0 0;
overflow: auto;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico" />
<title>axolotl Kommunikation &ndash; Startseite</title>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<a name="anker" id="anker"></a>

<div id="distance"></div>

<div id="wrapper">

<div id="line"></div>

<div id="navi">
<ul>
    <li><a href="index.html">home</a></li>
   <li><a href="axolotl.html">axolotl</a></li>
   <li><a href="#zie">zielgruppe</a></li>
   <li><a href="#kom">kommunikation</a></li>
   <li><a href="#tea">team</a></li>
   <li><a href="#kon">kontakt</a></li>
   <li><a href="#imp">impressum disclaimer</a></li>
</ul>
</div>

<div id="team">
  <h1>Axolotl, das Team I</h1>
  <p>Die Axo&shy;lotls kom&shy;men im Xochoi&shy;milco-See und im Chal&shy;co-See vor. Das Axo&shy;lotl Team aus dem Xochoi&shy;milco See: <b>André Blisse</b> Jahrgang 1964, Crea&shy;ti&shy;ve Di&shy;rec&shy;tor, 15 Jah&shy;re Be&shy;rufs&shy;er&shy;fah&shy;rung in der Wer&shy;bung als Tex&shy;ter und Team&shy;lei&shy;ter. Do&shy;zent und Coach an der Leu&shy;pha&shy;na Uni&shy;ver&shy;si&shy;tät Lü&shy;ne&shy;burg für Kom&shy;mu&shy;ni&shy;ka&shy;ti&shy;on und Selbst&shy;mar&shy;ke&shy;ting. So&shy;wie: Do&shy;zent an der Wirt&shy;schafts&shy;aka&shy;de&shy;mie Schles&shy;wig Hol&shy;stein; Un&shy;ter&shy;neh&shy;mens&shy;be&shy;ra&shy;tung CIC, Crea&shy;ti&shy;ve In&shy;no&shy;va&shy;ti&shy;ve Con&shy;sul&shy;tants, Lü&shy;beck; Fi&shy;li&shy;al&shy;chef lau&shy;ritz.com, Ham&shy;burg. Ma&shy;gis&shy;ter Ar&shy;ti&shy;um der an&shy;ge&shy;wand&shy;ten Kul&shy;tur&shy;wis&shy;sen&shy;schaf&shy;ten Er&shy;fah&shy;rung durch die Ar&shy;beit für: Volks&shy;wa&shy;gen, Volks&shy;wa&shy;gen Au&shy;to&shy;stadt, DHL, Dresd&shy;ner Bank, Bei&shy;ers&shy;dorf Eu&shy;ce&shy;rin, Bei&shy;ers&shy;dorf Te&shy;sa, Deut&shy;sche BA, Olym&shy;pus, Bea&shy;te Uh&shy;se, SAT1, Schwarz&shy;kopf Pro&shy;fes&shy;sio&shy;nal, Leu&shy;pha&shy;na Uni&shy;ver&shy;si&shy;tät Lü&shy;ne&shy;burg, Re&shy;gus Busi&shy;ness Cen&shy;ter, Es&shy;silor, Elec&shy;tro&shy;lux, Sony … Ar&shy;chi&shy;tek&shy;tur&shy;bü&shy;ro Mo&shy;ra&shy;we-Krü&shy;ger, NordA&shy;STra&shy;vel, Bruch Ar&shy;chi&shy;tek&shy;ten, Leu&shy;pha&shy;na Pro&shy;fes&shy;sio&shy;nal School, Leu&shy;pha&shy;na Frau&shy;en- und Gleich&shy;stel&shy;lungs&shy;bü&shy;ro, Ta&shy;fel&shy;fes&shy;te, Gol&shy;fre&shy;san, Ivon&shy;ne Schmal Er&shy;näh&shy;rungs&shy;be&shy;ra&shy;tung … Sta&shy;tio&shy;nen auf dem Weg zu Axo&shy;lotl Kom&shy;mu&shy;ni&shy;ka&shy;ti&shy;on: andré blis&shy;se con&shy;cept, Lü&shy;beck; Fritsch Hei&shy;ne Rapp Collins, Ham&shy;burg; FCB/Wil&shy;kens Di&shy;rect, Ham&shy;burg; Frahm und Wan&shy;delt, Ham&shy;burg; Bo&shy;zell Di&shy;rect Fri&shy;ends, Ham&shy;burg</p><p><a href="#anker">zum anfang</a></p>
</div>
<div class="ankervor">
</div>
<div class="ankerleft">
   <h4><a  name="tea" id="tea">&nbsp;</a></h4>
</div>

  1. Hi,

    Zu meinem Problem: Ich habe einen Text in einem DIV in einem paragraph. Sobald ich Teile mit <strong> oder <h2> auszeichne wird der Text zerschossen. Teile rutschen hinter die im Layout veränderte Textstelle.

    Natürlich, schließlich floatest du diese Elemente nach links.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Hallo ChrisB,

      vielen Dank für deinen Hinweis.

      Wie komme ich raus aus dem Dilemma?
      position:absolute; einsetzen um so das float:left; zu umgehen?
      Oder weißt du einen anderen Weg?

      Viele Grüße

      André

      Hi,

      Zu meinem Problem: Ich habe einen Text in einem DIV in einem paragraph. Sobald ich Teile mit <strong> oder <h2> auszeichne wird der Text zerschossen. Teile rutschen hinter die im Layout veränderte Textstelle.

      Natürlich, schließlich floatest du diese Elemente nach links.

      MfG ChrisB

      1. Hi,

        Wie komme ich raus aus dem Dilemma?

        Elemente, die du nicht gefloatet haben willst, nicht mit float formatieren ...?

        * {  
         margin: 0;  
         padding: 0;  
         float: inherit;  
        }
        

        Streiche float:inherit hier einfach - das ist ziemlicher Unfug.
        Gebe es stattdessen für die Elemente, die du tatsächlich floaten willst, explizit an - und nur für diese.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?