Steh ich so aufm Schlauch? (Neue Hauptnavi, Css Problem)

[barni]

Hi Leute,

ich bastel gerade die HP unserer Feuerwehr neu und steh total auf dem Schlauch. Hoffe Ihr könnt mir einen kräftigen Tritt geben, damit ich nicht mehr weiter drauf stehe.

Version 4.6.23

http://web1207.webbox182.server-home.or ... p?idcat=76

Das ist die Page.
Grundlage des CSS war das Css des Beispielmandanten.
D.h.
Mein CSS schaut nachwievor für das Menü so aus:

Code: Alles auswählen

/* Main navigation */
div#mnavi a {
	display: block;
	color: #334f77;
	background-color: #e8e8ee;
	border-bottom: 1px solid #aaaaaa;
}

div#col-left ul.e1 {
	margin: 15px 0 0 10px;
}

div#col-left li a.e1p {
	padding: 3px 5px 3px 10px;
}

div#col-left li a.e1a,
div#col-left li a.e1o,
div#col-left li a.e1oa {
	padding: 3px 5px 3px 10px;
	background: #fff url(../images/navi_pfeil_rechts.gif) no-repeat right center;
}

div#col-left li a.e1oa {
	background: #fff url(../images/navi_pfeil.gif) no-repeat right center;
}

div#col-left li a.e1o {
	background: #e8e8ee url(../images/navi_pfeil.gif) no-repeat right center;
}

div#col-left li a.e2p {
	padding: 3px 5px 3px 20px;
}

div#col-left li a.e2a,
div#col-left li a.e2o,
div#col-left li a.e2oa {
	padding: 3px 5px 3px 20px;
	background: #fff url(../images/navi_pfeil_rechts.gif) no-repeat right center;
}

div#col-left li a.e2oa {
	background: #fff url(../images/navi_pfeil.gif) no-repeat right center;
}

div#col-left li a.e2o {
	background: #e8e8ee url(../images/navi_pfeil.gif) no-repeat right center;
}

div#col-left li a.e3p {
	padding: 3px 5px 3px 30px;
	background: #e8e8ee url(../images/pf_navi1.gif) no-repeat 25px 8px;
}

div#col-left li a.e3a,
div#col-left li a.e3o {
	padding: 3px 5px 3px 30px;
	background: #fff url(../images/navi_pfeil_rechts.gif) no-repeat right center;
}

div#col-left li a.e3o {
	background: #e8e8ee url(../images/navi_pfeil.gif) no-repeat right center;
}

div#col-left ul.e3 {

}

Aber die Punkte der 2. Navigation und die der ersten Ebene werden einfach nicht eingerückt.

Gut es hat was damit zu tun (Generall):

Code: Alles auswählen

/* General */
* {
	margin: 0px;
        padding:0px;
}

html, body { height:100%; }

body {
	padding:0;
	margin:0;
	text-align:left;
	background-color:#FFFFFF;
	font-size:12px;
	font-family:Arial,Helvetica,Sans-serif,sans-serif;
	color:#333333;
	background-position:0px 0px;
	background-repeat: repeat-y;
	background-image: url(../images/bg.gif);
	overflow-x:hidden;
	overflow:-moz-scrollbars-vertical;

}


a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a.img {border:0px;}

img {
	border: none;
}

.y {
	clear: both;
}

.x {
	height: 0px;
	width: 0px;
	display: block;
	overflow: hidden;
}

ul, li, ol {
	list-style: none;
}

Aber diese ganzen Einstellungen sind ja in der Standardinstallation auch enthalten. Da hab ich noch nix groß verändert.

Woran liegts?
(Die beiden Sachen bei Geral steht in der Standardinstallation auch drin und das Menü braucht diese Einträge, sonst wird es ganz anders dargestellt)
Beim Beispielmandanten gehts doch auch.

Templates hab ich noch nicht verändert.

Glaub das ist ein leichtes für euch, aber ich komm net drauf.

Danke euch fürs schubsen!

LG Barni

[wosch]

Tja,
lieber @holger von f4b ->
weißt du nun warum ich so gegen die neue Navi und gegen das neue CSS ab der Version 4.6.23 bin?
Dieses CSS versteht nur jemand der im Schlaf alle Regeln runterbeten kann, aber ansonsten keine Sau!!!
(Entschuldige den Ausdruck aber so ist es.)
Im Beispielmandanten muß man solche Sachen nicht machen, da blickt der "Normal-Anwender" nicht durch,
und der "Fachmann" braucht das nicht, der macht es sowieso wie ER es will/gewöhnt ist.

@barni,
Im Beispielmandant ist die Navi bzw. die komplette rechte Spalte im DIV col-left und darauf aufbauend die Navi-Punkte definiert.
In deiner Seite gibt es kein col-left sondern menue, also stimmt die Navi-Definition in deiner CSS nicht.

[barni]

Danke Wosch!
Genau das wars mann wie gesagt...dick und fett auf dem Schlauch gesessen^^

da hätt ich noch ne Stunde mehr gesucht

Finde auch die alte Navi einfacher...is irgendwie übersichtlicher.

[holger.librenz_4fb]

@wosch:
Ähm, also ich seh da kein Prob. Ist sauberes, einfaches CSS?! Da sind weder irgendwelche Kniffe drin noch is es zu umfangreich????
Das Problem scheint viel mehr, das es nicht kommentiert ist. Das können wir aber gern ändern

So long.
Holger

[barni]

Hey,
ja kommentieren würde schon echt viel ausmachen
Jedensmal bin ich wieder am überlegen^^

Aber trotzdem merci!

Barni

[wosch]

@wosch:
Ähm, also ich seh da kein Prob. Ist sauberes, einfaches CSS?!

´
Nun gut, wenn du da kein Problem siehst und es als "sauberes, einfaches CSS betitels.
Ist doch schön für dich, und was Anfänger mit Contenido oder CSS da Probleme haben interessiert (mich dann eben auch) nicht.
IHR wollt Contenido "verkaufen", nicht ich, also warum soll ich mich weiter ... wenn alles so schön und einfach ist wie du sagst.

Schau dir den Krampf CSS mal an, ohne Fachbrille, aus der Sicht eines einfachen Users, aber das ist wahrscheinlich zuviel verlangt.
Hauptsache valid und w3c-konform, der Rest hat keinen zu interessen.

[HerrB]

Es war Wunsch der Community, dass der Beispielmandant statt tabellenbasiertem möglichst nur noch pures CSS-Design verwendet.

Die Überarbeitung stammt von einem Mitglied der Community. Pauschal finde ich die Kritik unangebracht, Verbesserungsvorschläge sind herzlich willkommen.

Gruß
HerrB

[wosch]

statt tabellenbasiertem möglichst nur noch pures CSS-Design verwendet.

Die Überarbeitung stammt von einem Mitglied der Community. Pauschal finde ich die Kritik unangebracht, Verbesserungsvorschläge sind herzlich willkommen.

Ich weiß das sie von einem User hier stamm, und ich weiß auch das dieser User Fachmann für CSS ist.
Das Vorab.

Es spricht ja auch nichts gegen pures CSS.
Aber hier wird mit geordnete Listen gearbeitet, das Listzeichen wird über CSS verbannt, es sind nun im Text ebenfalls keine Listen (mit normalen Listzeichen die man gewohnt ist) mehr möglich.
Wird das Listzeichen zugelassen, ist die Optik der Navi hinüber.
Über Rand = 0 muß alles was im Text steht eine Class oder ID expliziet zugewiesen bekommen, sonst paßt nichts mehr, ebenso die Schriftgröße, - art, -Font, ...
Nimm den Mustermandanten, eine beleibige Seite, und dann schreib mal puren Text da hinein, im Inline-Editing, im Tiny, und als Quellcode. Dann erkannst du was ich meine.

Die "Vererbung" der Attribute ist so undurchsichtig gestaltet, da ist es leichter alles zu löschen und komplett neu zu machen.

Die Navi mit ungeordneten Listen (wie die vpsitemap) wäre sehr viel besser.

Abkürzungen der ID/Classen:
e1o - da braucht man lange um zu wissen das es sowas wie Ebene 1 offen heißen soll, nav_second_on liest sich leichter und erklärt sich fast selber.

Das sind die Punkte die mir aus dem Kopf eingefallen sind, es gibt aber noch mehr was man vereinfachen sollte ohne das es kein pures CSS mehr ist.

Das ist ein Beipiel-Mandant, und kein Meisterstück für eine CSS-Prüfung.

[grisu]

Ich blick da auch überhaupt nicht durch und finde es ein Witz dass im Beispiel CSS nichts kommentiert ist.

Was nützt mir eine sauberer und genialer Code wenn keiner mehr weiß was gemeint ist.

Seltsam, seltsam......