Drop Down Menu mit CSS

Schnubbel1974 · 12. Jan. 2011

Hallo zusammen!

Ich habe für meinen Freund eine Homepage erstellt und möchte jetzt an 3 stellen ein drop dwon menu haben wo bisher nur ein link hinterlegt ist. Erstellt ahbe ich die Seite mit NVU.

Ich habe mich schon über google informirt und weiß das es so geht! Das Problem ist nur das ich nicht weiß wie ich die vorhandene Seite ändern muss.

Bisher weiß ich das der Quelltext geändert werden muss und das CSS. ABer wenn man keinen schimmer hat wo ist das ein großes Problem.

Kann mir da bitte jemand weiterhelfen!?

Gruß
Katja

Junkee[] · 12. Jan. 2011

http://de.selfhtml.org/html/index.htm
http://de.selfhtml.org/css/index.htm

Schnubbel1974 · 12. Jan. 2011

Der 2. link hat genau was ich suche, DANKE!

Aber da ich meine Seite mit NVU erstellt habe, weiß ich nicht was ich wo ändern muss um den gewünschten erfolgt zu erzielen. Das Stytsheet und die Page sind j aschon fast fertig, es fehlen eben an 3 stellen nur das entsprechende Drop Down Menu. Probiere schon 2 Tage rum, mir fehlen wahrscheinlich die wichtigsten Grundlagen zum Verständnis des Programmierens mit CSS und html.

Gibt es die Möglichkeit diese beiden Dateien an eine Firma zu schicken die es dann entsprechend ändert? Wenn ja, was kostet sowas? Oder gibt es soegar eine Funktion in NVU zum erstellen eine Drop Down Menus und ich findes es nur nicht?

Arcsinh · 12. Jan. 2011

Googel doch mal nach "CSS dropdown menu"...

Schnubbel1974 · 12. Jan. 2011

Wie schon gesagt, bei google habe ich schon gesucht und bin auch fündig geworden!

ICH SUCHE JEMANDEN DER MIR ANHAND MEINER SEITE SAGEN KANN WIE ES GEHT! Wo ich wa eintragen muss in diesem speziellen Fall....allgemeine Lösungen und Codes mit Beispielen habe ich gefunden, kann es aber nicht umsetzen!

dkdenz · 12. Jan. 2011

Dann brauchen wir ja wohl etwas Code von Dir, findest Du nicht auch...?

Arcsinh · 12. Jan. 2011

Sollte eigentlich auf allen Seiten nach dem selben Prinzip funktionieren...

Schnubbel1974 · 12. Jan. 2011

meine ist nocht nicht on....aber hier frickelt gerade ein freund von mir rum und das ist der code im css dazu

HTML:

/*defaults*/
body 	{background:#2765AF url('../images/body_bg1.jpg') repeat-x 0 0; color:#000000; margin:20px 0; padding:0; font-family:"Trebuchet MS", verdana, arial, "Times New Roman", serif; font-size:90%; }
p		{margin:0; padding:0 0 15px 0; }
a		{color:#000000; text-decoration:underline; }
a:hover	{color:#225799; text-decoration:none;}


/*structural elements*/
#container	{margin:0px auto; text-align:center; width:760px; }
#holder		{width:100%; padding:20px 20px 5px 20px; background:#FFFFFF; text-align:left; }
#logo		{background:url('../images/logo hbi.jpg') no-repeat 500px 0; border-bottom:1px solid #DADADA; padding:5px 30px 20px 0px; }
#navigation	{padding:10px 0; }
#header		{background:#DADADA url('../images/') no-repeat 10px 10px; padding:10px; height:175px; }
#content	{float:left; width:490px; padding:20px 10px 0 0; line-height:160%; }
#news		{float:right; width:250px; padding:20px 0; line-height:140%; text-align:justify; }
.newsItem	{padding:20px 20px 5px 20px; background:#FEFFD5; border:1px solid #FFEB70; font-size:90%; margin-bottom:20px; }
#footer		{clear:both; width:100%; font-size:80%; background:#DADADA; padding:20px; text-align:left; border-top:2px solid #2765AF; }
#copyright	{float:right; }


/*headings*/
.newsItem h1	{color:#225799; margin:0 0 10px 0; padding:0; font-size:130%; font-weight:normal; }
#content h1		{font-size:170%; font-weight:normal; line-height:130%; margin:0; padding:0 0 20px 0; }
#logo h1		{font-weight:normal; font-size:170%; margin:0; padding:0; color:#225799; }


/*navigation*/
#navigation ul 		{margin:0; padding:0; }
#navigation li 		{margin:0; padding:0; list-style:none; display:inline; }
#navigation a		{color:#CC0000; padding:0 20px 0 0; text-decoration:none; }
#navigation a:hover	{color:#000000; }

#footer ul 		{margin:0; padding:0; }
#footer li 		{margin:0; padding:0; list-style:none; display:inline; }
#footer a		{color:#000000; font-weight:bold; padding:0 5px 0 0; text-decoration:underline; }
#footer a:hover	{color:#000000; text-decoration:none; }


/*shamelessly borrowed styles from [url]http://www.positioniseverything.net/easyclearing.html*/[/url]
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix {height:1%; }
.clearfix {display:block; }
/* End hide from IE-mac */

nehmen wir an, damit es zu mir paßt: LEISTUNGEN und Über uns sollten als dropdown einmal 4 (bei Leistungen), und einmal 3 (bei über uns) auswahlmöglichkeiten bekommen. ändere ich dann nur im stylesheet oder muss der quelltext angepaßt werden?

Ich weiß ist seeehr mühseelig für euch einer Anfängerin wie mir jede Kleinigkeit zu erklären!

VIIIELEN DANK FÜR EURE GEDULD!!!!!

Arcsinh · 12. Jan. 2011

1. Benutzt die Code-Tags
2. Zeig den Code der ganzen Seite, dann können wir es lokal bei uns testen.

Schnubbel1974 · 12. Jan. 2011

Code Tags? also das ist der ganze inhalt des stylesheets

dkdenz · 12. Jan. 2011

Ich habe jetzt mal für Dich die Code-Tags gesetzt...
Wie sieht denn der HTML-Teil aus?

Schnubbel1974 · 12. Jan. 2011

soll ich von dem kollegen den quelltext einer der seiten hier reinstellen?

Arcsinh · 12. Jan. 2011

Ja, darum geht's ja.
Und gut wäre auch, wenn du die überflüssigen Teile entfernst...

Schnubbel1974 · 13. Jan. 2011

So, das habe ich so bekommen. Alles zusätzliche ist rausfelöscht worden sagt er:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>muster</title>
<link rel="stylesheet"
href="file:///C:/Users/VAV%20Olaf%20Hartnann/Desktop/business_design_2007/css/style.css"
type="text/css">
</head>
<body>
<div id="container">
<div id="holder" class="clearfix">
<div style="color: rgb(204, 0, 0);" id="logo">
<h1 style="color: rgb(204, 0, 0);"><big
style="color: rgb(204, 0, 0);"><big><span
style="font-family: Arial Black;"></span></big></big><span
style="font-family: Arial;"><br>
</span></h1>
</div>
<div style="color: rgb(204, 0, 0);" id="navigation">
<ul>
<ul>
<ul>
<li><span style="text-decoration: underline;"></span>
  <a href="index.html">START</a></li>
   <li><a href="Leistungen.html">LEISTUNGEN</a></li>
   <li><a
href="Qualifikationen.html">QUALIFIKATIONEN</a><span
style="text-decoration: underline;"></span> </li>
<li><a href="Ueber%20uns.html">ÜBER
UNS</a>
</li>
<li><a href="Referenzen.html">REFERENZEN</a>
</li>
<li><a href="News.html">NEWS</a>
</li>
<li><a href="Job&Karriere.html">JOB &
KARRIERE</a></li>
</ul>
</ul>
</ul>
</div>
<div id="header">     <br>
</div>
<div id="content"><span
style="font-family: Century Gothic;"><span
style="font-size: 10.5pt; color: black; line-height: 130%;"></span></span><big><big><big><big><big><big
style="font-family: Century Gothic;"><big><big><big><big><big><span
style="font-size: 10.5pt; color: black; line-height: 130%;"><br>
<br>
</span></big></big></big></big></big></big></big></big></big></big></big></div>
</div>
<br>
</div>
</body>
</html>

Junkee[] · 13. Jan. 2011

Code-Tags!

Arcsinh · 13. Jan. 2011

Ich verstehe jetzt nicht, wo bei dir der Dropdown-Teil sein soll, das sind doch nur einige Menüpunkte...

miniA4kuser · 13. Jan. 2011

Junkee[] schrieb:
Code-Tags!

Zum Beispiel so:

Code:

Hier Code einfügen

Das sieht dann so aus:

Code:

Hier Code einfügen

dkdenz · 14. Jan. 2011

Such' Dir mal ein anständiges Menü, so wie dieses hier: http://www.alistapart.com/d/horizdropdowns/horizontal.htm
Anleitung für den Einbau ist im Quelltext.
Wenn Du damit nicht klar kommst, einfach wieder melden...

Drop Down Menu mit CSS

Schnubbel1974

New member

Junkee[]

Lounge-Member

Schnubbel1974

New member

Arcsinh

Lounge-Member

Schnubbel1974

New member

dkdenz

New member

Arcsinh

Lounge-Member

Schnubbel1974

New member

Arcsinh

Lounge-Member

Schnubbel1974

New member

dkdenz

New member

Schnubbel1974

New member

Arcsinh

Lounge-Member

Schnubbel1974

New member

Junkee[]

Lounge-Member

Arcsinh

Lounge-Member

miniA4kuser

Lounge-Member

dkdenz

New member