mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 26.04.2024 19:48 Benutzername: Passwort: Auto-Login

Thema: 3 navi (css) probleme vom 10.12.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> 3 navi (css) probleme
Seite: 1, 2, 3, 4, 5  Weiter
Autor Nachricht
mokleini
Threadersteller

Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht: Männlich
Verfasst Do 10.12.2009 17:28
Titel

3 navi (css) probleme

Antworten mit Zitat Zum Seitenanfang

hallo zusammen,

ich bastel gerade an einer navi für eine internet seite un stoße an meine grenzen...
ich habe 3 problem mit einem reinen css-drop-down und flyout menu.
ich denke die probleme sind für profis minimal, aber für mich leider ausreichend, euch um hilfe zu beten.

ich habe mir von css play eine vorlage runtergeladen, die ich gerade anpasse
-> http://www.cssplay.co.uk/menus/slide_fly.html
(ich habe nach der genehmigung usw gefragt;) )

das prinzip der navigation:
ich habe einen button. wenn ich mit der maus auf diesen button gehe, öffnet sich nach unten eine box mit weiteren menu punkten. wenn man über diese fährt, öffnet sich ein weitere box, diesmal aber nach rechts.


so nun zu meinem ersten problem: -> reihenfolge
ich habe pro button nun einen layer gemacht und diese posioniert. (die anderen menu punkte sollen sich nicht immer nach unten verschieben) wenn ich aber auf einen button gehe, dann öffnet sich die box nicht so richtig. sie scheint einfach hinter dem darunterliegenden button zu verstecken. wenn ich die unteren button aber nach unten verschiebe, dann klappt alles.

das zweite problem ist der rahmen:
die sich nach unten und rechts öffnen boxen, haben einen blauen rahmen. der ist jedoch auch um den button... kann ich den um den button weg machen? es gibt menu punkte, da öffnet sich keine box, da ist der button dann kleiner, da er ohne rahmen auskommt.
alternative wäre ja den button zu verkleinern, aber das ist für mich ne notlösung.

letzte problem:
die schriftfarbe ist mit der schriftfarbe der sich auf klappenen box identisch. auf den button soll sie aber weiß sein. wie kann ich das im css lösen, das die beiden nicht immer identisch sind?


hier die daten:
bevor ich den quelltext hier reinlade und euch abschrecke, lade ich sie lieber hoch;)
http://ul.to/i4yxgj
(ich hoffe das klappt mit dem zip)


Wer sonst noch fehler findet, immer schön drauf los *zwinker*

VIELEN DANK * Ich bin unwürdig *
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 10.12.2009 22:35
Titel

Antworten mit Zitat Zum Seitenanfang

Bitte verlinke doch das Online Bsp.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 10.12.2009 22:43
Titel

Antworten mit Zitat Zum Seitenanfang

So sieht's aus - kaum jemand hat Lust, mit einem zip rumzuhantieren. Lade seinen Inhalt hoch und poste den Link.
  View user's profile Private Nachricht senden
mokleini
Threadersteller

Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht: Männlich
Verfasst Fr 11.12.2009 08:25
Titel

Antworten mit Zitat Zum Seitenanfang

okay, ist mir zwar nicht so lieb, aber damit die probleme gelöst werden:
http://www.tennis-sthubert.de/testarea/index2.html

die HTML datei:

Code:
<body>

<div id="vertikal"></div>
<div id="horizontal">

<div class="navi">

<ul id="startseite">
<li><a href="#nogo">Startseite</a></li></ul>

<ul id="aktuelles">

<li class="sub"><a href="#nogo">Aktuelles<!--[if gte IE 7]><!--></a><!--<![endif]-->      <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
   <li><a href="#nogo">Termine</a></li>
    <li><a href="#nogo">Spielplan</a></li>
    <li><a href="#nogo">Bilder</a></li>
   
      <li class="fly"><a href="#nogo">Archiv<!--[if gte IE 7]><!--></a><!--<![endif]-->      <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
               <li><a href="#nogo">2009</a></li>
                    <li><a href="#nogo">2008</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul></li></ul>
<ul id="manschaften">

<li class="sub"><a href="#nogo">Manschaften<!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
   <li class="fly"><a href="#nogo">Herren<!--[if gte IE 7]><!--></a><!--<![endif]-->      <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
               <li><a href="#nogo">1. Herren</a></li>
                    <li><a href="#nogo">2. Herren</a></li>
                    <li><a href="#nogo">Herren 30</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
         <li class="fly"><a href="#nogo">Archiv<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
               <li class="fly"><a href="#nogo">Sommer 2009<!--[if gte IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                     
                            <li><a href="#nogo">Jugend</a></li>
                     <li><a href="#nogo">Damen</a></li>
                     <li><a href="#nogo">Herren</a></li>
                  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
               </li>
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>

<div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <a href="http://www.google.de">Lorem</a> ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div>
</div>

</body>



_________________________________________________________________________________________________

Die CSS Datei:


Code:
#startseite {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:33px; background:#fff;}
#startseite ul {list-style-type:none; padding:0; margin:0;}
#startseite li {float:left; background:#fff url(../images/slide_0.gif) no-repeat;}

#startseite li.sub {background:#fff url(../images/slide_0.gif) no-repeat;border:1px solid #005094;}

#startseite li, #startseite li a {display:block; color:#005094; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:left; text-indent:30px; }

#startseite table {border-collapse:collapse; padding:0; margin:0 -1px -1px; }

#startseite ul,
#startseite :hover ul ul,
#startseite :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#startseite :hover {color:#005094; background:#fff url(../images/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#startseite :hover > a {color:#fff; background:#fff url(../images/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#startseite :hover ul {position:static; height:auto; margin-top:-1px; background:#fff;}
#startseite :hover ul :hover ul,
#startseite :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #005094;}

#startseite :hover ul li, #startseite :hover ul li a {background:#fff; text-align:left; text-indent:30px; }
#startseite :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#startseite :hover ul :hover {background:#944500; position:relative; z-index:100;}
#startseite a:hover ul li.fly a:hover {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}
#startseite :hover ul li.fly:hover > a {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}

#startseite :hover ul :hover ul li,
#startseite :hover ul :hover ul li a  {background:#fff;}
#startseite :hover ul :hover ul :hover ul li {background:#fff; z-index:500;}

#startseite :hover ul :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#startseite :hover ul :hover ul :hover {z-index:500; background:#944500; color:#fff;}
#startseite a:hover ul a:hover ul li.fly a:hover {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}
#startseite :hover ul :hover ul li.fly:hover > a {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}

#startseite :hover ul :hover ul :hover ul li,
#startseite :hover ul :hover ul :hover ul li a {background:#fff;}

#startseite :hover ul :hover ul :hover ul :hover {background:#944500; color:#fff;}
#startseite :hover ul :hover ul :hover ul :hover a {color:#fff;}

/*========================================================================= */


#aktuelles {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:33px; background:#fff;}
#aktuelles ul {list-style-type:none; padding:0; margin:0;}
#aktuelles li {float:left; background:#fff url(../images/slide_0.gif) no-repeat;}

#aktuelles li.sub {background:#fff url(../images/slide_0.gif) no-repeat;border:1px solid #005094;}

#aktuelles li, #aktuelles li a {display:block; color:#005094; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:left; text-indent:30px; }

#aktuelles table {border-collapse:collapse; padding:0; margin:0 -1px -1px; }

#aktuelles ul,
#aktuelles :hover ul ul,
#aktuelles :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#aktuelles :hover {color:#005094; background:#fff url(../images/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#aktuelles :hover > a {color:#fff; background:#fff url(../images/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#aktuelles :hover ul {position:static; height:auto; margin-top:-1px; background:#fff;}
#aktuelles :hover ul :hover ul,
#aktuelles :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #005094;}

#aktuelles :hover ul li, #aktuelles :hover ul li a {background:#fff; text-align:left; text-indent:30px; }
#aktuelles :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#aktuelles :hover ul :hover {background:#944500; position:relative; z-index:100;}
#aktuelles a:hover ul li.fly a:hover {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}
#aktuelles :hover ul li.fly:hover > a {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}

#aktuelles :hover ul :hover ul li,
#aktuelles :hover ul :hover ul li a  {background:#fff;}
#aktuelles :hover ul :hover ul :hover ul li {background:#fff; z-index:500;}

#aktuelles :hover ul :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#aktuelles :hover ul :hover ul :hover {z-index:500; background:#944500; color:#fff;}
#aktuelles a:hover ul a:hover ul li.fly a:hover {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}
#aktuelles :hover ul :hover ul li.fly:hover > a {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}

#aktuelles :hover ul :hover ul :hover ul li,
#aktuelles :hover ul :hover ul :hover ul li a {background:#fff;}

#aktuelles :hover ul :hover ul :hover ul :hover {background:#944500; color:#fff;}
#aktuelles :hover ul :hover ul :hover ul :hover a {color:#fff;}


/*========================================================================= */

#manschaften {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:300px; background:#fff;}
#manschaften ul {list-style-type:none; padding:0; margin:0;}
#manschaften li {float:left; background:#fff url(../images/slide_0.gif) no-repeat;}

#manschaften li.sub {background:#fff url(../images/slide_0.gif) no-repeat;border:1px solid #005094;}

#manschaften li, #manschaften li a {display:block; color:#005094; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:left; text-indent:30px; }

#manschaften table {border-collapse:collapse; padding:0; margin:0 -1px -1px; }

#manschaften ul,
#manschaften :hover ul ul,
#manschaften :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#manschaften :hover {color:#005094; background:#fff url(../images/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#manschaften :hover > a {color:#fff; background:#fff url(../images/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#manschaften :hover ul {position:static; height:auto; margin-top:-1px; background:#fff;}
#manschaften :hover ul :hover ul,
#manschaften :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #005094;}

#manschaften :hover ul li, #manschaften :hover ul li a {background:#fff; text-align:left; text-indent:30px; }
#manschaften :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#manschaften :hover ul :hover {background:#944500; position:relative; z-index:100;}
#manschaften a:hover ul li.fly a:hover {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}
#manschaften :hover ul li.fly:hover > a {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}

#manschaften :hover ul :hover ul li,
#manschaften :hover ul :hover ul li a  {background:#fff;}
#manschaften :hover ul :hover ul :hover ul li {background:#fff; z-index:500;}

#manschaften :hover ul :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#manschaften :hover ul :hover ul :hover {z-index:500; background:#944500; color:#fff;}
#manschaften a:hover ul a:hover ul li.fly a:hover {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}
#manschaften :hover ul :hover ul li.fly:hover > a {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}

#manschaften :hover ul :hover ul :hover ul li,
#manschaften :hover ul :hover ul :hover ul li a {background:#fff;}

#manschaften :hover ul :hover ul :hover ul :hover {background:#944500; color:#fff;}
#manschaften :hover ul :hover ul :hover ul :hover a {color:#fff;}


__________________________________________________________________________________________________

und die andere CSS (meiner meinung nach eigentlich unwichtig)

Code:
body {
   background-image: url(../images/verlauf.jpg);
   background-repeat: repeat-x;
}

#vertikal
{
   height: 50%;
   width: 10px;
   background-color: transparent;
   float:left;
   margin-bottom: -325px;
}
#horizontal
{
   margin-right: auto;
   margin-left: auto;
   text-align: left;
   clear: left;
   position: relative;
   width: 836px;
   height: 620px;
}

.navi{
position:absolute;
top:85px;
left:5px;
height:200px;
width:100px;
}

.content{
position:absolute;
top:85px;
left:310px;
height:400px;
width:500px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:23px;
text-align:justify;
color:#005094;
}


a:link
{ font-family:Arial, Helvetica, sans-serif;text-decoration:underline; font-size:13px;color:#005094; }

a:visited
{ font-family: Arial, Helvetica, sans-serif; text-decoration:underline; font-size:13px;color:#005094; }

a:hover
{ font-family: Arial, Helvetica, sans-serif; font-weight:regular; text-decoration:underline;font-size:13px;color:#944500; }

a:active
{ font-family: Arial, Helvetica, sans-serif;text-decoration:underline;font-size:13px;color:##005094; }

__________________________________________________________________________________________________
falls noch was sein sollte, bitte melden!
Schönen Tag


Zuletzt bearbeitet von Smooth-Graphics am Fr 11.12.2009 10:56, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 11.12.2009 09:23
Titel

Antworten mit Zitat Zum Seitenanfang

Unabhängig von Deinem Problem hast Du da leider eine von Stus ungeeigneten Navis erwischt: Jeder Haupt-Menüpunkt hat seine eigene ul, was dazu führt, dass der Link "Startseite" aus einer ul mit einem einzigen li besteht, und dann folgt die nächste ul für "Aktuelles" usw... Es ist mir rätselhaft, was Stu sich dabei denkt, denn die meisten seiner Navis sind ja korrekt, d.h. bestehen aus einer ul (die aber natürlich unendlich viele Unterebenen haben kann).

So ein DD-Menü ist sehr viel Arbeit, erst recht in der JS-freien Variante für IE < 7, und wenn Du Dir schon soviel Arbeit machst, dann mach es richtig und suche Dir auf Stus Seite ein geeignetes Markup (wie gesagt, die meisten seiner Navis haben dies).

Die Behebung Deiner Fehldarstellungen ist dann ein Selbstgänger, aber ich mache das nicht bei ungeeignetem Markup *zwinker*
  View user's profile Private Nachricht senden
mokleini
Threadersteller

Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht: Männlich
Verfasst Fr 11.12.2009 10:40
Titel

Antworten mit Zitat Zum Seitenanfang

kann sein, das ich es auch kaputt gemacht habe:D
okay ich such mir dann mal ein anderes aus und bearbeite es.

Gegen Java habe ich nix, hab davon aber keine ahnung. kann mir da jemand ne seite empfehlen, wo ich mir so ein drop down menü ziehen kann?

Danke schonmal

Edit: Gesucht und gefunden.
-> http://www.cssplay.co.uk/menus/skeleton4.html

was haltet ihr von dem? ist das für meine anforderungen in ordnung?


Zuletzt bearbeitet von mokleini am Fr 11.12.2009 10:49, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 11.12.2009 11:03
Titel

Antworten mit Zitat Zum Seitenanfang

mokleini hat geschrieben:
kann sein, das ich es auch kaputt gemacht habe

Nein, er hat wirklich solche Varianten auf seiner Seite *zwinker*

mokleini hat geschrieben:
Gegen Java habe ich nix

Java brauchst Du auch nicht, allenfalls JavaScript für den IE < 7 *zwinker* (Java ist etwas ganz anderes.)

mokleini hat geschrieben:
http://www.cssplay.co.uk/menus/skeleton4.html

was haltet ihr von dem? ist das für meine anforderungen in ordnung?

Das Markup ist okay - eine Liste mit weiteren Unterebenen.

Ich persönlich treibe allerdings für den IE < 7 diesen großen Aufwand nicht mehr, zumal man ein solches Menü bei jeder neuen IE-Generation überprüfen (und mit Pech überarbeiten) muss.

Ich schreibe ein DD-Menü ganz normal per li:hover und bringe dies dem IE < 7 (der ausschließlich a hovert) bei, indem er li beim Hovern per JS eine "echte" Klasse gibt: http://htmldog.com/articles/suckerfish/dropdowns/

Diese JS-Datei sollte man dem IE < 7 übrigens per "Conditional Comment" (Google) zuweisen, damit die anderen Browser damit nicht "belästigt" werden (und es erspart ihnen eine unnötige HTTP-Anfrage).


Zuletzt bearbeitet von heiko_rs am Fr 11.12.2009 11:06, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
mokleini
Threadersteller

Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht: Männlich
Verfasst Fr 11.12.2009 11:32
Titel

Antworten mit Zitat Zum Seitenanfang

okay, dann werde ich das von stu mal auf meine bedürfnisse zuschneiden.
bei problemen komme ich dann wieder auf dich zurück;)

vielen dank schonmal
  View user's profile Private Nachricht senden
 
Ähnliche Themen Probleme mit Flash Navi
FLASH: Probleme mit dynamischer Navi
CSS UL LI NAVI
Horizontale ul-Navi
navi mit flash 8
[Solved] [JS] JS-Navi
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3, 4, 5  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.