Box ragt über Container hinaus trotz 100% Angabe

  • Hallo, ich bin neu hier und hoffe ich kann mein Anliegen hier veröffentlichen.


    Ich bin seit einigen Jahren bei einem Homepage-Baukasten Anbieter angemeldet, von hier aus wird auch meine Webseite gehostet, nun habe ich ein "großes" Problem, was mich schon seit einigen Tagen so richtig beschäftigt und mir keine Ruhe lässt.


    Eines vorweg, ich habe hier die Forum-Suche bedient, nur finde ich nicht dass, was mein Problem "beruhigen" tut.


    Und zwar, ragt die Div-Box über den Div-Container hinaus, obwohl ich der Div-Box eine Weite von 100% gegeben habe.


    Da ich auch nur wirklich ein paar Grunderfahrungen in Sachen CSS und HTML habe, daher meine Frage an alle wo sich besser mit CSS und HTML auskennen, wieso ragt die innere Div-Box aus dem Div-Container hinaus?.. was muss ich beachten, damit die Box im Container bleibt, ohne dass sie über den Container hinaus geht?...


    Hier ein Beispiel:



    Nun, dass komische an der ganzen Sache ist, dass das auf meiner Webseite zwar geht - ( Webseite besteht aus 50% Fertg-Theme und 50% selbst erstellt ) - aber sobald ich das ganze beispielsweise im "Basisdesign CSS-Design für Profis" des Homepage-Anbieters oder im normalen Windows-Editor eingebe, und hier mir das ganze anschaue, dann funktioniert das ganze nicht.


    Noch ein Beispiel:


    Ich habe mir das hier: ( siehe Video-Link )


    Externer Inhalt m.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    - auf manchen Seiten nachgebaut, nur die Breite des Span-Elements ragt ebenso bei mir über den Container beziehungsweise über das Hintergrundbild hinaus, obwohl auch hier die Angabe 100 Prozent gemacht wurde, und der Herr im Video hat auch die Breite von 100 Prozent angegben und hier scheint es auch funktioniert zu haben.

    Ich könnte hier zwar die Breite auf "auto" setzen, das aber nicht Ziel der Sache ist, da sich dann das Span-Element dem Inhalt anpasst, und nicht auf die volle Breite angezeigt wird, und dass wünsche ich mir so eben nicht.


    Das macht mich noch Wahnsinnig, da ich nun auf meiner Webseite alle Breite-Angaben "100%" gegebenenfalls jetzt ändern muss, und ich habe dieses schon auf mehreren Seiten so schon erstellt beziehungsweise benutzt :cursing:;(.


    Ich hoffe jemand kann mir weiter helfen, und würde mich über Antworten sehr freuen.


    Liebe Grüße, Patrick :);)

  • zu dein ersten Problem. Meinst du die paar Pixel die da drüber ragen?

    Dann zieh doch mal den padding ab.


    Fals du noch was anderes meintest dann müßtest du mal den rest Code posten weil in den Code kann ich in meinen Browserjetzt nix erkennen was du meinen könntest

  • zu dein ersten Problem. Meinst du die paar Pixel die da drüber ragen?

    Dann zieh doch mal den padding ab.


    Fals du noch was anderes meintest dann müßtest du mal den rest Code posten weil in den Code kann ich in meinen Browserjetzt nix erkennen was du meinen könntest

    Nun so könnte ich es auch machen, jedoch müssten sich doch auch die 100% von der Box eigentlich automatisch an den Container anpassen oder?...


    Sorry, aber wie ich schon oben geschrieben habe, habe ich nur Grundwissen in Sachen CSS und HTML.


    Ihr Code sieht auf jeden Fall besser aus als meiner und gehen tut es auch - vielen herzlichen dank schon mal dafür :);)


    Liebe Grüße, Patrick

  • du könntest es auch mit Flex machen. Ich komme da auch immer durcheinander mit. Aber flexbox berechnet padding und border glaube ich schon ab. Aber du müßte ich jetzt selber goggeln gehen bevor ich das falsch sage.

    Mit Flex geht es auch zb so

  • Hey,


    Es ist so, dass eine Webseite 100% breit ist.


    Nun gibst du deinem Container 100% Breite aber dazu noch Padding. Das heißt, dass die eigentliche Breite des Containers größer als 100% ist und es aus diesem Grund dazu kommt.


    Bei der Angabe der Breite musst du immer das Margin und Padding mitberechnen.


    Grüße,

    Stef

  • du könntest es auch mit Flex machen. Ich komme da auch immer durcheinander mit. Aber flexbox berechnet padding und border glaube ich schon ab. Aber du müßte ich jetzt selber goggeln gehen bevor ich das falsch sage.

    Mit Flex geht es auch zb so

    Gute Idee, vielen dank dafür

    Nur wird, so vermute ich es mal, display: flex noch nicht von allen Browsern unterstützt, und ich möchte schon meine Webseite wenn möglich so handhaben, dass sie auf fast allen Browsern gleich aussieht.


    Naja, ich werde jetzt doch erstmal zu "auto" zurückgreifen müssen.


    Nochmals vielen dank für die Hilfe ;)


    Liebe Grüße, Patrick

  • Hallo Stef,


    erstmal vielen dank für Ihre hilfreiche Antwort.


    Nun, ich ginge immer davon aus, dass die 100% sich automatisch an den äusseren Container verteilen.

    Jetzt habe ich wenigstens wieder etwas dazu gelernt.


    Das komische eben an der ganzen Sache ist, dass es auf meiner 50% - fertigem Theme-Design funktioniert, nur leider nicht in einer ganz leeren HTML-Seite.

    Daher muss ich jetzt schon daran denken, wenn ich irgendwann mal meinen Homepage-Anbieter wechseln tue oder auch müsste, und dann muss ich mein 50% erstelltes Template auf der Webseite abändern, so, dass es weiterhin gut ausschaut.


    Liebe Grüße, Patrick

  • Das komische eben an der ganzen Sache ist, dass es auf meiner 50% - fertigem Theme-Design funktioniert, nur leider nicht in einer ganz leeren HTML-Seite.

    Da wird das bestimmt schon mit Flex oder Grid oder vieleicht mit Scripten oder sonst irgendwie schon mit berechnet. Kann man aber nur sagen wenn man den ganzen Code kennt.

    aber das

    Nur wird, so vermute ich es mal, display: flex noch nicht von allen Browsern unterstützt, und ich möchte schon meine Webseite wenn möglich so handhaben, dass sie auf fast allen Browsern gleich aussieht.

    Flexbox wird eigentlich von allen gängigen Browsern unterstützt.Wenn ich schätzen dürfte 95% Prozent. Ich hatte noch keinen der das nicht konnte. Mit Display Grid sieht das schon etwas anders aus weil das noch neuer ist. Doch wenn einer ein Browser hat der Flex nicht kann ist er selber schuld. Für die paar Leute würde ich meine Webseite nicht so umbauen das es bei den toll aussieht. Die sollen sich neuen Browser runterladen weil Fexbox ist mitlerweile schon 5 Jahre alt und da hätte man den Browser schon mal Updaten können.

  • basti1012 , ja da haben Sie auch wiederum vollkommend Recht, da gebe ich Ihnen auch meine volle Zustimmung dazu.


    Das mit dem display flex werde ich mir auf jeden Fall merken und ans Herz legen.


    Zur Not habe ich es mal so gemacht, damit das padding mitbrerechnet wird:


    Beispiel:



    Somit werden die 2 Prozent von innen mit gerechnet, da ich der Box nur 96 Prozent gegeben habe - ( 2 × 2 = 4 + 96 = 100 Prozent ).


    Na ja, wird schon irgendwie gehen :);)


    Schönen sonntagabend noch...


    Liebe Grüße, Patrick

Jetzt mitmachen!

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