Beiträge von Elly

Also ich finde das echt super. Mal sehen, ob ich's bei mir einbaue. Ansonsten habe ich hier jede Menge gelernt und schon mal einen guten Einblick in die Grid-Funktion bekommen! Danke dafür!

So...ich seh mir grad mal das mit der Galerie genauer an.

Ich versteh nicht ganz, warum man da mit Spalten arbeitet anstatt mit Reihen zB. Es ist ja dann beim Schreiben irgendwie umständlich, dass man die Bilder nicht einfach untereinander einfügen kann, sondern jedes neue Bild dann eins in Spalte eins, eins in Spalte zwei etc.

Was sich mir auch nicht erschließt - wenn ich nicht gleich viele Bilder in jeder Spalte hab, dann sind sie unterschiedlich breit.

Ich hab das mal mit einem Testbild gemacht und hochgeladen. Die .col hab ich übrigens umbenannt, sonst mischt mir Bootstrap wieder dazwischen.

Wow, Mr. Murphy, da hast du dir aber ganz schön viel Arbeit angetan! Hab's mir direkt mal angeschaut und hochgeladen - hier.

Das sieht natürlich super aus und passt sich auch schön an!

Display:grid ist was Tolles, da muss ich mich erst einarbeiten.

Lässt sich das denn auf mein Design ummünzen? Ich habe ja keine Grids, sondern einfache Blöcke untereinander. Kann ich das beim Grid-Layout auch machen, dass jede Grid untereinander kommt?

Ich glaube, es würde verdammt viel Sinn machen, das bei mir dann umzubauen.

Ich hab mir die Seite einfach in Firefox angeschaut, der lädt mir die PHP-Seite auch ohne dass ich XAMPP vorher starte. Vl hat's was damit zu tun. Ich hab die Navigation und den Footer über php require eingebunden, meinen anderen Browser zeigen mir daher nur den Quellcode an. Firefox stellt als einziger die Seite dar. Um zu testen, komme ich ja ohne Nav und Footer auch aus.

Oh, es klappt ja wirklich! Hab jetzt direkt die 2. Version eingebunden mit querySelectorAll.

Aber kannst du mir vl sagen, warum das nur online klappt und offline nicht? Bis jetzt ist mir kein JS-Codeschnipsel untergekommen, bei dem mir das passiert ist. Strange... Deshalb hab ich gestern auch geschrieben, dass es nicht geht. Offline geht's tatsächlich bei mir nicht.

Wenn ich den Code richtig verstehe - von JS hab ich ein bissl Ahnung, aber noch nicht viel - dann ist der Button jetzt am unteren Bildrand ausgerichtet. Ich finde das ja erstaunlich, wie du mal so kurzerhand was codest. Ich versteh den Code, aber von selber schreiben bin ich leider noch weit entfernt.

Da ich ja ein DIV hab, hab ich das mal geändert in document.querySelector('div.card img');, aber das geht so nicht. Auch nur div img geht nicht.

Ich glaub nicht, dass ich was falsch verstanden habe. Ich geb ja zu, dass das mit meinen Cards ziemlich chaotisch ausgeartet ist.

Also alles gut.

Ich arbeite normal sehr strukturiert. So hab ich hier auch angefangen. Aber momentan merke ich selber, dass ich im eigenen Chaos versinke.

SOOOO...jetzt aber! Nachdem ich MEINER .card ein display:inline-block; gegeben habe um dem Bootstrap entgegenzuwirken, floatet der Text nun auch so wie er soll.

Wahnsinn, war das ne schwere Geburt! Da kommt man sich vor wie bei der Kripo. lol

Übrigens, weil die card jetzt nicht mehr display:flex; ist, funktioniert für den Link-Butto das margin-top:auto; nicht mehr. Schade. Bekommt man das trotzdem hin, dass der Button automatisch unten an der Card sitzt oder kann man leider nicht alles haben?

Ein Rätsel ist mir außerdem (auch ohne Bootstrap), warum dieser Button mal am unteren Rand klebt, mal nicht. Hab ihm jetzt 10px margin-bottom verpasst, jetzt hat er stellenweise natürlich 20px, wenn man das Fenster kleiner macht. Es gibt Dinge, die sind mir einfach unlogisch. Den Inspektor kenne ich ja mittlerweile auch, hab da aber keine Anzeichen dafür gefunden.

Weil jmd hier mal erwähnt hat, dass es einen Teil gibt, wo das Bild oben und der Text unten ist, aber neben dem Bild noch Platz wäre. Sieht das tatsächlich schlimm aus? Wenn ich da den Text rechts beginnen lasse, schaut er auch nicht mehr schön aus, weil die Zeilenlängen zu kurz sind. Soll ich das Bild da zentrieren? Finde ich persönlich jetzt nicht so gut, weil das Bild dann nicht mehr bündig ist mit der h1 und dem Text.

Das flex war vorher auch schon drin, aber in .main01a. Das float left hab ich wieder reingetan, das hab ich vergessen wieder hinzuzufügen. Hilft aber nix. Auch wenn ich das Flex rausnehm, ändert es nichts.

Ah, Moment mal. ICH hab nicht flex in die .card getan... Das war Bootstrap. Mannooo. Weil die auch wieder was haben, was sich Card nennt. Mal schauen, ob's dann geht. Wenn ich das im Inspektor wegklicke, haut es mir natürlich die ganze Card zusammen... Die ist dann nur noch so hoch wie der Text, das Bild steht raus.

Bootstrap will ich drinlassen um zu sehen, was das alles bewirkt. Bin ja schließlich noch in der Lernphase.

Danke Andreas, die h1 braucht ein min-height, hab ich grad geändert.

Ich hab jetzt bei meinen img und p und sogar der .card alles Unnötige rausgenommen, hab auch die Media Queries vorsichtshalber auskommentiert. Das Ergebnis: Die Absätze stehen unter dem Bild... Auch die, wo nur xxx steht. Es klappt einfach nicht.

Kommt da noch jmd drauf, der schlauer ist als ich? Hab's nochmal hochgeladen.

Hier lang... als PHP mittlerweile.

Ich meine das bei mir auch so versucht zu haben, nur dass dein figure bei mir ein div ist. Hm. Eig sollte das doch gehen. Ich schau nach ner Mütze Schlaf nochmal drüber.

Auf meiner Über mich Seite hab ich's auch geschafft. Nur ist das noch nicht responsive, die Card und die Section wachsen nicht mit, auch wenn ich der section statt height ein min-height gebe nicht...

Deswegen war dann die Überlegung, diesen Abstand anders zu konstruieren, zB mit einer bestimmten Höhe für br.

Wobei ich das grad mit EINEM Absatz auch nicht hinkriege, solang das Bild außerhalb des Absatzes liegt.

Der Text soll das Bild ja umfließen. Wenn er zu kurz ist, bleibt er halt rechts, ohne dass er unten weitergeht. So sollte das ja normalerweise sein.

Sagen wir mal ich hab ein DIV, darin ein IMG und ein P. Das Bild ist links, der Text ist rechts. Wenn der Text länger als das Bild ist, fließt er unten weiter. Sollte ja normalerweise nicht so schwer sein. Siehe etliche Tutorials dazu, die hundsprimitiv sind. Bei meinem Verbau klappt das aber nicht und ich steig nicht dahinter.

@Murphy: Ich hab's nochmal ausgetauscht, aber nein, das hilft leider nicht. Erstens bringt es in der bestimmten Fensterbreite nicht das erwünschte Ergebnis und zweitens ist dann in der kompletten Fensterbreite der gesamte Text unterm Bild.

Sempervivum: Nicht exakt die Anzahl der Absätze, sondern die Textlänge ist maßgebend. Ansonsten könnte man ja noch mit nth child arbeiten.

So einfach scheint das ja nicht zu sein. Dass das so kompliziert ist, liegt aber wohl an der Card an sich. Muss mal grad probieren, ob es hilft, zuerst noch ein DIV in die Card zu setzen und dann das Bild und den Text rein.

Eben, es ist keiner unter dem Bild. Aber genau das hätte ich gern.

Nochmal: eine längere Beschreibung soll unterm Bild weiterfließen. Ist die Beschreibung nur kurz, soll sie rechts vom Bild stehen. Also rechts beginnen und dann unten weiterfließen. Durch die fixe Breite der p-Elemente innerhalb von .card tut es das aber nicht. .card ist inline-block, mit flex haut es mir die ganze Card zusammen. Die Breite des p braucht es aber, damit es überhaupt erstmal rechts vom Bild beginnt. Das ist allerdings auch ein bissl komisch/doof, da es das zB bei Tutorial-Seiten nicht braucht.

Hab da grad eine Seite gefunden, die - wie ich - img und p getrennt voneinander anordnet (nicht ineinander) und wo es trotzdem funktioniert. Nehme ich die Breite bei p raus, steht der ganze Text unter dem Bild. http://www.ohne-css.gehts-gar.net/0019.php

Was Mr. Murphy da grad schreibt... genau diese Sachen habe ich drinnen. Ich bilde mir ein das schon erfolglos ausprobiert zu haben oder mit einem Grund hinzugefügt zu haben. Ich spiel das nochmal durch.

Dann hast du dir zufällig die richtigen Bildschirmbreiten angesehen. Dazwischen gibt's eine, bei der das nicht richtig läuft. Schieb mal das Browserfenster zu anstatt im Inspektor die Screens auszuwählen. Ich hab da beim Absatz eine Breite angegeben. Aber anders schaff ich es gar nicht, dass er überhaupt erstmal rechts neben dem Bild erscheint. *grübel* Aber durch die fixe Breite rutscht dann der restliche Text gar nicht unters Bild.

Der Schönheitsfehler mit dem Bild kommt nachher auch noch dran. Der dürfte mit einer media-Abfrage das kleinste Problem werden.

Also, nochmal zu dem Thema. Da bin ich leider noch nicht weitergekommen.

Entweder ich mach das, wie oben beschrieben, umständlich mit einem p-Element und drinnen das Bild und die Absatz-Abstände definiert durch eine br-Klasse mit bestimmter Höhe.

ODER

Es gibt vl tatsächlich eine Lösung für mehrere p-Elemente wie ich es jetzt hier hab mit Bild vor dem ersten p-Element, sodass der Text - bei bestimmter Bildschirmbreite - dann doch unter dem Bild weiterfließt. Vielleicht denke ich zu eingeschränkt, aber mir scheint, das kann doch so fast nicht gehen?

LG

Elly

Danke, du bist genial! Daraus lässt sich echt was machen!

Von diesen Dingen habe ich überhaupt noch nie was gehört. Und wie gesagt, wenn ich Portfolio oder Galerie google, finde ich hauptsächlich Templates für Komplett-Webseiten oder gar CMS.

Gibt's da noch wichtige Stichwörter auf dem Gebiet?

Ich werd am WE mal mit dem Code rumspielen. Wenn ich Hilfe brauch, meld ich mich auf jeden Fall.

Danke danke!

Zitat von Elly

Code

.navigation .menu-list li a.active {
    background-color: red;
  }

Hab ich doch?

Also ich sehe im Inspektor auch, dass die Klasse hinzugefügt wurde. Aber... *weitergrübel*

Sorry, ich Nuss. Hab die active-Klasse nur in einem bestimmten Breakpoint formatiert... Sehr gscheit.

Also, alles gut. Funktioniert tadellos!