Hilfe b. automatisch erzeugte CSS Anweisungen für Navigation

[iebert]

Ich bitte um Hilfe im Zusammenhang mit der Darstellung der Navigationen.
Über rex_navigation::factory() habe ich die Navigation erzeugen lassen (erste Ebene horizontal, die weiteren Ebenen getrennt an anderer Stelle vertikal) und anschließend die automatisch erzeugten Divs und Klassen in meiner CSS-Datei definiert, aber leider ohne Auswirkungen. Wie mache ich es, dass die CSS-Anweisungen verstanden werden? Müssen sie an besonderer Stelle gespeichert werden bzw. kann ich Redaxo beibringen, meine eigenen Divs und Klassen anzunehmen?
Danke für jede Hilfe.

[Cheffchen]

Hallo,

anschließend die automatisch erzeugten Divs und Klassen in meiner CSS-Datei definiert, aber leider ohne Auswirkungen.

äh??
Dann passt doch alles oder wo hast CSS-Datei definiert und womit?
Link Hilft bei so was immer.

Um jede Navi ein <DIV id=haupt> NAVI </DIV> oder <DIV id=unter> NAVI </DIV> oder So und dann halt denn Rest in css ins Template oder in eine css Datei.

Code: Alles auswählen

#haupt ul.rex-navi1 {
	display: block;
	text-align: center;
	padding: 0;
	margin: 0;}
#haupt li {float:left;
         display: block;margin: 1px; 
usw. }

Schau do einfach mal ihier im Forum bei Webseiten & Kommentare
nach da sind viele R Seiten und braucsht bloss den code mal anschauen.

Cheffchen

[madiko]

Hallo,

es sind verschiedene Dinge, die Du beachten musst:

In den Templates ganz oben noch vor dem Header muss rein:

Code: Alles auswählen

<?php /* ##### cascading stylesheets ##### */?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo $REX['HTDOCS_PATH']?>media/layout/css/css_layout_default.css" />
... ggf. alle weiteren css, die Du verwendest einbinden 
<style type="text/css"> </style>

[Anstatt von media/layout/css/css_layout_default.css musst Du natürlich Deinen Pfad und Deine CSS angeben.]


Dann zu den CSS selbst:
Ich empfehle Dir, zunächst eine "norm.css" im default-css anzusprechen, die alle Standardformatierungen im Browser egalisiert - danach kannst Du "neu" anfangen. Das machst Du am besten so:

(Nur) Im default css einfach ganz am Anfang:

Code: Alles auswählen

	/* ##### Normalisierung ##### */
	@import url("norm.css");

Die auf Redaxo angepasste norm.css kannst Du Dir anschauen unter: http://madiko.com/media/layout/css/norm.css


Dann habe ich folgende Einstellungen im CSS zur Navi vorgenommen:

#nav_main ist dabei der Div, in dem ich die Navi komplett eingebunden habe -> da musst Du dann Deine entsprechenden div-IDs ändern.

Code: Alles auswählen

#nav_main {
 	font-size: ;
	line-height: ; 
	font-weight: ; 
	font-style: ;  
	text-decoration: ;
	}
	
#nav_main p.copy,
#nav_main p {
	padding-right: ;
	text-align: ;
	}

#nav_main .rex-current {
	font-weight: ;
	text-decoration: ;
	}

#nav_main .rex-navi1 {
	padding: 0 10px 0 10px;
	margin: 0;
    color: ;
	}

#nav_main .rex-navi2 {
	padding: 0px;
	color: ;
	}

#nav_main .rex-navi3 {
	padding: 0 0 0 15px;
    color: ;
	}



/* ##### nav1st - first level navigation ##### */

#nav_main ul.rex-navi1 {
	padding: 10px 0px 0 10px;
	font-size: ;
	text-transform: ;
	text-decoration: ;
	}

#nav_main ul.rex-navi1 li {
	display: block;
	padding: 3px 0;
	font-weight: ;
	text-decoration: ;
	text-align: left;
	}

#nav_main ul.rex-navi1 a {
	display: block;
	padding: 1px 0;
        color: ;
	text-decoration: ;
	}

#nav_main ul.rex-navi1 a:visited {
	color: ;
	display: block;
	padding: 1px 0;
	text-decoration: ;
	}

#nav_main ul.rex-navi1 a:hover {
	color: ;
	text-decoration: underline;
	padding: 1px 0;
	}


#nav_main ul.rex-navi1 li a.rex-active, 
#nav_main ul.rex-navi1 li a.rex-current {
	color: ;
	font-weight: bold;
	padding: 1px 0;
	text-decoration: none;
        letter-spacing: ;
        font-size: ;
	}



/* ### nav2nd - second level navigation ######################################### */

#nav_main ul.rex-navi2 {
	margin: 0 0 5px 0;
	font-size: ;
	font-weight: normal;
	text-transform: none;
	background-color: ;
        color: ;
	}

#nav_main ul.rex-navi2 li {
	padding: 0;
	margin: 0;
	font-weight: normal;
	border-bottom: 1px solid;
	border-color: ;
	text-align: left;
	}

#nav_main ul.rex-navi2 a, 
#nav_main ul.rex-navi2 a:link, 
#nav_main ul.rex-navi2 a:visited {
	display: block;
	padding: 2px 5px;
	font-weight: normal; 
	background-color: ;
	color: ;
	text-decoration: none;
	}


#nav_main ul.rex-navi2 a:hover {
	display: block;
	padding: 2px 5px;
	background-color: ;
	color: ;
        font-weight: none;
	text-decoration: none;
	}

#nav_main ul.rex-navi2 li a.rex-active, 
#nav_main ul.rex-navi2 li a.rex-current {
	display: block;
	padding: 2px 5px;
	background-color: ;
	color: ;
        font-weight: bold;
	letter-spacing: ;
        font-size: ;
	}

/* ### nav3rd - third level navigation ######################################### */

#nav_main ul.rex-navi3 {
	margin: 0 0 5px 0;
	font-size: ;
	font-weight: normal;
	text-transform: none;
	background-color: ;
    color: ;
	}

#nav_main ul.rex-navi3 li {
	padding: 0;
	margin: 0;
	font-weight: normal;
	border-bottom: 1px solid;
	border-color: ;
	text-align: left;
	}

#nav_main ul.rex-navi3 a, 
#nav_main ul.rex-navi3 a:link, 
#nav_main ul.rex-navi3 a:visited {
	display: block;
	padding: 5px;
	font-weight: normal; 
	background-color: ;
	color: ;
	text-decoration: none;
	}


#nav_main ul.rex-navi3 a:hover {
	display: block;
	padding: 5px;
	background-color: ;
	color: ;
    font-weight: ;
	text-decoration: none;
	}

#nav_main ul.rex-navi3 li a.rex-active, 
#nav_main ul.rex-navi3 li a.rex-current {
	display: block;
	padding: 5px;
	background-color: ;
	border-bottom: 2px solid;
	border-color: ;
	color: ;
    font-weight: bold;
	letter-spacing: 0.05em;
	}

/* ##### ENDE ##### */

Ich hoffe, das hilft Dir weiter. Melde Dich gern, wenn Du Probleme hast.

Viele Grüße,
Franziska

[iebert]

Hallo Franziska und Cheffchen,
danke für eure Unterstützung!!
Franziska, dein Weg, die Standardformatierungen der Browser zu "egalisieren", hilft mir sehr weiter!
Ich hatte versucht, das mit dem an Redaxo angepasste YAML-framework zu schaffen, das ich bei den Templates gefunden habe, das dort enthaltene Navigations-Template hat mich allerdings überfordert.
Kann gut sein, dass ich bald auf dein Angebot zurück komme, wenn das nächste Problem auftaucht.
Danke!!
LG., Ingrid

[iebert]

Hallo Franziska,
habe meine divs im Template und den CSS-Anweisungen angepasst (der div "hlist" umfasst die 1. Navigationsebene (horizontal), "vlist" die Navigation mit den Unterkategorien), soweit werden meine Anweisungen sichtbar!
Aber jetzt kommt das Problem: die weiteren Anweisungen schlagen sich nicht nieder, es sei denn, ich übernehme genau die Benennungen ".rexnavi1", ".rexnavi2", etc.. Ich habe diesen html-Code zu deiner CSS-Definition ".rexnavi1", ".rexnavi2", etc. aber in meinem Template niergends. Möchte fragen, ob diese divs in Redaxo irgendwo automatisch erzeugt werden oder an welcher Stelle tauchen sie im Template auf? Muss ich diese Benennungen standardmäßig übernehmen?
Danke für deine Unterstützung,
LG., Ingrid

[madiko]

Hallo Ingrid,

ga genau. Deswegen habe ich sie Dir hingeschrieben. Es sind die Klassen, die in Redaxo hinterlegt sind. Wenn Du alle Klassen für Deine Divs übernimmst, klappt es.



Viel Erfolg!

Gruß,
Franziska

[iebert]

Hallo Franziska,
jetzt wird´s allmählich klarer, danke dir!! Gibt es irgendwo eine Übersicht mit diesen standardmäßigen divs?
Ingrid

[madiko]

Hallo Ingrid,

gute Frage. Habe ich bisher noch nicht gefunden.

Ich habe mir das über die Demo hergeleitet und bin in die Online-Beispiele, die meistens bei den Templates dabei sind gegangen und habe mir dann dort wiederum die CSS angeschaut.
Try & Error-Prinzip also

Weiß jemand einen schnelleren Weg?
Gibt es quasi ein CSS Cheat Sheet?

Viele Grüße,
Franziska