Thema: Rollovernavigation mit verschiedenen Grafiken (buttons werden nicht dargestellt)

Hallo alle zusammen,

ich habe ein problem, welches ich selbst schon seit tagen nicht gelöst kriege. unter verwendung der suchfunktion habe ich einen beitrag gefunden indem jemand gesagt hat man könnte bei joomla keine navigation bauen, die verschiedene rollover buttons hat. nun ich verwende die 4.5.4 version von mambo und habe mir gedacht ich lege einfach 6 neue navigations-menüs im adminCP an und definiere deren aussehen über den class_suffix parameter. dann habe ich die navigationspunkte jeweils in einem user# modul in einer simplen tabelle positioniert:

Code:

<table border="1" cellpadding="0" cellspacing="0" height="105" width="557">
<tr>
<td height="80"><?php mosLoadModules ( 'user1' ); ?></td>
<td height="80"><?php mosLoadModules ( 'user2' ); ?></td>
<td height="80"><?php mosLoadModules ( 'user3' ); ?></td>
<td height="80"><?php mosLoadModules ( 'user4' ); ?></td>
<td height="80"><?php mosLoadModules ( 'user5' ); ?></td>
<td height="80"><?php mosLoadModules ( 'user6' ); ?></td>
</tr>
</table>

soweit ist alles okay... der class_suffix parameter für den ersten navigationspunkt lautet nav01 und kann über folgende CSS befehle angesprochen werden:

Code:

a.mainlevelnav01,
a.mainlevelnav01:link,
a.mainlevelnav01:active,
a.mainlevelnav01:visited {
height:80px;
width:98px;
background-image:url(../images/button_1a.jpg);
text-decoration:none;
color:#FFFFFF;
}

a.mainlevelnav01:hover {
height:80px;
width:98px;
background-image:url(../images/button_1b.jpg);
text-decoration:none;
color:#cccccc;
}

und nun zu meinem problem. aus diesem CSS schnipsel funktioniert alles, nur nicht das wichtigste, nämlich die button grafiken! ich habe irgendwann nach mehreren stunden herausgefunden das die buttons zwar da sind, aber nur exakt so gross dargestellt werden wie der schriftzug des textlinks. auf width und height reagiert der link nicht, nur mit padding left/right/top/bottom wird ein teil der grafik sichtbar.

ich glaube den link zu posten würde niemendem helfen, da ich vorerst alle grafiken aus dem template entfernt habe, bis das problem gelöst ist... aber für diejenigen die trotzdem wissen möchten wie das aussehen sollte habe ich den flashheader online. okay, der ist für die flashversion meiner seite gedacht aber die grafiken sind dieselben:
http://www.multimedia-studio.net/Header.html


ich wäre für jede art von hile äusserst dankbar!

hallo

Hey poste doch mal den link und hau die grafiken wieder rein
dann kann ich helfen...so ist es etwas abstrakt

ps: http://www.multimedia-studio.net/cms2/ --> geiles design!


gruss
artd2

Zitat von Piotrex

warum abstrakt? ich bin davon überzeugt das du angesichts der problematik nichts aufschlussreiches sehen würdest... wie gesagt, die grafiken sind einfach nicht da.

hab das layout wieder online... den link hast du anscheinend schon selbst rausgefunden

nein aber probieren kann ich ....trial und error


und hier die Lösung:

a.mainlevelnav01,
a.mainlevelnav01:link,
a.mainlevelnav01:active
{
padding: 40px 0px 10px 30px;
height:80px;
width:98px;
background: url(../images/button_1a.jpg) top left no-repeat;
text-decoration:none;
color:#FFFFFF;
text-align: center
}

a.mainlevelnav01:hover {
background-image:url(../images/button_1b.jpg);
color:#cccccc;
}

also ich glaub die Button graphiken sind schon da..aber man sieht nur einen teil (bzw. nur den schwarzen rand. Du hast die graphiken ja im link (a) und nich in der Tabelle (td)


gruss
artd2


was du noch probieren könntest.

Du positionierst die Menus absolut in DIVs auf einer höheren ebene (z-index). Die Menugraphiken kannst du ja mit CSS oder mit nem mouseoverscript wechseln...

ohne padding... wie sieht das bei dir aus?


linktip: http://www.strohhalm.org/forum/index...opic&topic=578




a.mainlevelnav01,
a.mainlevelnav01:link,
a.mainlevelnav01:active,
a.mainlevelnav01:visited {
display: block;
height: 80px;
width:98px;
text-align: center;
vertical-align: middle;
background-image:url(http://multimedia-studio.net/cms2/te...utton_1a.jpg);
background-repeat:no-repeat;
}

a.mainlevelnav01:hover {
display: block;
width:98px;
background-image:url(http://multimedia-studio.net/cms2/te...utton_1b.jpg);
color:#cccccc;
}

noch ein Ansatz mit deiner Idee


a.mainlevelnav01{
position: relative;
left: 24%;
height: 80px;
width:98px;
text-decoration:none;
color:#cccccc;
}

a.mainlevelnav01:hover {
height: 80px;
width:98px;
text-decoration:none;
color:#cccccc;
}


.moduletablenav01{
background-image:url(http://multimedia-studio.net/cms2/te...utton_1a.jpg);
height: 80px;
width:98px;
}

.moduletablenav01:hover{
background-image:url(http://multimedia-studio.net/cms2/te...utton_1b.jpg);
height: 80px;
width:98px;
}