Divs haben unterschiedliche Positionierung und ich kann mir nicht erklären warum... sollten eigentlich in einer Linie sein... dachte ich zumindest... und... der IE will meine Rahmen nicht

  • Hi


    ich hab mich bemüht ein dreispaltiges Layout zu "erschaffen" und bin gescheitert... da das nur für eine Seite ist und ich eigentlich drei Listen nebeneinander abbilden will hab ich mir jetzt mit display:table geholfen, was auch funktioniert hat, aber dennoch lässt mich das Problem nicht los und ich finde den Fehler nicht.


    Ziel:


    3 Spalten nebeneinander die auf gleicher Höhe beginnen und dann unterschiedlich langen Inhalt haben können.


    hier mal ein Beispielcode:



    und dazu das css



    Was ich zwischendrin mal als Lösung versucht habe und mir sehr gut gefallen hat ist die css-eigenschaft column, aber da weigert sich leider der Firefox mit zuspielen und leider nachhaltig, aber schöner und einfacher kann man Spalten find ich kaum designen.


    Aber zu obigem Problem... ich weiß nicht warum... aber das 2. Div ist höher als das erste und das dritte fängt erst unterhalb von zweiten an... trotz float:right....


    UND, wenn ichs schon mal poste... der Internet-Explorer zerschmeißt mir bei den Design im Main IMMER die Rahmen und margin und padding, auch bei Seiten ganz ohne float und ich weiß nicht warum...


    Bezüglich des drei-Spalten-Designs möchte ich gerne etwas dazu lernen. :)


    Beim Rahmen, margin, padding und dem IE ist das eine Sache, die ich wirklich noch unbedingt bereinigen muss und ein Tipp wäre da toll. :)


    Danke schon mal vorab :)


    Gunni

  • Hallo


    Im CSS hast du bei spaltemitte den führenden Punkt vergessen. Das ist aber nicht das Problem.


    Zum einen benutzt (mißbrauchst) du Float, obwohl es für solche Layoutaufgaben nie gedacht ist. Float dient dazu Text andere Elemente (meist Bilder) umfließen zu lassen.


    Zum anderen benutzt du Float ohne es verstanden zu haben.


    Damit die drei Spalten nebeneinander stehen solltest du allen Breiten (width) auf den Weg geben. Also zum Beispiel denen außen jeweils 33% und der mittleren 34%. Und dann alle drei in die gleiche Richtung floaten, sinnvollerweise nach links.


    Zitat

    aber das 2. Div ist höher als das erste


    Die Höhe von Elementen wird von ihrem Inhalt bestimmt. Das zweite div div hat mehr Inhalt. Daran ändert auch float nichts.


    Zitat

    der Internet-Explorer zerschmeißt mir bei den Design im Main IMMER die Rahmen und margin und padding


    Das lässt sich ohne Beispiel nicht nachvollziehen. Wahrscheinlich berechnest du die Breiten falsch, Stichwort: Box-Modell.


    Zitat

    Bezüglich des drei-Spalten-Designs möchte ich gerne etwas dazu lernen.

    Dann beschäftigst du dich am Besten mit Flexbox. Das wurde speziell für solche Layoutwünsche entwickelt und kann so ganz nebenbei für die gleiche Höhe von nebeneinanderliegenden Spalten sorgen.


    Zitat

    der Internet-Explorer zerschmeißt mir bei den Design im Main IMMER die Rahmen und margin und padding


    Nachtrag:


    Ich habe grade gesehen: In deinem geposteten Beispiel liegt das an der falschen Anwendung von float / clear. Wie schon geschrieben solltest du darauf eh' verzichten.


    Trotzdem mal drei Seiten mit Hintergrundinformationen zu Float:


    http://www.andreas-kalt.de/webdesign/tutorials/float-theorie


    und


    http://www.thestyleworks.de/basics/float-rule.shtml


    und


    http://little-boxes.de/lb1/IV-css-positionierung.html


    Gruss


    MrMurphy

  • Hi Mr. Murphy,


    Wie gesagt, ich habs nun mit display:table gelöst. Das geht eigentlich gut muss ich zugeben. :)


    Hmmm obwohl ich den Seitenkopf mit Flexbox gelöst habe und damit auch die Subnav und sowas gelöst habe wär ich nicht auf die Idee gekomen das komplette Seitenlayout über Flexbox zu machen... muss ich mir nochmal Gedanken dazu machen wie das dann für den seitenihnalt aussehn könnte. :)


    Hmm ich befürchte float hab ich echt nicht begriffen... danke für die Links, werd ich gleich lesen. :)


    Bezüglich des Gedankens das mit Float zu lösen... wäre ich auch nicht alleine drauf gekommen. Das hab ich mir hier auf HTML Seminar abgeguckt (https://www.html-seminar.de/3-spalten-layout-erstellen.htm) , aber scheinbar falsch nehme ich an.

    Mit Float habe ich aber immer das Problem, dass der gefloatete Conainer nicht auf der Ebene ist, wo ihn gerne hätte. Clear dachte ich eigentlich hätte ich begriffen. Aber da erleuchten mich bestimmt die verlinkten Seiten gleich. :)


    Wegen der Höhe der Divs.. damit meine ich wo auf der Seite sie beginnen, also wenn man sich die Seite ansieht in welcher Zeile (neben bestimmtem Ihnhalt, bei mir springt das immer etwas...), nicht die Gesamthöhe. Die Gesamthöhe, also wo der div-container endet, ist klar vom Inhalt abhängig, aber nicht wo der Div anfängt oder doch? Bin grad verunsichert.


    Bezüglich des ie-Problemes.


    Das Beispiel ist oben.


    Einfach den Code nehmen und nen beliebigen Text ins main packen, ohne divs ohne alles, kein float, kein clear, einfach nur text mit vorne und hinten nem <p>... bei Firefox, Chrome, Safari, Opera hab ich links und rechts nen Rahmen am Main und Abstand zu Rahmen beim Text.

    Der IE zerhackt den Rahmen im main, setzt den Text direkt an den linken Rand und ich weiß nicht warum... beim Footer macht er es dann richtig, oben Rahmen und links und rechts, wie erhofft.

  • Was ich vergaß zu sagen,


    vielen lieben Dank, dass Du Dich so intensiv mir meinem Unwissen beschäftigst! Das ist toll und ich weiß das wirklich zu schätzen. :)


    Ich bin wirklich froh, dass ich mich weiterentwickeln kann. :)


    Gruß


    Gunni

  • Hallo


    Zitat

    Wie gesagt, ich habs nun mit display:table gelöst.


    Das kannst du machen. Die Lösung kommt aber wahrscheinlich an ihre Grenzen, wenn du dein Layout responsive gestalten willst.

    Vor Flexbox gab es keine spezielle Möglichkeit Spaltenlayouts zu erstellen. Float wurde deshalb häufig dafür mißbraucht. Deshalb findet man dazu auch noch viele Anleitungen im Netz, die aber bereits seit einigen Jahren veraltet sind.


    Zitat

    Mit Float habe ich aber immer das Problem, dass der gefloatete Conainer nicht auf der Ebene ist, wo ihn gerne hätte.

    Indirekt.


    Wie schon geschrieben sollten alle nebeneinander stehenden Container eine Breite bekommen und immer in die gleiche Richtung floaten. Das hat sich am praxisgerechtesten erwiesen. Noch sinnvoller ist heutzutage Flexbox.


    Zitat

    damit meine ich wo auf der Seite sie beginnen


    Jetzt verstehe ich (glaube ich zumindest). Die Überschriften beginnen nicht auf gleicher Höhe.


    Das hat zwei Ursachen.


    Zum einen wird die linke Box gefloatet, die mittlere nicht. (Also nebenbei wieder ein Grund alle nebeneinanderliegenen Container gleich zu behandeln).


    Die zweite Ursache sind die sogenannten Collapsing Margins. Bei der linken gefloateten Box sind die Collapsing Margins durch das Float ausgehebelt, bei der mittleren ohne Float kommen sie zum Tragen.


    Bei der Erstellung einer Seite ist es häufig hilfreich Containern und anderen wichtigen Elementen unterschiedliche Hintergrundfarben zu geben um ihre Größe besser erkennen zu können.


    Gruss


    MrMurphy

  • Hi,


    Danke :)


    Ich glaube ich beginne zu begreifen. :)


    Das mit dem Float muss ich auf jeden Fall nochmal genau lesen. :)


    Mit Flexbox müsste ich dann einen umschließenden Container haben oder? Hmm muss ich mir mal angucken, muss sich ja schlussendlich automatisch an der Höhe des Containers orientieren der den meisten Inhalt hat.... hmmmmm... muss ich ausprobieren. Der tipp mit den Farben ist gut, morgen mach ich mich da mal drüber. :)


    Wegen dem Problem mit dem ie mach ich mal ein Bild, da wäre ein Hinweis sehr lieb. :)


    Danke nochmal sehr für all die Hinweise und Hilfe und die Zeit, die Du mir schenkst. :) Langsam aber sicher fuchse ich mich immer weiter rein. :)


    Lieben Gruß


    Gunni

  • Hallo


    Zitat

    Wegen dem Problem mit dem ie mach ich mal ein Bild, da wäre ein Hinweis sehr lieb.


    Der Hinweis kam doch bereits: Float sinnvoll anwenden.


    Zitat

    Mit Flexbox müsste ich dann einen umschließenden Container haben


    Ein umschließender Container kann für Float und Flexbox aus vollkommen unterschiedlichen Gründen sinnvoll sein, ist aber in beiden Fällen nicht unbedingt notwendig. Bei deiner Beispielseite würde ich keinen extra umschließenden Container für die drei section-Elemente verwenden. Das kommt letztendlich auf die endgültige Seite mit dem kompletten Inhalt an.


    Gruss


    MrMurphy

  • Hi :)


    ich hab mir das mit dem Float durchgelesen und probier grad bissi rum. Auch das Thema Positionierung ist noch interessant, da ich erwäge die Navi beim Scrollen bis zum oberen Bildschirmrand laufen zu lassen und dort dann zu fixen, da muss ich noch bissi rumexperimentieren.


    Mein ie.Problem hat m.E. aber nichts mit Float zu tun und ich weiß wirklich nicht woher es kommt bzw. wie ich es angehe.


    Die Bilder habe ich angehängt.


    Bei Safari/Opera/Chrome/Firefox sind die Rahmen wie sie sollen, links und rechts am Main und ich hab nen Abstand zum Rand.


    Der ie hält weder Abstand noch macht er die Rahmen hin sondern zerhaut die irgendwie. Rechts ist gar keiner, der Linke wird nur zum Teil angezeigt (und nach oben verschoben bzw nach rechts innen unten verschoben. Siehe Bild


    iehtml-seminar.de/woltlab/attachment/1141/


    chrome html-seminar.de/woltlab/attachment/1142/



    hier der Code:


    html



    und css



    Das Dreispaltendesign hab ich jetzt mit Felxbox gelöst wobei die Spalten die Felxitems sind, also keine eigenen Flexboxen. Vom Design her musst ich ne neue Bildschirmgröße einfügen, da es "ätsch" aussah, wenn die dritte Spalte nach unten gerutscht ist, daher hab ich ausnahmsweise eine feste Breite vergeben, die dann Größenabhängig die mittlere Spalte anders darstellt (ohne Rahmen rechts).


    Ich kann mir das nicht erklären, Hab da auch schon rumgefeilt, aber der ie will einfach nicht...

  • Hallo


    Zitat

    Der ie hält weder Abstand noch macht er die Rahmen hin sondern zerhaut die irgendwie.


    Du meinst wahrscheinlich den IE11.


    Der kennt das main-Element nicht. Deshalb solltest du das main-Element zu Beginn der CSS-Angaben als Blockelement bestimmen.


    Was du mit Flexbox für Probleme hast kann ich nicht nachvollziehen.


    Gruss


    MrMurphy

  • SUPER! :)


    Mann, ich da wäre ich nie drauf gekommen, dass der ie "main" nicht kennt... argl. Ich hab mir nen Wolf gesucht nach Besonderheiten hinsichtlich der css-Befehle... Stundenlang und völlig sinnlos.


    Ich hab in dem Sinn kein "Problem" mit Flexbox. Ich hab nur die Spalten optisch durch Striche getrennt, die dann natürlich wenn eines nach unten gerutscht ist "sinnlos" wurden und nicht so schön aussahen.


    daher nun



    Wobei zumindest Optisch die mittlere Spalte irgendwie schmäler aussieht als die links und rechts...


    Aber wie gesagt, "Problem" hab ich keines, nur durch die Striche Seitlich musste ich nen Zwischenschritt einfügen für "zwei nebeneinander", also bei Bildschirm zwischen 546 und 801 px


    Vielen vielen lieben Dank für Deine Hilfe! :)


    Gruß


    Gunni

  • Jetzt hab ich doch ein Problem, das, so befürchte ich in Gänze mein Unvermögen und mein mangelndes Verständnis offenbart.


    Ich hab die Spalten wie oben beschrieben gemacht. In den Spalten möchte ich gerne downloads zu Verfügung stellen. Da das sowohl als pdf als auch in office-Formaten der Fall sein soll hab ich mir kleine Icons gebastelt, die hinter dem Text erscheinen sollen und dann als Link funktionieren sollen.


    Blöder Weise kommen die nicht hinter dem Text, sondern darunter. Ich habe daher die Listpunkte auch als Flex-box definiert. Dann kommen die Icons hinter dem Text. Wenn allerdings der Text umbricht rutschen die Icons an den rechten Rand... und ich bekomme sie "ums verrecken" nicht dazu hinter dem Text zu bleiben.


    Hier mal ein Bild:

    html-seminar.de/woltlab/attachment/1146/


    es tut mir wirklich leid, dass ich schon wieder komme und um Hilfe bitte. Ich hab auch an zig Stellen gelesen und "alles mögliche" ausprobiert... aber ich schaffe es einfach nicht, die links hinter dem Text zu lassen... entweder sind sie "drunter" oder verschieben sich nach rechts wenn die Zeile umbricht.


    hier mal der Code dazu:


    html:



    und css




    inzwischen hab ich so viel rumprobiert und gemacht, dass ich irgendwie überhaupt nicht mehr durchblicke und ich verstehe leider überhaupt nicht, warum die Links nach rechts wandern... aber ich hab schon nicht verstanden, warum sie unterhalb des Textes angezeigt werden, wenn ich den li-Elementen nicht display:flex mitgebe....


    sorry. Tut mir wirklich leid, dass ich schon wieder darum bitte mir Zeit zu opfern, aber ich stehe wirklich auf dem Schlauch und komme und komme nicht zum Ergebnis.


    Danke schon mal für die Unterstützung :)


    Gruß


    Gunni


    p.s. Warum fügt er eigentlich im Code immer ne leerzeile zwischen den Zeilen ein? Ich bearbeite dann immer nach damits leichter lesbar wird...

  • Hallo


    Die Prefexie für Flexbox sind schon lange nicht mehr erforderlich.


    Zitat

    aber ich hab schon nicht verstanden, warum sie unterhalb des Textes angezeigt werden,


    Bei mir werden die Symbole dann gar nicht angezeigt.


    Zitat

    Ich hab die Spalten wie oben beschrieben gemacht. In den Spalten möchte ich gerne downloads zu Verfügung stellen. Da das sowohl als pdf als auch in office-Formaten der Fall sein soll hab ich mir kleine Icons gebastelt, die hinter dem Text erscheinen sollen und dann als Link funktionieren sollen.

    Dann solltest du die Bilder nicht als Hintergrundgrafiken einbinden, sondern mittels img-Elements. Flexbox ist dann auch falsch.


    Zudem ist es schlechter Stil nur kleine Symbole zum Anklicken / Antouchen anzubieten. Nicht Jeder kann die Maus so zielsicher wie du verwenden. Du kannst die Links zum Beispiel benutzerfreundlicher als Buttons mit mehr Inhalt gestalten. Platz gibt es auf Webseiten schließlich ohne Ende.


    Gruss


    MrMurphy

  • Hi :)


    Danke für die Antwort. :)


    Ich muss da mal in mich gehen... Platz gibts freilich genug. :) Mir ist nur nichts eingefallen, wie man das "hübsch" gestalten kann... bzw. wenn ich jetzt noch Buttons mache wird das mit dem dreispaltigen Layout bissi eng bzw. sind die Bezeichnungen ja recht unterschiedlich lang... da ist dann mal alles in einer Zeile, mal wird nur ein Button umgebrochen, dann wieder beide usw. Oder, aber müsste ich erst wieder lange fummeln befürchte ich, man setzt die Buttons standardmäßig in jeder Spalte nach rechts, also immer. Aber dann müsste es, damits was aussieht auch so sein, dass die Buttons wenn der Text zweizeilig wird dann auch auf beide Zeilen verteilt werden.Geht bestimmt alles, aber da werd ich sicher wahnsinnig drüber...


    Mit den Hintergrundbildern wollt ich mirs halt einfach machen und z.B. Die Größe übers css regeln und soweit ich weiß kann ich nur hintergrundbilder via css einbinden und leider keine Bilder. Wobei, bissi ums Eck gedacht müsste es mit object oder content auch gehen oder?


    Ich habe die Icons für Den Download jetzt 16x16px und mit opacity bei hoover ausgestattet sowie das margin außenrum auf 0.5em. Machts zumindest bisssi leichter.


    Vielleicht mache ich doch noch buttons.. aber wie die dann rechts anpappen? Muss ich sehen. :)


    Danke erstmal


    Gruß:)


    Gunni

Jetzt mitmachen!

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