killer1989: css problem

hallo!

ich möchte alles was in einem p-tag steht etwas von der überschrift einrücken.

der absatz und die überschrift stehen in einem div container "text", der wiederrum in einem div-container "content" steht. und dieser wird von einem weiterem div-container namens bar umgefloated, sodass bar links steht und der inhalt von content sich nach rechts ausstrecken darf.

<div id="bar">
</div>

<div id="content">
<div id="text">
<h1>überschrift schön gross</h1>
<p>Nein, meine Texte les ich nicht, so nicht, sthnte Oxmox. Er war mit Franklin,
  Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel)
  zugange. Sie warteten auf die fette Gill, um bei der Bank of Helvetica die Kapitlchen
  in Kapital umzuwandeln. F </p>
  </div>
</div>

und im css file steht:

#bar {
width:209px; /*box model hack reinmachen*/
height:100%;
/*top:0px;
left:0px;*/
background-color:#E5E5E5;
z-index:10;
float:left;
margin-right:10px;
border:0px solid blue;
}

#content {
/*float:right;*/
border: 1px solid white;
padding-top: 0,3em;
padding-right: 1em;
z-index:5;
/*margin-top:50px;*/
}

#text {
padding:0;
margin:0;
}

#text p {
/*margin-left: 20px;*/
padding-left:15px;
}

-----------------------------------------------------

padding oder margin den ich auf die p abschnitte anwenden wil, funktioniert zwar vertikal aber nicht horizonal, da das float element (hier: bar) ja aus dem normalen boxen modell "springt".

ich könnte den padding von "bar" erhöhen, damit würde ich den abstand zwischen schrift und bar vergrössern. nur wie bekomme ich dann die überschrft wieder näher an bar damit es insgesamt so aussieht wie auf meinem bild?

gibt es noch ne einfachere lösung auf die ich nicht komme?

  1. hallo killer,

    meinst du text-indent? gruss,

    michael

    ss:) zu:) ls:& fo:) de:> va:) ch:? n4:& rl:? br:< js:| ie:% fl:{ mo:|

    1. hallo killer,

      meinst du text-indent? gruss,

      hi michael

      mmh fast.
      mit text indent kriege ich es nur hin, dass die erste zeile eingrückt wird, aber nicht der gesamte absatz.

      1. hallo killer,

        probiere margin-left: 50px; und text-indent: -50px;
        habe ich nicht getestet, muesste aber gehen. gruss,

        michael
        ls:& fo:) de:> va:) ch:? n4:& rl:? br:< js:| ie:% fl:{ mo:|

        1. probiere margin-left: 50px; und text-indent: -50px;

          ist das nciht usinn? hab ich getestet und schiebt mir die erste zeile des absatzes nach rechts.

          mit margin kann es ja nicht funktionieren weil nebendran ein float element liegt.

          tortzdem danke.

          killer1989

  2. Hallo killer1989

    gibt es noch ne einfachere lösung auf die ich nicht komme?

    Ja!

    Beschäftige dich mit http://d-graff.de/demos/selfhtml/float_left_test.html, dann fällt dir die Lösung mit Sicherheit selbst ein.

    MFG
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!