wie kann ich das dropdown menü mit einbinden?

S

skyfire1871

Grünschnabel
hallo zusammen.

Ich habe mit langen hin und her probieren endlich geschafft ein Stylesheet mit css zu erstellen.
nun hab ich mir ein cssmenü Generator gedownloadet und möchte gern dieses in meiner Webseite im oberen Bereich
mit einbinden. Des weiteren sollen wenn was im Menü angeklickt wird im Großen Fensterbereich alles angezeigt werden.

Wenn ihr mir Helfen könntet, währe ich echt dankbar dafür.

hier mal die Quellcodes.
Style in html:
HTML: 
<html>
<head>
	<title>meine webseite</title>
	<link rel="stylesheet" type="text/css3" href="css3/design.css">
</head>
<body>
	<div id="webseite">
		<div id="header">
			<h1>meine webseite</h1>
		</div>
		<div id="main">
			<div id="menue">
		
			
			</div>
			<div id="inhalt">
		
			
			</div>
		</div>
		<div id="footer">
		
		</div>
	</div>
</body>
</html>
CSS: 
body {
background-color:#f5ffc0; 
text-align:center;
}
#webseite {
width:1480px;
margin:0 auto;
}
#header{
width:1480px;
height:120px;
background:#333333;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
#header h1{
pading-top:50px;
font-size:30px;
font-weight:bold;
color:FFFFFF;
font-family:Courier;
}
#main{
width:1480px;
}
#menue{
float:left;
width:200px;
height:650px;
background:#333333;
margin-top:5px;
margin-bottom:5px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
}
#inhalt{
float:right;
width:1270px;
height:650px;
background:#333333;
margin-top:5px;
margin-bottom:5px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
}
#footer{
width:1480px;
height:30px;
background:#333333;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
margine-top:20px;
clear:both;
}

hier der Quellcode fürs Dropdown Menü


HTML: 
  <!-- Start css3menu BODY section -->
<ul id="css3menu1" class="topmenu">
        <li class="topfirst"><a href="Index" style="height:16px;line-height:16px;"><span>Home</span></a>
        <ul>
                <li><a href="feuerwehr">Feuerwehr</a></li>
                <li><a href="galerie">Galerie</a></li>
                <li><a href="veranstaltung">Veranstaltung</a></li>
                <li><a href="forum">Forum</a></li>
                <li><a href="buch">Gästebuch</a></li>
        </ul></li>
        <li class="topmenu"><a href="Über uns" style="height:16px;line-height:16px;"><span>Über uns</span></a>
        <ul>
                <li><a href="aktive">Aktive Kameraden</a></li>
                <li><a href="ehrenapteilung">Ehrenapteilung</a></li>
        </ul></li>
        <li class="topmenu"><a href="intern" style="height:16px;line-height:16px;"><span>Intern</span></a>
        <ul>
                <li><a href="galerie">Galerie</a></li>
                <li><a href="storage">Storage</a></li>
                <li><a href="vorstand">Vorstand</a></li>
                <li><a href="bekanntgabe">Bekantgabe</a></li>
        </ul></li>
        <li class="topmenu"><a href="impressum" style="height:16px;line-height:16px;">Impressum</a></li>
        <li class="toplast"><a href="contact" style="height:16px;line-height:16px;">contact</a></li>
</ul><p class="_css3m"></p>
<!-- End css3menu BODY section -->
CSS: 
ul#css3m
enu1,ul#css3menu1 ul{
        margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
ul#css3menu1 ul{
        display:none;position:absolute;left:200;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#434343;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
        display:block;}
ul#css3menu1 li{
        position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
        z-index:1;}
ul#css3menu1{
        font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
        *display:inline;}
* html ul#css3menu1 li a{
        display:inline-block;}
ul#css3menu1>li{
        margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
        outline-style:none;}
ul#css3menu1 a{
        display:block;vertical-align:middle;text-align:center;text-decoration:none;font:14px Arial,Helvetica,sans-serif;color:#ffffff;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#434343;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
        float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
        text-align:center;padding:4px;background-color:#434343;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:14px Arial,Helvetica,sans-serif;color:#ffffff;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
        background-color:#434343;border-color:#C0C0C0;border-style:solid;color:#ffff00;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
        display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
        background-color:#434343;background-image:none;color:#ffff00;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
        border-radius:11px 0 0 11px;-moz-border-radius:11px 0 0 11px;-webkit-border-radius:11px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
ul#css3menu1 li.topmenu>a{
        -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
ul#css3menu1 li.toplast>a{
        border-radius:0 11px 11px 0;-moz-border-radius:0 11px 11px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:11px;-webkit-border-bottom-right-radius:11px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}

Verdammt viel Code :-)

Ich bedanke mich im Voraus.

gruß
 
Zuletzt bearbeitet von einem Moderator:
Hi,
hier noch ein JsBin http://jsbin.com/axujut/2/edit
damit es leichter wird dir zu helfen.

Als erstes entferne mal deine Schreibfehler im CSS.

#header h1
{
padding-top:50px;
}

#footer{
margine-top:20px;
}

Auch würde ich von Klassennamen wie _css3m absehen. Heißt mit einem Unterstrich zu beginnen den der Unterstrich impliziert beim lesen auch ein Leerzeichen. Probleme mit dem Unterstrich gibt es aber spätestens seit CSS 2.1 nicht mehr. Gab mal in grauer Vorzeitden IE4 der damit nichts anfangen konnte.

Ansonsten verstehe ich dein Problem nicht.
Wenn ich das Menü im div#menu einfüge erscheint es in der Seitenleiste, einfach in das andere Div kopieren.

Den Haupttext schreibst du ganz einfach in den entsprechenden Bereich und verlinkst dann auf jede html-Datei.

Grüße
 
Hallo Jan

Erst einmal danke für den Hinweis. Wenn man Stunden
vorm Rechner hockt und alles ausprobiert können sich mal Fehler
einschleichen.

Ich habe es jetzt mal so nach meinem Verständnis eingebunden.
Mit Sicherheit ein Fehler, da es nicht Funktioniert.
Ich möchte das Dropdown Menü im Oberen Header unter der Schrift "Meine Webseite"
Wenn ich ein Menü anklicke öffnet es sich auch nicht in den großen grauen Kasten sondern es öffnet
sich eine Komplett neue Seite wo auch das Menü verschwindet.
Wenn ich alles einzeln Aufrufe läuft es natürlich.

Ich habe noch mal das Listing editiert und füge es samt Bild mal dabei.
Vielleicht kannst du mir erklären wo mein Denkfehler liegt.
Ich bedanke mich schon mal im voraus.

PS: MCoder. In meiner Liste ist es so getrennt wie du es beschrieben hast.
Was das Dropdown Menü angeht, das hab ich mit einem Generator erzeugt,
dass den Code so erzeugt.

Gruß vom Rookie


HTML: 
<html>
<head>
	<title>meine webseite</title>
	<link rel="stylesheet" type="text/css3" href="css3/design.css">
</head>
<body>
	<div id="webseite">
		<div id="header">
			<h1>meine webseite</h1>
			<!-- Start css3menu BODY section -->
<ul id="css3menu1" class="topmenu">
        <li class="topfirst"><a href="Index" style="height:16px;line-height:16px;"><span>Home</span></a>
        <ul>
                <li><a href="feuerwehr">Feuerwehr</a></li>
                <li><a href="galerie">Galerie</a></li>
                <li><a href="veranstaltung">Veranstaltung</a></li>
                <li><a href="forum">Forum</a></li>
                <li><a href="buch">Gästebuch</a></li>
        </ul></li>
        <li class="topmenu"><a href="Über uns" style="height:16px;line-height:16px;"><span>Über uns</span></a>
        <ul>
                <li><a href="aktive">Aktive Kameraden</a></li>
                <li><a href="ehrenapteilung">Ehrenapteilung</a></li>
        </ul></li>
        <li class="topmenu"><a href="intern" style="height:16px;line-height:16px;"><span>Intern</span></a>
        <ul>
                <li><a href="galerie">Galerie</a></li>
                <li><a href="storage">Storage</a></li>
                <li><a href="vorstand">Vorstand</a></li>
                <li><a href="bekanntgabe">Bekantgabe</a></li>
        </ul></li>
        <li class="topmenu"><a href="impressum" style="height:16px;line-height:16px;">Impressum</a></li>
        <li class="toplast"><a href="contact" style="height:16px;line-height:16px;">contact</a></li>
</ul><p class="_css3m"></p>
<!-- End css3menu BODY section -->
			</div>
		<div id="main">
			<div id="menue">
		
			
			</div>
			<div id="inhalt">
		
			
			</div>
		</div>
		<div id="footer">
		
		</div>
	</div>
</body>
</html>

CSS: 
body {
background-color:#f5ffc0; 
text-align:center;
}
#webseite {
width:1480px;
margin:0 auto;
}
#header{
ul#css3m
enu1,ul#css3menu1 ul{
        margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
ul#css3menu1 ul{
        display:none;position:absolute;left:200;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#434343;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
        display:block;}
ul#css3menu1 li{
        position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
        z-index:1;}
ul#css3menu1{
        font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
        *display:inline;}
* html ul#css3menu1 li a{
        display:inline-block;}
ul#css3menu1>li{
        margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
        outline-style:none;}
ul#css3menu1 a{
        display:block;vertical-align:middle;text-align:center;text-decoration:none;font:14px Arial,Helvetica,sans-serif;color:#ffffff;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#434343;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
        float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
        text-align:center;padding:4px;background-color:#434343;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:14px Arial,Helvetica,sans-serif;color:#ffffff;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
        background-color:#434343;border-color:#C0C0C0;border-style:solid;color:#ffff00;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
        display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
        background-color:#434343;background-image:none;color:#ffff00;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
        border-radius:11px 0 0 11px;-moz-border-radius:11px 0 0 11px;-webkit-border-radius:11px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
ul#css3menu1 li.topmenu>a{
        -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
ul#css3menu1 li.toplast>a{
        border-radius:0 11px 11px 0;-moz-border-radius:0 11px 11px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:11px;-webkit-border-bottom-right-radius:11px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
width:1480px;
height:120px;
background:#333333;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
#header h1{
padding-top:50px;
font-size:30px;
font-weight:bold;
color:FFFFFF;
font-family:Courier;
}
#main{
width:1480px;
}
#menue{
float:left;
width:200px;
height:650px;
background:#333333;
margin-top:5px;
margin-bottom:5px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
}
#inhalt{
float:right;
width:1270px;
height:650px;
background:#333333;
margin-top:5px;
margin-bottom:5px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
}
#footer{
width:1480px;
height:30px;
background:#333333;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
margin-top:20px;
clear:both;
}
 

Anhänge

  • web.jpg
    web.jpg
    108,5 KB · Aufrufe: 24
Zuletzt bearbeitet von einem Moderator:
Hi,
bitte gewöhn dir doch an deinen Quellcode in Tags zu setzen.
Des Weiteren habe ich für dich ein jsbin eingerichtet. Da kannst du deinen Code auch ausprobieren.
Einfach ändern und das speichert automatisch ab. Heißt du kannst rumspielen ohne was kaput zu machen :).

Bei der Farbe von h1 fehlt die Raute vor ffffff.

Also verstehe ich dich richtig das du eine Webseite haben möchtest welche bei Klick auf einen Menülink nicht neugeladen wird?
Weil wenn dem so ist dann beschäftige dich mit iframes, wovon ich nur abraten kann oder Ajax, nix für Anfänger.

Was dein Menü beim reload betrifft so ist das normal dass das Dropdown zu ist. Und du solltest eh noch eine Klasse für einen aktiven Menülink festlegen.
Da man sonst nicht erkennt auf welcher Seite man sich gerade befindet.

Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück