Vorlage anpassen

Hier können allgemeine Fragen zu HTML und CSS gestellt und diskutiert werden.
Antworten
oliverr
ConPresso-User
Beiträge: 43
Registriert: 19.11.2006 12:03
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Vorlage anpassen

Beitrag von 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?
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von 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;
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
oliverr
ConPresso-User
Beiträge: 43
Registriert: 19.11.2006 12:03
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von oliverr »

ich meine die Rahmen der Tabellenfelder vom Menu und wo trage ich das am besten ein?
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von 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???)
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
oliverr
ConPresso-User
Beiträge: 43
Registriert: 19.11.2006 12:03
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von 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.
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von 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
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Zum Thema Newsgroups:

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

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
oliverr
ConPresso-User
Beiträge: 43
Registriert: 19.11.2006 12:03
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von 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 :-(
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von 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 :wink:

Hattest Du überhaupt meinen Vorschlag ausprobiert? Sieht nämlich aus wie eine Tabelle... :gruebel:
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von 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... :wink:
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
oliverr
ConPresso-User
Beiträge: 43
Registriert: 19.11.2006 12:03
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von 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. :-(
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von 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
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
oliverr
ConPresso-User
Beiträge: 43
Registriert: 19.11.2006 12:03
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von 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.
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von 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" :mrgreen:

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

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
oliverr
ConPresso-User
Beiträge: 43
Registriert: 19.11.2006 12:03
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von oliverr »

:D 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......
Antworten