CSS-Problem mit "float"

VERAUT

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...

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:

HTML

<!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>

Alles anzeigen

Danke für eure Hilfe,
Patrick

djheke

du musst den vierten container auch floaten.

VERAUT

ups, das muss mir beim herumprobieren stehen geblieben sein

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

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

MrMurphy

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

VERAUT

Hallo,

so sieht das derzeit aus....

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

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:

HTML

<!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>

Alles anzeigen

MrMurphy

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

VERAUT

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

MrMurphy

Hallo,

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

Zitat

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

Welchen wohl? Das habe ich bereits in meiner ersten Antwort geschrieben.

Zitat

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

<!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>

Alles anzeigen

Gruss

MrMurphy

VERAUT

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

MrMurphy

Hallo

Zitat

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.

Zitat

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/article…selektoren.html

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

Gruss

MrMurphy

VERAUT

okay, super danke für die Hilfe im Moment

Tags