• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

??Menü-Frage??

J

jeepser

Neues Mitglied
Hey ich habe folgenden index.html Code:
Code: 
<html>
<head>

<title>St. Joseph Kinder- und Jugendhilfe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#454247" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><br><center>
<table id="Tabelle_01" width="1025" height="768" border="0" cellpadding="0" cellspacing="0" onLoad="self.resizeTo(1025,768)">
	<tr>
		<td colspan="4">
			<img src="Bilder/st_01.jpg" width="1024" height="173" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="173" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="Bilder/st_02.jpg" width="252" height="69" alt=""></td>
		<td rowspan="9">
		<iframe src="home.html" width="590" height="381" name=fenster frameborder="0"></iframe> 
		</td>
		<td>
			<img src="Bilder/st_04.jpg" width="182" height="3" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td rowspan="8">
			<img src="Bilder/st_05.jpg" width="182" height="378" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="66" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="home.html" target=fenster><img src="Bilder/st_06.jpg" width="170" height="26" alt="" border=0></a></td>
		<td rowspan="7">
			<img src="Bilder/st_07.jpg" width="82" height="312" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="aktuelles.html" target=fenster><img src="Bilder/st_08.jpg" width="170" height="25" alt="" border=0></a></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="wersindwir.html" target=fenster><img src="Bilder/st_09.jpg" width="170" height="25" alt="" border=0></a></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="download.html" target=fenster><img src="Bilder/st_10.jpg" width="170" height="24" alt="" border=0></a></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="24" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="kontakt.html" target=fenster><img src="Bilder/st_11.jpg" width="170" height="23" alt="" border=0></a></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="impressum.html" target=fenster><img src="Bilder/st_12.jpg" width="170" height="31" alt="" border=0></a></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="31" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/st_13.jpg" width="170" height="158" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="158" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="Bilder/st_14.jpg" width="1024" height="214" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="214" alt=""></td>
	</tr>
</table>
</center>
</body>
</html>

Und so soll die Navigation aussehen!
frage.jpg

Wie bekomme ich das hin?

Lg,jeepser
 
Zuletzt bearbeitet:
Zuerst wäre es angebracht dir zu sagen, dass der das html-code-ding verbuggt ist,s ieht man ja, verwende doch mal [ code ] ... [ /code ].

und dann..ein Menu ist eine Liste und eine liste wird z.b als

Code: 
<ul>
 <li> ... </li>
 ...
</ul>
im html ausgezeichnet.

diesen effekt wo du haben möchtest nennt sich :hover bei css oder wenn du es per js machen möchtest solltest du mouseover verwerden.

Beides hat Vor- und Nachteile. DIe css-Variante funktioniert nicht in den ganzen alten Browsern wie IE5, da müsste man alternativen anbieten (gibt es natürlich), die JS-Variante funktioniert nur, wenn auch JS aktiviert ist im Browser.

Desweiteren ist der Vorteil das die CSS-Variante ohne Ladezeiten von statten geht, da die CSS-Daten alle einmalig aufgerufen werden und dann gespeichert werden. Bei der JS-Variante musst du es jedesmal neu laden beim drüber fahren mit der Maus. Nicht spürbar, aber es nimmt performance meiner Meinung nach.

Persönlich tendiere ich zu der css-Variante.

Gruß
Loon3y
 
Hey Loon3y!

Ich bin leider CSS total unerfahren, kann nur das nötigste in html.
Gibt es irgndwo deutsche Tutorials oder Skripte die man sich ziehen kann?
Habe schon den ganzen Vormittag gegoogelt!
 
Sicherlich gibt es zich Beispiele bei google und hier im Forum.

hier mal ein kleines Beispiel:

html
Code: 
<ul id="navi">
 <li> Punkt 1 </li>
 <li> Punkt 2 
   <ul>
    <li> Punkt 2.1 </li>
    <li> Punkt 2.2 </li>
    <li> Punkt 2.3 </li>
  </ul>
 </li>
 <li> Punkt 3 </li>
 <li> Punkt 4 </li>
 <li> Punkt 5 </li>
css
Code: 
[B]/* MENU */[/B]
 ul#navi { 
       width: 100px; 
       height: 100%; 
[I]       border: 1px solid;[/I]
}

ul#navi li { 
       display: block; 
       width: 100px;
[I]       border: 1px solid;[/I]
}


[B]/* SUB-MENU */[/B]
[B]/* wird nicht angezeigt */[/B]
ul#navi li ul { 
       display: none; 
} 

[B] /* dropdown */[/B]
ul#navi li:hover ul { 
       display:block; 
       width: 100px; 
       position: absolute; 
}
[B]
/* damit das submenu übern content ist, z-index vergeben */[/B]
ul#navi li ul li { 
       width: 100px; 
       z-index: 10; 
       position:relative; 
[I]       border: 1px solid;[/I]
} 
[B]
/* positionieren des sub-menus */[/B]
ul#navi li > ul { 
       top: auto; 
       left: 100px; 
}
Sollte so funktionieren..farben, größen usw sind alle variabel...rahmen hab ich drin gelassen, damit du siehst wo was ist.

Gruß
Loon3y
 
jeepser schrieb:
Ich bin leider CSS total unerfahren, kann nur das nötigste in html.
Zum Vergrößern anklicken....
Ich bin mal so direkt und nehme Dir Deine Illusionen. In HTML bist Du genauso unerfahren, wie man an Deinem Code sieht. HTML dient der logischen Auszeichnung Deines Inhalts und nicht dem Aussehen. Mit HTML sagst Du nur, was Dein Inhalt bedeutet. Alles, was Layout und Design angeht, gehört in ein Stylesheet (CSS).
Also raus mit der Tabelle und raus mit den seit vielen Jahren veralteten Attributen, die nicht die Semantik bestimmen.
 
Ich danke dir,Loon3y. Werd es erstmal so ausprobieren mit deinem Code.
Werde berichtern,ob alles tutti läuft!

@Efchen
Einfach mla die Sonne genießen, da kommt die Freundlichkeit von ganz alleine!
 
jeepser schrieb:
Ich danke dir,Loon3y. Werd es erstmal so ausprobieren mit deinem Code.
Werde berichtern,ob alles tutti läuft!
Zum Vergrößern anklicken....

Bitte, aber du solltest auch verstehen was du da machst, nicht nur kopieren.

@Efchen
Einfach mla die Sonne genießen, da kommt die Freundlichkeit von ganz alleine!
Zum Vergrößern anklicken....

Das ist nicht unfreundlich oder sonst was von Efchen, sondern sachlich und ehrlich. Normal würde ich auch das selbige tippen, aber war nicht in der Stimmung wieder eine 3-Seiten lange Diskussion anzufangen müssen. Letzenendes wirst du selbst bemerken, das du nicht weiter kommst und noch mehrere Fehler in deinen html-code sind. Am besten ist es, wenn du nochmal mit deiner Homepage von 0 anfängst und ersteinmal alles richtig auszeichnest.

Anschließend kann man hingehen und sinnvoll css nutzen um den ganzen Farbe und Form zu geben.

Gruß
Loon3y
 
jeepser schrieb:
Einfach mla die Sonne genießen, da kommt die Freundlichkeit von ganz alleine!
Zum Vergrößern anklicken....
Die ist schon da. Und Du hast recht, die kommt von ganz alleine. Verständnis für das Erstellen von Websites aber nicht. Da muss man aktiv was tun.

Kannst ja gerne nachfragen, wenn was unklar ist. Dafür sind wir ja hier.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben