XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit Navigation (http://xhtmlforum.de/showthread.php?t=64297)

safari 07.04.2011 13:13

Problem mit Navigation
 
Hallo Läute,
Ich erstelle momentan eine Website, doch habe mit meiner Navigation Probleme.
Das Problem liegt anbei das sich die Navigation überlappt und man so nicht schön switchen kann.
Wichtig: Das ganze läuft auf einem CMS (Joomla 1.5)

Bilder für die Verständlichkeit:
Nummer1:
http://img151.imageshack.us/img151/874/erklrung.png

Nummer2:
http://img218.imageshack.us/img218/5837/erklrung2.png

Hier noch der Code des CSS:
Code:

/****topmenu*****/
#menu {
float:left;
width:950px;
height:45px;
margin-top:35px;
background:transparent;

}

#navigation {
float:left;
height: 45px;
text-align:center;
z-index: 50;
background:transparent;
width:730px;

}

#navigation a {
float:left;
display: block;
height: 45px;
padding: 15px 15px 0 15px;
font-weight:bold;
color:#000 ;
font-size:14px;
text-transform:uppercase;

}

#navigation  a:hover{
color:#4aa6c0;

}

#navigation ul {
list-style: none;
margin: 0 4px 0 4px;
padding-top: 0px ;
display: block;

}

#navigation li {
display: block;
float: left;
margin:0;

}

#navigation li.active {
height:55px !important;
background: url(../images/menu_active_02.png) no-repeat 100% 0 ;
margin-top:0 !important;

}

#navigation li.active span {
height:55px !important;
background: url(../images/menu_active_01.png) no-repeat 100% 0 ;
margin-top:0 !important;

}

#navigation li.active a {
color:#000 ;
height:55px !important;
background: url(../images/menu_active_01.png) no-repeat 0 0 ;
margin-left:-10px;
margin-top:0 !important;
line-height:30px;

}

#navigation li {
height:45px !important;
background: url(../images/menu_02.png) no-repeat 100% 0 ;
margin:10px 8px 0 8px;

}

#navigation li span {
height:45px !important;
background: url(../images/menu_01.png) no-repeat 100% 0 ;

}

#navigation li a {
color:#000 ;
height:45px !important;
background: url(../images/menu_01.png) no-repeat 0 0 ;
margin-left:-10px;

}

#navigation li li {
height:40px !important;

}

#navigation li li a {
font-size: 12px;
padding:10px 0 0 0 !important;
margin: 0 !important;
color:#454545 !important;
border:none;
height:40px !important;

}

#navigation li li a:hover{
color:#4aa6c0 !important;

}

#navigation li.active li a {
line-height:10px !important;
height:25px !important;

}

.nav, .nav * {
margin:0;
padding:0;

}

.nav {
float:left;
z-index:500 !important;

}

.nav ul {
background:#fbfafa;
z-index:500 !important;
width:196px !important;

}

.nav li {
float:left;
list-style:none;
background:none;
z-index:900;
position:relative;

}

 .nav li li a {
text-decoration:none;
background: none;
float:none;
width:180px !important;
border-bottom:1px dashed #d0cdcd !important;
margin:0 5px 0 0 !important;


}

.nav li li  {
line-height:38px;

}

#navigation li:hover li,
#navigatin li.sfHover li,
#navigation li.active:hover li,
#navigation li.active.sfHover li,
#navigation li:hover li span,
#navigation li.sfHover li span {
background-image: none;

}

#navigation li:hover li a,
#navigation li.sfHover li a,
#navigation li.active:hover li a,
#navigation li.active.sfHover li a {
background-image: none;

}

.nav li ul {
float:none;
left:-999em;
position:absolute;
width: 180px;

}

.nav li:hover ul,
.nav li.sfHover ul {
left:-13px;
top: 45px;
z-index:100;

}

.navli:hover li ul,
.nav li.sfHover li ul,
.nav li li:hover li ul,
.nav li li.sfHover li ul,
.nav li li li:hover li ul,
.nav li li li.sfHover li ul {
top:-999em;
z-index:100;

}

.nav li li:hover ul,
.nav li li.sfHover ul,
.nav li li li:hover ul,
.nav li li li.sfHover ul,
.nav li li li li:hover ul,
.nav li li li li.sfHover ul {
left: 177px;
top:0px;
width: 180px;

}

.nav li li {
position: relative;
float:none;
width: 180px;

}

Wie krieg ich das schön hin? Bereits jetzt besten Dank.

Gruss safari

Chris2011 07.04.2011 17:34

wie es überlappt sich ich verstehe nicht was du meinst. sieht doch alles super aus auf dem bildern

CreativeGeekDesigns 07.04.2011 23:13

Ich kann auf den Bildern auch nicht erkennen was du meinst, vll mal Screenshots in orginaler Größe hochladen!

hubspe 08.04.2011 07:31

bitte einen Link zum Problem bereitstellen. ;)

andir 08.04.2011 08:50

Dein CSS ist ziemlich wirr und sollte dringend entschlackt werden. (viel zu viele !important auf den ersten Blick).
Wie Du bereits weißt, muss das ausklappende Unter-Ul zunächst versteckt werden und bei einem entsprechenden :hover wieder herbeigeholt werden.
Die Vergabe derart hoher z-index-Werte ist nicht erforderlich. Du solltest mit EINEM Auskommen für das ausklappende ul. Hängt natürlich auch davon ab, wie der übrige Code aussieht.

Deswegen: Link wie bereits gesagt ;)

safari 08.04.2011 09:20

hallo, danke für die antwort, ich habe leider die Seite noch nicht online...
deshalb kann ich sie nicht posten. Sobald ich das erledigt habe, post ich hier den Link.

Gruss

safari

stolle 08.04.2011 10:14

Naja, ein größerer Screenshot würde für's erste vllt. auch helfen. Also einen, auf den man das Problem erkennen kann :)

safari 18.04.2011 09:12

Hallo Läute,

So hier nochmals die Screenshots in besserer Qualität:

http://img852.imageshack.us/img852/2...sserequali.png


und hier nummer 2:

http://img848.imageshack.us/img848/8...erequalitt.png

Ich hoffe der Fehler ist nun besser erkennbar und ihr könnt mir helfen =)

Gruss

safari

CreativeGeekDesigns 18.04.2011 17:42

Auf den ersten Blick würd ich sagen, dass dein Home-Button zu weit oben ist!

safari 19.04.2011 13:41

Nein, das soll so sein, immer das Register welches ausgewählt wird (angeklickt)
ist weiter oben.

Das Problem liegt dabei, man sieht es extrem schlecht, der Teil der unten rausfährt sobald man über die Navigation geht, kommt ins nächste Register rein.

Ich hoffe ich drücke mich verständliche genug aus.

narjin 19.04.2011 14:20

Ich glaube ich verstehe es:

Wenn man ganz genau hinguckt, ist jeweils eine Ecke der nächsten Hauptmenüpunkte im Dropdown drin. Man erkennt es daran das dort eine kleine Ecke weiß ist.

Ich würde nun mal sagen, du hast mit 2 Grafiken für die Menüpunkte gearbeitet. Bzw. nachdem ich mir das CSS jetzt mal angesehen habe, weiß ich es.

Somit würde ich mal nach dem z-index und der position des Elements mit dem ersten Hintergrundbild der Hauptmenüpunkte gucken.

Grüße,

narjin

Tipp: benenne deine Bilder niemals mit 01 und 02 sondern immer mit z.B. "menu_active_right" und "menu_active_left". Ist auch klarer falls jemand mal an deiner Homepage etwas machen soll. ;)

safari 20.04.2011 10:45

Zitat:

Zitat von narjin (Beitrag 492099)
Ich glaube ich verstehe es:

Wenn man ganz genau hinguckt, ist jeweils eine Ecke der nächsten Hauptmenüpunkte im Dropdown drin. Man erkennt es daran das dort eine kleine Ecke weiß ist.

Ich würde nun mal sagen, du hast mit 2 Grafiken für die Menüpunkte gearbeitet. Bzw. nachdem ich mir das CSS jetzt mal angesehen habe, weiß ich es.

Somit würde ich mal nach dem z-index und der position des Elements mit dem ersten Hintergrundbild der Hauptmenüpunkte gucken.

Grüße,

narjin

Tipp: benenne deine Bilder niemals mit 01 und 02 sondern immer mit z.B. "menu_active_right" und "menu_active_left". Ist auch klarer falls jemand mal an deiner Homepage etwas machen soll. ;)


Genau, du hast das Problem erkannt. Vielen Dank für die Tipps probiers mal umzusetzen.

safari 20.04.2011 11:11

Zitat:

Zitat von safari (Beitrag 492122)
Genau, du hast das Problem erkannt. Vielen Dank für die Tipps probiers mal umzusetzen.


Sorry für den Doppelpost, vielen Dank nochmals hat alles funktioniert!


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020