CMS - Der Dirigent » Support » Anwenderforum

Neue Umfrage | neues Thema | Antworten

Seiten: (11) « Erste ... 2 3 [4] 5 6 ... Letzte » ( Zum ersten neuen Beitrag )

Navigation-Templates, kann ein langer Thread werden ;)

« Älteres Thema | Neueres Thema » Thema abonnieren | Thema versenden | Thema drucken

sven28
Geschrieben am: 08. Jan 2004 - 14:49


Unregistered








QUOTE (hk-cons @ 08. Jan 2004 - 14:45)

QUOTE
was ist keine Grafik?

Hi,

Das Seitenmenü (links).

Home
Download
Produktfamilien
Windows etc....

Gruss
Top
mvsxyz
Geschrieben am: 08. Jan 2004 - 15:05


Member


Gruppe: Tester
Beiträge: 1503
Mitgliedsnummer: 341
Mitglied seit: 16. Oct 2003


@hk-cons: Microsoft hat seine Seite neu gemacht. Aber nichts desto trotz besteht die Navi aus HTML und CSS-Kästen.

Werd mal schauen, was sich machen lässt...

--------------------

Top   
sven28
Geschrieben am: 08. Jan 2004 - 15:05


Unregistered








Hallo,

ich will es nochmal verbildlichen, was ich meine:

user posted image

Gruss & Danke! blink.gif
Top
hk-cons
Geschrieben am: 08. Jan 2004 - 15:19


Dauertester


Gruppe: Tester
Beiträge: 5444
Mitgliedsnummer: 71
Mitglied seit: 31. Mar 2003


achso .. ich dacht, Sven28 meint die Karteikartenreiter ......
Das ist irgendwo schon im Forum beschrieben worden, wie das geht ......
hey auch das hab ich ..... guckst Du hier
Die template-Definition der Navi sieht so aus:

CODE
<!-- Einleitung der Navigation //-->

<div class="nav_head">Auswahl</div>
<div style="line-height:2px;">&nbsp;</div>
<!-- Layout der Seiten in der 1. Ebene //-->

<div class="{font1}" onMouseOver="this.style['background']='#CFBE8D';" onMouseOut="this.style['background']='#D8CD9D';" nowrap><a href="{link}"  onMouseOver="on('{name}');return true;" onMouseOut="off();return true;" class="{font2}">{name}</a></div>

<!-- Layout der aktuellen Seite in der 1. Ebene //-->

<div class="{font3}">{name}</div>

<!-- Layout zwischen den Seiten in der 1. Ebene //-->

<div style="line-height:2px;">&nbsp;</div>

<!-- Ende der Navigation //-->

<div style="line-height:2px;">&nbsp;</div>
<div class="nav_head">Suchen ...</div>

--------------------

spart sich sprüche und wird humorlos
Top   
mvsxyz
Geschrieben am: 08. Jan 2004 - 15:21


Member


Gruppe: Tester
Beiträge: 1503
Mitgliedsnummer: 341
Mitglied seit: 16. Oct 2003


Hab schon verstanden.. biggrin.gif

Willst du nur das CSS-Style? Für den Rahmen sähe es aus:


CODE
<div style="border:solid 1px #808080;background-color:#f1f1f1"><a href="Link" style="sonsiges..">Link</a></div>


Meine Nav sieht aus:

Inaktive Elemente:

CODE
<p class="nav" onmouseover=nav_rollon(this,{id}),on('{name}');return true; onmouseout=nav_rolloff(this,{id}),off();return true;><a href="{link}" class="nav" title="{name}">{name}</a></p>


Aktive Elemente:

CODE
<p class="nav" onmouseover=nav_rollon(this,{id}),on('{name}');return true; onmouseout=nav_rolloff_select(this,{id}),off();return true;><a href="{link}" class="nav" title="{name}">{name}</a></p>


Und hier das JS-File:

CODE

function nav_rollon(a) {
a.style.backgroundColor='#f1f1f1';
a.style.border = '#808080 solid 1px';
a.style.cursor = 'hand';
}

function nav_rolloff(a,img) {
a.style.backgroundColor='#f1f1f1'; //*
a.style.border = '#f1f1f1 solid 1px'; //*
}

function nav_rolloff_select(a,img) {
a.style.backgroundColor='#f1f1f1'; //*
a.style.border = '#f1f1f1 solid 1px'; //*
}


Überall wo ein Stern steht musst du noch deine "normale" Hintergrund Farbe reinschreiben.
Bei funktioniert es so.

--------------------

Top   
mvsxyz
Geschrieben am: 08. Jan 2004 - 15:21


Member


Gruppe: Tester
Beiträge: 1503
Mitgliedsnummer: 341
Mitglied seit: 16. Oct 2003


War er doch schneller als ich... dry.gif

Kannst dir ja jetzt eins aussuchen. biggrin.gif

--------------------

Top   
sven28
Geschrieben am: 08. Jan 2004 - 15:23


Unregistered








aha. Danke euch!!! Werde es mal versuchen reinzubasteln...
Top
roberto
Geschrieben am: 08. Jan 2004 - 15:49


Unicoder


Gruppe: Tester
Beiträge: 1853
Mitgliedsnummer: 343
Mitglied seit: 16. Oct 2003


Hmm, wie üblich bei Microsoft ist das Ding aber nicht 100%ig Mozilla-kompatibel ... Selbst die CSS-Formatierungen nicht.
Die Hover-Effekte kann man aber auch ohne Javascript realisieren - mit CSS.

Etwa so (mal ohne die Umsetzung als Navi-Templates):


CODE

<html><head><title>Microsoft:crossbrowser</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

* {
 font-family:verdana,arial,tahoma,helvetica;
 font-size:11px;
}

a { color:#000000; }


#menu {
 width: 160px;
 padding: 0px;
 font-size:11px;
 background-color: #EEEEEE;
 float: left;
 border: 1px solid #999999;
 }
 
#menu div {
 margin:0px;
 padding:1px;
 width: 158px;
 }

#menu div.unselected a {
 display: block;
 border: 1px solid #EEEEEE;
 font-weight:bold;
 text-decoration: none;
 text-indent:2px;
 line-height:20px;
 width: 100%;
 }

html>body #menu div.unselected a {
 width: auto;
 }

#menu div.selected a {
 display: block;
 border: 1px solid #999999;
 background-color: #FFFFFF;
 font-weight:bold;
 text-decoration: none;
 text-indent:2px;
 line-height:20px;
 width: 100%;
 }

html>body #menu div.selected a {
 width: auto;
 }
 
#menu div.sub a {
 display: block;
 border: 1px solid #EEEEEE;
 font-weight:normal;
 text-decoration: none;
 text-indent:8px;
 line-height:16px;
 width: 100%;
 }

html>body #menu div.sub a {
 width: auto;
 }  
 
 
#menu div.subselected a {
 display: block;
 border: 1px solid #999999;
 background-color: #FFFFFF;
 font-weight:normal;
 text-decoration: none;
 text-indent:8px;
 line-height:16px;
 width: 100%;
 }
 
html>body #menu div.subselected a {
 width: auto;
 }
 
#menu div.divisor {
 display: block;
 border-bottom: 1px solid #999999;
 text-decoration: none;
 line-height:2px;
 width: 100%;
 }
html>body #menu div.divisor {
 width: auto;
 }
 
#menu div a:hover {
        display: block;
 background-color: #CCCCCC;
 border: 1px solid #999999;
 width: 100%;
 }

</style></head>


<body>

<div id="menu">
         <div class="unselected"><a href="bla.html">Produktfamilien</a></div>
  <div class="sub"><a href="bla.html">Windows</a></div>
  <div class="subselected"><a href="bla.html">Office</a></div>
  <div class="sub"><a href="bla.html">Server</a></div>
  <div class="divisor"></div>
         <div class="unselected"><a href="bla.html">Dienste</a></div>        
  <div class="sub"><a href="bla.html">Support</a></div>
  <div class="sub"><a href="bla.html">Downloads</a></div>
</div>
</body></html>

--------------------

Lokal: DeDi 1.01; SuSE 8.1 | Apache/1.3.26 & PHP 4.3.10 | MYSQL 3.23.52
Top   
Monte
Geschrieben am: 28. Feb 2004 - 23:18


Unregistered








Beim Nachbauen eines bestehenden Layouts für eine Navigation bin ich auf ein Problem gestossen. Habe mir mit der 0.96 folgendes, schlichte Template erstellt:

Einleitung der Navigation:
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td>

Layout der Ordner in der 1. Ebene
<div class="sublink"><a href="{link}">{name}</a></div>

Layout des aktiven Ordners der 1. Ebene
<div class="sublink_markiert"><a href="{link}">{name}</a></div>

Ende der Navigation
</td></tr></table>

Die verwendeten CSS-Klassen benutzen verschiedene Hintergrundbilder. Nun muß unbedingt der letzte Eintrag in der Navi eine dritte Klasse "sublink_letzter" bzw. "sublink_letzter_markiert" verwenden, aber wie?

Geht das überhaupt mit diesem Modul?
Top
hk-cons
Geschrieben am: 28. Feb 2004 - 23:49


Dauertester


Gruppe: Tester
Beiträge: 5444
Mitgliedsnummer: 71
Mitglied seit: 31. Mar 2003


du kannst in den templates (fast) jeden html-tag unterbtingen, also auch div, span etc mit style= "irgendwas"

--------------------

spart sich sprüche und wird humorlos
Top   
Monte
Geschrieben am: 29. Feb 2004 - 07:09


Unregistered








Ist mir schon klar ;-)
Nur, wie ermittle ich, welches der LETZTE Eintrag ist? Geht das vielleicht über die ID?
Top
hk-cons
Geschrieben am: 29. Feb 2004 - 08:56


Dauertester


Gruppe: Tester
Beiträge: 5444
Mitgliedsnummer: 71
Mitglied seit: 31. Mar 2003


Dazu mußt Du wohl das Modul umschreiben, denn wie soll DAS LETZTE gefunden werden? Hast Du in der Navigation Ordner, Seiten oder Beides? Die idcat und die idcatside werden automatisch vergeben und Du kannst ja auch Ordner und Seiten verschieben, sodass dann zwangläufig die höchste id nicht die letzte ist. Du mußt wohl oder über deshalb die temporären arrays anzapfen, die nach der Sortierung bestehen ........

Gruß Harald

--------------------

spart sich sprüche und wird humorlos
Top   
Monte
Geschrieben am: 29. Feb 2004 - 09:02


Unregistered








Ach Du Schande ...
Aber danke für die Erklärung ;-)

Monte
Top
Mistral
Geschrieben am: 29. Feb 2004 - 10:47


Member


Gruppe: Members
Beiträge: 1269
Mitgliedsnummer: 352
Mitglied seit: 23. Oct 2003


Hallo Monte

Ich bin mir nicht ganz sichr was du genau machen willst.
Aber könnte es nicht funktionieren, wenn du das Ende der Navigation änderst.

von

CODE
Ende der Navigation
</td></tr></table>


in

CODE

Ende der Navigation
<div class="sublink_letzter"></div> </td></tr></table>


So sollte dein Hintergrundbild doch auch komplett dargestellt werden.
Nur so als Idee.
Gruss

Mistral

--------------------

Holz hacken ist deshalb so beliebt, weil man bei dieser Tätigkeit den Erfolg sofort sieht.
(Albert Einstein)
Top   
Monte
Geschrieben am: 29. Feb 2004 - 10:53


Unregistered








@Mistral

Leider geht das nicht. Links von jedem Textlink gibt es eine Linie, diese sieht beim letzten Link etwas anders aus, muß aber auch links vom Link plaziert werden. So war es bisher jedenfalls realisiert. Ich denke, für die Umsetzung in DEDI muß ich das Layout ein wenig ändern.

Monte
Top

Thema wird von 0 Benutzer gelesen (0 Gäste und 0 Anonyme Benutzer)
0 Mitglieder:

160 Antworten seit 23. May 2003 - 16:56

Thema abonnieren | Thema versenden | Thema drucken


Seiten: (11) « Erste ... 2 3 [4] 5 6 ... Letzte »

<< Zurück zu Anwenderforum

Neue Umfrage | neues Thema

Home | Das Projekt | Download | Entwicklung | Dokumentation | Forum | Impressum