CSS Flex.box wie verschieben?

[RAMSoße]

Moin

Vor ein paar Tagen habe ich angefangen eine website zu bauen. Mittel flexboxen und dem Internet.
Das hat bis hier hin ganz gut geklappt. Leider komme ich aber nicht weiter. Bin mir sicher das es sich um ein Verständnis Problem meinerseits handelt. oder ich habe mich verschrieben. Wie dem auch sei, seht selbst.

Mitte besteht aus einer/zwei flex.boxen. Der Fett geschriebene Text lässt sich in der css Datei nicht nach links verschieben und rutscht bei zu viel "Inhalt" einfach untereinander.
Im footer löst sich die liste nicht auf, obwohl ich dies in der css datei angewiesen habe. Auch sollte die Liste in der flexbox rechtsbündig sein.

Wer langeweile hat und mir helfen möchte, schreibt mir bitte. Ich denke, dass man dafür in den Code schauen muss um da durchzublicken.

Vielen dank schon einmal.

PS: Das ist ein Hobby. Ich mache das ganz laienhaft

Danke an alle und besonders an Netzgestaltung:

Hier mal die Gründe, woran es lag:

Spoiler: Das waren die Fehler

Fehler 1.

Es gibt keine p1 p2 ect.
Nur <p>. Mein Gedanke war falsch und p muss bei mehreren Anlaufstellen mit einer ID gekennzeichnet werden.

z.B. <p id="p2">

Fehler 2
Der Container also die Flexbox wurde nicht angesprochen

Richtig:

.container{
display:flex;
}
.item{
flex-basis:50%;
}

unten hatte die Klasse gefehlt

 

[Bagbag]

Im Idealfall zeigst du uns den Code, dann würde ich mal drüberschauen. Auf ne Teamviewer-Session o.Ä. habe ich gerade keine Lust.

 

[tollertyp]

Auf ne Teamviewer-Session o.Ä. habe ich gerade keine Lust.

... und ist auch nicht unbedingt der Sinn eines Forums. Wäre ja schöner, wenn die Lösungen zu den Problemen hier bewahrt bleiben. (Ist kein Aufruf, persönliche Hilfe abzulehnen)

 

[RAMSoße]

@Bagbag
Hast PN

@tollertyp
ich würde die Lösung hier posten damit die Nachwelt was davon hat. Doch der Ganze Code passt nicht in einen Beitrag

PS: super Nickname

 

[Crizzo]

ich würde die Lösung hier posten damit die Nachwelt was davon hat. Doch der Ganze Code passt nicht in einen Beitrag

Demo hochladen auf einen Webspace?

oder https://pastebin.com/

 

[RAMSoße]

@Crizzo

habe ich leider grad nix zur Verfügung. Sonst hätte ich das auch lieber so gemacht. Wer Interesse hat, bekommt die rar. Müsste sonst im Beitrag 5 css Dateien plus html mit jeweils pi mal Daumen 150 Zeilen rein stellen.

 

[Mitaru]

Im Editor gibt es eine Funktion, Code einzufügen. Das ganze packst du dann noch in benannte Spoiler und man kann sich deine Dateien ohne Probleme anschauen. Wenn du sicher sein möchtest, benutzt du vor dem Absenden noch die Vorschau-Funktion des Editors.

Jedoch stellt sich die Frage, warum du für eine einzelne Seite 5 verschiedene CSS-Dateien hast. Sind die alle eingebunden?

 

[RAMSoße]

@Mitaru

Ja sind eingebunden. Die benötige ich für die boxen und eben der Darstellung für mobil und Desktop. eine ist komprimiert. Die kann ich eigentlich weg lassen.

ich schick dir mal eine pn

 

[netzgestaltung]

ansonsten schau dir mal "flex-basis" hier an: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flex-basis

 

[RAMSoße]

@netzgestaltung
Das sieht gut aus. da Werde ich mich heute noch abarbeiten dran. Freu mich aber dennoch über Hilfe

 

[netzgestaltung]

du kannst bestimmt dein html und das css das für ein minimalbeispiel nötig ist herausziehen aus deinen dateien. das hilft dir auch festzustellen welches css und html zusammenspielen damit der derzeitige fehler erscheint.

das kannst du dann zb hier eingeben: https://jsfiddle.net/ und den link(save anonymus) hier posten.
dann kann ich auch daran änderungen vornehmen und zeigen.

 

[RAMSoße]

hier mal ein Bild

Ich möchte den Code eben nicht ohne Pn teilen, da ich den flex code zwar benutzen aber nicht komplett selbst geschrieben habe.

 

[netzgestaltung]

das schaut eh nach einem framework aus, da gilt es wohl eher die richtigen klassenbezeichnungen zu finden und im html einzutragen. wie heißen die eingebundenen css dateien (netzwerktab/filter css)?

 

[RAMSoße]

uff. das ist es ja. ich bin alles durchgegangen aber irgendwas übersehe ich. hab dir die rar geschickt.

 

[netzgestaltung]

also naja, ich versteh nicht warum es überhaupt padding-divs da gibt, da würd ich erstmal ausräumen.

für p1, h1 kannst du flex-basis probieren.

p1, p2 sind keine validen html elemente

ansonsten ist das ein minimalbeispiel auf jsfiddle fürs nächste mal:
https://jsfiddle.net/028v1ygh/1/

wenn du schon ein css framework nutzt, frage bitte auch den ersteller nach einer dokumentation.

uff. das ist es ja.

da es sich um einen proprietären code handelt sollte der autor die dokumentation liefern. ansonsten überlege dir a) das bisserl flexbox selber schreiben oder b) einen generator nutzen oder c) eine freie bibliothek nutzen wo es dokumentation gibt, zb: https://richiksc.github.io/flex-css/

 

[RAMSoße]

hat sich erledigt.

meine nächste Baustelle
Sollte in der MobileAnsicht so aussehen wie in der DesktopVariante