Selbe Höhe der div- Container beim responsive Web

[Hannes Weninger]

Hallo,

ich habe 3 div- Container, welche ich mit dem twitter bootstrap grid nebeneinander angeordnet habe.
Es gibt Überschriften in diesen Containern die nicht gleich lang sind.
Diese 3 Container befinden sich in einen Container introtermine.

Wenn ich jetzt den Browser zusammenschiebe, dann passiert bei einem der 3 Kontainer früher ein Zeilenumbruch als bei den anderen Kontainern.

Meine Frage wäre jetzt, wie kann ich das machen, dass die 3 Kontainer immer gleich hoch sind, also wenn bei dem einen Kontainer ein Zeilenumbruch der ÜBerschrift passiert und dieser Kontainer dadurch eine größere Höhe bekommt, dann soll das auch bei den anderen so sein.

Wäre dankbar für hilfe.
lg
Hannes

  
<div id="introtermine" class="mod_article row-fluid block">  
    <div id="left" class="ce_text span4 block">  
    <div id="middle" class="ce_text span4 block">  
    <div id="right" class="ce_text span4 block">  
</div>  

[Matthias Apsel]

Om nah hoo pez nyeetz, Hannes Weninger!

wie immer

Matthias

[Hannes Weninger]

wie immer

Was heißt das jetzt?

[Gunther]

Hi!

wie immer

Was heißt das jetzt?

Was verstehst du denn daran nicht? ;-)
In dem verlinkten Thread werden die beiden Möglichkeiten beschrieben, mittels derer du dein Anliegen per CSS "lösen" kannst.

Da du offensichtlich (aufgrund deiner Threads hier) an einem RWD Layout arbeitest, wirst du dich wohl oder übel mit diesen Themen etwas intensiver auseinandersetzen müssen.

Gruß Gunther

[Hannes Weninger]

Um diese Seite anzuzeigen, müssen Sie sich in diesem Bereich auf forum.de.selfhtml.org:80 anmelden:

Bei mir kommt ein Anmeldeformular - das versteh ich nicht !!

[bubble]

Bei mir kommt ein Anmeldeformular - das versteh ich nicht !!

Da hat sich Matthias beim Link kopieren ein wenig vertan, weil das "my/" noch in der URL ist (für angemeldete Benutzer)

Korrigierter Link: http://forum.de.selfhtml.org/?t=214063

MfG
bubble

[Hannes Weninger]

Ich hätte noch eine Frage dazu und zwar handelt es sich bei mir um reinen responsive grid, das heiß, es schaut so aus wie unten und in meinem einleitenden Thread schon angeführt.
Ich setzt auf dasa äußere div ein row-fluid und die 3 inneren haben span4 -> also eine Breite von 4 von 12.

Wenn ich jetzt auf das äußere div "display: table" setzen, dann is von dem responsiven  nicht mehr viel über.
Wie könnte ich das noch lösen.
row-fluid und spanX kommen vom twitter bootstrap -> das ist der grid

Vielen Dank,
Hannes

  
div id="introtermine" class="mod_article row-fluid block">  
    <div id="left" class="ce_text span4 block">  
    <div id="middle" class="ce_text span4 block">  
    <div id="right" class="ce_text span4 block">  
</div>  

[Gunther]

Hallo Hannes!

Ich hätte noch eine Frage dazu und zwar handelt es sich bei mir um reinen responsive grid,

Das ist für mich schon der erste Widerspruch. "Responsive" und "Grid" vertragen sich imho nicht miteinander. Vielmehr ist "Responsive" für mich gleichbedeutend mit "fluid".

das heiß, es schaut so aus wie unten und in meinem einleitenden Thread schon angeführt.
Ich setzt auf dasa äußere div ein row-fluid und die 3 inneren haben span4 -> also eine Breite von 4 von 12.

Wenn ich jetzt auf das äußere div "display: table" setzen, dann is von dem responsiven  nicht mehr viel über.

Was heißt das jetzt?
Wenn du den relevanten HTML *und* CSS Code nicht postest, oder besser sogar das Ganze online stellst, dann kann nur sehr schwer bis gar nicht vernünftig helfen.

Wie könnte ich das noch lösen.
row-fluid und spanX kommen vom twitter bootstrap -> das ist der grid

Die 2 Varianten, wie man das mit CSS lösen kann, wurden dir ja bereits genannt. Wenn die sich nicht mit dem von dir verwendeten Framework vertragen, musst du es in diesen Bereichen entsprechend anpassen.

Das erste Problem, auf welches du bei der Verwendung von 'display:table' stoßen wirst ist, dass es kein Äquivalent zu 'cellspacing' gibt, sondern dass du lediglich 'border-spacing' zur Verfügung hast, welches sich aber nur explizit auf das Element mit der Eigenschaft 'display:table' bezieht. Dieses braucht es normalerweise nicht zwingend, da die Browser für ggf. "fehlende" Elemente "automatisch" anonyme Elemente erstellen. Diese kann man aber eben nicht per CSS stylen ...!

Für deinen Fall würde das bedeuten, dass du lediglich den 3 inneren DIV Elementen ein 'display:table-cell' zuweisen müsstest.

div id="introtermine" class="mod_article row-fluid block">
    <div id="left" class="ce_text span4 block">
    <div id="middle" class="ce_text span4 block">
    <div id="right" class="ce_text span4 block">
</div>

  
Und wie eingangs schon angedeutet, stellt sich für mich die Frage, ob Bootstrap für ein Responsive Layout wirklich eine gute Wahl ist? ;-)  
  
Gruß Gunther

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunther!

Das ist für mich schon der erste Widerspruch. "Responsive" und "Grid" vertragen sich imho nicht miteinander. Vielmehr ist "Responsive" für mich gleichbedeutend mit "fluid".

Weder grid noch fluid noch responsive schließen einander aus.

Eine Einteilung einer Seite in 6 Felder (grid) kann durchaus fluid sein, nämlich z.B. dann, wenn für Höhen und Breiten etwa Prozenangaben verwendet werden. Das trifft etwa für den oberen Bereich dieses Forums zu.

Und ein (schlechtes) responsives Design ist eben nicht fluid, sondern durch jeweils feste Breitenangaben per media-queries festgezurrt.

Matthias

[Gunther]

Om nah hoo pez nyeetz, Matthias!

Das ist für mich schon der erste Widerspruch. "Responsive" und "Grid" vertragen sich imho nicht miteinander. Vielmehr ist "Responsive" für mich gleichbedeutend mit "fluid".

Weder grid noch fluid noch responsive schließen einander aus.

Ja Herr Lehrer ...! ;-)
Genau genommen hast du natürlich Recht, aber ...

Eine Einteilung einer Seite in 6 Felder (grid) kann durchaus fluid sein, nämlich z.B. dann, wenn für Höhen und Breiten etwa Prozenangaben verwendet werden. Das trifft etwa für den oberen Bereich dieses Forums zu.

... dann sind bspw. auf einem Smartphone mit einer Viewportbreite von 320px alle Grids (grid3, grid5, grid8 etc.) 100% breit!?

Die "Grids" stammen imho von den seinerzeit äußerst populären CSS Frameworks á la "960 ...".
Das war aber noch vor "RWD", bzw. bevor das "populär" wurde.
Ein "Grid" basiert ja darauf, dass ich eine vorhandene Breite in X gleiche Teile teile und meinen Elementen dann jeweils ein bestimmtes Vielfaches dieses Xten Teiles zuweise.

Das heißt wie groß "sinvollerweise" so ein Xter Teil ist, hängt von der verfügbaren Breite ab.
Und im RWD ist der "in der kleinsten Variante" eigntlich immer gleich Eins.

Außerdem ist bei einem responsive Layout zumindest sehr oft auch der Fall, dass die (Breiten-) Verhältnisse von Elmenten zueinander, je nach Viewportbreite, variieren. Was bei entsprechender Breite bspw. ein Verhältnis von 1:2 (bei Bootstrap z.B. dann 4 + 8) haben kann, könnte bei schmalerem Viewport aber genauso gut ein Verhältnis von 1:1 zu haben (6 + 6).

Schon alleine aus dem Grund sehe ich die Bezeichnung "Grid" im Zusammenhang mit RWD eher "skeptisch".

Und ein (schlechtes) responsives Design ist eben nicht fluid, sondern durch jeweils feste Breitenangaben per media-queries festgezurrt.

Und wenn man in den MQ dann auch noch Pixelwerte verwendet, dann kann man imho nicht mehr von "responsive" reden. Dann nutzt es auch nichts, wenn man anschließend für sein "Grid" Prozentwerte verwendet.

Von der Thematik der präsentationsbezogenen Klassennamen bei solchen Frameworks wollen wir hier gar nicht erst reden ... :-P

Gruß Gunther

[Malcolm Beck´s]

હેલો

Wenn ich jetzt auf das äußere div "display: table" setzen,

darfst du nicht vergessen, dem betroffenen Element eine Breite mit auf dem Weg zu geben (width:irgendwas;).

Da du dein CSS nicht zeigst, rate ich mal, dass du es vergessen hast.

બાય

[Gunther]

Hi!

Um diese Seite anzuzeigen, müssen Sie sich in diesem Bereich auf forum.de.selfhtml.org:80 anmelden:

Bei mir kommt ein Anmeldeformular - das versteh ich nicht !!

Ach so! ;-)
Das musst du uns natürlich auch sagen - die meisten hier dürften angemeldet unterwegs sein, und somit dein Problem nicht nachvollziehen können.

Bubble hat dir ja in der Zwischenzeit schon den korrigierten Link gepostet.

Gruß Gunther

[Matthias Apsel]

Om nah hoo pez nyeetz, Hannes Weninger!

Um diese Seite anzuzeigen, müssen Sie sich in diesem Bereich auf forum.de.selfhtml.org:80 anmelden:
Bei mir kommt ein Anmeldeformular - das versteh ich nicht !!

Eigentlich war ich bisher der Meinung, dass die Forensoftware das "my/" je nach Anmeldestatus selbsständig korrigiert. Ein paar Tests

http://forum.de.selfhtml.org/my/?t=214063&m=1464328%23m1464328
http://forum.de.selfhtml.org/my/?t=214063&m=1464328
http://forum.de.selfhtml.org/my/?t=214063
http://forum.de.selfhtml.org/my/
http://forum.de.selfhtml.org/?t=214063&m=1464328%23m1464328
http://forum.de.selfhtml.org/?t=214063&m=1464328
http://forum.de.selfhtml.org/?t=214063
http://forum.de.selfhtml.org/

https://forum.selfhtml.org/?t=214063&m=1464328
https://forum.selfhtml.org/?t=214063&m=1464328
http://forum.de.selfhtml.org/my/?t=214063
http://forum.de.selfhtml.org/my/
https://forum.selfhtml.org/?t=214063&m=1464328
https://forum.selfhtml.org/?t=214063&m=1464328
http://forum.de.selfhtml.org/?t=214063
http://forum.de.selfhtml.org/

Die Vorschau zeigt, dass der Anker automatisch angehängt wird und das "my/" nur hinzugefügt wird, wenn es die get-Parameter t(hread) und m(essage) gibt.

Matthias

[Apsel, Matthias]

Die Vorschau zeigt, dass der Anker automatisch angehängt wird und das "my/" nur hinzugefügt wird, wenn es die get-Parameter t(hread) und m(essage) gibt.

Und entsprechend wird das "my/" nur entfernt, wenn es t und m gibt.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Hannes Weninger!

Bei mir kommt ein Anmeldeformular - das versteh ich nicht !!

Hast du mal auf "Abbrechen" geklickt?

Matthias

[Hannes Weninger]

Hallo nochmal,

ich hab jetzt mein Problem auf jsfiddle nachstellen können,
Vielleicht kann mir jetzt jemand helfen.
Wenn man dort, wo die Darstellung drinnen ist, diesen Bereich größer oder kleiner macht, dann kann man sehen, wo das Problem liegt.

Vielen Dank für Hilfe.
lg
Hannes

[Hannes Weninger]

hier noch der Link (hab ich vergessen - tut mir leid):

http://jsfiddle.net/VEwhY/2/