Ergebnis 1 bis 9 von 9

Thema: Frage zum Thema float

  1. #1
    HTML Newbie
    Registriert seit
    25.01.2019
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Frage zum Thema float

    Ich habe hier einen HTML-Code

    Code:
    <div class="buchungsinfo_rahmen">
    <div class="buchungsinfo_kopf"><img src="ok.png" width="50px" alt="" style="float: right;" />
    <p>Ihre Buchungsinformationen:</p>
    </div>
    <div class="buchungsinfo_body">
    <p>Preis pro Teilnehmer: 320,00 EUR</p>
    </div>
    <div class="buchungsinfo_preis">
    <p>25,00 EUR</p>
    </div>
    </div>

    Dazugehörig ist diese CSS:



    Code:
    .buchungsinfo_rahmen {
        background-color: #ddd !important;
        border: 1px dotted black;
        padding: 10px;
        height: auto;    
    }
    
    
    .buchungsinfo_kopf {
        text-align: left;
        background-color: #ff6138;
        color: #fff;
        padding: 5px 10px 5px 5px;
        font-size: 1em;
    }
    
    
    .buchungsinfo_body {
        background-color: #eee;
        padding: 10px;
        font-size: 0.8em !important;
        width: 80%;
        float:left;
    }
    
    
    .buchungsinfo_preis {
        background-color: #eee;
        padding: 10px;
        font-size: 0.8em !important;
        width: 15%;
        float:right;
        text-align:right
    }
    Mein Problem ist, dass außen herum um alle DIVs ein Rahmen definiert ist, der normalerweise in der Höhe auto ist.
    Das funktioniert auch soweit, bis ich bei

    .buchungsinfo_body und .buchungsinfo_preis

    ein float: left; setze, damit die beiden Felder nebeneinander sind. Im Ergebnis bleibt nur das DIV mit der Klasse .buchungsinfo_kopf vom Rahmen eingefasst. Die anderen DIVs liegen dann außerhalb des Rahmens. Wo ist mein Fehler? Hat jemand eine Idee?

    Danke für Eure Hilfe.

  2. #2
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    366
    Danke
    0
    Bekam 79 mal "Danke" in 79 Postings

    Standard AW: Frage zum Thema float

    Das Problem liegt darin begründet, dass du mit "float" das betreffende Element aus den Textfluss heraus nimmst und somit der Browser den Platz, den das Element im Textfluss einnehmen würde, eben ignoriert.
    Eine einfache... aber unschöne... Methode um das zu verhindern wäre, wenn du ein Element hinter das letzte gefloatete Element einfügst... zB ein <br>... und dem dann im CSS das Format 'clear: both;' zuweist, um das 'float' des vorherigen Elementes aufzuheben und den Browser zu zwingen eine Ausgabe (Zeilenumbruch) zu machen, die dann noch innerhalb des div '.buchungsinfo_rahmen' (hinter den gefloateten Elementen) eingefügt wird.

    Besser wäre allerdings auf Float zu verzichten und stattdessen die beiden Container mit 'Flex-Box' einzufügen...
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  3. #3
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    490
    Danke
    0
    Bekam 54 mal "Danke" in 54 Postings

    Standard AW: Frage zum Thema float

    Für den Fall das du kein Flex-Box möchtest,reicht im Selektorblock .buchungsinfo_rahmen noch ein overflow:hidden. Somit passt sich der Rahmen an.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    25.01.2019
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Frage zum Thema float

    Ich hab mir mal versucht das Flex-Box anzuschauen. Jesses... das ist aber was größeres
    Ich hatte einfach gedacht, dass es einfach geht. Nun habe ich einfach in das DIV ne Tabelle gemacht. Damit besteht das DIV innen dann nicht aus 2 Nebeneinanderliegenden DIV's.
    Danke dennoch für Euere Hilfe.

  5. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    490
    Danke
    0
    Bekam 54 mal "Danke" in 54 Postings

    Standard AW: Frage zum Thema float

    Nochmal

    .buchungsinfo_rahmen {
    background-color: #ddd ;
    border: 1px dotted black;
    padding: 10px;
    overflow:hidden;
    }

  6. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    627
    Danke
    0
    Bekam 71 mal "Danke" in 69 Postings

    Standard AW: Frage zum Thema float

    Hallo

    Ich hab mir mal versucht das Flex-Box anzuschauen. ...
    Die Verwendung von Tabellen oder Float ist in deinem Fall sachlich falsch.

    Tabellen sind nur für Tabellendaten gedacht und nicht zum layouten. Tabellendaten liegen nicht vor.

    Float ist nur dafür gedacht, damit Text andere Elemente umfließen kann, in der Regel Grafiken. Nicht um Container anzuordnen.

    Flexbox (das Flex-Modell) ist hingegen genau dafür gedacht Container anzuordnen.

    Du kannst deine Seite natürlich nach deinen Vorstellungen und deinem aktuellen Wissen erstellen und Flexbox ignorieren. Ein gutes, aktuelles, auf allen Endgeräten nutzbares Layout kannst du mit dem Mißbrauch von CSS nicht erstellen.

    Gruss

    MrMurphy

  7. #7
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    490
    Danke
    0
    Bekam 54 mal "Danke" in 54 Postings

    Standard AW: Frage zum Thema float

    Willst Du uns Veräppeln?

    .buchungsinfo_rahmen {
    background-color: #ddd ;
    border: 1px dotted black;
    padding: 10px;
    overflow:hidden;
    }

  8. #8
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.796
    Danke
    24
    Bekam 140 mal "Danke" in 139 Postings

    Standard AW: Frage zum Thema float

    Die Frage ist, wer wen veräppeln will... In #2 und #6 stehen die richtigen Antworten, alles andere ist halbgares "klappt-erstmal"-Gehampel.

Ähnliche Themen

  1. Frage zu float und clear float
    Von Klausi1 im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 17.09.2017, 23:02
  2. Frage zum Thema Rahmen bei css
    Von Dominikgt im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 14.11.2007, 16:16
  3. Wichtige Frage zum Thema Highscore
    Von wwwtippligaattf im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 2
    Letzter Beitrag: 05.10.2005, 15:17
  4. altes Thema, neue Frage
    Von Carolyn im Forum Forum-Hilfe.de intern
    Antworten: 6
    Letzter Beitrag: 30.08.2005, 21:17
  5. N00b Frage zum Thema: Frames
    Von Cruizer23 im Forum HTML & CSS Forum
    Antworten: 26
    Letzter Beitrag: 19.04.2004, 20:02

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •