Hallo, ich hoffe, jemand macht sich die Mühe, um mein Anliegen zu lesen. MEIN VORHABEN Ich habe vor, die Hauptnavigation (also wo die Hauptkategorien gelistet werden) durchgehend immer zentriert zu setzen. HOME | GENUSSWELTEN | FREIZEITWELTEN | etc.! Standardmäßig sind diese ja Linksbündig. Ich weiß nur noch nicht, wie ich das genau angehen muss. WAS ICH BISHER WEIß Herausgefunden habe ich, wo die Hauptnavigation überall im “_default”-Verzeichnis und “emotion”-Verzeichnis behandelt/definiert wird. Es sind also folgende Dateien involviert: …_default/frontend/recources/styles/style.css …_default/frontend/index/categories_top.tpl FRAGE Reicht es, wenn ich die Information zum zentrieren nur in meiner *.css im emotion_testtemplate-Verzeichnis eingebe, oder muss ich hier auch in meiner *.tpl was ergänzen, oder gar noch eine zusätzliche *.tpl wie zB categories_top.tpl erstellen, so wie im _default-Verzeichnis? Ich glaube, dass eine Anpassung des folgenden Quelltextes es tun wird, aber bin mir nicht sicher, ob und wie!? #mainNavigation {padding: 1px 0 0 15px; width: 983px; margin: 20px 0px 0 1px;line-height: 30px;position: static;height: 32px;} #mainNavigation li {float: left;position: static;} #mainNavigation a {display: block;padding: 0px 15px;border-right: 1px solid;border-left: 1px solid;position: static;} #mainNavigation a.active {font-weight: 700;height:31px;border: 1px solid; border-bottom: 0 none;background: url("../images/backgrounds/bg\_navigation\_top\_active.jpg") repeat-x;} #mainNavigation ul li ul {display: none;}
Zudem könnte vielleicht auch das hier was damit zu tun haben? .menu\_top {position: static;margin-bottom: 42px;}
Beides entnommen aus der style.css im _default-Verzeichnis. Ich habe nicht vor, im _default-Verzeichnis was zu ändern, sondern entsprechende Zeilen zu kopieren und zu bearbeiten. Vielleicht muss ich nur eine Zeile in meiner *.css eingeben, ich weiß nur nicht wie und was. STATUS-QUO Ich habe bisher in meinem Templateverzeichnis (…templates/emotion_testtemplate/frontend/) die komplette Verzeichnistruktur eingefügt, im Index-Verzeichnis meins Templates (…templates/emotion_testtemplate/frontend/index/) die datei header.tpl erstellt und dort auf meine emotion_testtemplate.css verwiesen, die ich im Styles Verzeichnis auch erstellt habe. die header.tpl sieht standardmäßig im Moment so aus: {extends file='parent:frontend/index/header.tpl'} {block name="frontend\_index\_header\_css\_screen" append} <link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/emotion_testtemplate.css'%7D">{/block}
Danach habe ich in die emotion_testtemplate.css Zeilen aus dem style.css kopiert und mit den Zahlen gespielt, um herauszufinden, was was macht… Mit folgender Zeile habe ich es sogar geschafft, dass es in Richtung Mitte rückt, aber alles andere sah katastrophal aus. (die “15px” hatte ich dazu auf 95px erhöht) #mainNavigation {padding: 1px 0 0 15px; width: 983px; margin: 20px 0px 0 1px;line-height: 30px;position: static;height: 32px;}
Ich habe nur begrenzte Programmierkenntnisse (sehr großzügig ausgedrückt), weshalb ich sehr schnell an meine Grenzen stoße, aber ich bin beharrlich. Wie schon mal erwähnt: bin eigentlich nur Grafik-Designer.
Hallo die Menüpunkt des horizontalen Menüs haben immer einen identischen Abstand zum linken und rechten Rand des Unterpunktes. Was soll den dort zentriert werden? Die Breite des Unterpunktes ändert sich mit der Textlänge des Eintrages. So gesehen steht der Text immer zentriert zu den senkrechten Trennlinien links und rechts. Den Abstand setzt man mit beiden Angaben: #mainNavigation a span #mainNavigation a Das sind aber echte Grundlagen bei CSS und HTML.