Antworten auf deine Fragen:
Neues Thema erstellen

Gridsystem mit Drupal

mystery26284

mystery26284

Nicht mehr ganz neu hier

Hallo zusammen.

Ich grübel gerade über ein Problem.

Habe mich die letzten Tage intensiv mit dem Thema Grid system und Responsive Design beschäftigt.

Nun möchte ich mein Theme auf ein Grid System Umschreiben.. * Bevor ich euch fragt und meckert.... Ich arebeite mich stück für Stück in Drupal ein. Angefangen vom Grundaufbau über ein Normales Theme usw. So ist für mich der Lerneffekt größer und leichter nachzuvollziehen. Auch wenn es sicher möglich ist, gleich von vorn Herein richtig zu Arbeiten. Allerdings habe ich kein Zeitdruck :)*

So nun zu meinem Problem.

Ich nutze das 1140px grid von <a href="http://www.1140px.com/">http://www.1140px.com/</a>. Dieses habe ich auf ein 1492px System mit 16 Spalten umgeschrieben. Wenn ich das ganze nur mit einer Simplen index.html teste funktioniert das ganze auch. Sowohl auf PC als auch auf dem Smartphone.

Sobald ich das ganze aber in die page.tpl.php übertrage, funktioniert das grid nur noch auf dem PC aber das Smartphone funktioniert nicht mehr.

Hier mal ein einblick in den Code der CSS Datei

CSS: 
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
.container16 {
    margin:0 auto;
    padding:0;
    position:relative;
    width:1492px;
}
.row {margin-bottom:20px;}
.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12, .column13, .column14, .column15, .column16 {
    display:inline;
    float:left;
    margin-left:10px;
    margin-right:10px;
}
/* grid 1492px */ 
.container16 .alpha {margin-left:0;}
.container16 .omega {margin-right:0;}
.container16 .column1 {width:73.25px;}
.container16 .column2 {width:166.5px;}
.container16 .column3 {width:259.75px;}
.container16 .column4 {width:353px;}
.container16 .column5 {width:446.25px;}
.container16 .column6 {width:539.5px;}
.container16 .column7 {width:632.75px;}
.container16 .column8 {width:726px;}
.container16 .column9 {width:819.25px;}
.container16 .column10 {width:912.5px;}
.container16 .column11 {width:1005.75px;}
.container16 .column12 {width:1099;}
.container16 .column13 {width:1192.25px;}
.container16 .column14 {width:1285.5px;}
.container16 .column15 {width:1378.75px;}
.container16 .column16 {width:1472px;}
.container16 .prefix1 {padding-left:93.25px;}
.container16 .prefix2 {padding-left:186.5px;}
.container16 .prefix3 {padding-left:279.75px;}
.container16 .prefix4 {padding-left:373px;}
.container16 .prefix5 {padding-left:466.25px;}
.container16 .prefix6 {padding-left:559.5px;}
.container16 .prefix7 {padding-left:652.75px;}
.container16 .prefix8 {padding-left:746px;}
.container16 .prefix9 {padding-left:839.25px;}
.container16 .prefix10 {padding-left:932.5px;}
.container16 .prefix11 {padding-left:1025.75px;}
.container16 .prefix12 {padding-left:1119;}
.container16 .prefix13 {padding-left:1212.25px;}
.container16 .prefix14 {padding-left:1305.5px;}
.container16 .prefix15 {padding-left:1398.75px;}

@media only screen and (min-width: 1261px) and (max-width: 1440px) {
.container16 {width:1140px;}
.container16 .column1 {width:51.25px;}
.container16 .column2 {width:122.5px;}
.container16 .column3 {width:193.75px;}
.container16 .column4 {width:265px;}
.container16 .column5 {width:336.25px;}
.container16 .column6 {width:407.5px;}
.container16 .column7 {width:478.75px;}
.container16 .column8 {width:550px;}
.container16 .column9 {width:621.25px;}
.container16 .column10 {width:692.5px;}
.container16 .column11 {width:763.75px;}
.container16 .column12 {width:835px;}
.container16 .column13 {width:906.25px;}
.container16 .column14 {width:977.5px;}
.container16 .column15 {width:1048.75px;}
.container16 .column16 {width:1120px;}
.container16 .prefix1 {padding-left:71.25px;}
.container16 .prefix2 {padding-left:142.5px;}
.container16 .prefix3 {padding-left:213.75px;}
.container16 .prefix4 {padding-left:285px;}
.container16 .prefix5 {padding-left:356.25px;}
.container16 .prefix6 {padding-left:427.5px;}
.container16 .prefix7 {padding-left:498.75px;}
.container16 .prefix8 {padding-left:570px;}
.container16 .prefix9 {padding-left:641.25px;}
.container16 .prefix10 {padding-left:712.5px;}
.container16 .prefix11 {padding-left:783.75px;}
.container16 .prefix12 {padding-left:855px;}
.container16 .prefix13 {padding-left:926.25px;}
.container16 .prefix14 {padding-left:997.5px;}
.container16 .prefix15 {padding-left:1068.75px;}
}

@media only screen and (min-width: 960px) and (max-width: 1160px) {
    .container16 {width:960px;}
    .container16 .column1 {width:40px;}
    .container16 .column2 {width:100px;}
    .container16 .column3 {width:160px;}
    .container16 .column4 {width:220px;}
    .container16 .column5 {width:280px;}
    .container16 .column6 {width:340px;}
    .container16 .column7 {width:400px;}
    .container16 .column8 {width:460px;}
    .container16 .column9 {width:520px;}
    .container16 .column10 {width:580px;}
    .container16 .column11 {width:640px;}
    .container16 .column12 {width:700px;}
    .container16 .column13 {width:760px;}
    .container16 .column14 {width:820px;}
    .container16 .column15 {width:880px;}
    .container16 .column16 {width:940px;}
    .container16 .prefix1 {padding-left:60px;}
    .container16 .prefix2 {padding-left:120px;}
    .container16 .prefix3 {padding-left:180px;}
    .container16 .prefix4 {padding-left:240px;}
    .container16 .prefix5 {padding-left:300px;}
    .container16 .prefix6 {padding-left:360px;}
    .container16 .prefix7 {padding-left:420px;}
    .container16 .prefix8 {padding-left:480px;}
    .container16 .prefix9 {padding-left:540px;}
    .container16 .prefix10 {padding-left:600px;}
    .container16 .prefix11 {padding-left:660px;}
    .container16 .prefix12 {padding-left:720px;}
    .container16 .prefix13 {padding-left:780px;}
    .container16 .prefix14 {padding-left:840px;}
    .container16 .prefix15 {padding-left:900px;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container16 {width:768px;}
    .container16 .column1 {width:28px;}
    .container16 .column2 {width:76px;}
    .container16 .column3 {width:124px;}
    .container16 .column4 {width:172px;}
    .container16 .column5 {width:220px;}
    .container16 .column6 {width:268px;}
    .container16 .column7 {width:316px;}
    .container16 .column8 {width:364px;}
    .container16 .column9 {width:412px;}
    .container16 .column10 {width:460px;}
    .container16 .column11 {width:508px;}
    .container16 .column12 {width:556px;}
    .container16 .column13 {width:604px;}
    .container16 .column14 {width:652px;}
    .container16 .column15 {width:700px;}
    .container16 .column16 {width:748px;}
    .container16 .prefix1 {padding-left:48px;}
    .container16 .prefix2 {padding-left:96px;}
    .container16 .prefix3 {padding-left:144px;}
    .container16 .prefix4 {padding-left:192px;}
    .container16 .prefix5 {padding-left:240px;}
    .container16 .prefix6 {padding-left:288px;}
    .container16 .prefix7 {padding-left:336px;}
    .container16 .prefix8 {padding-left:384px;}
    .container16 .prefix9 {padding-left:432px;}
    .container16 .prefix10 {padding-left:480px;}
    .container16 .prefix11 {padding-left:528px;}
    .container16 .prefix12 {padding-left:576px;}
    .container16 .prefix13 {padding-left:624px;}
    .container16 .prefix14 {padding-left:672px;}
    .container16 .prefix15 {padding-left:720px;}
}

@media only screen and (max-width: 767px) {
    .container16 {width:300px;}
    .container16 .column1,
    .container16 .column2,
    .container16 .column3,
    .container16 .column4,
    .container16 .column5,
    .container16 .column6,
    .container16 .column7,
    .container16 .column8,
    .container16 .column9,
    .container16 .column10,
    .container16 .column11,
    .container16 .column12,
    .container16 .column13,
    .container16 .column14,
    .container16 .column15,
    .container16 .column16 {
        margin:0 0 20px 0;
        width:300px;
    }
    .container16 .prefix1, .container16 .prefix2, .container16 .prefix3, .container16 .prefix4, .container16 .prefix5, .container16 .prefix6, .container16     .prefix7, .container16 .prefix8, .container16 .prefix9, .container16 .prefix10, .container16 .prefix11, .container16 .prefix12, .container16 .prefix13, .container16 .prefix14, .container16 .prefix15 {padding-left:0;}
    .row {margin:0;}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container16 {width:420px;}
    .container16 .column1,
    .container16 .column2,
    .container16 .column3,
    .container16 .column4,
    .container16 .column5,
    .container16 .column6,
    .container16 .column7,
    .container16 .column8,
    .container16 .column9,
    .container16 .column10,
    .container16 .column11,
    .container16 .column12,
    .container16 .column13,
    .container16 .column14,
    .container16 .column15,
    .container16 .column16 {
        margin:0 0 20px 0;
        width:420px;
    }
    .container16 .prefix1, .container16 .prefix2, .container16 .prefix3, .container16 .prefix4, .container16 .prefix5, .container16 .prefix6, .container16 .prefix7, .container16 .prefix8, .container16 .prefix9, .container16 .prefix10, .container16 .prefix11, .container16 .prefix12, .container16 .prefix13, .container16 .prefix14, .container16 .prefix15 {padding-left:0;}
    .row {margin:0;}
}
.clearfix:before, .clearfix:after,
.row:before, .row:after,
.container16:before, .container16:after {
    content:'.';
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
}
/* http://sonspring.com/journal/clearing-floats */
.clear {
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
}
.row:after, .clearfix:after, .container16:after {clear:both;}
/* For IE7. Move this to separate file when you notice some problems */
.row, .clearfix {zoom: 1;}
img, object, embed {max-width:100%;}
img {height:auto;}

Hier ein blick auf die page.tpl.php

PHP: 
<div id="page-wrapper">
    <div id="page" class="container16">
        <div class="row"> <!-- start of row header -->
            <div id="header" class="column16">
                <?php print render($page['header']); ?>
            </div> <!-- end of header -->
        </div> <!-- end of row header -->
    </div> <!-- end of page -->
</div> <!-- end of page.wrapper -->

Hier der Test mit der index.html

HTML: 
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Examples - 1140px.com</title>
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  
    <link rel="stylesheet" href="css/layout_respo_grid_1492px.css">
    <style type="text/css">
        body {
            background: #5bc1af;
            color: #fff;
            font-family: Ubuntu, Verdana, Tahoma, serif;
        }
        h1 {
            margin: 20px 0 30px;
            text-align:center;
        }
        a, h2 {
            color: #fff;
            margin: 14px 0;
        }
        .examples .row p {
            background: #fff;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            color:#777;
            padding:4px 0;
            text-align:center;
        }
    </style>
</head>
    <body style=" background-color: #ccc">
        <div class="container16" style="background-color: black; height: 260px; position: relative;">
            <div class"row">
                <div class="container16" >
                    <h1>HEADER</h1>
                </div>
                <div class="column4" >
                </div>
                <div class="column8" >
                <nav>
                    <ul >
                        <a href="#">Menu1</a>
                        <a href="#">Menu2</a>
                        <a href="#">Menu3</a>
                    </ul>
                </nav>
                </div>
                <div class="column4" >
                </div>
            </div>
        </div>
          <div class="container16">
            <div class"row" style="background-color: red; min-height: 450px; position: relative;">
                <div class="container16" >
                    <div class="container16 column13">
                        <h1>CONTENT</h1>
                    </div>
                    <div class="container16 column3">
                        <h1>SIDEBAR</h1>
                    </div>
                </div>
            </div>
        </div>
         <div class="container16" style="background-color: green; height: 100px; position: relative;">
            <div class"row">
                <div class="container16" >
                    <h1>FOOTER</h1>
                </div>
            </div>
        </div>
    </body>
</html>

Abschliessend noch mein .info

Code: 
name = germanwilds_hp_grid
core = 7.x


stylesheets[all][] = css/layout_respo_grid_1492px.css
stylesheets[all][] = css/design.css


regions[header] = Header
regions[top_menu] = Top Menu
regions[login_user] = Login and User
regions[main_menu] = Main Menu
regions[content] = Content
regions[sidebar_right] = Sidebar right
regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer] = Footer


Ich hoffe ihr könnt mir helfen, um das Smartphone Problem zu lösen. Vielleicht habe ich auch was übersehen...

Grüße mystery
 
mystery26284

mystery26284

Nicht mehr ganz neu hier

Das lustige ist ja, auf meinem Iphone geht es ja wenn es in einer Indey.html steht.

Nur in der .php geht es nicht.

Tipps, wie ich das lauffähig bekomme?
 
cythux

cythux

Aktives Mitglied

Konnte leider nur auf dieses Framework antworten, da ich mich bisher noch mit Drupal gross beschäftigt habe. Und dem Template System
 
cythux

cythux

Aktives Mitglied

Ich nutze derzeit gerne als Gridsystem Foundation welches css und auch in sass gibt und eine sehr gute docs auf der Seite hat.
 
D

DieWaldfee

Guest

warum das rad neu erfinden, such dir ein responsive starter theme raus, zb. omega , adaptive , bootstrap etc. und leg dein theme als subtheme an. du ersparst dir unglaublich viel zeit und arbeit.


btw. der <head> wird dynamisch generiert
du legst eine template.php an.

PHP: 
<?php

// DEINTHEMENAME muss mit deinem theme übereinstimmen

// add viewport meta

function DEINTHEMENAME_preprocess_html(&$vars) {
    $viewport = array(
            '#tag' => 'meta',
            '#attributes' => array(
                    'name' => 'viewport',
                    'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
            ),
    );
    drupal_add_html_head($viewport, 'viewport');

}

?>


lg.
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 133 (Mitglieder: 2, Gäste: 131)
Robots: 908

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben