Hallo,
ich habe vor gut 2 Wochen angefangen mir html beizubringen und stehe gerade vor folgendem Problem.
Für einen Navigationsleiste habe ich folgenden Code nachprogrammiert
Mal abgesehen, dass diese Navigationsleiste zwar beim IE gut aussieht und beim MF nicht, gelingt es mir nicht, dies vernünftig in meine CSS Datei einzufügen.
CSS und html habe ich getrennt
Die Rahmen um die Listenelemente sehen total unförmig aus und den letzten Rahmen zieht es komplett nach unten. Könnt ihr mir bitte sagen, wo ich etwas ändern muss? Ich habe schon versucht unter navi a bei width eine Größe einzugeben, dann ist aber das Untermenü nicht mehr rechtsbündig.
Danke für eure Hilfe
Krümel
ich habe vor gut 2 Wochen angefangen mir html beizubringen und stehe gerade vor folgendem Problem.
Für einen Navigationsleiste habe ich folgenden Code nachprogrammiert
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL="http://www.w3.org/TR/html4/strict.dtd"][U][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]http://www.w3.org/TR/html4/strict.dtd[/COLOR][/SIZE][/COLOR][/SIZE][/U][/URL][SIZE=2]">[/SIZE]
[SIZE=2]<html>[/SIZE]
[SIZE=2]<head>[/SIZE]
[SIZE=2]<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Navigationsleiste mit mehreren Ebenen</title> [/SIZE]
[SIZE=2]<style type="text/css">[/SIZE]
[SIZE=2]body {[/SIZE]
[SIZE=2]font: normal 100.01% Helvetica; Arial; sans-serif;[/SIZE]
[SIZE=2]color: black;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#Navigation {[/SIZE]
[SIZE=2]width: 10em;[/SIZE]
[SIZE=2]margin: 2;[/SIZE]
[SIZE=2]padding: 1.5em;[/SIZE]
[SIZE=2]background-color: #f0e7d7;[/SIZE]
[SIZE=2]font-family: georgia, serif;[/SIZE]
[SIZE=2]font-size: 13px;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#Navigation li {[/SIZE]
[SIZE=2]list-style: none;[/SIZE]
[SIZE=2]margin: 0.2em[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#Navigation li ul {[/SIZE]
[SIZE=2]margin: 0 0 0 1em;[/SIZE]
[SIZE=2]pedding: 0;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#Navigation li ul li {[/SIZE]
[SIZE=2]margin: 0;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#Navigation a {[/SIZE]
[SIZE=2]width: 100%;[/SIZE]
[SIZE=2]display: block;[/SIZE]
[SIZE=2]text-decoration: none;[/SIZE]
[SIZE=2]font-weight: bold;[/SIZE]
[SIZE=2]border-width: 1px;[/SIZE]
[SIZE=2]border-color: #ffe #aaab9c #ccc #fff;[/SIZE]
[SIZE=2]border-style: solid;[/SIZE]
[SIZE=2]color: #777;[/SIZE]
[SIZE=2]background-color: #f7f2ea;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#Navigation a:hover {[/SIZE]
[SIZE=2]color: #800000;[/SIZE]
[SIZE=2]background: transparent;[/SIZE]
[SIZE=2]border-color: #aaab9c #fff #fff #ccc; } [/SIZE]
[SIZE=2]</style> [/SIZE]
[SIZE=2]</head> [/SIZE]
[SIZE=2]<body>[/SIZE]
[SIZE=2]<h1 id="Beispiel">Mehrere Navigationsebenen</h1>[/SIZE]
[SIZE=2]<ul id="Navigation">[/SIZE]
[SIZE=2]<li><a href="#Beispiel">Seite 1</li>[/SIZE]
[SIZE=2]<li><a href="#Beispiel">Seite 2</li>[/SIZE]
[SIZE=2]<ul>[/SIZE]
[SIZE=2]<li><a href="#Beispiel">Seite 2a</li>[/SIZE]
[SIZE=2]<li><a href="#Beispiel">Seite 2b</li>[/SIZE]
[SIZE=2]<li><a href="#Beispiel">Seite 2c</li>[/SIZE]
[SIZE=2]</ul>[/SIZE]
[SIZE=2]<li><a href="#Beispiel">Seite 3</li>[/SIZE]
[SIZE=2]<li><a href="#Beispiel">Seite 4</li>[/SIZE]
[SIZE=2]</ul>[/SIZE]
[SIZE=2]</body>[/SIZE]
[SIZE=2]</html>[/SIZE]Mal abgesehen, dass diese Navigationsleiste zwar beim IE gut aussieht und beim MF nicht, gelingt es mir nicht, dies vernünftig in meine CSS Datei einzufügen.
CSS und html habe ich getrennt
Code:
[SIZE=2]<style type="text/css">[/SIZE]
[SIZE=2]<!--[/SIZE]
[SIZE=2]body {[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]*{[/SIZE]
[SIZE=2]margin: 0;[/SIZE]
[SIZE=2]padding: 0;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#rahmen {[/SIZE]
[SIZE=2] width: 1200px;[/SIZE]
[SIZE=2] height: 900px;[/SIZE]
[SIZE=2] margin: 0 auto; [/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#kopfzeilerahmen {[/SIZE]
[SIZE=2] border-bottom:2px solid black;[/SIZE]
[SIZE=2] width: 1200px;[/SIZE]
[SIZE=2] height: 98px; [/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#fusszeilerahmen {[/SIZE]
[SIZE=2] border-top:2px solid black;[/SIZE]
[SIZE=2] width: 1200px;[/SIZE]
[SIZE=2] height: 48px;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#navirahmen {[/SIZE]
[SIZE=2] background: #f0e7d7;[/SIZE]
[SIZE=2] float:left;[/SIZE]
[SIZE=2] width: 249px; [/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#navi li {[/SIZE]
[SIZE=2]list-style: none;[/SIZE]
[SIZE=2]margin: 0.2em[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#navi li ul {[/SIZE]
[SIZE=2]margin: 0 0 0 1em;[/SIZE]
[SIZE=2]pedding: 0;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#navi li ul li {[/SIZE]
[SIZE=2]margin: 0;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#navi a {[/SIZE]
[SIZE=2]width: 100%;[/SIZE]
[SIZE=2]display: block;[/SIZE]
[SIZE=2]text-decoration: none;[/SIZE]
[SIZE=2]font-weight: bold;[/SIZE]
[SIZE=2]border-width: 1px;[/SIZE]
[SIZE=2]border-color: #ffe #aaab9c #ccc #fff;[/SIZE]
[SIZE=2]border-style: solid;[/SIZE]
[SIZE=2]color: #777;[/SIZE]
[SIZE=2]background-color: #f7f2ea;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]#navi a:hover {[/SIZE]
[SIZE=2]color: #800000;[/SIZE]
[SIZE=2]background: transparent;[/SIZE]
[SIZE=2]border-color: #aaab9c #fff #fff #ccc; } [/SIZE]
[SIZE=2]#inhalterahmen {[/SIZE]
[SIZE=2] float:right;[/SIZE]
[SIZE=2] width: 949px; [/SIZE]
[SIZE=2] height: 750px;[/SIZE]
[SIZE=2] border-left:2px solid black;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]-->[/SIZE]
[SIZE=2]</style>[/SIZE]Die Rahmen um die Listenelemente sehen total unförmig aus und den letzten Rahmen zieht es komplett nach unten. Könnt ihr mir bitte sagen, wo ich etwas ändern muss? Ich habe schon versucht unter navi a bei width eine Größe einzugeben, dann ist aber das Untermenü nicht mehr rechtsbündig.
Danke für eure Hilfe
Krümel