Philipp123: Div verschiebt sich :(

Hallihallo, ich bastel gerade an meiner eigenen kleinen Homepage rum und bin auf folgendes Problem gestossen:
Ich habe drei Div-Elemente in einem Div-Element, die nebeneinander stehen sollen (soweit so gut). Die äußeren zwei sollen 100px breit sein, der mittlere soll den Rest der Breite des "Über-Divs" (100%) in Anspruch nehmen. Das klappt auch ziemlich gut so, aber wenn ich im mittleren Element Text einfüge rutscht dieses ab einer gewissen Länge unter die anderen Divs und nimmt die komplette Breite ein :(
Da ich noch ein ziemlicher Anfänger in PHP bin wäre ich für jeden Rat dankbar :)

  1. hallo,

    aber wenn ich im mittleren Element Text einfüge rutscht dieses ab einer gewissen Länge unter die anderen Divs und nimmt die komplette Breite ein :(

    Du müßtest bitte den relevanten Teil deines Codes angeben. So etwas mit dem "Verrutschen" passiert, wenn Inhalte eben "breiter" werden als du vorgegeben hast.

    Da ich noch ein ziemlicher Anfänger in PHP bin wäre ich für jeden Rat dankbar :)

    Den kannst du bekommen - allerdings nicht für PHP. Dein Problem ist ein Formatierungsproblem, und das löst du mit CSS.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. Du müßtest bitte den relevanten Teil deines Codes angeben. So etwas mit dem "Verrutschen" passiert, wenn Inhalte eben "breiter" werden als du vorgegeben hast.

      Jo, kein Problem, hier isser:

      <table style="background-color: #EBFFE9;"><tr><td>
        <div name="links" style="float: left;">
          <div class="platzhalter_bild" id="platzhalter_bild_1">
            <ul class="bildlisting">
              <span>Bildleiste I</span>
            </ul>
          </div>
        </div>
        <div name="rechts" style="clear: right; float: right;">
          <div class="platzhalter_bild" id="platzhalter_bild_2">
            <ul class="bildlisting">
              <span>Bildleiste II</span>
            </ul>
          </div>
        </div>
        <div name="mitte" style="float: left; display: inline;"><div id="preview">Hier k&ouml;nnte IHR Text stehen^^</div></div>
      </td></tr></table>

      Den kannst du bekommen - allerdings nicht für PHP. Dein Problem ist ein Formatierungsproblem, und das löst du mit CSS.

      Joa, sorry, nur jetzt kann ich den Thread auch nicht mehr verschieben (oder?) :(

      1. Moin

        <table style="background-color: #EBFFE9;"><tr><td>
          <div name="links" style="float: left;">
            <div class="platzhalter_bild" id="platzhalter_bild_1">
              <ul class="bildlisting">
                <span>Bildleiste I</span>

        weder div noch ul noch span dürfen an der Stelle jeweils vorkommen. Der Code ist einfach gründlich falsch und was die Browser damit machen nicht vorhersehbar.

        Gruß
        rfb

        --
        Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
        (Galileo Galilei)
        1. Moin

          <table style="background-color: #EBFFE9;"><tr><td>
            <div name="links" style="float: left;">
              <div class="platzhalter_bild" id="platzhalter_bild_1">
                <ul class="bildlisting">
                  <span>Bildleiste I</span>
          weder div noch ul noch span dürfen an der Stelle jeweils vorkommen. Der Code ist einfach gründlich falsch und was die Browser damit machen nicht vorhersehbar.

          Gruß
          rfb

          Aha, mit der Inforamtion kann ich jetzt aber leider herzlich wenig anfangen... Die Sache ist die: Ich verwende ein Javascript und daher muss ich das über divs und ul's machen und muss sie auch in einem Tabellenfeld haben, weil das Script nicht funktioniert!

          1. hi,

            bitte zitiere vernünftig!

            Aha, mit der Inforamtion kann ich jetzt aber leider herzlich wenig anfangen...

            Aha, mit der Inforamtion können wir jetzt aber leider herzlich wenig anfangen...

            Wenn du ein konkretes (Verständnis-)Problem hast, beschreibe das Problem.

            "Ich kann nix (damit anfangen)" ist eine Aussage, die absolut nichts bringt.

            Die Sache ist die: Ich verwende ein Javascript und daher muss ich das über divs und ul's machen und muss sie auch in einem Tabellenfeld haben, weil das Script nicht funktioniert!

            Das interessiert weder uns, noch die Browser.
            Auch per Javascript kann man gültigen HTML-Code dynamisch erstellen, und die Verschachtelungsregeln einhalten.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
          2. hallo,

            Die Sache ist die: Ich verwende ein Javascript und daher muss ich das über divs und ul's machen und muss sie auch in einem Tabellenfeld haben, weil das Script nicht funktioniert!

            Wenn dein Javascript auf fehlerhaften HTML-Code angewiesen ist, solltest du es entsorgen und dir ein neues schreiben. Und warum brauchst du hier Javascript, was soll das denn mit den Inhalten deiner Seite machen?

            Grüße aus Berlin

            Christoph S.

            --
            Visitenkarte
            ss:| zu:) ls:& fo:) va:) sh:| rl:|
            1. Wenn dein Javascript auf fehlerhaften HTML-Code angewiesen ist, solltest du es entsorgen und dir ein neues schreiben. Und warum brauchst du hier Javascript, was soll das denn mit den Inhalten deiner Seite machen?

              »»

              mein javascript greift auf den inhalt beider äußeren div-elemente zu und bewirkt einen "dateiaustausch" dieser beiden. Da ich das Script aber noch auf anderen Seiten benutze geht es nur über div's und diese dürfen auch nicht durch verschieden spalten/zeilen getrennt sein (also in einem gemeinsamen tabellenfeld liegen).
              Joa, ich weiß, klingt alles etwas kompliziert, hat aber seinen Sinn (zumindest fast alles, das "display: inline" und vergessene "<li>" sollte nicht so sein^^)

              1. hallo,

                Da ich das Script aber noch auf anderen Seiten benutze geht es nur über div's

                Dagegen ist nichts einzuwenden.

                und diese dürfen auch nicht durch verschieden spalten/zeilen getrennt sein (also in einem gemeinsamen tabellenfeld liegen).

                Das allerdings halte ich für bedenklich. Du kannst dein Script natürlich mehrfach einsetzen. Aber wenn es auf fehlerhaften Code setzt, dann tut es das auch mehrfach; also solltest du es so gestalten, daß es korrekten Code voraussetzt.

                Grüße aus Berlin

                Christoph S.

                --
                Visitenkarte
                ss:| zu:) ls:& fo:) va:) sh:| rl:|
        2. hallo,

          weder div noch ul noch span dürfen an der Stelle jeweils vorkommen.

          Woher nimmst du diese Aussage?

          Der Code ist einfach gründlich falsch und was die Browser damit machen nicht vorhersehbar.

          Das mag zutreffen, ja.

          Grüße aus Berlin

          Christoph S.

          --
          Visitenkarte
          ss:| zu:) ls:& fo:) va:) sh:| rl:|
          1. Moin

            Woher nimmst du diese Aussage?

            SelfHTML. Es fehlen tr und td/th sowie li.

            Gruß
            rfb

            --
            Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
            (Galileo Galilei)
            1. hallo rfb,

              Es fehlen tr und td/th sowie li.

              tr und td sind vorhanden, also wäre div zulässig - wenn auch nicht zwingend nötig. Mit li hast du recht.

              Grüße aus Berlin

              Christoph S.

              --
              Visitenkarte
              ss:| zu:) ls:& fo:) va:) sh:| rl:|
            2. SelfHTML. Es fehlen tr und td/th sowie li.

              tr und td sind vorhanden und den ul-tag kannst du in gedanken löschen, der hat ja nichts mit dem problem zu und hat schon seinen sinn.
              Gibt es nicht irgendeinen Befehl oder Ausdruck der es dem Div-element verbietet die breite zu ändern bzw. den Text einfach in der nächsten zeile fortsetzen lässt wenn die maximal breite erreicht ist?

              1. mmmh... ich glaube, dass dir in der Sache hier niemand so recht weiterhelfen wird, weil man lieber auf theoretischen Syntax- und Codekonstruktionen herumreitet, als DIR eine praktikable Lösung anzubieten.
                Das ist imho das größte Problem an diesem Forum, was oftmals auch als Arroganz ausgelegt wird. (Aus der Sicht eines notorischen Mitlesers, aber nicht - posters.)

                Ciao, Peter

                1. mmmh... ich glaube, dass dir in der Sache hier niemand so recht weiterhelfen wird, weil man lieber auf theoretischen Syntax- und Codekonstruktionen herumreitet, als DIR eine praktikable Lösung anzubieten.
                  Das ist imho das größte Problem an diesem Forum, was oftmals auch als Arroganz ausgelegt wird. (Aus der Sicht eines notorischen Mitlesers, aber nicht - posters.)

                  Ciao, Peter

                  Ja, stimmt schon, is leider so wie du es beschreibst... Statt auf das eigentliche Problem einzugehen wird über alles mögliche wie z.b. die Namen der divs diskutiert, die ich denen nur zur Verdeutlichung für dieses Forum gegeben hab und die im Quelltext weder auftauchen noch relevant für mein Problem wären :(

                  Naja, ich hab derweilen das Problem selber gelöst, danke an alle für die Hilfe! ;)

      2. hallo,

        <table style="background-color: #EBFFE9;"><tr><td>

        Diese Tabelle kannst du komplett weglassen, sie hat keinerlei Sinn.

        <div name="links" style="float: left;">

        Es hängt vom Kontext bzw. von der DTD ab, ob deine DIVs "Namen" bekommen dürfen. Wozu brauchst du die?

        <div class="platzhalter_bild" id="platzhalter_bild_1">

        Dieser Container ist vermutlich ebenfalls überflüssig. Dazu kommt, daß du hier eine Klasse vergeben hast - also hast du irgendwo noch CSS-Formatierungen vorgesehen. Das ist zwar richtig so, aber dann sind die "style"-Angaben beim vorherigen DIV ungeschickt und gehören auch in deine zentrale CSS.

        <ul class="bildlisting">
                <span>Bildleiste I</span>
              </ul>

        Wozu brauchst du hier eine Liste - zu der übrigens mindestens ein <li>-Element gehört? Und warum <span>?

        <div name="rechts" style="clear: right; float: right;">

        Gehört zwischen "links" und "rechts" nicht erst einmal "mitte"? Und was soll hier ein "clear:right"?

        <div name="mitte" style="float: left; display: inline;"><div id="preview">Hier k&ouml;nnte IHR Text stehen^^</div></div>

        Dein eingeschachteltes DIV "preview" ist überflüssig. Und wozu brauchst du "display:inline"?

        nur jetzt kann ich den Thread auch nicht mehr verschieben (oder?)

        Was meinst du mit "verschieben"? Du kannst Titel und Topic jederzeit ändern, wenn du dir dein posting erstmal in der Vorschau anzeigen läßt. Im übrigen hilft es dir sicher sehr, dir die  Forums-Hilfe genauer durchzulesen.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. Hello out there!

          <div name="links" style="float: left;">

          Es hängt vom Kontext bzw. von der DTD ab, ob deine DIVs "Namen" bekommen dürfen.

          Wenn der Kontext HTML (egal weche Version/Variante) ist, dann dürfen sie es nicht.

          See ya up the road,
          Gunnar

          --
          „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
          1. Hello out there!

            <div name="links" style="float: left;">

            Es hängt vom Kontext bzw. von der DTD ab, ob deine DIVs "Namen" bekommen dürfen.

            Wenn der Kontext HTML (egal weche Version/Variante) ist, dann dürfen sie es nicht.

            See ya up the road,
            Gunnar

            Warum ich denen Namen gebe ist doch gar nicht relevant... Im Quelltext tauchen die sowieso nicht auf, die sind nur zur Verdeutlichung, damit man besser sieht, welches Element rechts, links bzw. in der mitte steht

            1. Hello out there!

              Warum ich denen Namen gebe ist doch gar nicht relevant... Im Quelltext tauchen die sowieso nicht auf,

              Hä?? Was ist denn '<div name="links" style="float: left;">', wenn nicht Quelltext? (hier irrelevanter PHP-Quelltext, siehe [Jonathan])

              '<div name="links" style="float: left;">' ist kein gültiges HTML, denn 'div'-Elemente dürfen keine 'name'-Attribute haben.

              Du möchtest den 'div'-Elementen vielleicht IDs geben?

              die sind nur zur Verdeutlichung, damit man besser sieht, welches Element rechts, links bzw. in der mitte steht

              Namen von IDs sollten anhand der Funktion des Elements vergeben werden (à la '<div id="navigation">'), nicht anhand der gegenwärtig(!) gewünschten Darstellung.

              Wenn du Kommentare möchtest, verwende Kommentare.

              See ya up the road,
              Gunnar

              --
              „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
      3. Hallo,

        <table style="background-color: #EBFFE9;"><tr><td>

        Was sollen die ganzen Schrägstriche vor den Anführungszeichen? Die sind doch hoffentlich nicht im Quellcode. Poste bitte das nächste mal ordentlichen Quellcode wie er im Browser ankommt.

        Jonathan

  2. Hello out there!

    aber wenn ich im mittleren Element Text einfüge rutscht dieses ab einer gewissen Länge unter die anderen Divs und nimmt die komplette Breite ein :(

    Das übliche Verhalten beim Umfließen von Boxen mit 'float: left' oder 'float: right.'

    Schau dir mal in SELFHTML die mehrspaltigen Layouts an, besonders das dreispaltige.

    Da ich noch ein ziemlicher Anfänger in PHP bin

    In CSS wohl auch. Dann ist ja noch nicht alles versaut.

    Mache CSS-Angaben niemals in 'style'-Attributen, sondern zentral im 'style'-Element bzw. in einer externen CSS-Datei.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    1. Schau dir mal in SELFHTML die mehrspaltigen Layouts an, besonders das dreispaltige.

      Danke, habs mittlerweile gelöst ;)

      Mache CSS-Angaben niemals in 'style'-Attributen, sondern zentral im 'style'-Element bzw. in einer externen CSS-Datei.

      Jo, danke, mach ich eigentlich auch, aber hier halt nicht, weil ich nicht die ganze .css posten wollte