Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: CSS-Problem mit "float"

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

    Standard CSS-Problem mit "float"

    Hallo,

    ich stehe momentan vor einem wahrscheinlich banalem Problem, jedoch komme ich nicht weiter.

    Ich würde gerne 6 Felder definieren, welche bei Fullscreen alle sichtbar sind, verkleinert man den Bildschirmausschnitt, dann sollten die "Felder" nach unten wandern...

    Präsentation1.jpg

    Habe das mal versucht, jedoch immer das Problem , dass i meinem Fall das 4. Feld immer unterhalb des Feldes 1 ist und nicht neben Feld 1 und unter Feld 2,3
    Link: http://www.veraut.at/test/index.html

    Wäre toll, wenn mir hier jemand weiterhelfen kann

    Code:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Unbenanntes Dokument</title>
    <style>
     
    #container {
     width:960px;
     float:left;
     }
    #eins {
    background-color:green;
    width:300px;
    height:300px;
    float:left;
    }
    #zwei {
    background-color:red;
    width:150px;
    height:150px;
    float:left;
    }
    #drei {
    background-color:yellow;
    width:150px;
    height:150px;
    float:left;
    }
    #vier {
    background-color:blue;
    width:150px;
    height:150px;
    clear:left;
    
    }
     
    </style>
    </head>
    <body>
    <div id="conatiner">
    <div id="eins">
    <h1> eins </h1>
    </div>
    <div id="zwei">
    <h1> zwei </h1>
    </div>
    
    <div id="drei">
    <h1> drei </h1>
    </div>
     
    <div id="vier">
    <h1> vier </h1>
    </div>
    </div>
    </body>
    </html>
    Danke für eure Hilfe,
    Patrick
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: CSS-Problem mit "float"

    du musst den vierten container auch floaten.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    14.09.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Problem mit "float"

    ups, das muss mir beim herumprobieren stehen geblieben sein

    mit dem float hab ich es so weit, daß es wie folgt angezeigt wird...Unbenannt-1.jpg

    Mache ich jetzt jedoch das Browserfenster größer, dann wandert Feld 5 & 6 hinauf ich hätte jedoch gerne, daß es bei größtem Screen so wie oben ist, nur wenn sich das fenster verkleinert, dann sollen die Felder "wandern"

    so soll es nicht werden ;( weil schaut nicht gut aus ;(
    Unbenannt-2.jpg

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: CSS-Problem mit "float"

    Hallo,

    deine Infos laufen leider etwas durcheinander und sind ungenau, deshalb ist es schwierig dir zu helfen.

    Du schreibst die ganze Zeit von 6 Containern, dein Quelltext enthält aber nur vier.

    Weiterhin ist unklar, wie sich die Container verhalten sollen, wenn der Platz für 4 nebeneinander nicht mehr ausreicht. Also welcher dann wohin rutschen soll.

    Zu deinem aktuellen Problem: Der äußere Container darf halt nicht größer werden, als das mehr als 4 Container nebeneinander passen.

    Oder die Container dürfen keine starre Breite haben, sondern müssen entsprechend breiter werden.

    Diese Entscheidung können wir dir nicht abnehmen.

    Weiterhin bin ich mir nicht so im klaren ob du überhaupt weißt was du tust. Gib mal dem äußeren Container einen Rahmen (border) und / oder eine Hintergrundfarbe (background-color).

    Und dann poste bitte mal deinen aktuellen Quellcode, uns liegt ja nur dein veralteter fehlerhafter vor.

    Gruss

    MrMurphy
    Geändert von MrMurphy (14.09.2015 um 11:37 Uhr)

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    14.09.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Problem mit "float"

    Hallo,

    so sieht das derzeit aus....

    Unbenannt-1.jpg

    Habe jedoch das Problem, wenn der Browser breiter wird, dann sieht es so aus:

    Unbenannt-2.jpg
    also nicht sehr schön...

    Ich hätte gerne, wenn das Browserfenster größer wird, als 4 Container, dann soll es dennoch bei maximal 4 Containern bleiben. (so wie Pic 1).

    Gruss
    Patrick

    P.S: der ganze Code wäre:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Unbenanntes Dokument</title>
    <style>
     
    #container {
     width:960px;
     float:left;
     }
    #eins {
    background-color:green;
    width:150px;
    height:300px;
    float:left;
    background-image:url(../Web/images/Einzelhaus.png); background-repeat:no-repeat;
    }
    #zwei {
    background-color:red;
    width:150px;
    height:300px;
    float:left;
    }
    #drei {
    background-color:yellow;
    width:150px;
    height:150px;
    float:left;
    }
    #vier {
    background-color:blue;
    width:150px;
    height:150px;
    float:left;
    
    }
    #fünf {
    background-color:pink;
    width:150px;
    height:150px;
    float:left;
    }
    #sechs {
    background-color:grey;
    width:150px;
    height:150px;
    float:left;
    
    }
    
    </style>
    </head>
    <body>
    <div id="conatiner">
    <div id="eins">
    <h1> eins </h1>
    </div>
    <div id="zwei">
    <h1> zwei </h1>
    </div>
    
    <div id="drei">
    <h1> drei </h1>
    </div>
    
    <div id="vier">
    <h1> vier </h1>
    </div>
    
    <div id="fünf">
    <h1> fünf </h1>
    </div>
     
    <div id="sechs">
    <h1> sechs </h1>
    </div>
    </div>
    </body>
    </html>

  6. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: CSS-Problem mit "float"

    Hallo

    da fehlt der Rahmen (border) um den Container herum. Ohne Rahmen siehst du ja gar nicht wie der Container sich verhält.

    Gruss

    MrMurphy

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    14.09.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Problem mit "float"

    hab jeden Container ja farblich...oder was meinst du ?

  8. #8
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: CSS-Problem mit "float"

    Hallo,

    es ist schade, das du die Antworten nicht richtig liest und befolgst.

    hab jeden Container ja farblich...oder was meinst du ?
    Welchen wohl? Das habe ich bereits in meiner ersten Antwort geschrieben.

    Gib mal dem äußeren Container einen Rahmen (border) und / oder eine Hintergrundfarbe (background-color).
    Mit deinen bisherigen (und leider trotz Nachfrage unvollständigen) Angaben könnte eine Lösung so aussehen:

    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8">
       <title>Float Problem 01</title>
       <style>
          #container {
             background-color: cyan;
             max-width: 600px;
          }
          #container>* {
             float: left;
             width: 150px;
             height: 150px;
             padding: 0;
             border: 0;
             margin: 0;
          }
          #eins {
             background-color: green;
             height: 300px;
          }
          #zwei {
             background-color: red;
             height: 300px;
          }
          #drei {
             background-color: yellow;
          }
          #vier {
             background-color: blue;
          }
          #fuenf {
             background-color: indianred;
          }
          #sechs {
             background-color: cadetblue;
          }
       </style>
    </head>
    <body>
       <div id="container">
          <div id="eins">
             <h1> eins </h1>
          </div>
          <div id="zwei">
             <h1> zwei </h1>
          </div>
          <div id="drei">
             <h1> drei </h1>
          </div>
          <div id="vier">
             <h1> vier </h1>
          </div>
          <div id="fuenf">
             <h1> fuenf </h1>
          </div>
          <div id="sechs">
             <h1> sechs </h1>
          </div>
       </div>
    </body>
    </html>
    Gruss

    MrMurphy

  9. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    14.09.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS-Problem mit "float"

    ah danke, ja so hab ich mir das vorgestellt

    danke für den code. nur für mein Verständnis...

    max-width: 600px; bedeutet daß das ganze maximal 600px breit werden darf, oder ?

    was bedeutet: #container>* ? jeder container der folgt ?

    Herzlichen Dank für die Hilfe & Unterstützung

  10. #10
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: CSS-Problem mit "float"

    Hallo

    max-width: 600px; bedeutet daß das ganze maximal 600px breit werden darf, oder ?
    Ja, der äußere Container darf nur 600px breit werden. Da die inneren Container jeweils 150px breit sind passen so nur maximal 4 nebeneinander.

    Nachtrag: Genauer: Der äußere Container dürfte bis zu 749px breit werden.

    was bedeutet: #container>* ? jeder container der folgt ?
    Durch die schließende spitze Klammer (>) jedes Element, das direkt dem Container folgt, also nur die direkten Kinder. Nicht die Kindeskinder, also die h1-Überschriften.

    Erklärungen findest du wenn du nach "css selektoren" googelst, zum Beispiel

    http://www.webmasterpro.de/coding/ar...elektoren.html

    Die sind immer schön wenn viele Elemente die gleichen CSS-Eigenschaften erhalten sollen.

    Gruss

    MrMurphy
    Geändert von MrMurphy (14.09.2015 um 14:28 Uhr)

Ähnliche Themen

  1. align="left" align="center" und align="right" Problem
    Von the_zoker_09 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 12.08.2011, 02:38
  2. Bild- Float oder align="absmiddle"??
    Von [C]arp[h]unter im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 02.05.2011, 08:19
  3. "float"-Problem
    Von PixxelDesign im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 27.07.2009, 17:38
  4. Alternative zu "float"
    Von Mr.Egon im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 30.04.2007, 19:26
  5. Problem beim "Physlet" erstellen mit einer "f
    Von Freerider19 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 13.12.2004, 10:08

Stichworte

Berechtigungen

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