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
Hier ein blick auf die page.tpl.php
Hier der Test mit der index.html
Abschliessend noch mein .info
Ich hoffe ihr könnt mir helfen, um das Smartphone Problem zu lösen. Vielleicht habe ich auch was übersehen...
Grüße mystery
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