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.
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>
Kommentar