Seitenspalte LEFT3 spaltiges LayoutDieses Layout entspricht nahezu dem bekannten free-XL template, besitzt aber als Navigation in der linken Seitenspalte die Variante NAV_LIST_UL, die sich innerhalb einer gesonderten CSS-Datei dem eigenen Geschmack anpassen läßt.
Beide Seitenspalten sind nun einheitlich 200px breit.
|
free-XL_2009 : Haupt-Navigation als "ungeordnete Liste"
Hier wird die 2007er Version "navigationstechnisch modernisiert"
Wer von den Nutzern der beliebten free-XL-templates lieber die Navigationsvariante NAV_LIST_UL von flip-flop verwenden möchte, kann auch das selber "nachrüsten".
Einfach den folgenden 5 Schritten der Reihe nach folgen... und die Sache ist in 10 Minuten erledigt! Und wenn es 20 Minuten dauern sollte, auch kein Beinbruch, oder?
1. Neue CSS-Klassen in die verwendete frontend.css-Datei einfügen
In der verwendeten CSS-Datei ist die nachfolgende Klasse einzufügen:
/* --- Horizontale Navigation ================================ */
/* NEU bei der modifizierten Version: free-XL-2009 */
.navRow-2009 { height:20px; background:#81909F; margin-top:1px; }
2. Für die Navigation zusätzlich benötigte CSS-Datei einfügen
Folgende CSS-Datei wir zusätzlich benötigt und ist abzuspeichern als:
.../template/inc_css/nlu_horiz1.css
/*
=================================================================
>= V1.30 CSS for an horizontal menu one level
<div class="nlu_horiz1">{ NAV_LIST_UL:F,0,1,act_path,active }</div>
Level 0;
26.03.07 flip-flop (KH)
24.12.09 pepe (Manfred Peperkorn) tiny mods
=================================================================
*/
.nlu_horiz1 {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
text-decoration: none;
font: normal normal 11px/20px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.nlu_horiz1 em { font-style: normal; }
.nlu_horiz1 ul {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.nlu_horiz1 ul li {
display: block;
float:left;
}
/* ==== Styles for Menu Items ================================ */
/* ==== LEVEL X ============================================== */
.nlu_horiz1 ul li a,
.nlu_horiz1 ul li a:link,
.nlu_horiz1 ul li a:visited,
.nlu_horiz1 ul li a:active {
display: block;
/* Die beiden folgenden Zeilen sind NUR bei "fester Breite" erforderlich */
/* width: 108px; */ /* width entry = with + boarder left/right ==== IE only ====*/
/* w\idth: 92px; */ /* width entry = with - padding left/right */
text-decoration: none;
text-transform: none;
color: #fff;
/* Die folgende Zeile ist NUR bei "fester Breite" erforderlich */
/* padding: 0px 0 0 15px; */ /* Text adjust */
/* Folgende Zeile ist NUR bei "variabler Breite" erforderlich */
padding: 0px 10px 0 15px; /* Text adjust */
border-right: 1px solid #eee;
background: #81909F url(../../img/article/navi1_norm.gif) 5px 1px no-repeat;
}
/* state for the active point if there is a sub_level */
.nlu_horiz1 ul li.sub_ul_true a,
.nlu_horiz1 ul li.sub_ul_true a:link,
.nlu_horiz1 ul li.sub_ul_true a:visited,
.nlu_horiz1 ul li.sub_ul_true a:active {
color: White;
font-weight: bold;
background: #839AAF url(../../img/article/navi1_sub_true.gif) 5px 1px no-repeat;
}
/* state for the active path (link tracing) */
.nlu_horiz1 ul li.act_path a,
.nlu_horiz1 ul li.act_path a:link,
.nlu_horiz1 ul li.act_path a:visited,
.nlu_horiz1 ul li.act_path a:active {
color: White;
font-weight: bold;
background: #63819F url(../../img/article/navi1_act.gif) 5px 1px no-repeat;
}
/* state for the active link */
.nlu_horiz1 ul li.active a,
.nlu_horiz1 ul li.active a:link,
.nlu_horiz1 ul li.active a:visited,
.nlu_horiz1 ul li.active a:active {
color: White;
font-weight: bold;
background: #63819F url(../../img/article/navi1_act.gif) 5px 1px no-repeat;
}
.nlu_horiz1 ul li a:hover, .nlu_horiz1 ul li.sub_no a:hover {
color: White;
background: #597B8F url(../../img/article/navi1_hov.gif) 5px 1px no-repeat;
}
.nlu_horiz1 ul li.act_path a:hover {
color: White;
background: #37667F url(../../img/article/navi1_act_hov.gif) 5px 1px no-repeat;
}
.nlu_horiz1 ul li.active a:hover {
color: White;
background: #37667F url(../../img/article/navi1_act_hov.gif) 5px 1px no-repeat;
}
/* ===== END horiz Level X_=================================== */
3. Die neue CSS-Datei im Template aktivieren
Im verwendeten Template sind jetzt die folgenden CSS-Dateien zu aktivieren:
frontend.css
nlu_horiz1.css
4. Aus dem Template zu entfernende Codezeilen
Im verwendeten Template ist folgende Code-Sequenz zu ersetzen:
<!-- ================================================= -->
<div class="navRow">{ NAV_ROW}</div>
5. An der selben Stelle im Template einzusetzende Codezeilen
Dafür ist an der selben Stelle der folgende Code einzusetzen:
<!-- ================================================= -->
<div class="navRow-2009">
<div class="nlu_horiz1">
{ NAV_LIST_UL:FP,0,1,act_path,active}
</div>
</div><!-- Ende navRow-2009 -->
Aktualisierung: 27.12.2009 - 16:53 / Redakteur: Webmaster
|
Seitenspalte RIGHTUntertitel dieses ContentPartsDas ist der Fließtext für die rechte Seitenspalte. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Es wird valider Code generiert
Wer's nicht glauben will...
|
|
|
