+ Antworten
Seite 1 von 2 1 2 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Divs nebeneinander abhängig von Bildschirmgröße

  1. #1
    Neu an Board
    Registriert seit
    21.12.2008
    Ort
    Taunus
    Beiträge
    47
    Bedankte sich
    14
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard Divs nebeneinander abhängig von Bildschirmgröße

    Hallo,

    Ich habe für Joomla 3.0 ein Modul für meine Startseite geschrieben. Das sieht auch am Computer ganz schön aus.
    Wenn ich jedoch die Webseite mit meiben Handy öffne, wird es nicht so angezeigt, wie es sein soll....

    Das Modul besteht aus 6 <div>-Tags, die per css eine feste Breite und einen margin zugewiesen bekommen haben. In den Div-Tags befinden sich jeweils 1 Bild und ein kleiner Text. Auf einem normalen Bildschirm sollen 3 Div-Tags mittig nebeneinander in 2 Zeilen zu sehen sein.
    Also so:

    - - -
    - - -


    Wenn ich die Seite jedoch auf einem Handy oder einem kleineren Display öffne, soll es entweder so:

    - -
    - -
    - -


    oder so:

    -
    -
    -
    -
    -
    -


    aussehen. Das ganze natürlich immer mittig des Bildschirms.
    Kriege es auch hin, dass je nach Bildschirmbreite 3, 2 oder nur ein Div-Tag pro Zeile angezeigt werden. aber leider verschieben sie sich dann so, dass es nicht mehr symetrisch aussieht. Gibt es hierzu Lösungsansätze?

    Freue mich über jede Hilfe....


    Gruß

    Manu

  2. #2
    Gehört zum Inventar Avatar von Helrunar
    Registriert seit
    05.03.2006
    Ort
    /home/helrunar/Webdev
    Beiträge
    8.599
    Bedankte sich
    957
    Erhielt 2.182 Danksagungen
    in 1.928 Beiträgen

    Standard

    Keine feste Breite sondern %-Angaben und diese je nach MediaQuery neu setzen.

  3. Erhielt Danksagungen von:


  4. #3
    Neu an Board
    Registriert seit
    21.12.2008
    Ort
    Taunus
    Beiträge
    47
    Bedankte sich
    14
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Hey Helrunar,

    danke für den Tip. Schaue morgen früh mal was sich machen lässt.

    LG und einen schönen Abend noch...

    Manu

  5. #4
    Neu an Board
    Registriert seit
    21.12.2008
    Ort
    Taunus
    Beiträge
    47
    Bedankte sich
    14
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Hat funktioniert! Danke!

  6. #5
    Kommt häufiger vorbei
    Registriert seit
    22.10.2006
    Ort
    Rottweil
    Beiträge
    499
    Bedankte sich
    114
    Erhielt 14 Danksagungen
    in 13 Beiträgen

    Standard

    Hallo!
    Ich sehe gerade, dass dieser Thread noch nicht als "gelöst" markiert ist. Daher hänge ich meine Frage zum gleichen Themenbereich hier dran.

    Auch ich möchte zwei DIV-Container nebeneinander auf meiner Website haben, die mit margin seitlich Abstand voneinander und vom Seitenrand haben und die dann den restlichen Platz zu gleichen Teilen für jeden DIV-Container teilen. Wenn man also von der Margin-Definition absieht, könnte man auch 50% je Container sagen.
    Natürlich soll sich die Breite der Container flexibel an die Displaybreite anpassen. Das hab ich mit margin und mit width = 47% je Container hinbekommen, ist aber noch nicht symmetrisch.

    Nun sollen bei schmalen Displays aber beide DIV-Container untereinander angeordnet werden. Ich dachte, weil ich bei beiden Containern float: left definiert habe, würde das "automatisch" gehen. Das tut es auch, aber die untereinander stehenden Container nutzen dann nur 47% der verfügbaren Breite, sollten in diesem Fall aber 100% nutzen.

    Kann ich diese Funktionalität nur dadurch erreichen, dass ich beide Lösungen mit separaten DIV-Containern erzeuge, also 2 DIV-Definitionen für die Anordnung nebeneinander, abhängig von der Bedingung @screen width für größere Display-Breiten und dann noch mal zwei DIV-Conatiner anlege für kleiner Displays? Abhängig von der @screen width-Definition würde dann mal die Anordnung nebeneinander und mal untereinander angezeigt.

    Das finde ich sehr aufwendig. Geht das nicht einfacher? Zudem habe ich festgestellt, dass je nach Browser der Übergangsbereich von einer Anzeigenbreite in die andere nie wirklich sauber gelingt:
    Entweder werden in der Übergangszone gar keine DIV-Container mehr angezeigt, oder es würden dann im o.g. Beispiel alle vier angezeigt.

    Welche Lösung wäre hier die beste?

    Freundliche Grüße
    Clemens

  7. #6
    Gehört zum Inventar Avatar von chr-hl
    Registriert seit
    28.07.2009
    Ort
    Lübeck
    Beiträge
    5.991
    Bedankte sich
    158
    Erhielt 1.823 Danksagungen
    in 1.780 Beiträgen

    Standard

    Hallo Clemens,

    willkommen in der wunderbaren Welt der unterschiedlichen Verarbeitungen durch die Browser.
    Warum die DIV-Container noch eine Breite erhalten, da müßte es doch margin auch tun.

    Christian
    1. Ohne Link >>> Kein Wink!!!
    2. Konnte ich Dir helfen - dann freut ein Klick auf "Bedanke Dich"
    JUG Lübeck + develop.linsner-luebeck.de

  8. Erhielt Danksagungen von:


  9. #7
    Kommt häufiger vorbei
    Registriert seit
    22.10.2006
    Ort
    Rottweil
    Beiträge
    499
    Bedankte sich
    114
    Erhielt 14 Danksagungen
    in 13 Beiträgen

    Standard

    Hi Christian!
    Leider tut es ohne eine Breite nicht. Denn in einem Container ist ein Bild und wenige Worte Text und in dem anderen doch etwas Text, der keine festen Umbrüche hat; klar, weil er ja abhängig von der sich ergebenden Containergröße jeweils seinen Umbruch anpassen soll. Ergebnis ist, dass der Text-Container so groß wird, dass im anderen das Bild gerade noch Platz hat.

    Du kannst den jetzt erreichten Effekt anscheuen, indem du auf einem PC / Laptop schlichtweg das Bowserfenster ganz schmal machst und den Umbruch beobachtest:
    http://lebenslust-jetzt.de
    Bei normal breiten Displays ist in der rechten Spalte das Menü darunter meine Adresse und darunter das Element mit dem Bild. Sobald die Breite von rund 650px unterschritten wird, wechselt das Menü ins Mobile-Menü und die beiden anderen Elemente (Adresse und Bild) landen per Modul unterhalb des Haupt-Content, oberhalb des Footer.

    Beide DIV-Container sind in dem Modul. Sie werden korrekt nebeneinander angezeigt. Schiebt man den Broswer noch kleiner, stehen plötzlich beide DIV-Container untereinander, so wie es sein sollte. Aber beide haben dann nur 47% Breite, obwohl sie dann ja 100% haben könnten

    Ich denke an Lösungen wie der Zentrierungstrick mit margin: auto. Da gleicht sich der Abstand ja auch links und rechts von selbst aus. So etwas brauche ich im DIV-Container als Bestimmung der Breite auch, wobei aber die Breite in beiden Containern gleich sein soll.

    Freundliche Grüße
    Clemens

  10. #8
    Gehört zum Inventar Avatar von Re:Later
    Registriert seit
    21.04.2014
    Ort
    Berlin
    Beiträge
    5.808
    Bedankte sich
    156
    Erhielt 2.259 Danksagungen
    in 2.026 Beiträgen

    Standard

    Du verwendest ein Grid-System, Yaml. Sinn von Grid-Systemen ist u.a., dass man mit CSS-Klassen solche Sachen steuern kann.

    http://www.yaml.de/docs/index.html#yaml-columns

    http://www.yaml.de/

    http://forum.itratos.de/forum.php?ta...id=1&styleid=5

    Einarbeiten muss man sich halt leider, wie bei jedem anderen Grid auch.
    Joomlafachmann: https://www.ghsvs.de

  11. #9
    Kommt häufiger vorbei
    Registriert seit
    22.10.2006
    Ort
    Rottweil
    Beiträge
    499
    Bedankte sich
    114
    Erhielt 14 Danksagungen
    in 13 Beiträgen

    Standard

    Danke dir für die Links. Das JYAML-Forum kenne ich schon.
    Das Prinzip mit den drei Reihen des Templates ist mir ebenfalls klar. Das findet sich in der basemod.css

    Ich bin kein Web-Spezialist und kann und will es auch nie werden. Es macht mir keine Freude! Ich arbeite gern als Heilpraktiker, brauche eine attraktive Website, kann aber keinen echten Webdesigner damit beauftragen, weil wie immer, das Geld dazu fehlt.
    Ebenso kann ich mir es nicht leisten, kostenpflichtige Komponenten auf meiner Site zu verwenden. Da käme eine hübsche Stange Geld zusammen für all die Erweiterungen.

    Und ich kann mir den Zeitaufwand nicht leisten, mich in solche Dinge einzuarbeiten. Ich brauche Zeit für mein Kerngeschäft, die Therapie, für die Fortbildungen, dann für meine Buchhaltung, meine Werbung, jetzt zurzeit für die SEO meiner Website, die immer noch nicht abgeschlosen ist, dann zum Lösen meines PC-Problems, dann für die IT zur Datensicherung über einen lokalen Backup-Server, dann für die Umstellung der gesamten Praxis auf Linux, dann für Videoclips für meine Werbung......

    Und wo bleibt meine Freizeit? Wo der Spaß am Leben?

    Also muss ich weiter herumfrickeln an CSS-Dateien mit Try n Error, bis irgend was halbwegs so aussieht, wie ich es will. Mehr ist bei mir nicht drin. Tja und ab und zu, wenn nix mehr geht, frag ich halt in Foren nach.

    Ich verstehe aber auch, dass mir Fachleute dann sagen, ich müsste mich einarbeiten. NEIN, geht nicht, weil ich dann langsam den Gehirnkollaps kriege, welche Fähigkeiten ich noch alle gleichzeitg erwerben soll.

    Dir meinen Dank für deine Hinweise. Ich weiß ehrlich gesagt nicht mal, was die von dir verlinkten YAML-Seiten mit emienm DIV-Problem oder mit den Grids zu tun haben. Kapier ich einfach nicht. Sorry!

    Freundliche Grüße
    Clemens

  12. #10
    Gehört zum Inventar Avatar von Re:Later
    Registriert seit
    21.04.2014
    Ort
    Berlin
    Beiträge
    5.808
    Bedankte sich
    156
    Erhielt 2.259 Danksagungen
    in 2.026 Beiträgen

    Standard

    Musst entschuldigen, aber manchmal komm ich mir verarscht vor.

    Dein Problem ist kein eigentliches Joomla-Problem, sondern ein YAML-Problem, (gekoppelt mit einem Faulheitsproblem und einem gehörigen Maß Arroganz).

    Vielleicht hast Glück und es kommt jemand vorbei, der mit YAML unter Joomla aktiv arbeitet und dir das erklären will, damit du mehr Freizeit hast. Die meisten verwenden unter Joomla andere Grids.

    Deshalb mein Verweis auf's YAML-Forum. Da sind die Leute, die täglich mit YAML arbeiten. Und du kommst schneller ans Ziel und unter die Sonnenbank.
    Joomlafachmann: https://www.ghsvs.de

+ Antworten
Seite 1 von 2 1 2 LetzteLetzte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein