Webseite responsive aufbauen

[Bennyaa]

Hallo, ich möchte eine Seite schön skalierbar machen.
Somit habe ich eine div auf 25% gesetzt.
Wie bekomme ich es nun hin, dass ALLE Elemente in der Div sich auch entsprechend skalieren?
Also Lables, bilder, dropdowns, texte, usw.

Wenn ich aktuell die seite verkleinere, so verkleinert sich die div, aber irgendwann ragt die Schrift eines Lables darüber hinaus.

Zusätzlich habe ich eine Bootstrap Navbar.
--> Muss man die wirklich in jeder Seite einfügen, oder bekommt man das auch so hin, dass ich einmal die Navbar auf der Hauptseite habe und weiter nur noch die unterseiten ohne den html inhalt der navbar.?

Danke für jede Hilfe.

 

[korbenm]

Das hört sich so an als ob eine bestehende Seite umgebaut wird - oder?
Responsive heißt eigentlich nicht das du außen rum ein Div machst das skaliert. (Text wird zu Icon, Elemente werden untereinander statt nebeneinander platziert)

Generell verwendet man dafür ein Framework das alles mitbringt und sucht sich dann zusätzliche Komponenten.

Probleme in der Oberfläche findet man am besten mit dem Entwicklermodus der Browser. Damit kannst du herausfinden welcher Style die Größe setzt.

 

[M4ttX]

Zusätzlich habe ich eine Bootstrap Navbar.
--> Muss man die wirklich in jeder Seite einfügen, oder bekommt man das auch so hin, dass ich einmal die Navbar auf der Hauptseite habe und weiter nur noch die unterseiten ohne den html inhalt der navbar.?

Kommt drauf an was du für Framework nutzt. Wenn man es sinnvoll macht, dann wird die natürlich nur einmal erstellt und an einem Ort gewartet.

Grundsätzlich kommen für flexible Layout Flexbox und CSS Grid zum Einsatz. Für skalierende Schriften gibts dann noch die CSS clamp() Funktion und für erzwungene Umbrüche sehr langer Wörter gibts dann noch word-wrap.

 

[Piktogramm]

Somit habe ich eine div auf 25% gesetzt.

Wie bekomme ich es nun hin, dass ALLE Elemente in der Div sich auch entsprechend skalieren?
Also Lables, bilder, dropdowns, texte, usw.

25% relativ zu was und vor allem bei welchem Attribut?
For css und unterordnete Elemente:
https://stackoverflow.com/questions/26349987/how-do-i-apply-a-style-to-all-children-of-an-element

Wenn ich aktuell die seite verkleinere, so verkleinert sich die div, aber irgendwann ragt die Schrift eines Lables darüber hinaus.

So ein Ansatz ist halt meist nicht sinnvoll, da sehr oft absolute und relative Angaben vermischt werden.
Imho ist die sinnvollste, relative Angabe sowieso "em" und nicht % von irgendwas.

Zusätzlich habe ich eine Bootstrap Navbar.
--> Muss man die wirklich in jeder Seite einfügen, oder bekommt man das auch so hin, dass ich einmal die Navbar auf der Hauptseite habe und weiter nur noch die unterseiten ohne den html inhalt der navbar.?

Kommt immer drauf an, wie die Seite aufgebaut ist. Man kann auch eine index.php bauen, die den Inhalt je nach Get/Post Request passend zusammen baut. Damit kann man Redundanzen vermeiden.


Was @korbenm zu Frameworks sagt, würde ich so nicht unterschreiben. Die Grundlagen sollte man immer verstanden haben bevor man ein Framework nutzt. Sonst baut man nur die nächste Seite mit schlecht funktionierendem, ungewartetem Bloat.

 

[Bennyaa]

---Vollzitat entfernt---
bitte Zitierregeln beachten

Kann sie gerne auch neu Bauen, ist noch nicht viel passiert.

Ergänzung (11. August 2021)

---Vollzitat entfernt---
bitte Zitierregeln beachten

was genau ist em. etc?
Bin in js recht firm, aber neu in der web entwicklung.

 

[Rossie]

Kann sie gerne auch neu Bauen, ist noch nicht viel passiert.

Ich kann TailwindCSS empfehlen. Damit hat man erst einmal nur ein gut durchdachtes und mit deren JIT, auch sehr schnelles und schlankes Toolkit ohne fixe Vorgaben, das auch gleich noch in Richtung komponentengetriebener Entwicklung weist. Es gibt natürlich auch viele fertige Bausteine, die man nutzen kann.

In die Tiefen von em vs rem etc. muss man damit gar nicht unbedingt einsteigen, natürlich weiterhin empfehlenswert und für manche Sachen notwendig, die Details zu kennen, aber für viele Dinge muss man nicht selbst CSS schreiben und auch ein Anfänger sollte schnell brauchbare Ergebnisse erzielen.

 

[Bennyaa]

---Vollzitat entfernt---
bitte Zitierregeln beachten

Ist das zu vergleichen mit Bootstrap?
Möchte jetzt natürlich nicht alles mischen usw.

Ergänzung (11. August 2021)

Gerne kann ich auch mal mein "Projekt" irgendwie online stellen, wenn sich jemand ansehen mag, was ich da fabriziert habe.

 

[Rossie]

Ist das zu vergleichen mit Bootstrap?

Ja und nein. Ist auch ein CSS-Framework, aber mit anderer Ausrichtung, da das Core-Paket lediglich Utility-Klassen bereitstellt. Ist ein ganz anderer Ansatz, als beim Dino Bootstrap. Damit kommt man auch zum Ziel. Aber Tailwind bringt eine Menge frischen Wind und hat in den letzten Jahren (die 1.0 kam 2019) enormen Zulauf bekommen.

 

[M4ttX]

Ja, ich würde auch Tailwind bevorzugen. Da lernt man auch sehr viel über CSS, wenn man sich dann anschaut, was da im Endeffekt rauskommt.

Soweit ich gehört hab entwickelt sich Bootstrap auch schon in diese Richtung

 

[Darrel]

Ganz ehrlich: Lass die Finger von Tailwind und Bootstrap und setzt dich doch einfach mal hin und lern die Basics.

Deine alten Threads und dieser Thread zeigen halt sehr deutlich, dass du dich mit den Grundlagen nicht auseinandersetzen magst und deswegen immer über Kleinigkeiten stolperst.

Und ich meine das nicht böse, aber es bringt nichts bei jeder Anpassung einen neuen Thread zu eröffnen oder sich von Framework zu Framework zu hangeln und bei der nächsten Änderung weißt du wieder nicht wieso etwas funktioniert oder eben auch nicht.

Wenn du die Basics kannst, dann spricht auch absolut nichts gegen ein Framework, aber bei dem aktuellem Stand stiftet das sicher mehr Verwirrung, als dass es dir hilft.

 

[Bennyaa]

---Vollzitat entfernt---
bitte Zitierregeln beachten

Möchte ja gerade ein Framework nutzen um eben solche Sachen wie navbar usw. nicht
selbst erstellen zu müssen.
Das wird doch auch immer so propagiert, dass es genau dafür da ist, oder?

 

[Piktogramm]

was genau ist em. etc?
Bin in js recht firm, aber neu in der web entwicklung.

Ernsthaft? In der Zeit wo du diese zwei Zeilen getippt hast, hätte es auch hierfür gereicht:
https://www.letmegooglethat.com/?q=web+scale+em

Generell ein guter Trick beim Lernen und Entwickeln (egal ob Web, Spaceshuttle oder Symphonie), bei unbekannten Begriffen gleich mal nachzuschlagen. Sehr oft stößt man so auf ganze Konzepte.

Ganz ehrlich: Lass die Finger von Tailwind und Bootstrap und setzt dich doch einfach mal hin und lern die Basics.

This!

Möchte ja gerade ein Framework nutzen um eben solche Sachen wie navbar usw. nicht
selbst erstellen zu müssen.
Das wird doch auch immer so propagiert, dass es genau dafür da ist, oder?

Keine Framework der Welt kann fehlendes Grundlagenwissen bei Entwickler·innen ersetzen. Frameworks helfen ungemein dabei, dass man den ganzen boilerplate code nicht schreiben muss. Die damit verbundene Komplexität sollte man beim Einsatz jedoch verstehen können. Beim Verstehen hilft es ungemein, den Kram einmal selber umzusetzen und die damit verbundenen Fehler zu durchleben.

 

[Bennyaa]

Ernsthaft? In der Zeit wo du diese zwei Zeilen getippt hast, hätte es auch hierfür gereicht:
https://www.letmegooglethat.com/?q=web+scale+em

Generell ein guter Trick beim Lernen und Entwickeln (egal ob Web, Spaceshuttle oder Symphonie), bei unbekannten Begriffen gleich mal nachzuschlagen. Sehr oft stößt man so auf ganze Konzepte.

This!


Keine Framework der Welt kann fehlendes Grundlagenwissen bei Entwickler·innen ersetzen. Frameworks helfen ungemein dabei, dass man den ganzen boilerplate code nicht schreiben muss. Die damit verbundene Komplexität sollte man beim Einsatz jedoch verstehen können. Beim Verstehen hilft es ungemein, den Kram einmal selber umzusetzen und die damit verbundenen Fehler zu durchleben.

OK, aber warum sollte ich eine navbar selbst programmieren, um sie nachher aus nem Framework zu nutzen?
Dann brauche ich das ja nicht mehr.

 

[Piktogramm]

Du fragst, obwohl du genau den begründenden Teil zu deiner Frage zitierst. Sinnverstehendes, aufmerksames Lesen ist beim Programmieren auch wichtig..