Inhalt eines Containers reponsiv machen

    Ich hoffe ich finde eine richtige erklärung dafür.

    Ich versuche gerade eine neue Startseite für meine Page zu bauen mit flex und reponsive und so .

    Jetzt habe ich im header ein Script eingebunden was eine grösse hat von bla pixeln 600 x 300 glaube ich .

    Der Container runter rum ist reponsiv.( glaube ich zumindest) .

    Aber die Uhr da drinne ist es nicht .Wenn dieUhr nicht 3000 Zeilen Css hätte,hätte ich die umgeschrieben ,aber so nicht .

    Deshalb frage ich mich ob es ein weg gibt den inhalt eines containers mit schrumpfen zu lassen.

    Hier mein neuer versuch http://sebastian1012.bplaced.net/index3.php

    Es gibt einen Weg, wenn er auch nicht besonders schön ist: Mit Javascript und transform:scale() die Größe von #main an die Breite des Browserfensters anpassen. Den Skalierungsfaktor musst Du berechnen.

    Jetzt must du mir auf die sprünge helfen. Welches main meinst du? Den container wo die Uhr drinne ist?
    In mein Fall <section class="section2">
    Oder meinst du den wo die Uhr drine ist <div id="haupt">
    Kann man mit scale() einen ganzen Container vergrössern mit Inhalt ?Mein Inhalt ist gross.Muß ich mal testen

    EDIT : Was ist den jetzt mit mein Beitrag passiert? Auch cool:)

    EDIT: ok der erste test hat geklappt mit scale() ,muss mir jetzt nur was einfallen lassen wie ich das mit berechnung machen .Aber da für gibts ja google. Besten dank für den tipp

    So das mit den verkleinern Klappt.ABER nach den verkleinern passt die position nicht mehrlaut inspector ist alles ok. aber er zeigt wohl die Position vor den verkleinern an .Das verkleinerte divneu zu positionieren klappt nicht.Dazu müsste ich wissen um wie viel pixel es sich verkleinert hat .


    Gibt es dafür eine Formel? Ich bin eigentlich gut in mathe aber finde gerade nicht den richtigen rechen weg

    Zitat

    nach den verkleinern passt die position nicht

    Die Position kannst Du mit transform-origin steuern. Am besten forschst Du in dieser Richtung mal nach.

    Zitat

    Oder meinst du den wo die Uhr drine ist <div id="haupt">

    Genau, den meinte ich. Nicht main sondern haupt.

    Ja das verkleinern functioniert ja . ich verkleinere jetzt den section .das klappt ja alles bestens nur nach transform ist der container ja nicht mehr da wo er vorher wahr .nach den transform kann man die tasächliche neue grösse mit

    Code
    var rect=rect1.getBoundingClientRect();
 hx1=rect.height;

    anzeigen lassen. ziehe ich das von vorheriger grösse ab und mache das dann mit minus top und left kommeich da hin wo ich will. das klappt aber leider nicht bei allen grössen. Es ist nur zu 80 % perfekt .


    Versuche es jetzt mit translate.

    2 test grössen haben geklappt .Suche jetzt noch weiter bis es klappt.


    Wahr ne sch... idee mit der Uhr .Hätte die Uhr nehmen sollen die ich vorher hatte

    Das sieht doch schon mal gut aus.

    Ich werde deine Variante mal morgen testen. Ich habe das jetzt mit translate gemacht und für 10 verschiedene if() "breakpoints sage ich mal dazu"gemacht. Klappt zu 80 prozent ganz gut.Aber wenn deine möglichkeit bei mir noch besser klappt nehme ich natürlich das .Werde das mal morgen testen

    Ja an Anfang hatte ich Probleme die richtige größe zu treffen ,was aber recht schnell behoben wahr .

    Ansonsten sieht es schon mal besser aus wie vorher.


    Habe zwar noch nicht verstanden was der Code da genau macht .

    "transform-origin": "0 0" das sagt doch den Left ,Top Punkt fest oder? links oben in Ecke.?


    EDIT: Ich glaube ich habs jetzt doch gescheckt.

    Ich mußte nur die berechnung ändern siehe hier


    var hContainer = $("#section2").height()/0.37;

    Weil ohne das ist meine Uhr doppelt so groß wie der Monitor,was ich nicht ganz schecke . Oder ist das Richtig?


    Aufjedenfall klappt es beimir jetzt schon .Wenn die anderen das Lesen ,bitte mal kucken ob bei euch die Uhr in der Ecke bleibt beim scheben.

    ch befürchte das der IE wieder stress machen könnte.Sollte mir den Browser mal runter laden für Test Zwecke.

    Aber danke an Sempervivum du hast mir mit den Script um einiges weiter gebracht

    Zitat von Stef

    basti1012 : Deine Seite ist sehr breit. Ist dies dir bereits aufgefallen?

    He woran sehe ich den das? Bei mir sagt der HTML inspektor das es 822 x 1300 ist Dassind doch normale werte. Ich klatsche da gleich mal zum test overflow:scroll; in der <html> und <body>Css rein dann müsste man jasehen wie gross es wirklich ist

    ich habe keine scrollbar bei mir .bei mir wird alles normal angezeigt ,auch in den anderen browser. Verstehe ich jetzt nicht . kann mir mal einer sagen was hier los ist ? Bist du mit Handy online ? Ich bin mit Laptop und hier ist alles gut.


    Auch wenn ich browser fenster klein mache ist alles bestensbei mir .


    Ich glaube ich verstehe nix mehr

    Scrollbar ist bei mir auch nicht. Die Seite ist responsiv und passt sich an die Fensterbreite an. Und die Seite frisst wirklich sehr viel Rechenzeit: CPU-Auslastung wenn sie offen ist über 60%, ohne um 5%.

    Animationen brauchen im allg. viel Rechenzeit und die Uhr bewegt sich ja ständig. Deaktiviere doch die Ani. mal probeweise, dann siehst Du, ob es daran liegt.

    Zitat von Sempervivum

    Scrollbar ist bei mir auch nicht. Die Seite ist responsiv und passt sich an die Fensterbreite an. Und die Seite frisst wirklich sehr viel Rechenzeit: CPU-Auslastung wenn sie offen ist über 60%, ohne um 5%.

    Animationen brauchen im allg. viel Rechenzeit und die Uhr bewegt sich ja ständig. Deaktiviere doch die Ani. mal probeweise, dann siehst Du, ob es daran liegt.

    Ja die Uhr frist viel Cpu das stimmt ,das habe ich schon bemerkt.Die fliegt da wohl auch erstmal wieder raus bis in 10 Jahren die Pc nochmehr leistung haben.Verstehe gar nicht das das Script so anstrengend für den rechner ist.Aber irgendwie schon weil jede Sekunde muss das Script einige @keyframes ausführen. Werde mir mal nee andere Uhr suchen ,oder diese Uhr ohne Animationen.


    Aber was ist den jetzt mit den Problem das die Seite so gross istbei Stef . Liegt das daran das ich irgendwas falsch gemacht habe auf der Seite oder sind da verschiedene Einstellungen am Browser schuld,bzw generell die verschiedene Browsers

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden