[CSS] Befehl Float richtig einsetzen

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    [CSS] Befehl Float richtig einsetzen

    Hallo Zusammen,

    bin ein blutiger Anfänger und habe ein kleines Problem.
    Habe in einem CSS Container einen Box eingebaut. In dem Box sollen
    Bilder unt Text platzier werden. Der Text soll Um das Bild herumfließen.
    Dafür gibt es ein Befehl: float
    Das will und will nicht richtig funktionieren.
    Bei zB. "float:left;" wird zwar das Bild Links platziert aber der Text statt
    kontinuierklich herumzufließen (so wie es in vielen Beispielen oft dargestellt wird) wird nach wenigen Zeilen mit einem großen Sprung links unter dem Bild weitergeführt.

    Habe diverse Variationen ausprobiert aber leider ohne Erfolg.
    Muss ich hier vielleicht doch eine HTML-Tabellen einsetzen?

    Und so sieht momentan der Code aus:

    Code:
    .
.
.
#container {
margin-left:150px;
margin-right:150px;
width:750px;
height:800px;
border-left:1px solid #000;
Border-right:1px solid #000;
border-bottom:1px solid #000;
background-color:#0099cc;
}

.
.
.
.box_text {
margin:-312px 0px 5px 180px;
height:632px;
border-top:1px solid #000;
background-color:#ffffff;
font-family:verdana;
font-size:10px;
font-weight:500;
padding-left:5px;
padding-top:5px;
width:565px;
}
.
.
.
<body>
<div id="container">
<div class="box_text"><img src="bild.jpg" style="float:left;"> hier Beispieltext </div>
</body>
    Danke und Grüße
    Stichworte: -
  • #2
    Berichtige erstmal dein HTML. Da fehlt ein "</div>".
    "float: left" sollte eigentlich den von Dir erwünschen Effekt zeitigen. Was passiert, wenn Du es ohne Container probierst? Also nur Bild und Text?

    Kommentar

    • #3
      Code:
      <div id="container">
      wird nirgendwo geschlossen. Warum hast du beim Margin von .box_text einen negativen Wert? Passt die line-height zur font-size?
      Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

      Kommentar

      • #4
        ev. den Beispieltext in ein <p> packen?
        "I don't want to belong to any club that would accept me as a member."

        Groucho Marx

        Kommentar

        • #5
          Float richtig einsetzen

          Hallo,
          Sorry, der abschließende </div> fehlt im original Quellcode nicht, nur hier habe ich versehentlich gelöscht.

          In dem "container" befinden sich dieverse "boxe". U.A .box_text.
          um richtig zu positionieren es war notwendig ihm einen negativen Wert zu vergeben.
          In diesem ".box_text" sollen par Bilder mit den zugehörigen Texten platziert werden.
          Der Text soll das Bild umfließen.Je nach Wunsch, einmal von Links, einmal von rechts.

          Wie schon beschrieben, "float" funktioniert bei mir nicht so gut.

          1./ Wenn eine Zeile mal länger ist wird mit einer neuen Zeile unter der Grafik angefangen, satt um sie herumzufliessen.
          2./ Ab und zu schreibt schon mal über den box-Rand hinaus
          3./ "float: left oder right" bewirkt bei mir nur, dass der Grafik entweder links oder rechts vom Schrift platziert wird

          Ohne "Container" geraten die diversen Boxen durcheinander, deshalb kann man darauf nicht verzichten.

          Habe mal meine Testseite hier hineinkopiert.
          Tatsache ist, so läuft es irgendwie nicht.

          Die Frage ist, was ist hier falsch?

          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>CSSUbungen</title>
<meta name="RS" content=""> <meta
 name="generator" content="SuperHTML 7.0"> <style
 type="text/css">
#container {
margin-left:150px;
margin-right:150px;
width:750px;
height:800px;
border-left:1px solid #000;
Border-right:1px solid #000;
border-bottom:1px solid #000;
background-color:#0099cc;
}
.box_logo {
margin: 0px 0px 5px 0px;
height:90px;
widt:750px;
border-top:1px solid #000;
background-color:#efefef;
}
.box_title {
margin:0px 0px 5px 180px;
height:16px;
background-color:#dfdfdf;
font-family:verdana;
font-size:12px;
font-weight:bold;
padding-left:5px;
padding-top:2px;
width:565px;
}
.box_menue {
margin:0px 30px 5px 15px;
height:300px;
width:145px;
border-top:1px solid #000;
background-color:#ffffff;
font-family:verdana;
font-size:10px;
padding-left:5px;
padding-top:5px;
}
.box_text {
margin:-312px 0px 5px 180px;
height:632px;
border-top:1px solid #000;
background-color:#ffffff;
font-family:verdana;
font-size:10px;
font-weight:500;
padding-left:5px;
padding-top:5px;
width:565px;
}
.box_bottom {
margin:27px 0px 0px 0px;
height:15px;
border-top:1px solid #000;
background-color:#dfdfdf;
font-family:verdana;
font-size:10px;
color:blue;
padding-top:1px;
padding-left:38%;
}
</style></head><body><div id="container">
<div class="box_logo">12</div>
<div class="box_title">Testschrift</div>
<div class="box_menue">??</div>
<div class="box_text"><img src="PC-Mann.jpg"
 style="width: 116px; height: 110px; float: left;">Hier Text der
herumfliessen soll</div><div class="box_bottom">Home
| Kontakt | AGB | Impressum</div>
</div></body></html>
          Danke und Grüße

          Kommentar

          • #6
            Also ich persönlich hab nicht die Zeit und Lust, mich durch den Quellcode zu wühlen. Dein Anliegen läßt sich auf jeden Fall mit CSS realisieren, das schon legionen von Webdesignern hinbekommen. Es ist nur ein bisschen mehr Gefitzel als früher. Float:left ist auf jeden Fall der Schlüssel.

            Was nicht möglich ist, ist, ein Bild so zu platzieren, daß der Text links und rechts vorbeifließt.

            Wenn Du weitere Tipps willst, stell ein Beispiel mit Problembeschreibung Online.

            Kommentar

            • #7
              Meinst du mit umfliessen das:
              PHP-Code:
              <div class="box_text">
               <              img src="PC-Mann.jpg" style="width: 116px; height: 110px; float: left;">
              <              p style="margin-left:120px;">ein ganz langer Text</p>
              </              div> 
              Das margin-left im <p> Tag muß die Masse vom Bild haben...

              Aber eigentlich umfließt der Text das bild bei deinem Bsp doch schon, steht neben dem Bild und wenn das Bild aufhört rutscht die zeile nach links, "umfließt" eben...
              Zuletzt geändert von mcmurphy; 04.03.2009, 12:40.
              "I don't want to belong to any club that would accept me as a member."

              Groucho Marx

              Kommentar

              • #8
                <meta name="generator" content="SuperHTML 7.0">
                Ist das nur nen Editor oder son Bunti-Bunti-Klicki-Klicki-Ding?

                Ich denke in jedem Fall, dass du viel zu viel Quelltext verwendest um ganz simple Sachen zu machen. Im Zweifelsfall würd ich dir sogar direkt raten, einfach nochmal den entsprechenden Teil komplett neu zu machen, Schritt für Schritt, dann wirst du ja ausmachen können an welcher Stelle der vermeintliche Fehler auftritt.
                Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

                Kommentar

                • #9
                  Oo? entweder verstehst du nicht wie Float arbeitet oder du hast im Orginal noch ganz andere dinge getan.

                  Weil der Quellcode macht genau das was er soll auch das Float arbeitet wie erwartet

                  Code:
                  <body><div id="container">
<div class="box_logo">12</div>
<div class="box_title">Testschrift</div>
<div class="box_menue">??</div>
<div class="box_text"><img src="PC-Mann.jpg"
 style="width: 116px; height: 110px; float: left; border:1px solid black;">Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
(...)
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
<img src="PC-Mann.jpg"
 style="width: 116px; height: 110px; float: right; border:1px solid black;">herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
(...)
herumfliessen soll </div><div class="box_bottom">Home
| Kontakt | AGB | Impressum</div>
</div></body></html>
                  und ich hab nichts anderes getan außer dein beispieltext zu dublizieren und dem img nochn border zu geben.
                  Bitte Beachten.
                  Foren-Regeln
                  Danke

                  Kommentar

                  • #10
                    @canonn
                    vielleicht mal das hier lesen.

                    peter
                    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                    Meine Seite

                    Kommentar

                    Vorherige template Weiter
                    Lädt...
                    X