Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS Styling - DIVS vertauschen ohne die Structur in HTML zu ändern (Responsive WD?!)

Einklappen

Neue Werbung 2019

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

  • CSS Styling - DIVS vertauschen ohne die Structur in HTML zu ändern (Responsive WD?!)

    Hallo,
    ich habe mich schon an anderen Stellen umgesehen, finde aber leider nicht das passende...
    Es heißt zwar an einigen Stellen, was ich suche wäre mit Responsive Webdesign möglich, aber wenn ich dann lese, das andere die gleichen Probleme haben, kommt als Antwort von anderen dann immer, die DIVs müssten anders angeordnet werden...

    Ich weiß daher nicht, ob das, was ich suche, überhaupt so möglich ist, daher stelle ich die Frage mal hier in den Raum


    Also,
    ich habe ein vorgegebenes DIV-Construct und für die klassische Ansicht ist es bereits mit CSS korrekt formatiert.

    Nun möchte ich im Falle von mobile-Browsern das Ganze anders dargestellt bekommen.
    Eigentlich soll nur ein DIV verschwinden (display:none) und anstelle des einen das andere angezeigt werden (Platztausch).

    Von der Struktur sieht das so aus [OBEN][UNTEN-LINKS][UNTEN-RECHTS]
    oder
    [TITEL][IMAGE][DESCRIPTION]

    Im Anhang ist ein Veranschaulichungsbeispiel als PNG.

    Hier der Quellcode für die klassische Darstellung.

    Wenn ich Einfluss auf die DIV-Structure hätte, würde ich im mobile-Fall einfach description durch title ersetzen.
    Ich kann aber immer nur das gesamte Gerüst ändern, entweder für beide Varianten oder gar nicht.
    CSS kann ich Browserabhängig gestalten...

    Ich hoffe mir kann hier jemand weiter helfen.

    PHP-Code:
    <html>
        <
    head>
            <
    style>
                
    body {font-family:arial}
                .
    border{border:1px solid;}
                .
    page{width:800px;}
                .
    image{float:left;margin-right:20px;}
                .
    title{clear:both;margin-bottom:10px;}
                .
    description{float:left}
                .
    listObject{margin-bottom:60px;clear:both}
            </
    style>
        </
    head>
        <
    body>
            <
    div class="page">
                <
    div class="listObject">
                    <
    div class="border title">Title</div>
                    <
    div class="border image">Image</div>
                    <
    div class="border description">Description</div>
                </
    div>
                <
    div class="listObject">
                    <
    div class="border title">Title</div>
                    <
    div class="border image">Image</div>
                    <
    div class="border description">Description</div>
                </
    div>
            </
    div>
        </
    body>
    </
    html

  • #2
    Hallo

    Nun möchte ich im Falle von mobile-Browsern das Ganze anders dargestellt bekommen.
    Es gibt keine mobilen Browser. Klar, es laufen massenhaft Leute mit Smartphones und Tablets durch die Gegend. Das werde ich auch nicht abstreiten.

    Aber HTML/CSS können keine "mobilen Browser" erkennen. Deshalb kann sich das Layout nur nach der Fenstergröße richten, dem sogenannten Viewport.

    Das Layout wird dann je nach der Fensterbreite durch Media Queries angepasst.

    Dein Quellcode ist leider sehr veraltet. Wenn du deine Seite weiter entwickeln willst wäre es deshalb sinnvoll die neuen HTML5-Elemente und CSS3-Möglichkeiten zu nutzen. Ansonsten machst du dir das Leben unnötig schwer. Dazu gehört zum Beispiel die div durch geeignetere Container zu ersetzen und auf unnötige id / class zu verzichten u.s.w.. Nur mal so als Hinweis.

    Zu deinem Problem:

    Ohne sinnvollen Inhalt ist leider nur eine allgemeine Hilfe möglich.

    Zum Tauschen von Containern (zu denen das div gehört) ist in HTML5 / CSS3 das Flexbox-Modell vorgesehen. Googeln nach "Flexbox" bringt jede Menge Infos.

    Beim folgenden Beispiel wird der Platztausch vollzogen, wenn die Fensterbreite unter 900px verringert wird:

    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8">
       <title>Flexbox Platztausch 02</title>
       <meta name="description" content="HTML5, CSS3">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <style>
       @media all {
          * {
             box-sizing: border-box;
          }
          html {
             font-family: Arial;
          }
          .border {
             border: 1px solid;
          }
          .page {
             width: 800px;
          }
          .listObject {
             margin-bottom: 60px;
             display: flex;
             flex-wrap: wrap;
          }
          .title {
             width: 700px;
             margin-bottom: 10px;
          }
          .image {
             width: 150px;
             margin-right: 20px;
          }
          .description {
          }
       }
       @media only screen and (max-width: 900px) {
          .title {
             width: 600px;
             margin-bottom: 0;
             order: 2;
          }
          .image {
             order: 1;
          }
          .description {
             display:  none;
          }
       }
       </style>
    </head>
    <body>
       <div class="page">
          <div class="listObject">
             <div class="border title">Title</div>
             <div class="border image">Image</div>
             <div class="border description">Description</div>
          </div>
          <div class="listObject">
             <div class="border title">Title</div>
             <div class="border image">Image</div>
             <div class="border description">Description</div>
          </div>
       </div>
    </body>
    </html>
    Gruss

    MrMurphy

    Kommentar


    • #3
      Genial, vielen Dank

      Kommentar

      Lädt...
      X