Auf Thema antworten 2026

Beitrag

<blockquote data-quote="mystery26284" data-source="post: 2457140" data-attributes="member: 594010">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 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":-)" title="Smile&nbsp; &nbsp; :-)" loading="lazy" data-shortname=":-)" />*So nun zu meinem Problem. Ich nutze das 1140px grid von &lt;a href=&quot;<a href="http://www.1140px.com/" target="_blank">http://www.1140px.com/</a>&quot;&gt;<a href="http://www.1140px.com/&lt;/a&gt;" target="_blank">http://www.1140px.com/&lt;/a&gt;</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[code=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 {&nbsp; &nbsp; margin:0 auto;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; position:relative;&nbsp; &nbsp; width:1492px;}.row {margin-bottom:20px;}.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12, .column13, .column14, .column15, .column16 {&nbsp; &nbsp; display:inline;&nbsp; &nbsp; float:left;&nbsp; &nbsp; margin-left:10px;&nbsp; &nbsp; 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) {&nbsp; &nbsp; .container16 {width:960px;}&nbsp; &nbsp; .container16 .column1 {width:40px;}&nbsp; &nbsp; .container16 .column2 {width:100px;}&nbsp; &nbsp; .container16 .column3 {width:160px;}&nbsp; &nbsp; .container16 .column4 {width:220px;}&nbsp; &nbsp; .container16 .column5 {width:280px;}&nbsp; &nbsp; .container16 .column6 {width:340px;}&nbsp; &nbsp; .container16 .column7 {width:400px;}&nbsp; &nbsp; .container16 .column8 {width:460px;}&nbsp; &nbsp; .container16 .column9 {width:520px;}&nbsp; &nbsp; .container16 .column10 {width:580px;}&nbsp; &nbsp; .container16 .column11 {width:640px;}&nbsp; &nbsp; .container16 .column12 {width:700px;}&nbsp; &nbsp; .container16 .column13 {width:760px;}&nbsp; &nbsp; .container16 .column14 {width:820px;}&nbsp; &nbsp; .container16 .column15 {width:880px;}&nbsp; &nbsp; .container16 .column16 {width:940px;}&nbsp; &nbsp; .container16 .prefix1 {padding-left:60px;}&nbsp; &nbsp; .container16 .prefix2 {padding-left:120px;}&nbsp; &nbsp; .container16 .prefix3 {padding-left:180px;}&nbsp; &nbsp; .container16 .prefix4 {padding-left:240px;}&nbsp; &nbsp; .container16 .prefix5 {padding-left:300px;}&nbsp; &nbsp; .container16 .prefix6 {padding-left:360px;}&nbsp; &nbsp; .container16 .prefix7 {padding-left:420px;}&nbsp; &nbsp; .container16 .prefix8 {padding-left:480px;}&nbsp; &nbsp; .container16 .prefix9 {padding-left:540px;}&nbsp; &nbsp; .container16 .prefix10 {padding-left:600px;}&nbsp; &nbsp; .container16 .prefix11 {padding-left:660px;}&nbsp; &nbsp; .container16 .prefix12 {padding-left:720px;}&nbsp; &nbsp; .container16 .prefix13 {padding-left:780px;}&nbsp; &nbsp; .container16 .prefix14 {padding-left:840px;}&nbsp; &nbsp; .container16 .prefix15 {padding-left:900px;}}@media only screen and (min-width: 768px) and (max-width: 959px) {&nbsp; &nbsp; .container16 {width:768px;}&nbsp; &nbsp; .container16 .column1 {width:28px;}&nbsp; &nbsp; .container16 .column2 {width:76px;}&nbsp; &nbsp; .container16 .column3 {width:124px;}&nbsp; &nbsp; .container16 .column4 {width:172px;}&nbsp; &nbsp; .container16 .column5 {width:220px;}&nbsp; &nbsp; .container16 .column6 {width:268px;}&nbsp; &nbsp; .container16 .column7 {width:316px;}&nbsp; &nbsp; .container16 .column8 {width:364px;}&nbsp; &nbsp; .container16 .column9 {width:412px;}&nbsp; &nbsp; .container16 .column10 {width:460px;}&nbsp; &nbsp; .container16 .column11 {width:508px;}&nbsp; &nbsp; .container16 .column12 {width:556px;}&nbsp; &nbsp; .container16 .column13 {width:604px;}&nbsp; &nbsp; .container16 .column14 {width:652px;}&nbsp; &nbsp; .container16 .column15 {width:700px;}&nbsp; &nbsp; .container16 .column16 {width:748px;}&nbsp; &nbsp; .container16 .prefix1 {padding-left:48px;}&nbsp; &nbsp; .container16 .prefix2 {padding-left:96px;}&nbsp; &nbsp; .container16 .prefix3 {padding-left:144px;}&nbsp; &nbsp; .container16 .prefix4 {padding-left:192px;}&nbsp; &nbsp; .container16 .prefix5 {padding-left:240px;}&nbsp; &nbsp; .container16 .prefix6 {padding-left:288px;}&nbsp; &nbsp; .container16 .prefix7 {padding-left:336px;}&nbsp; &nbsp; .container16 .prefix8 {padding-left:384px;}&nbsp; &nbsp; .container16 .prefix9 {padding-left:432px;}&nbsp; &nbsp; .container16 .prefix10 {padding-left:480px;}&nbsp; &nbsp; .container16 .prefix11 {padding-left:528px;}&nbsp; &nbsp; .container16 .prefix12 {padding-left:576px;}&nbsp; &nbsp; .container16 .prefix13 {padding-left:624px;}&nbsp; &nbsp; .container16 .prefix14 {padding-left:672px;}&nbsp; &nbsp; .container16 .prefix15 {padding-left:720px;}}@media only screen and (max-width: 767px) {&nbsp; &nbsp; .container16 {width:300px;}&nbsp; &nbsp; .container16 .column1,&nbsp; &nbsp; .container16 .column2,&nbsp; &nbsp; .container16 .column3,&nbsp; &nbsp; .container16 .column4,&nbsp; &nbsp; .container16 .column5,&nbsp; &nbsp; .container16 .column6,&nbsp; &nbsp; .container16 .column7,&nbsp; &nbsp; .container16 .column8,&nbsp; &nbsp; .container16 .column9,&nbsp; &nbsp; .container16 .column10,&nbsp; &nbsp; .container16 .column11,&nbsp; &nbsp; .container16 .column12,&nbsp; &nbsp; .container16 .column13,&nbsp; &nbsp; .container16 .column14,&nbsp; &nbsp; .container16 .column15,&nbsp; &nbsp; .container16 .column16 {&nbsp; &nbsp; &nbsp; &nbsp; margin:0 0 20px 0;&nbsp; &nbsp; &nbsp; &nbsp; width:300px;&nbsp; &nbsp; }&nbsp; &nbsp; .container16 .prefix1, .container16 .prefix2, .container16 .prefix3, .container16 .prefix4, .container16 .prefix5, .container16 .prefix6, .container16&nbsp; &nbsp;&nbsp; .prefix7, .container16 .prefix8, .container16 .prefix9, .container16 .prefix10, .container16 .prefix11, .container16 .prefix12, .container16 .prefix13, .container16 .prefix14, .container16 .prefix15 {padding-left:0;}&nbsp; &nbsp; .row {margin:0;}}@media only screen and (min-width: 480px) and (max-width: 767px) {&nbsp; &nbsp; .container16 {width:420px;}&nbsp; &nbsp; .container16 .column1,&nbsp; &nbsp; .container16 .column2,&nbsp; &nbsp; .container16 .column3,&nbsp; &nbsp; .container16 .column4,&nbsp; &nbsp; .container16 .column5,&nbsp; &nbsp; .container16 .column6,&nbsp; &nbsp; .container16 .column7,&nbsp; &nbsp; .container16 .column8,&nbsp; &nbsp; .container16 .column9,&nbsp; &nbsp; .container16 .column10,&nbsp; &nbsp; .container16 .column11,&nbsp; &nbsp; .container16 .column12,&nbsp; &nbsp; .container16 .column13,&nbsp; &nbsp; .container16 .column14,&nbsp; &nbsp; .container16 .column15,&nbsp; &nbsp; .container16 .column16 {&nbsp; &nbsp; &nbsp; &nbsp; margin:0 0 20px 0;&nbsp; &nbsp; &nbsp; &nbsp; width:420px;&nbsp; &nbsp; }&nbsp; &nbsp; .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;}&nbsp; &nbsp; .row {margin:0;}}.clearfix:before, .clearfix:after,.row:before, .row:after,.container16:before, .container16:after {&nbsp; &nbsp; content:&#039;.&#039;;&nbsp; &nbsp; display:block;&nbsp; &nbsp; height:0;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; visibility:hidden;&nbsp; &nbsp; width:0;}/* http://sonspring.com/journal/clearing-floats */.clear {&nbsp; &nbsp; clear:both;&nbsp; &nbsp; display:block;&nbsp; &nbsp; height:0;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; visibility:hidden;&nbsp; &nbsp; 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;}[/code]Hier ein blick auf die page.tpl.php[php]&lt;div id=&quot;page-wrapper&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;page&quot; class=&quot;container16&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;row&quot;&gt; &lt;!-- start of row header --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot; class=&quot;column16&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;?php print render($page[&#039;header&#039;]); ?&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &lt;!-- end of header --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &lt;!-- end of row header --&gt;&nbsp; &nbsp; &lt;/div&gt; &lt;!-- end of page --&gt;&lt;/div&gt; &lt;!-- end of page.wrapper --&gt;[/php]Hier der Test mit der index.html[html]&lt;!doctype html&gt;&lt;!--[if lt IE 7]&gt; &lt;html class=&quot;no-js lt-ie9 lt-ie8 lt-ie7&quot; lang=&quot;en&quot;&gt; &lt;![endif]--&gt;&lt;!--[if IE 7]&gt;&nbsp; &nbsp; &lt;html class=&quot;no-js lt-ie9 lt-ie8&quot; lang=&quot;en&quot;&gt; &lt;![endif]--&gt;&lt;!--[if IE 8]&gt;&nbsp; &nbsp; &lt;html class=&quot;no-js lt-ie9&quot; lang=&quot;en&quot;&gt; &lt;![endif]--&gt;&lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class=&quot;no-js&quot; lang=&quot;en&quot;&gt; &lt;!--&lt;![endif]--&gt;&lt;head&gt;&nbsp; &nbsp; &lt;meta charset=&quot;UTF-8&quot; /&gt;&nbsp; &nbsp; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;&nbsp; &nbsp; &lt;title&gt;Examples - 1140px.com&lt;/title&gt;&nbsp; &nbsp; &lt;meta name=&quot;robots&quot; content=&quot;index, follow&quot;&gt;&nbsp; &nbsp; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;css/layout_respo_grid_1492px.css&quot;&gt;&nbsp; &nbsp; &lt;style type=&quot;text/css&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #5bc1af;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: Ubuntu, Verdana, Tahoma, serif;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; h1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 20px 0 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align:center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; a, h2 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 14px 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .examples .row p {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-border-radius: 4px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-border-radius: 4px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 4px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:#777;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding:4px 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align:center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &lt;/style&gt;&lt;/head&gt;&nbsp; &nbsp; &lt;body style=&quot; background-color: #ccc&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;container16&quot; style=&quot;background-color: black; height: 260px; position: relative;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class&quot;row&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;container16&quot; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;HEADER&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;column4&quot; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;column8&quot; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;nav&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot;&gt;Menu1&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot;&gt;Menu2&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot;&gt;Menu3&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/nav&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;column4&quot; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;container16&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class&quot;row&quot; style=&quot;background-color: red; min-height: 450px; position: relative;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;container16&quot; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;container16 column13&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;CONTENT&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;container16 column3&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;SIDEBAR&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;div class=&quot;container16&quot; style=&quot;background-color: green; height: 100px; position: relative;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class&quot;row&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;container16&quot; &gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;FOOTER&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/html]Abschliessend noch mein .info[code]name = germanwilds_hp_gridcore = 7.xstylesheets[all][] = css/layout_respo_grid_1492px.cssstylesheets[all][] = css/design.cssregions[header] = Headerregions[top_menu] = Top Menuregions[login_user] = Login and Userregions[main_menu] = Main Menuregions[content] = Contentregions[sidebar_right] = Sidebar rightregions[footer_firstcolumn] = Footer first columnregions[footer_secondcolumn] = Footer second columnregions[footer] = Footer[/code]Ich hoffe ihr könnt mir helfen, um das Smartphone Problem zu lösen. Vielleicht habe ich auch was übersehen...Grüße mystery</blockquote>

[QUOTE="mystery26284, post: 2457140, member: 594010"] 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="[url]http://www.1140px.com/[/url]">[url]http://www.1140px.com/</a>[/url]. 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 [code=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;} [/code] Hier ein blick auf die page.tpl.php [php]<div id="page-wrapper"> <div id="page" class="container16"> <div class="row">  <div id="header" class="column16"> <?php print render($page['header']); ?> </div>  </div>  </div>  </div> [/php] Hier der Test mit der index.html [html]<!doctype html>     <html class="no-js" lang="en">  <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>[/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[/code] Ich hoffe ihr könnt mir helfen, um das Smartphone Problem zu lösen. Vielleicht habe ich auch was übersehen... Grüße mystery [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?