NAVIGATION
This shows you the differences between two versions of the page.
deutsch:templates:big-john-piefecta:2-spalten-feste-breite-variable-hoehe-v1 [2010/01/07 09:29] Knut Heermann (flip-flop) |
deutsch:templates:big-john-piefecta:2-spalten-feste-breite-variable-hoehe-v1 [2018/06/03 18:08] (current) |
||
---|---|---|---|
Line 4: | Line 4: | ||
====== 2 Spalten, feste Breite - V1 ====== | ====== 2 Spalten, feste Breite - V1 ====== | ||
+ | |||
+ | **2 Spalten, feste Breite, variable Höhe, horizontal zentriert - Version 01** | ||
+ | |||
+ | **Gesamtbreite:** 940px (**links:** 210px - **rechts:** 729px) | ||
+ | |||
+ | **Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/01/07 // \\ | ||
+ | **CMS-Version:** >= V1.2.8 \\ | ||
+ | **Version:** V1.0 //07.01.2010// \\ | ||
+ | **Update:** -- \\ | ||
+ | |||
+ | Basierend auf: [[http://www.brunildo.org/test/twocols0.html|2 columns layout (fixed widths)]] Based on Big John's Piefecta | ||
+ | |||
+ | |||
+ | ===== Anforderung: ===== | ||
+ | |||
+ | * Content soll im Quelltext als erstes stehen | ||
+ | * Jede Spalte kann am längsten sein | ||
+ | * Jede Spalte kann mit einem vollflächigen Hintergrund gefüllt werden | ||
+ | * Header soll am obersten Rand des Viewport stehen | ||
+ | * Die Seite soll horizontal zentriert ausgegeben werden | ||
+ | * Left und Main sollen optisch nebeneinander stehen | ||
+ | * CSS-Code soll konform sein! | ||
+ | |||
+ | Gewählt wurde hier eine feste Breite von 990px, so dass 1024 x YYY bedient werden kann. | ||
+ | |||
+ | {{:deutsch:templates:big-john-piefecta:fixed_2_cols_layout_big_john_fe_1.gif?600|fixed 2 cols layout by Big John}} | ||
+ | |||
+ | ~~UP~~ | ||
+ | |||
+ | ===== Seitenlayout ===== | ||
+ | |||
+ | {{:deutsch:templates:fixed_3_cols_layout_big_john_be2_1.gif|}} | ||
+ | |||
+ | |||
+ | ~~UP~~ | ||
+ | |||
+ | ===== Vorlage ===== | ||
+ | |||
+ | {{:deutsch:templates:big-john-piefecta:fixed_2_cols_layout_big_john_be_1.gif|}} | ||
+ | |||
+ | ~~UP~~ | ||
+ | |||
+ | ==== <HTML> Kopf: ==== | ||
+ | |||
+ | **--> diesen Codeschnipsel in den <head> //(<HTML> Kopf:)// der Vorlage einstellen:** | ||
+ | |||
+ | <code html|h header/ Vorlage |h> | ||
+ | <!--[if lt IE 8]><style> | ||
+ | .outer, .wide, h2 { | ||
+ | _height: 0; | ||
+ | zoom: 1; | ||
+ | } | ||
+ | /* rimuove complicazione per Gecko 1.7- */ | ||
+ | .left { | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | </style><![endif]--> | ||
+ | </code> | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ==== Haupt: ==== | ||
+ | |||
+ | **--> diesen Codeschnipsel in den Main-Teil //(Haupt:)// der Vorlage einstellen:** | ||
+ | |||
+ | <code html|h main/ Vorlage |h> | ||
+ | <div class="wrapper"> | ||
+ | |||
+ | <div class="outer"> | ||
+ | |||
+ | <div class="center"><div class="incenter"> | ||
+ | {CONTENT} | ||
+ | </div></div> <!-- end center div --> | ||
+ | |||
+ | <div class="left"><div class="inleft"> | ||
+ | <div style="font-size:11px;" class="nav-list-ul"> | ||
+ | {NAV_LIST_UL:FPA,0,,act_path,active} | ||
+ | </div> | ||
+ | {LEFT} | ||
+ | </div></div> <!-- end left div --> | ||
+ | |||
+ | <br class="clear" /> | ||
+ | </div> <!-- end outer div --> | ||
+ | |||
+ | <div class="top"><div class="intop"> | ||
+ | <h1>Fixed 2 cols layout (Big John)</h1> | ||
+ | {HEADER} | ||
+ | </div></div> | ||
+ | |||
+ | <div class="bottom"><div class="inbottom"> | ||
+ | {FOOTER} | ||
+ | </div></div> | ||
+ | |||
+ | </div> | ||
+ | </code> | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ===== CSS ===== | ||
+ | |||
+ | {{ :deutsch:templates:big-john-piefecta:2-cols-fixed-width-variable-height-v1_s.gif|}} | ||
+ | {{:deutsch:templates:big-john-piefecta:2-cols-fixed-width-variable-height-v1.gif| }} | ||
+ | |||
+ | |||
+ | |||
+ | ==== Template: ==== | ||
+ | |||
+ | |||
+ | **Datei:** template/inc_css/fixed_2_cols_layout_big_john.css | ||
+ | |||
+ | Width 940px (210px - 730px) | ||
+ | |||
+ | <code css |h fixed_2_cols_layout_big_john.css|h> | ||
+ | |||
+ | /*********************************************** | ||
+ | * Fixed 2 cols layout | ||
+ | * http://www.brunildo.org/test/twocols0.html | ||
+ | * Patched version by KH (flip-flop) 06.01.2010 | ||
+ | * Width 940px (210px - 730px) | ||
+ | ************************************************/ | ||
+ | |||
+ | body { | ||
+ | margin: 10px 0; | ||
+ | padding: 0; | ||
+ | color: #000; | ||
+ | background-color: #fff; | ||
+ | font-family: verdana, Georgia, serif; | ||
+ | font-size: 80%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .clear { | ||
+ | clear: both; | ||
+ | } | ||
+ | .alignright { | ||
+ | text-align: right; | ||
+ | } | ||
+ | .wide { | ||
+ | background-color: #ffc; | ||
+ | } | ||
+ | .top { | ||
+ | border-bottom: 1px solid #000; | ||
+ | } | ||
+ | .bottom { | ||
+ | border-top: 1px solid #000; | ||
+ | padding-bottom: 1px; | ||
+ | } | ||
+ | .testfloat { | ||
+ | width: 50px; | ||
+ | border: 2px solid #f90; | ||
+ | background-color: #ffd; | ||
+ | font-size: .8em; | ||
+ | } | ||
+ | .to-right { | ||
+ | float: right; | ||
+ | } | ||
+ | .to-left { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .wrapper { | ||
+ | margin: 0 auto; | ||
+ | width: 942px; /* 752px; */ | ||
+ | w\idth: 940px; /* 750px; /* C + L + 1 */ | ||
+ | text-align: left; | ||
+ | background-color: #cce; | ||
+ | border: 1px solid #000; | ||
+ | } | ||
+ | .outer { | ||
+ | margin-left: 210px; /* 200px; /* L */ | ||
+ | border-left: 1px solid #000; | ||
+ | background-color: #e5e5e5; /* Main */ | ||
+ | } | ||
+ | .center { | ||
+ | float: right; | ||
+ | width: 100%; | ||
+ | margin-left: -1px; | ||
+ | } | ||
+ | .left { | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | width: 210px; /* 200px; /* L */ | ||
+ | margin-left: -211px; /* -201px; /* -L-1 */ | ||
+ | margin-right: 2px; | ||
+ | } | ||
+ | |||
+ | /* ---- + KH Content first (Header pos absolute */ | ||
+ | .top { | ||
+ | height: 70px; /* +KH Head height */ | ||
+ | width: 940px; /* 760px; */ | ||
+ | position: absolute; /* +KH */ | ||
+ | overflow: hidden; /* +KH */ | ||
+ | top: 0; /* +KH */ | ||
+ | left: 0; /* +KH */ | ||
+ | background-color: #ffc; | ||
+ | } | ||
+ | .intop { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | .bottom { | ||
+ | border-top: 1px solid #000; | ||
+ | height: 40px; /* KH Footer height */ | ||
+ | background-color: #ecf; /* +KH */ | ||
+ | } | ||
+ | .inbottom { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | .outer { | ||
+ | position: relative; | ||
+ | margin-top: 70px; /* +KH (place holder header) */ | ||
+ | } | ||
+ | .wrapper { | ||
+ | position: relative; /* +KH (content first) */ | ||
+ | } | ||
+ | .incenter { /* +KH */ | ||
+ | padding: 10px 0 10px 10px; | ||
+ | } | ||
+ | |||
+ | /* ------------------------ */ | ||
+ | |||
+ | |||
+ | /* previene allargamento floats in IE/Mac \*//*/ | ||
+ | * html .inleft, * html .incenter { | ||
+ | width: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | /**/ | ||
+ | |||
+ | /* | ||
+ | .outer { | ||
+ | word-wrap: break-word; | ||
+ | } | ||
+ | */ | ||
+ | </code> | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ==== Navigation (optional) ==== | ||
+ | |||
+ | **Datei:** template/inc_css/nav_list_ul.css | ||
+ | |||
+ | {{:deutsch:templates:big-john-piefecta:nav_list_ul_article.zip|NAV_LIST_UL + Article (>=r387)}} | ||
+ | |||
+ | |||
+ | Siehe auch [[deutsch:navigationen:nav_list_ul_parameter]]. |