CSS 3 gefloatete Elemente wagerecht und senkrecht ausfuellen


son gohan

Erfahrenes Mitglied
#1
Hallo,

ich denke dies ist irgendwo ein standard Ding, aber weil anscheinend heute erst Mittwoch ist will es nicht funktionieren, joke.

Also ich habe ein DIV Element, in diesem sind jeweils 3 andere block Elemente wagerecht gefloatet. Das wagerechte floaten und anpassen der Groese klappt komischerweise, ich habe dort 32% Breite eingestellt und 1 % Margin.

Beim senkrechten floaten gibt es Probleme, dort werden die gefloateten Elemente mal zu gros und mal zu klein, passen sich also nicht richtig an, obwohl ich dort auch die Breite in Prozent eingestellt habe.

Nachfolgend ist mein CSS Code fuer die gefloateten Elemente und zwei Bilder wo man es einfacher sehen kann. Bitte lass mich wissen wen Du weist wie man das loesen kann, danke.

HTML:
.Eintrag
{
  display:block;
  float:left;
  width:32%;
  height:29%;
  border:1px solid white;
  padding:8px;
  margin-left:1%;
  margin-top:1%;
}
 

Anhänge

basti1012

Erfahrenes Mitglied
#2
ich weiss nicht ganz genau was du meinst . Soll die höhe immer die volle Bildschirm höhe einnehmen oderwie ist das gedacht ? Die conttainer nehmen ja normalerweise bei zb 33% height die 33 Prozent von den Elternelement ein. Wenn das zb nur 300px hoch ist aber 1000px breit ist der container ja 100px height und 333px breit und so mit ein Quadrat.

Wenn ich dich richtig verstehe sollte der Parent Container eine feste höhe haben damit die boxen gleich gross bleiben oder du gibst height:calc(100vh / 3); ein dann ist der Bilschirm auch voll ausgefült
 

son gohan

Erfahrenes Mitglied
#3
Hallo, ich versuche das Menue responsive zu machen, die Container sollen sich in Hoehe und Breite dem Hauptcontainer anpassen. Meine Farbauswahl ist vielleicht auch im Moment nicht so gut erkennbar. Der Hauptcontainer ist blau und die 9 weisen Container sind die welche sich anpassen sollen. Das CSS was ich gepostet habe ist von diesen weisen 9 Containern.

Die passen sich jetzt in der Breite richtig an, durch die Angabe width:32% hat das ganz gut geklappt.

Aber in der Hoehe past es sich nicht richtig an, wenn die Seite etwas enger wird siehe Bild : https://www.tutorials.de/attachments/tosmall-png.65889/
dan fuellen die weisen Container nicht alles bis unten hin aus, ganz unten sieht man das zu viel Freiraum entsteht. Und wenn die Seite Breiter ist, dann gehen die Container unten ueber den Hauptcontainer hinaus siehe Bild: https://www.tutorials.de/attachments/to-high-png.65888/
 

son gohan

Erfahrenes Mitglied
#4
Ich habe eine Loesung gefunden, wenn ich margin-top ein festen Pixelwert gebe anstatt 1% funktioniert es. Sobald man margin-top in Prozent schreibt past es nie richtig, komischerweise funktioniert margin-left=1% . Nunja verstehen muss ich das jetzt noch nicht, hauptsache es funktioniert erst mal.
 

basti1012

Erfahrenes Mitglied
#5
ok, mit Flexbox hätte das eigentlich auch klappen müssen.
Da ich nicht deinen außen container kenne , gehe ich mal von aus das man die 1% bei den Werten mit calc() abziehen hätte müssen dann hätte es vieleicht auch geklappt.
Ist jetzt aber auch nur nee vermutung weil ich deine anderen Angabe jetzt nicht kenne.

Aber Flexbox hätte bestimmt geklappt
 

son gohan

Erfahrenes Mitglied
#6
ich probier das vielleicht mal irgendwann mit anderen Sachen wie Flexbox, im moment geht es ja wenigstens mit festen Pixel Angaben fuer margin-top. Ich hatte auch schon fast Javascript benutzt und bin dann wieder zurueck auf reines CSS, wobei heutzutage funktioniert doch sowieso keine moderne webseite mehr ohne javascript und wir entwickler machen uns trotzdem oft immer noch die arbeit so schwer und versuchen alle css und html bucks hin zu bekommen.