Vorlage anpassen

[oliverr]

Hallo,

bin gerade dabei das mod_menu anzupassen (default) und möchte gerne den Rahmen des activen Feldes gepunktet anzeigen, nicht aktive Felder sollen keinen Rahmen haben.

Nur steige ich da mit dem css und den Möglichkeiten im mod_menu nicht durch.

Könnte mir da evt. jemand einen heißen Tipp geben?

[MarkusR]

Ich verschiebe das jetzt mal in die Rubrik CSS, weil es ja ausschließlich ums Aussehen geht.

Punktierte Rahmen erhält man mittels:

border: 1px dotted black;

[oliverr]

ich meine die Rahmen der Tabellenfelder vom Menu und wo trage ich das am besten ein?

[MarkusR]

Trage es als CSS-Style ein.

Wenn Du es etwas ausführlicher haben willst, dann werde selbst ausführlicher.
Zeige was Du bisher hast oder zeige wie es aussehen soll.
Es ist eigentlich gar nicht so schwierig hier Texte und Codes einzukopieren oder Screenshots einzustellen. Probiere es einfach mal.
(oder erwartest Du, daß hier jemand die default-Einstellungen im Kopf hat oder seine eigenen löscht, damit er Dir antworten kann???)

[oliverr]

Zur Zeit sieht es so aus:

Code: Alles auswählen

<!-- START_MOD_MENU_NAVIGATION -->
<table border="0" cellpadding="5" cellspacing="2" width="160">
<!-- START_NAVITEM -->
<tr><td bgcolor="### NAV_MARK ###" style="cursor:hand" onmouseover=this.style.backgroundColor="### NAV_HOVER ###" onMouseOut=this.style.backgroundColor="" onclick="window.location.href='### NAV_LINK ###'">### NAV_PRE ###<a href="### NAV_LINK ###" class="mod_menu">### NAV_TEXT ###</a></td></tr>
<!-- ENDE_NAVITEM -->
</table>
<!-- ENDE_MOD_MENU_NAVIGATION -->

Code: Alles auswählen

a.mod_menu	{ font-size: 11px};

Wie schon geschrieben, bin ich was CSS angeht nicht sehr bewandert und habe da schon ein paar Sachen ausprobiert, aber bin nicht zu dem gewünschten Ergebnis gekommen.
(Ich poste nicht immer gleich alles was ich habe, weil so ist es nunmal in Newsgroups, das man erst nach einer Nachfrage den Code postet, weil sonnst werden die Anfragen sehr lang usw.)

Ich möchte quasi wenn man mit einem Cursor über die Felder geht, das ein gepunkteter Rahmen angezeigt wird. Das soll also den Menüeintrag Hover vom Hintergrund auf den Rahmen übertragen.

[MarkusR]

Sieht so aus, als wolltest Du nur eine vertikale Navigation...

Ändere das Template dafür in

Code: Alles auswählen

<!-- START_MOD_MENU_NAVIGATION --> 
<div id="navigation">
<!-- START_NAVITEM --> 
<a href="### NAV_LINK ###" class="### NAV_CLASS ###">### NAV_TEXT ###</a>
<!-- ENDE_NAVITEM --> 
</div> 
<!-- ENDE_MOD_MENU_NAVIGATION -->

Dann schreibtst Du als CSS

Code: Alles auswählen

#navigation a {
	display: block;
	width: 150px;
}
#navigation a.aktiv {
	border: 1px dotted black;
}
#navigation a.nichtaktiv:hover {
	border: 1px dotted black;
}

Und trägst bei den Klassen unter Actual "aktiv" und bei allen anderen "nichtaktiv" ein

[MarkusR]

Zum Thema Newsgroups:

Google mal nach "Wie man Fragen richtig stellt"... hat da vermutlich noch keiner gelesen... oder es sind alles Hellseher...

[oliverr]

Da ich das Tabellenlayout nicht missen möchte habe ich mal versucht Deine Lösung auf die Tabelle umzusetzen, aber ich schaffe es nicht, es wird kein Rahmen vom Feld angezeigt.

Habe das versucht:

Code: Alles auswählen

<!-- START_MOD_MENU_NAVIGATION -->
<div id="navigation"> 
<table border="0" cellpadding="5" cellspacing="2" width="160">
<!-- START_NAVITEM -->
<tr><td bgcolor="### NAV_MARK ###" style="### NAV_CLASS ###" onmouseover=this.style.backgroundColor="### NAV_HOVER ###" onMouseOut=this.style.backgroundColor="" onclick="window.location.href='### NAV_LINK ###'">### NAV_PRE ###<a href="### NAV_LINK ###" class="mod_menu">### NAV_TEXT ###</a></td></tr>
<!-- ENDE_NAVITEM -->
</table>
</div>
<!-- ENDE_MOD_MENU_NAVIGATION -->

Code: Alles auswählen

#navigation a {
   display: block;
   width: 150px;
}

#navigation {
cursor:hand
}

#navigation TD.nichtaktiv:hover {
border-left: dashed 1px black;
border-right: dashed 1px black;
}

wenn ich es mit

Code: Alles auswählen

#navigation TD {
border-left: dashed 1px black;
border-right: dashed 1px black;
}

versuche wird ein Rahmen bei allen angezeigt, also hae ich es einfach mit der Ergänzung versucht, aber es geht nicht

[MarkusR]

Tabellenzellen kennen die Pseudoeigenschaft "hover" nicht, daher eben die Verwendung der Links.

Du kannst ja um jeden Link eine Tabellenzelle und -zeile sowie um das ganze eine Tabelle bauen, wenn Du nicht ohne Tabelle leben willst.

Enorm hilfreich ist bei sowas ein Feld-Wald-und-Wiesen-HTML-Editor, mit dem man die Navigation erst mal entwirft und anschließend einfach die sich ändernden Teile durch die Platzhalter ersetzt. ConPresso und die Module können ja nichts dafür, wenn ein "Webmaster" mit HTML und CSS auf Kriegsfuß steht

Hattest Du überhaupt meinen Vorschlag ausprobiert? Sieht nämlich aus wie eine Tabelle...

[MarkusR]

Noch was:

CSS-Klassen wendet man nicht mittels

Code: Alles auswählen

style="### NAV_CLASS ###"

sondern

Code: Alles auswählen

class="### NAV_CLASS ###"

an.
Nur wenn man sog. "inline-styles" verwenden will, dann verwendet man style=
Dann muß da aber auch eine Anweisung stehen und nicht der Name einer Klasse...

[oliverr]

Habe es nun nach Deinem Bespiel gemacht, siehe http://new.adfc-frankfurt.de/_rubric/in ... nfoKontakt

Code: Alles auswählen

<!-- START_MOD_MENU_NAVIGATION -->
<div id="navigation">
<!-- START_NAVITEM -->
<a href="### NAV_LINK ###" class="### NAV_CLASS ###">### NAV_TEXT ###</a>
<!-- ENDE_NAVITEM -->
</div>
<!-- ENDE_MOD_MENU_NAVIGATION -->

Code: Alles auswählen

#navigation a {
   display: block;
   width: 150px;
   line-height: 20px;
   border: 1px solid #ffffff;
   background-color:#ffffff;
   vertical-align:middle;
   padding-left:3px;
}

#navigation a.sub {
   width: 146px;
   border-left:5px solid #FFFFFF;
   border-right:1px solid #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
   border-top: 1px solid #FFFFFF;
   background-color:#ffffa0;
}

#navigation a.aktiv {
   background-color:#FFA000;
   border:solid 1px #FFFFFF;
   color:#000000;
} 

#navigation a.header {
   background-color:#ffcc66;
   border:solid 1px #FFFFFF;
}

#navigation a.main {
   border:solid 1px #FFFFFF;
}

#navigation a.main:hover{
   border:1px dotted #FFA000;
}

#navigation a.sub:hover {
   border-left:5px solid #FFFFFF;
   border-right:1px solid #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
   border-top: 1px solid #FFFFFF;
}
#navigation a.header:hover {
   border:solid 1px #FFFFFF;
}

Jetzt muss ich es nur noch schaffen, das auch wenn weitere Untermenüs sich schachteln, eingerückt werden und auch wenn sie aktiv sind nicht wieder nach vorne rücken.
Ich kann mir jetzt schon denken, das es nicht einfach wird.

[MarkusR]

Lies Dir doch mal die Anleitung dazu durch
http://www.conpresso4.de/_rubric/detail ... c=mod_menu&

Da steht unter anderem

### NAV_PRE ###
ist der Präfix, der zum Einrücken benutzt werden kann

Ergänze das doch mal

Code: Alles auswählen

<a href="### NAV_LINK ###" class="### NAV_CLASS ###">### NAV_PRE ###### NAV_TEXT ###</a> 

und schon wird ganz nach Wunsch und Einstellung eingerückt.

Auch ganz prima dafür geeignet ist

### NAV_LEVEL ###
ist der Menülevel von 1 bis 4, der z.B. für das Anlegen individueller CSS-Styles (.style1 durch class="style### NAV_LEVEL ###") benutzt werden kann

[oliverr]

An diese Teile habe ich auch schon gedacht (und ausprobiert), nur wenn ich z.B. den Text einrücke und dieser aber länger ist, wird er umgebrochen und die nächste Zeile ist nicht eingerückt, was nicht schön aussieht, deswegen habe ich das in dem fall über den Rand gemacht, was aber dann mit Untermenüs und aktiven Untermenüs Probleme macht.

Werde wohl nicht um NAV_LEVEL herum kommen und da noch weiteren CSS zusammen bauen müssen.

[MarkusR]

Ohne es bewerten zu wollen frage ich mich bei Deiner Navigation, warum in einem Hauptpunkt "InfoKontakt" die Rubrik "Arbeitsgruppen" nicht über "Arbeitsgruppen" sondern über "Kontakt zu den Arbeitsgruppen" verlinkt wird. Dafür gibt es sogar einen Fachbegriff: "Doppelt gemoppelt"

Aber damit habe ich bei meinen Kunden auch immer ein Problem, die Romane schreiben, wenn man ein "Stichwort" haben möchte...

[oliverr]

Wo Du recht hast Du recht

Wie es halt so gewachsen ist....

Ich möchte die neue Seite erstmal fast so aufbauen, wie die Alte um es beim Vorstand dürch zu bringen, aber ich bin auch schon am überlegen ein paar Sachen anderst zu machen oder anderst zu nennen.

In einem Verein ist das teilweise sehr schwer, neue Sachen dürchzusetzen.
z.B. möchte ich auch für den Vereinsinternen gebrauch ein Forum aufsetzen, aber da gab es schon wieder streit drüber, das es ja wohl nicht genutzt werden würde......