Ankündigung

Einklappen
Keine Ankündigung bisher.

Hintergrund will einfach nicht über den Text

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Hintergrund will einfach nicht über den Text

    Guten Morgen,
    Ich habe ein kleines Problem ich habe für meine Seite eine CSS angelegt für zwei Spalten/Container die nebeneinander stehen sollen, diese sehen folgendermaßen aus:
    HTML-Code:
    #col-left {
        width:             60%;
        height:            800px;
        float:             left;
        text-align:         left;
        text-align:         justify;
        margin-left:         100px;
        margin-top:         28px;
        padding-right:         50px;
    }
    #col-right {
        width:             20%;
        float:             left;
        margin-right:         50px;
        margin-top:         30px;
        margin-bottom:        30px;
        height:            inherit;
    }
    Soweit so gut. Es wird alles schön so angezeigt wie ich das wollte, aber mein Warpper bzw. Backround will einfach nicht über den Text er bleibt darüber stehen. Ist das einzige mal dass dies passiert. Normalerweise verlängert er nach unten automatisch mit repeat. Ich habe zwei Seiten mit diesem Problem aber nur weil ich dieses 2 Spalten Layout benutzen soll(ist eine Vorgabe kann ich nicht ändern). Ich hab so das Gefühl das ich bloß eine Kleinigkeit im CSS falsch gemacht habe ich sehe bloß nicht was. Kann mir vielleicht jemand sagen was ich falsch gemacht habe im css? Bei jeder anderen ID bzw Layout verlängert er brav solange die Seite geht, nur bei diesen beiden Kandidaten nicht.

  • #2
    Mal davon abegesehen, dass es zu deinem Problem sehr hilfreich wär, wenn du es genau beschreibst und/oder die HTML mitlieferst, rate ich mal drauf los.

    Wenn irgendwas über irgendwas liegt, also Elemente sich verdecken, solltest du dir mal die CSS-Eigenschaft z-index anschauen: https://developer.mozilla.org/de/docs/Web/CSS/z-index

    In deinem Beispiel kann ich mir vorstellen, dass du ein Problem mit den Floats hast. Die sollten nämlich auch wieder beendet werden, heißt, dass das Element, das nach den gefloateten Elementen folgt, den Float mit clear auflöst: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

    Des Weiteren, du hast bei #col-left zwei mal text-align drin. Du solltest dich für eines entscheiden, denn das zweite überschreibt das Erste. Siehe https://developer.mozilla.org/de/doc...CSS/text-align.

    Kommentar


    • #3
      sorry für die ungenaue Beschreibung hier die Seite die nicht so ganz hinhauen will ich gehe deine Tipps mal durch.
      HTML-Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"  charset="utf-8">
      <html lang="de">
          <head>
              <title>Kraft Paper</title>
              <link rel="stylesheet" href="../css.css" type="text/css" media="screen" />
          </head>
      
          <body>
              <div id="wrapper" align="center">
                  <div id="inhalt">
                      <div id="logo">
                          <img src="../bilder/logo.png" alt="mondilogo" width=400 height=200>
                      </div>
      
                      <p>
                          <div id="info">
                              Starboard KraftTop
                          </div>
                      </p>
      
                      <div id="button-back">
                          <a href="../index_i.php" class="button" > Zur&uumlck zur Startseite</a>
                      </div></br>
      
                      <div id="col2">
                                  <div id="col-left">
                                       - Ausgezeichnete Festigkeit
                                       <br>- TEXT TEXT TEXT TEXT
                                       <br>- TEXT TEXT TEXT TEXT
                                       <br>- TEXT TEXT TEXT TEXT
                                       <br>- TEXT TEXT TEXT TEXT
                                       <br>- TEXT TEXT TEXT TEXT
                                       <br>- TEXT TEXT TEXT TEXT
                                  </div>
                                  <div id="col-right">
                                      <img src="../bilder/fotoleiste/kraft.jpg" width=200 height=150 border="1"/>
                                  </div>
                  </div>
              </div>
          </body>
      
      </html>

      Kommentar


      • #4
        Zähle mal Deine div´s durch, dann schmeiß die br´s außerhalb der div´s raus, dann setze kein div innerhalb des p´s ....

        Kommentar


        • #5
          Sorry ich hatte da noch einen Fehler drin vom rumprobieren. Des eine war col-left und nicht coontainer_links und divs hab ich eines zu viel offen wenn ich mich nicht verzählt habe.
          Aber es muss irgendwie an der Eigenschaft des CSS liegen.... Ich muss noch weiter die Tipps von oben weiter durchgehen. Bin trotzdem immer noch offen für alles. Werde die ganzen Vorschläge durchprobieren. Danke für die Antworten!

          Kommentar


          • #6
            Du nimmst die beiden elemente mit float raus aus der normalen Struktur (deren Höhe wird nicht in die Höhe der eigentlichen umgebenden Elemente eingerechnet) bis zu dem punkt an dem Du das float wieder aufhebst.

            Mit clear: left kannst Du das im ersten Element nach den Beiden elementen wieder aufheben. Wenn keins dannach kommt hänge es mit :after an das letzte element an.
            PHP-Manual ¡ mysql_* ist veraltet ¡ Debugging: Finde DEINE Fehler selbst ¡ Passwort-Hashing ¡ Prepared Statements

            Kommentar


            • #7
              Ich konnts jetzt nachvollziehen. Das Element mit der ID wrapper hat nicht das Element mit der ID col-right in der Ausgabe umschlossen, obwohl es das eigentlich sollte. Das ist, wie ich schon angedeutet habe, ein Float-Problem. Du solltest nach den gefloateten Elementen den Float wieder aufheben, dann sind die Elemente auch wieder im Wrapper.

              So zum Beispiel:
              HTML-Code:
              <div id="wrapper" align="center">
                  ...
              
                  <div id="col2">
                      ...
              
                      <div id="col-right">
                          ...
                      </div>
                      ...
              
                      <div style="clear:both;"></div>
                  </div>
              </div>
              Das leere DIV-Element hebt den Flaot auf. Die Aufhebung des Floats kann auch in ein bereits bestehendes nachfolgendes Element integriert werden.

              Kommentar


              • #8

                ...charset=ISO-8859-1" charset="utf-8"
                Was soll das denn?

                W3C//DTD HTML 4.01
                Wir sind mittlerweile bei HTML5 seit einigen Jahren. Es kann nicht schaden sein Wissen auf den neuesten Stand zu bringen.

                Kommentar


                • #9
                  Gut, dass nur Ärzte operieren dürfen, nur Meister an meiner Gasleitung fummeln und nur ausgebildete Piloten .......

                  Kommentar


                  • #10
                    Bitte zerfleischt mich nicht
                    Diese Seite ist nicht von mir sondern wurde vor einiger Zeit mal von jemand anders erstellt ich versuche bloß die Fehler auszumerzen. Ich bin eigentlich C Programmierer und komm noch nicht ganz mit HTML klar. Ich verstehe zwar einigermaßen was da steht und wie die Seite aufgebaut ist aber solche Fehler wie der her entziehen sich leider noch meinem Wissen. Ich danke euch trotzdem wirklich, dachte nicht hier so mit guten Antworten regelrecht erschlagen zu werden.

                    Kommentar


                    • #11
                      Das ist auch nicht böse gemeint, als C-Programmierer sollte man schon anhand der Einrückungen erkennen, dass da etwas nicht stimmt... und wenn Du eh den Kram erneuerst, dann benutze für so etwas flexbox, das macht´s leichter.

                      Kommentar


                      • #12
                        Zum Thema Flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

                        Kommentar


                        • #13
                          Wenn du mich frägst, ist HTML ein Krampf^^ Ich bin absolut nicht begeistert von dieser Sprache. Ich bleib lieber beim guten alten C und Assembler, anstatt sowas zu machen. Ich hab das DIV jetzt rausgeworfen, Besserung hat das leider nicht gebracht. Ich muss mich definitiv mit dem Floaten beschäftigen und schauen wo hier genau der Fehler ist, so ganz verstanden hab ichs bis jetzt noch nicht, aber das liegt eher an meiner Unwissenheit als an eurer großen Bereitschaft zu helfen. Ich danke euch nochmals, falls jemand noch Vorschläge hat immer her damit.

                          Kommentar


                          • #14
                            Zitat von MApaper Beitrag anzeigen
                            Wenn du mich frägst, ist HTML ein Krampf^^ Ich bin absolut nicht begeistert von dieser Sprache. Ich bleib lieber beim guten alten C und Assembler, anstatt sowas zu machen.
                            Nagut, HTML ist eine Auszeichnungssprache und C/Assembler sind Programmiersprachen. Das kann man natürlich nicht vergleichen

                            Außerdem hat die Darstellung nur wenig mit HTML zu tun. Dafür ist hauptsächlich CSS zuständig. HTML dient primär nur zur Datenstrukturierung.

                            Der Einstieg ist meiner Ansicht nach nicht sonderlich leicht, da man mit HTML/CSS viele Freiheiten und Möglichkeiten hat und man hauptsächlich durch Erfahrung einen passenden Lösungsweg findet. Hinzu kommt, dass zu dem Thema sehr viel veralteter Müll im Web existiert.

                            Kommentar


                            • #15
                              Ja das mag stimmen, aber was bei mir der Fall ist, ich muss auf basierenden aufbauen. Es ist eine Sache mit kleinen Spielereien anzufangen eine ganze andere ist es eine fertige Website umzustrukturieren. Das Problem mit dem CSS ist, dass ich da immer ganze gerne reinschaue weil etwas nicht passt, dann ändere ich es und es klappt auch, aber ich habe eine zweite Seite die genau so aufgebaut ist nur inhaltlich anders und diese aber dann nicht passt^^

                              Naja aber wie gesagt das Problem mit diesem Float konnte ich bis jetzt nicht lösen. Ich habe eine Seite die funktioniert, aber die andere die genau alles gleich hat nur ein paar andere Textzeilen(nur der Textinhalt) anders ist. Ich werde noch wahnsinnig, wenn ich Code übernehmen muss der unsauber ist oder eher Auszeichnungen

                              Kommentar

                              Lädt...
                              X