Antworten auf deine Fragen:
Neues Thema erstellen

dropdown navi mit rollover bilder!!!

D

Dag88

Noch nicht viel geschrieben

Hey
ich hab ein Problem mit der Dropdown-Navi. Hab schon sämtliche Tutorials gelesen, aber ich es will und will nicht klappen wie ich will.

Mein Code sieht bisher so aus (Die Liste liegt in der Div-Box #navi):

HTML: 
<ul>
<ul>
<li>1. M&auml;nner >>
        <ul>
            <li><a href="#">Kader</a></li>
            <li><a href="#">Mannschaftsfoto</a></li>
        </ul>
    </li>
    
    <li>2. M&auml;nner >>
        <ul>
            <li><a href="#">Kader</a></li>
            <li><a href="#">Mannschaftsfoto</a></li>
        </ul>
    </li>
    
    <li>Alte Herren >>
        <ul>
            <li><a href="#">Kader</a></li>
            <li><a href="#">Mannschaftsfoto</a></li>
        </ul>
    </li>
</ul>
</ul>

CSS dazu ist nur halb fertig:

Code: 
#navi ul {padding:0; margin:0; position:absolute;}
#navi ul li ul li {color:#666; width:100px;}
#navi ul li ul li ul {position:absolute; left:100px; top:-20px;}
#navi ul li ul li ul li a {display:inline-block; width:30px; color:#000;}

#navi li {list-style:none; display:inline; margin:0px; padding:0px; position:relative;}


Was muss ich jetzt noch tun dass es so ähnlich aussieht wie bei psd-tutorials.de in der navi?
 
Zuletzt bearbeitet von einem Moderator:

P

puufer77

Noch nicht viel geschrieben

AW: dropdown navi mit rollover bilder!!!

Also ich sehe hier keine Dropdown Bilder in der Navi von psd-tut! was meinst du genau?
 
vanilladragon

vanilladragon

Pixelmonster

AW: dropdown navi mit rollover bilder!!!

Schick doch bitte mal den GESAMTEN Quelltext.

Und bitte darauf achten, dass du

[ HTML] hier kommtj etzt dein Quelltext rein [ /HTML]
[ CODE] hier kommt jetzt dein CSS rein [ /CODE]
(ohne Leerschritte)

verwendest

vanilla
 
D

Dag88

Noch nicht viel geschrieben

AW: dropdown navi mit rollover bilder!!!

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>TC Glimmer | News</title>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="navi">
                    
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<body onLoad="MM_preloadImages('../bilder/news_akt.jpg','../bilder/verein_akt.jpg','../bilder/team_akt.jpg','../bilder/saison_akt.jpg','../bilder/galerie_akt.jpg','../bilder/forum_akt.jpg','../bilder/kontakt_akt.jpg','../bilder/impressum_akt.jpg','../bilder/login_akt.jpg')">
<ul>
	<li><a title="Aktuelles zum Verein" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','../bilder/news_akt.jpg',1)"><img src="../bilder/news_inakt.jpg" alt="News" name="news" width="57" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Informationen zum Verein" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('verein','','../bilder/verein_akt.jpg',1)"><img src="../bilder/verein_inakt.jpg" alt="Verein" name="verein" width="58" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Alle Teams im &Uuml;berblick" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Team','','../bilder/team_akt.jpg',1)"><img src="../bilder/team_inakt.jpg" alt="Team" name="Team" width="53" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /><ul>
<li>1. M&auml;nner >>
    	<ul>
        	<li><a href="#">Kader</a></li>
            <li><a href="#">Mannschaftsfoto</a></li>
        </ul>
    </li>
    
    <li>2. M&auml;nner >>
    	<ul>
        	<li><a href="#">Kader</a></li>
			<li><a href="#">Mannschaftsfoto</a></li>
        </ul>
    </li>
    
    <li>Alte Herren >>
    	<ul>
        	<li><a href="#">Kader</a></li>
            <li><a href="#">Mannschaftsfoto</a></li>
		</ul>
    </li>
    </ul></li><li><a title="Alle Saisons zusammengefasst" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Saison','','../bilder/saison_akt.jpg',1)"><img src="../bilder/saison_inakt.jpg" alt="Saison" name="Saison" width="61" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Bilder des Vereins" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('galerie','','../bilder/galerie_akt.jpg',1)"><img src="../bilder/galerie_inakt.jpg" alt="Galerie" name="galerie" width="68" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Forum für Mitglieder" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('forum','','../bilder/forum_akt.jpg',1)"><img src="../bilder/forum_inakt.jpg" alt="Forum" name="forum" width="62" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Fragen zum Verein?" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('kontakt','','../bilder/kontakt_akt.jpg',1)"><img src="../bilder/kontakt_inakt.jpg" alt="Kontakt" name="kontakt" width="72" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Rechtliches" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('impressum','','../bilder/impressum_akt.jpg',1)"><img src="../bilder/impressum_inakt.jpg" alt="Impressum" name="impressum" width="87" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="F&uuml;r Admins des Vereins" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('login','','../bilder/login_akt.jpg',1)"><img src="../bilder/login_inakt.jpg" alt="Login" name="login" width="58" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li>
</ul>                    <!-- Navi -->
                </div>
                <!-- Header -->
            </div>
            <div id="content">
                <div id="maincontent">
                                        <!-- Main Content -->
                </div>
                <div id="sidebar">
                                        <!-- Sidebar -->
                </div>
                <!-- Content -->
            </div>
            <div id="footer">
                                <!-- Footer -->
            </div>
            <!-- container -->
        </div>
    </body>
</html>

Code: 
body {background-color:#333;}
#container {margin:0 auto; width: 980px; border:#022fc8 1px solid;}
#header {background-image:url(../bilder/header.jpg); width:980px; height:138px;}

/*Navigation*/
#navi {background-image:url(../bilder/navi_bg.jpg); background-repeat:repeat-x; position:absolute; top:147px; width:980px; height:24px;}
#navi ul {padding:0; margin:0; position:absolute;}
#navi ul li ul li {color:#666; width:100px;}
#navi ul li ul li ul {position:absolute; left:100px; top:-20px;}
#navi ul li ul li ul li a {display:inline-block; width:30px; color:#000;}

#navi li {list-style:none; display:inline; margin:0px; padding:0px; position:relative;}
#navi img {border:0; margin:0px; padding:0px;}

#navi li {float:left;}
#navi li ul {display:none;}
#navi li:hover ul {display:block;}

#maincontent {background-image:url(../bilder/bg_content.jpg); background-repeat:repeat-y; height:400px;}
#footer {background-color:#2680ce; border-top:#022fc8 1px solid; height:60px; width:980px;}

Und mit der psd-tutorials navi meinte ich ja nur dass es so aussehen soll. natürlich sehe ich selber dass dort keine bilder verwendet worden sind;)
 
vanilladragon

vanilladragon

Pixelmonster

AW: dropdown navi mit rollover bilder!!!

Dag88 schrieb:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>TC Glimmer | News</title>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="navi">
                    
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<body onLoad="MM_preloadImages('../bilder/news_akt.jpg','../bilder/verein_akt.jpg','../bilder/team_akt.jpg','../bilder/saison_akt.jpg','../bilder/galerie_akt.jpg','../bilder/forum_akt.jpg','../bilder/kontakt_akt.jpg','../bilder/impressum_akt.jpg','../bilder/login_akt.jpg')">
<ul id="navi">
    <li><a title="Aktuelles zum Verein" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','../bilder/news_akt.jpg',1)"><img src="../bilder/news_inakt.jpg" alt="News" name="news" width="57" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Informationen zum Verein" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('verein','','../bilder/verein_akt.jpg',1)"><img src="../bilder/verein_inakt.jpg" alt="Verein" name="verein" width="58" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Alle Teams im &Uuml;berblick" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Team','','../bilder/team_akt.jpg',1)"><img src="../bilder/team_inakt.jpg" alt="Team" name="Team" width="53" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /><ul>
<li>1. M&auml;nner >>
        <ul>
            <li><a href="#">Kader</a></li>
            <li><a href="#">Mannschaftsfoto</a></li>
        </ul>
    </li>
    
    <li>2. M&auml;nner >>
        <ul>
            <li><a href="#">Kader</a></li>
            <li><a href="#">Mannschaftsfoto</a></li>
        </ul>
    </li>
    
    <li>Alte Herren >>
        <ul>
            <li><a href="#">Kader</a></li>
            <li><a href="#">Mannschaftsfoto</a></li>
        </ul>
    </li>
    </ul></li><li><a title="Alle Saisons zusammengefasst" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Saison','','../bilder/saison_akt.jpg',1)"><img src="../bilder/saison_inakt.jpg" alt="Saison" name="Saison" width="61" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Bilder des Vereins" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('galerie','','../bilder/galerie_akt.jpg',1)"><img src="../bilder/galerie_inakt.jpg" alt="Galerie" name="galerie" width="68" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Forum für Mitglieder" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('forum','','../bilder/forum_akt.jpg',1)"><img src="../bilder/forum_inakt.jpg" alt="Forum" name="forum" width="62" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Fragen zum Verein?" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('kontakt','','../bilder/kontakt_akt.jpg',1)"><img src="../bilder/kontakt_inakt.jpg" alt="Kontakt" name="kontakt" width="72" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="Rechtliches" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('impressum','','../bilder/impressum_akt.jpg',1)"><img src="../bilder/impressum_inakt.jpg" alt="Impressum" name="impressum" width="87" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li><li><a title="F&uuml;r Admins des Vereins" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('login','','../bilder/login_akt.jpg',1)"><img src="../bilder/login_inakt.jpg" alt="Login" name="login" width="58" height="24" border="0"></a><img src="../bilder/sep_navi.jpg" width="1" height="24" /></li>
</ul>                    <!-- Navi -->
                </div>
                <!-- Header -->
            </div>
            <div id="content">
                <div id="maincontent">
                                        <!-- Main Content -->
                </div>
                <div id="sidebar">
                                        <!-- Sidebar -->
                </div>
                <!-- Content -->
            </div>
            <div id="footer">
                                <!-- Footer -->
            </div>
            <!-- container -->
        </div>
    </body>
</html>
Natürlich muss man die ID schon in den ul-Tag reinschreiben ;)

Nun zur CSS:

Code: 
body {background-color:#333;}
#container {margin:0 auto; width: 980px; border:#022fc8 1px solid;}
#header {background-image:url(../bilder/header.jpg); width:980px; height:138px;}

/*Navigation*/
#navi {background-image:url(../bilder/navi_bg.jpg); background-repeat:repeat-x; position:absolute; top:147px; width:980px; height:24px;}
#navi ul {padding:0; margin:0; position:absolute;}
[COLOR=Red]#navi ul li {float:left; padding:0px 20px;}[/COLOR]
#navi ul li ul li {color:#666; width:100px;[COLOR=Red] padding:0px;[/COLOR] }
#navi ul li ul li ul {position:absolute; left:100px; [COLOR=Red]top:0px;[/COLOR]}
#navi ul li ul li ul li a {display:inline-block; width:30px; color:#000;}

#navi li {list-style:none; display:inline; margin:0px; padding:0px; position:relative;}
#navi img {border:0; margin:0px; padding:0px;}

[COLOR=Red]#navi li {float:left;}
#navi li ul {display:none;}

#navi li:hover ul,#navi li:hover ul li:hover ul {display:block; cursor:pointer; }
#navi li:hover ul li ul { display:none; }

#navi ul li ul li:hover {background-color:#ff6600;}[/COLOR]

#maincontent {background-image:url(../bilder/bg_content.jpg); background-repeat:repeat-y; height:400px;}
#footer {background-color:#2680ce; border-top:#022fc8 1px solid; height:60px; width:980px;}
Zum Vergrößern anklicken....

#navi ul li {float:left; padding:0px 20px;} <<< Dadurch sind die Punkte nebeneinander und ein Abstand dazwischen

#navi ul li ul li {color:#666; width:100px; padding:0px; } <<< Dadurch ist kein Abstand im Untermenü

#navi ul li ul li ul {position:absolute; left:100px; top:0px;} <<< Dadurch ist das Unteruntermenü neben deinem Menüpunkt

Und der Rest halt noch die Hovergeschichten.

So gehts :)
 
R

rest5

webbastler

AW: dropdown navi mit rollover bilder!!!

Dein HTML-Code ist vermurkst! Schon Dein zweiter <li>-Tag ist nicht geschlossen. Der Dritte sieht so aus: <li>Männer>>

Weiter hatte ich keine Lust zu gucken.
 
D

Dag88

Noch nicht viel geschrieben

AW: dropdown navi mit rollover bilder!!!

der <li> tag ist geschlossen!!! nur weiter unten, weil dazwischen eine weitere ul ist. so wird das nun mal geschrieben ;)
 
sokie

sokie

Mod | Web

AW: dropdown navi mit rollover bilder!!!

schau mal den Code noch einmal genau durch. Da gibts unter anderem zwei <body> tags. Das Grundgerüst muss erstmal stimmen.
 
D

Dag88

Noch nicht viel geschrieben

AW: dropdown navi mit rollover bilder!!!

Also das mit dem body hab ich jetzt berichtigt, aber irgendwie stimmt trotzdem noch etwas nicht:



so sieht es jetzt aus. da sind irgendwie die <li> tags übereinander. "Kader" liegt über dem <li> "Mannschaftsfoto".
 
vanilladragon

vanilladragon

Pixelmonster

AW: dropdown navi mit rollover bilder!!!

Wenn du den Quelltext so hast, wie ich ihn gemacht habe, dann ist dieses Problem nicht. Dein Problem da ist nämlich HOVER!....... siehe Oben....

vanilla
 
D

Dag88

Noch nicht viel geschrieben

AW: dropdown navi mit rollover bilder!!!

Das hat jetzt soweit alles geklappt:) danke schon mal dafür:)
Jetzt würde ich gerne eine border um die gesamte dropdown box legen, aber wenn ich dem #navi_liste li ul eine border gebe ist lediglich ein strich über dieser "box" aber nicht außenrum. :uhm:
 
D

Dag88

Noch nicht viel geschrieben

AW: dropdown navi mit rollover bilder!!!

Ne ich hab ja nur einen strich oben drüber, aber ich will eine border um alles. Aber mir border: 1px solid #000; will es nicht klappen. Da kommt wie ich gesagt habe nur der Strich oben als hätte ich border-top vergeben.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 151 (Mitglieder: 6, Gäste: 145)
Robots: 390

Statistik des Forums

Themen
118.565
Beiträge
1.538.068
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben