Navigation Problem !

[maria1]

Hallo,

Für einen Kunden muss ich ein Template umsetzen.
Leider habe ich nicht viel Erfahrung mit Shopware.
Meine Frage ist aber auch nicht auf die Software selbst bezogen !

Beispiel http://utubeload.com/project_shopdesign_09_03_2012/index.php/lifestyle-wohnen

Die Navigation sollte aber so aussehen shop.jpg - Bilder und Fotos kostenlos auf ImageBanana hochladen
Meine Fragen:
Wie bekomm ich den Text nach unten also so hin wie auf dem Bild ?!
Und dann müsste active hinter der mainNavigation sein ?!

Ich hoffe Ihr versteht mich und jemand kann mir einen Denkanstoß geben :)

Grüße und schönen Samstag wünsch ich noch
Maria1

 

[threadi]

Zunächst:
[Invalid] Markup Validation of http://utubeload.com/project_shopdesign_09_03_2012/index.php/lifestyle-wohnen - W3C Markup Validator
Da sind zwar fast nur entity-Fehler die sich nicht auf die Darstellung auswirken, aber schau sie dir trotzdem mal an.

Der ganze Kopfbereich oben ist aus meiner Sicht mit ungünstigen CSS-Eigenschaften versehen. Z.B. gibt es bei #mainNavigation eine absolute Positionierung OHNE Positionierung an eine bestimmte Stelle UND zusätzlich noch ein in dem Fall unnötiges float. Entweder Du verwendest nur float oder nur absolute Positionierung.

Ich würde dir raten den oberen Bereich einfach mal von allen CSS-Eigenschaften zu befreien und neu damit auszustatten.

 

[maria1]

Hallo,
Die Fehler werde ich beheben danke dafür.
Leider hilft mir das nicht viel weiter da ich einfach nicht weiß
Wie ich in der navi den gewünschten effektt erreiche.

Ich benötige einfach beim aktiven Menüpunkt das was auf dem
Bild also der Vorlage zu sehen ist. Ich weiß nichtmal was ich bei Google
Eingeben soll da ich den "Effekt" nicht benennen kann....

Grüße
Maria1

 

[threadi]

Ich sehe keinen Effekt den Du meinen könntest. Das sind einfach einige HTML-Elemente die an jeweilige Stellen positioniert sind. Wie und wo Du sie anordnest, kannst Du mit den normalen CSS-Eigenschaften erreichen. Also float und im schlimmsten Fall noch position. Höhen und Breiten, Außenabstände etc. helfen dann auch noch dabei.

 

[Tronjer]

Ich denke mal, er meint den lila Balken über dem Menüpunkt "Damenschmuck".

Auf Anhieb fallen mir dazu zwei bis vier Lösungsansätze ein:

1. jQuery: Nach Lavalamp googeln und ein eventuell vorhandenes Script den eigenen Anforderungen anpassen.
2. CSS 3: Mit dem Attribut Transition kann man etwas Ähnliches bauen.
3. CSS 2 / PHP: Entweder ein weiteres Div mit lila Balken oberhalb des Menüs plazieren und als default display:none festlegen, oder statt dessen eine Austauschgrafik in Phostoshop erstellen. Die jeweils aktive Seite lässt sich über an die Links angehängte $_GET Parameter ermitteln.
4. Bliebe dann die natürlich noch die Jobbörse.

 

[maria1]

Ich denke mal, er meint den lila Balken über dem Menüpunkt "Damenschmuck".

Auf Anhieb fallen mir dazu zwei bis vier Lösungsansätze ein:

1. jQuery: Nach Lavalamp googeln und ein eventuell vorhandenes Script den eigenen Anforderungen anpassen.
2. CSS 3: Mit dem Attribut Transition kann man etwas Ähnliches bauen.
3. CSS 2 / PHP: Entweder ein weiteres Div mit lila Balken oberhalb des Menüs plazieren und als default display:none festlegen, oder statt dessen eine Austauschgrafik in Phostoshop erstellen. Die jeweils aktive Seite lässt sich über an die Links angehängte $_GET Parameter ermitteln.
4. Bliebe dann die natürlich noch die Jobbörse.

Hallo,

Genau, das meine ich !

1. Könnte ich versuchen ...
2. Dannach werde ich jetzt gleich suchen erscheint mir am besten
3. PHP fällt leider aus will nicht wirklich in die Software eingreifen
4. Das ist ja schon ein Job :) ^^

Es funktioniert ja schon , ausser das eben der Text nicht richtig sitzt und mit z-index müsste ich
noch arbeiten um active hinter die Navi zu bekommen.

Funktioniert das wenn ich der #mainNavigation z-index:1 und a.active z-index:2 gebe ?

Grüße

 

[Tronjer]

Z-index bewirkt da nichts.

Gib mainIndex ein position:relative, sowie einen negativen Wert für top, und mainIndex li ein display:block. Dann sieht die Seite schon vernünftiger aus. Aber das behebt weder die etwa 10 CSS-Fehler, noch löst es dein zweites Problem: Die jeweils aktuelle Unterseite durch eine Markierung in der Menüleiste hervorzuheben.

 

[maria1]

Hallo,
Leider hat das was du oben genannt hast nicht funktioniert.

Ich bin nun soweit das ich mal alles gelöscht habe und neu angefangen habe..
Nun bin ich aber wieder an der selben stelle wie vorhin :(

HTML

<li class="active_mainNav"><a href="http://utubeload.com/project_shopdesign_09_03_2012/index.php/herren-schmuck" title="HERREN SCHMUCK" class="active_mainNav">HERREN SCHMUCK</a></li>

CSS

li.active_mainNav{
background-color:green;
height:40px;
}

Problem ist jetzt das die Schrift wieder nach oben geschoben wird wenn li.active_mainNav einen negativen wert für Top gebe ....
Dann ist noch das Problem das li.active_mainNav eigentlich ja hinter mainNavigation angezeigt werden soll...

 

[Tronjer]

Hallo,
Leider hat das was du oben genannt hast nicht funktioniert.

Doch, das geht. Ich habe es gerade eben mit Firebug verifiziert.

 Problem ist jetzt das die Schrift wieder nach oben geschoben wird wenn li.active_mainNav einen negativen wert für Top gebe ...

Gib li.active_mainNav mal: display: block, padding-top: 15px, margin-top: -15px.

Dann ist noch das Problem das li.active_mainNav eigentlich ja hinter mainNavigation angezeigt werden soll...

Das ist auch der falsche Ansatz und z-index wird übrigens vom IE7 teilweise nicht richtig interpretiert.

Ich würde das ohnehin anders lösen. Aber wenn du es ganz simpel halten willst, dann mache es so, wie oben beschrieben (ohne Anspruch auf Cross-Browser-Kompatibilität). Tausche anschließend die background-color von li.active_mainNav gegen ein Hintergrundbild, dessen unterer Teil farbidentisch mit der Navigationsleiste ist, und definiere im darüber hinausragenden Part eine andere Farbe.

 

[maria1]

EDIT: Habs schon ;)