mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 23:49 Benutzername: Passwort: Auto-Login

Thema: Responsive Design - Spaltenlayout vom 11.06.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Responsive Design - Spaltenlayout
Autor Nachricht
Saikoro
Threadersteller

Dabei seit: 14.05.2014
Ort: -
Alter: 32
Geschlecht: Männlich
Verfasst Mi 11.06.2014 14:53
Titel

Responsive Design - Spaltenlayout

 Antworten mit Zitat Zum Seitenanfang
Hallo Leute,

ich stecke gerade in einer kleinen Zwickmühle bzw. ich komme gerade nicht weiter ohne das komplette Layout meiner Website zu verändern. Und zwar habe ich ein 3 Spaltiges Layout welche wie folgt aufgebaut ist: Text, Text, Bild.

Code:
<article>
            <div class="section group">
            <h3>Headline.</h3>
            <div class="section group">
                <div class="col span_1_of_3">

                    <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.</p>
                </div>

                <div class="col span_1_of_3">

                    <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.</p>
                </div>

                <div class="col span_1_of_3">

                    <p>
                        <img src="images/bild.jpg" alt="Bild">
                    </p>
                </div>
            </div>
        </article>   



Nun möchte ich, wenn ich die Website auf dem Tablet oder Handy aufrufe, dass es ein 1-spaltiges Layout wird. Das ist auch soweit nicht das Problem. Mein Problem ist... wie bekomme ich das Bild über den Text? Geht das überhaupt? Hat da jemand eine Idee? * Keine Ahnung... *

Hier mal der CSS Code dazu:

Code:
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}


.col {
    display: block;
    float: left;
    margin: 1% 0 1% 2.7%;
}
.col:first-child {
    margin-left: 0;
}


.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
    /* For IE 6/7 */
}

.span_1_of_3 {
    width: 31.5%;
}


Danke schonmal Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pRiMUS

Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht: Männlich
Verfasst Mi 11.06.2014 15:56
Titel

Antworten mit Zitat Zum Seitenanfang
mit flexboxes kannst du die reihenfolge beeinflussen.

http://the-echoplex.net/flexyboxes/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Saikoro
Threadersteller

Dabei seit: 14.05.2014
Ort: -
Alter: 32
Geschlecht: Männlich
Verfasst Do 12.06.2014 07:26
Titel

Antworten mit Zitat Zum Seitenanfang
Ehm okay Grins

also ich hab mir die Seite angeschaut. Verstehe nur leider nicht was ich in meinem Fall nun tun muss * Ich geb auf... *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Responsive Design oder feste Breite
Input-Felder/Eingabefelder im Responsive Design
Responsive Design - verschiedene Image Varianten
jssor Slider mit responsive Design aber ohne skalierende But
Responsive Tester
RESPONSIVE WEBDESIGN?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB