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 14: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 18:34

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

CreativeGeekDesigns 08.04.2011 00:13

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

hubspe 08.04.2011 08:31

bitte einen Link zum Problem bereitstellen. ;)

andir 08.04.2011 09: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 10: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 11: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 10: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 18:42

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

safari 19.04.2011 14: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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:21 Uhr.

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

© Dirk H. 2003 - 2020