Navigationsleiste ändern

olli1900

Neuer Benutzer
Mitglied seit
17.09.2008
Beiträge
2
Reaktionspunkte
0
Navigationsleiste ändern

Kann mir jemand helfen. Gelange grad an die Grenzen meiner arg bescheidenen Macht über das Html.
Habe zur Zeit folgende Navi-Leiste:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title>
<span class="Stil1">
<style type="text/css">
body {
font: normal 75.01% Helvetica, Arial, sans-serif;
color: black; background-color: #000066;
}

div#Rahmen {
width: 87.1em;
padding: 0.0em;
border: ;
background-color: #000066;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}

ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 8.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.01em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}

</style>
</span>
</head>
<body> <div id="Rahmen"><ul id="Navigation">
<li><a href="#Beispiel">Home</a></li>
<ul>
</ul>
<li><a href="#Beispiel">Der Verein</a>
<ul>
<li><a href="#Beispiel">über uns</a></li>
<li><a href="#Beispiel">Fotogalerie</a></li>
<li><a href="#Beispiel">Bahnrekorde</a></li>
<li><a href="#Beispiel">Bahnbelegung</a></li>
<li><a href="#Beispiel">Kontakt</a></li>
<li><a href="#Beispiel">Impressum</a></li>
</ul>
</li>

<li><a href="#Beispiel">1.Männer</a></li>
<ul>
<li><a href="#Beispiel">Das Team</a></li>
<li><a href="#Beispiel">Ergebnisse</a></li>
<li><a href="#Beispiel">Spielplan</a></li>
</ul>
<li><a href="#Beispiel">II.Männer</a>
<ul>
<li><a href="#Beispiel">Das Team</a></li>
<li><a href="#Beispiel">Ergebnisse</a></li>
<li><a href="#Beispiel">Spielplan</a></li>
</ul>
</li>

<li><a href="#Beispiel">III.Männer</a></li>
<ul>
<li><a href="#Beispiel">Das Team</a></li>
<li><a href="#Beispiel">Ergebnisse</a></li>
<li><a href="#Beispiel">Spielplan</a></li>
</ul>
</li>

<li><a href="#Beispiel">I.Damen</a></li>
<ul>
<li><a href="#Beispiel">Das Team</a></li>
<li><a href="#Beispiel">Ergebnisse</a></li>
<li><a href="#Beispiel">Spielplan</a></li>
</ul> </li>

<li><a href="#Beispiel">Spielberichte</a></li>
<ul>
<li><a href="#Beispiel">aktuell</a></li>
<li><a href="#Beispiel">Archiv</a></li>
</ul>
</ul><div></div></div>


Möchte gern, dass sich die Unterpunkte als Leiste Quer anzeigen lassen. So z.B:

1.Männer
Das Team Ergebnisse Spielplan


Geht das?
 

airbuspilot

Bekanntes Gesicht
Mitglied seit
14.11.2004
Beiträge
416
Reaktionspunkte
0
AW: Navigationsleiste ändern

Code:
li { display: inline }

bzw. den li eine Klasse verpassen und dann

Code:
li.klasse { display: inline }
 

klausbyte

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
3.898
Reaktionspunkte
204
AW: Navigationsleiste ändern

airbuspilot am 17.09.2008 17:01 schrieb:
Code:
li { display: inline }

bzw. den li eine Klasse verpassen und dann

Code:
li.klasse { display: inline }
So macht man das heutzutage :top:
Smart und Schlank. Das ist CSS! :X
 
TE
O

olli1900

Neuer Benutzer
Mitglied seit
17.09.2008
Beiträge
2
Reaktionspunkte
0
AW: Navigationsleiste ändern

Erstmal "Hut ab"! Ich hätte nicht geglaubt, dass jemand so schnell antwortet - Lobe lobe!
Nun aber noch mal zu meinem Problem. Ich hab das ausprobiert und es klappt nicht. Hab an allen möglichen Display´s "li" versucht, geht nicht.
Nun fallt nicht über mich her, ich bin nun mal kein Profi, möchte als "Ehrenamtler" nur unsere Sport-HP bissel gestalten.
Kann jemand den Code so schreiben, das er geht?

Ich hoffe, es ist nicht zu viel verlangt??????
 
P

Pasdan

Gast
AW: Navigationsleiste ändern

olli1900 am 18.09.2008 10:24 schrieb:
Erstmal "Hut ab"! Ich hätte nicht geglaubt, dass jemand so schnell antwortet - Lobe lobe!
Nun aber noch mal zu meinem Problem. Ich hab das ausprobiert und es klappt nicht. Hab an allen möglichen Display´s "li" versucht, geht nicht.
Nun fallt nicht über mich her, ich bin nun mal kein Profi, möchte als "Ehrenamtler" nur unsere Sport-HP bissel gestalten.
Kann jemand den Code so schreiben, das er geht?

Ich hoffe, es ist nicht zu viel verlangt??????

ist mir ein bisschen zu verschachtelt, daher nur ein kleines Beispiel wie es gehen könnte:

a{
display: block;
width: 8.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.01em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
ul ul a{display:inline;}
ul ul {display:none;}
ul:hover ul{display:block}

</style>
</head>
<body>
<ul>
<li><a href='#'>kopf</a></li>
<ul>
<a href='#'>position1</a>
<a href='#'>position2</a>
</ul>
</ul>
 
Oben Unten