XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Dynamische Navigationsleiste horizontal, vertikal (http://xhtmlforum.de/showthread.php?t=61564)

Faven 27.06.2010 13:44

Dynamische Navigationsleiste horizontal, vertikal
 
Hallo Leute,

Möchte zunächst Anmerken, dass ich mich bereits mit HTML sowie CSS auseinander gesetzt habe, das aber jetzt gerade mal eine Woche mache und dies meine erste Seite wird und deswegen möchte ich mich für eventuelle leichtsinnige Anfängerfehler entschuldigen :oops:.

Ich hoffe doch sehr das Ihr mir helfen könnt, da ich im moment einfach eine Blockade habe ich bekomme das im moment irgendwie nicht hin meine Navigationsleiste richtig auszurichten. Folgendes Schema:

liste folgendermaßen geschachtelt:

-Oberpunkt
-Unterpunkt1
-Unterunterpunkt
-Unterpunkt2
-Unterunterpunkt
-Oberpunkt

etc.

Die Blöcke auszublenden klar, kein Problem die fahren sich auch alle schön aus nur würde ich gern, das sich die Unterunterpunkte nach rechts ausrichten und das ohne einen riesigen freiraum zwischen Unterpunkt1 und Unterpunkt2 zu haben. Könnte mir eventuell jemand weiterhelfen?

Hier mein Quellcode der CSS Datei(Die Farben dienen für mich nur zur Orientierung beim aufbau):

#navigation-links /*Linke Navigationsleiste in der Main Box */
{
position:absolute; /*Positionierung richtet sich am nächstübergeordneten Element aus */
top:50px; /*Positionierung 50 pixel von der Main Box entfernt*/
left:0px; /*Positionierung 0 pixel vom Linken Rand der Main Box entfernt */
width:200px; /*Breite der Navigationsleiste beträgt FIX!!! 200 pixel */
min-height:450px; /*Mindesthöhe der Navigationsleiste beträgt 450 pixel */


}

/*Dynamische Navigationsliste - S T A R T*/
#navigation-links-formatierung ul /*Oberpunkte*/
{
background-color:black; /*Hintergrundfarbe der Oberpunkte*/
list-style: none; /*Listenaufzählungspunkte entfernen*/
margin:0; /*Abstände neu setzen*/
padding:0; /*Abstände neu setzen*/
}

#navigation-links-formatierung ul li ul /*Unterpunkte der Oberpunkte*/
{
background-color:red; /*Hintergrundfarbe der Unterpunkte*/
display: none; /*Ausblenden der Unterpunkte */
}

#navigation-links-formatierung ul li:hover>ul /*Öffnen der Unterpunkte beim Überfahren des Oberpunkts*/
{
display: block; /*Anzeigen der Links*/
}

#navigation-links-formatierung ul li ul li ul /*Unterpunkte der Unterpunkte*/
{
background-color:#FF22FF; /*Hintergrundfarbe der Unterunterpunkte*/
display: none; /*Ausblenden der Links*/
}

#navigation-links-formatierung ul li ul li:hover>ul /*Öffnen der Unterpunkte beim Überfahren der Unterpunkte der Oberpunkte*/
{
display: block; /*Anzeige der Links*/
}


/* Navigationsleiste zusatz ende */

heiko_rs 27.06.2010 13:45

Baue das mal zusammen und lade es hoch.

Faven 27.06.2010 14:04

Da gibt es ein kleines Problem, da ich mich bis jetzt nur mit CSS & HTML auseinandergesetzt habe, nicht aber mit dem eigentlich hochladen außerdem hab ich mir noch keine Domain bzw. Webspace zugelegt, da ich solange offline arbeiten werde bis diese komplett fertig ist und mit jedem Browser funktioniert :/.

Ich könnte höchstens alles in ein Winrararchiv packen und bei rapidshare hochladen, oder könnte ich es sonst irgendwie "zeigen"? könnte auch den ganzen quellcode hier posten falls nötig.

heiko_rs 27.06.2010 14:10

Dann poste den kompletten lauffähigen Code, mit CSS im head-Element.

Faven 27.06.2010 14:34

Kurze Anmerkung vorher noch soll eine Self-CSS seite für mich selbst werden :) größtenteils habe ich die Navigation von selfhtml.org übernommen.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.1 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<Head>

<title>Testseite für HTML &amp; Stylesheets</title>
<Style type="text/css">
/*CSS-Dokument Aufbau der Grundbox + Dynamische Navigationsleiste sowie
die verschiedenen Text, Tabellen, Hintergrundformatierungen etc. */

#main /*Hauptbox, Enthält alle Elemente */
{
position:relative; /*Ausrichtung der Box anhand des Textflusses*/
top:100px; /*Element ist 100pixel vom oberen Dokumentrand entfernt*/
left:0px; /*Element ist 0pixel vom linken Dokumentrand entfernt*/
width:1024px; /*Element ist FIX! 1024px breit*/
max-width:1024px; /*Element ist maximal 1024px breit */
min-height:500px; /*Mindesthoehe des Elementes 500 px hoch*/
background-color:#FF1233; /*Hintergrundfarbe des Main Elements*/
margin: 0 auto; /*Element richtet sich automatisch gleich von unten, oben, links, rechts von den Dokumenträndern aus gesehen aus */

}

#oben /*Element, dass sich außerhalb der Main Box befindet und als Logoleiste dienen soll*/
{
position:relative; /*Richtet sich am Textfluss aus*/
top:50px; /*50 pixel vom oberen Dokumentrand entfernt*/
width:1024px; /*breite von 1024px */
background-color:#00FF00; /*Hintergrundfarbe der Box*/
margin: 0 auto; /*Box richteit sich automatisch vom unteren, oberen, linken und rechten Dokumentrand gleich aus*/
}

#main-navigation-oben /*Box befindet sich in der main box und ist die obere Navigationsleiste*/
{
position:absolute; /*Richtet sich am nächsten übergeordneten Element aus*/
top:0px; /*0 pixel Abstand zum oberen Rand des übergeordneten Elements*/
left:200px; /*200 pixel Abstand zum linken Rand des übergeordneten Elements*/
height:50px; /*50 pixel Abstand zum oberen Rand des übergeordneten Elements*/
width:824px; /*824 pixel Beträgt die Breitet der Box*/
background-color:#00FFFF; /*Hintergrundfarbe der Box*/
}

#main-logo-oben-rechts /*Box befindet sich in der main box rechts von der oberen Navigationsleiste*/
{
position:absoulte; /*Richtet sich am nächsten übergeordneten Element aus*/
top:0px; /*0 pixel Abstand zum oberen Rand des übergeordneten Elements*/
left:0px; /*0 pixel Abstand zum linken Rand des übergeordneten Elements*/
height:50px; /*50 pixel Abstand zum oberen Rand des übergeordneten Elements*/
width:200px; /*200 pixel Beträgt die Breitet der Box*/
background-color:#FF99FF; /*Hintergrundfarbe der Box*/
}

#navigation-links /*Linke Navigationsleiste in der Main Box */
{
position:absolute; /*Positionierung richtet sich am nächstübergeordneten Element aus */
top:50px; /*Positionierung 50 pixel von der Main Box entfernt*/
left:0px; /*Positionierung 0 pixel vom Linken Rand der Main Box entfernt */
width:200px; /*Breite der Navigationsleiste beträgt FIX!!! 200 pixel */
min-height:450px; /*Mindesthöhe der Navigationsleiste beträgt 450 pixel */


}

/*Dynamische Navigationsliste - S T A R T*/
#navigation-links-formatierung ul /*Oberpunkte*/
{
background-color:black; /*Hintergrundfarbe der Oberpunkte*/
list-style: none; /*Listenaufzählungspunkte entfernen*/
margin:0; /*Abstände neu setzen*/
padding:0; /*Abstände neu setzen*/
}

#navigation-links-formatierung ul li ul /*Unterpunkte der Oberpunkte*/
{
background-color:red; /*Hintergrundfarbe der Unterpunkte*/
display: none; /*Ausblenden der Unterpunkte */
}

#navigation-links-formatierung ul li:hover>ul /*Öffnen der Unterpunkte beim Überfahren des Oberpunkts*/
{
display: block; /*Anzeigen der Links*/
}

#navigation-links-formatierung ul li ul li ul /*Unterpunkte der Unterpunkte*/
{
background-color:#FF22FF; /*Hintergrundfarbe der Unterunterpunkte*/
display: none; /*Ausblenden der Links*/
}

#navigation-links-formatierung ul li ul li:hover>ul /*Öffnen der Unterpunkte beim Überfahren der Unterpunkte der Oberpunkte*/
{
display: block; /*Anzeige der Links*/
}


/* Navigationsleiste zusatz ende */

#inhalt /*Box bildet das Zentrum der Mainbox*/
{
position:absolute; /*Richtet sich am nächsten übergeordneten Element aus*/
top:50px; /*50 pixel Abstand zum oberen Rand des übergeordneten Elements*/
left:200px; /*200 pixel Abstand zum linken Rand des übergeordneten Elements*/
width:624px; /*624 pixel Beträgt die Breitet der Box*/
min-height:500px; /*500 pixel beträgt die minimale Höhe des Elements*/
background-color:#00FF00; /*Hintergrundfarbe der Box*/


}

#unten /*Box dient zur zusätlichen Information, befindet sich in der main Box soll sich nach der Inhaltsbox ausrichten*/
{
position:absolute; /*Richtet sich am nächsten übergeordneten Element aus*/
bottom:0px; /*0 pixel Abstand zum unteren Rand des übergeordneten Elements*/


right:-32.1%; /* WTF??? ZU GEGEBENEM ZEITPUNKT GEEIGNETE KOMMENTIERUNG FORMULIEREN */


width:1024px; /*1024pixel Beträgt die Breitet der Box*/
background-color:#FF0000; /*Hintergrundfarbe der Box*/
min-height:50px; /*50 pixel beträgt die minimale Höhe des Elements*/
margin: 0 auto; /*Box richteit sich automatisch vom unteren, oberen, linken und rechten Dokumentrand gleich aus*/
}

#navigation-rechts /*Box dient als Rechte Navigationsleiste in der Main Box*/
{
position:absolute; /*Richtet sich am nächsten übergeordneten Element aus*/
top:50px; /*50 pixel Abstand zum oberen Rand des übergeordneten Elements*/
left:824px; /*824 pixel Abstand zum linken Rand des übergeordneten Elements*/
min-height:450px; /*450 pixel beträgt die minimale Höhe des Elements*/
width:200px; /*200 pixel Beträgt die Breitet der Box*/
background-color:#FFFF00; /*Hintergrundfarbe der Box*/

}



body /*body bereich (Der gesamte HTML Körper)*/
{
font-family: Calibri, Bantag, Arial, sans-serif; /*Schriftart festlegen*/
padding: 0.2em; /*allgemeiner Seitenabstand 0.2em*/
}

</Style>
</head>
<body>

<div id="oben">Obere Logoleiste außerhalb der Main Box</div>

<div id="main">

<!-- Navigationsleiste start -->
<div id="navigation-links">


<div id="navigation-links-formatierung">
<ul>



<li>
<li><a href="start.htm">Start</a>

<ul>

<li><a href="start.htm">Stylesheets in HTML einbinden</a>

<ul>
<li><a href="start.htm">Formate Zentral für eine HTML-Datei definieren</a></li>
<li><a href="start.htm">Formate innerhalb eines HTML-Dokuments definieren</a></li>
<li><a href="start.htm">Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien</a></li>
<li><a href="start.htm">Kommentare innerhalb von Stylesheet-Bereichen</a></li>
<li><a href="start.htm">Stylesheet-Sprache ausdrücklich festlegen</a></li>
</ul>
</li>
<li><a href="start.htm">Zentrale Formate definieren</a>

<ul>
<li><a href="start.htm">Aufbau zentraler Formate</a></li>
<li><a href="start.htm">Formate für HTML-Elemente definieren</a></li>
<li><a href="start.htm">Formate für verschachtelte HTML-Elemente definieren</a></li>
<li><a href="start.htm">Attributbedingte Formate definieren</a></li>
<li><a href="start.htm">Formate für Klassen definieren</a></li>
<li><a href="start.htm">Klassen in Verbindung mit den Elementen div und span</a></li>
<li><a href="start.htm">Individualformate definieren</a></li>
<li><a href="start.htm">Pseudoelemente und Pseudoklassen definieren</a></li>
</ul>
</li>

<li><a href="start.htm">HTML-Elemente direkt formatieren</a>

<ul>
<li><a href="start.htm">Format definitionen mit dem style-Attribut</a></li>
</ul>
</li>

<li><a href="start.htm">Maßeinheiten,Farbangaben und Wertzuweisungen</a>

<ul>
<li><a href="start.htm">Numerische Angaben</a></li>
<li><a href="start.htm">Farbangaben</a></li>
<li><a href="start.htm">Erlaubte feste Werte und Zeichenkettenangaben</a></li>
<li><a href="start.htm">Das Box Modell</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="start.htm">CSS-Eigenschaften</a>
<ul>
<li><a href="start.htm">Schriftformatierung</a>
<ul>
<li><a href="start.htm">Allgemeines zur Schriftformatierung</a></li>
<li><a href="start.htm">font-style (Schriftstil)</a></li>
<li><a href="start.htm">font-variant (Schriftvariante)</a></li>
<li><a href="start.htm">font-size (Schriftgr&ouml;&szlig;e)</a></li>
<li><a href="start.htm">font-weight (Schriftgewicht)</a></li>
<li><a href="start.htm">font (Schrift allgemein)</a></li>
<li><a href="start.htm">word-spacing (Wortabstand)</a></li>
<li><a href="start.htm">letter-spacing(Zeichenabstand)</a></li>
<li><a href="start.htm">text-decoration(Textdekoration)</a></li>
<li><a href="start.htm">text-transform (Text-Transformation)</a></li>
<li><a href="start.htm">color (Textfarbe)</a></li>
</ul>
</li>

<li><a href="start.htm">Ausrichtung und Absatzkontrolle</a>
<ul>
<li><a href="start.htm">Allgemeines zur Ausrichtung und Absatzkontrolle</a></li>
<li><a href="start.htm">Text-indent (Texteinrückung)</a></li>
<li><a href="start.htm">line-height (Zeilenhöhe)</a></li>
<li><a href="start.htm">vertical-align (vertikale Ausrichtung)</a></li>
<li><a href="start.htm">text-align(horizontale Ausrichtung)</a></li>
<li><a href="start.htm">white-space (Textumbruch)</a></li>
</ul>
</li>

<li><a href="start.htm">Außenrad und Abstand</a>
<ul>
<li><a href="start.htm">Allgemeines zu Au&szlig;enrand und Abstand</a></li>
<li><a href="start.htm">margin-top(Außenrand/Abstand oben)</a></li>
<li><a href="start.htm">margin-right (Außenrand/Abstand rechts)</a></li>
<li><a href="start.htm">margin-bottom (Au&szlig;enrand/Abstand unten)</a></li>
<li><a href="start.htm">margin-left (Au&szlig;enrand/Abstand links)</a></li>
<li><a href="start.htm">margin(Au&szlig;enrand/Abstand allgemein)</a></li>
</ul>
</li>

<li><a href="start.htm">Innenabstand</a>
<ul>
<li><a href="start.htm">Allgemeines zum Innenabstand</a></li>
<li><a href="start.htm">Padding-Top (Innenabstand oben)</a></li>
<li><a href="start.htm">Padding-Right (Innenabstand Rechts)</a></li>
<li><a href="start.htm">Padding-Bottom (Innenabstand unten)</a></li>
<li><a href="start.htm">Padding-left (Innenabstand links)</a></li>
<li><a href="start.htm">Padding (Innenabstand allgemein)</a></li>
</ul>
</li>

<li><a href="start.htm">Rahmen</a>
<ul>
<li><a href="start.htm">Allgemeines zu Rahmen</a></li>
<li><a href="start.htm">Border - width(Rahmendicke)</a></li>
<li><a href="start.htm">Border - color (Rahmenfarbe)</a></li>
<li><a href="start.htm">Border - style (Rahmentyp)</a></li>
<li><a href="start.htm">Border (Rahmen)</a></li>
<li><a href="start.htm">Outline-width (Rahmendicke)</a></li>
<li><a href="start.htm">Outline (Rahmen allgemein)</a></li>
</ul>
</li>

<li><a href="start.htm">Hintergrundfarben und Bilder</a>
<ul>
<li><a href="start.htm">Allgemeines zu Hintergrundfarben und -bildern</a></li>
<li><a href="start.htm">Background - Color (Hintergrund)</a></li>
<li><a href="start.htm">Background - Image (Hintergrundbild)</a></li>
<li><a href="start.htm">Background - Repeat(Wiederholungs-Effekt)</a></li>
<li><a href="start.htm">Background - Attachment (Wasserzeichen-Effekt)</a></li>
<li><a href="start.htm">Background - Position (Hintergrundposition)</a></li>
<li><a href="start.htm">Background (Hintergrund allgemein)</a></li>
</ul>
</li>

<li><a href="start.htm">Listenformatierung</a>
<ul>
<li><a href="start.htm">Allgemeines zur Listenformatierung</a></li>
<li><a href="start.htm">List-style-type (Darstellungstyp)</a></li>
<li><a href="start.htm">List-style-position (Listeneinrückung)</a></li>
<li><a href="start.htm">List-style-image (eigene Bullet-Grafik)</a></li>
<li><a href="start.htm">List-style (Listendarstellung allgemein)</a></li>
</ul>
</li>

<li><a href="start.htm">Tabellenformatierung</a>
<ul>
<li><a href="start.htm">Allgemeines zur Tabellenformatierung</a></li>
<li><a href="start.htm">Caption-side (Ausirchtung der Tabellenüberschrift)</a></li>
<li><a href="start.htm">Table-Layout (fixe/variable Breiten)</a></li>
<li><a href="start.htm">Border-Collapse (Rahmenmodell)</a></li>
<li><a href="start.htm">Border-spacing (Rahmenabstand im Gitternetz)</a></li>
</ul>
</li>

<li><a href="start.htm">Pseudoelemente und Pseudoklassen</a>
<ul>
<li><a href="start.htm">Allgemeines zu Pseudoelementen und Pseudoklassen</a></li>
<li><a href="start.htm">Pseudoklassen und Pseudoelemente f&uuml;r Absätze</a></li>
<li><a href="start.htm">Pseudoklassen für Sprachauszeichnungen</a></li>
<li><a href="start.htm">Pseudoelemente für automatisch generierten Inhalt</a></li>
<li><a href="start.htm">Automatische Anführungszeichen</a></li>
<li><a href="start.htm">Auotmatische Nummerierung</a></li>
</ul>
</li>

<li><a href="start.htm">Positionierung und Anzeige von Elementen</a>
<ul>
<li><a href="start.htm">Allgemeines zur Positionierung und Anzeige von Elementen</a></li>
<li><a href="start.htm">Position (Positionsart)</a></li>
<li><a href="start.htm">top (Startposition von oben)</a></li>
<li><a href="start.htm">left (Startposition von links)</a></li>
<li><a href="start.htm">bottom (Startposition von unten)</a></li>
<li><a href="start.htm">right (Startposition von rechts)</a></li>
<li><a href="start.htm">width (Breite)</a></li>
<li><a href="start.htm">min-width (Mindestbreite)</a></li>
<li><a href="start.htm">max-width (Maximalbreite)</a></li>
<li><a href="start.htm">height(Höhe)</a></li>
<li><a href="start.htm">min-height (Mindesthöhe)</a></li>
<li><a href="start.htm">max-height (Maximalhöhe)</a></li>
<li><a href="start.htm">overflow (Elementbereich mit übergroßem Inhalt)</a></li>
<li><a href="start.htm">direction (Richtung)</a></li>
<li><a href="start.htm">float (Textumfluss)</a></li>
<li><a href="start.htm">clear (Fortsetung bei Textumfluss)</a></li>
<li><a href="start.htm">z-index (Schichtposition bei Überlappung)</a></li>
<li><a href="start.htm">display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)</a></li>
<li><a href="start.htm">visibility (Anzeige bzw. Nichtanzeige mit Platzhalter)</a></li>
<li><a href="start.htm">clip (Anzeigebereich eingrenzen)</a></li>
</ul>
</li>

<li><a href="start.htm">Layouts für Printmedien</a>
<ul>
<li><a href="start.htm">Allgemeines zu Seiten-Layout und Seitenumbruch</a></li>
<li><a href="start.htm">margin (Seitenränder)</a></li>
<li><a href="start.htm">Seiten rechts/links und erste Seite</a></li>
<li><a href="start.htm">page-break-before (Seitenumbruch vor einem Element)</a></li>
<li><a href="start.htm">page-break-after (Seitenumbruch nach einem Element)</a></li>
<li><a href="start.htm">page-break-inside (Seitenumbruch innerhalb eines Elements)</a></li>
</ul>
</li>

<li><a href="start.htm">Anzeigefenster</a>
<ul>
<li><a href="start.htm">Allgemeines zum Anzeigefenster</a></li>
<li><a href="start.htm">cursor (Mauszeiger)</a></li>
<li><a href="start.htm">cursor mit eigener Grafik</a></li>
<li><a href="start.htm">scrollbar</a></li>
</ul>
</li>

</ul>
</li>

<li><a href="start.htm">Auf CSS-basierende Layouts</a>
<ul>
<li><a href="start.htm">Einf&uuml;hrung in CSS-basierenden Layouts</a>

<ul>
<li><a href="start.htm">Trennung von Inhalt und Layout</a></li>
<li><a href="start.htm">Das Box-Modell als Grundlage CSS-basierter Layouts</a></li>
<li><a href="start.htm">Warum erst jetzt?</a></li>
</ul>
</li>

<li><a href="start.htm">Mehrspaltige CSS-basierende Layouts</a>

<ul>
<li><a href="start.htm">Zweispaltiges Layout</a></li>
<li><a href="start.htm">Dreispaltiges Layout</a></li>
<li><a href="start.htm">Mehrspaltiges Layout mit Kopf und Fußzeile</a></li>
<li><a href="start.htm">Gestaltungstipps</a></li>
</ul>
</li>

<li><a href="start.htm">Fixe Bereiche mit CSS-basierenden Layouts</a>

<ul>
<li><a href="start.htm">Sinnvoller Einsatz fixer Bereiche</a></li>
<li><a href="start.htm">Layout mit fixem Bereich definieren</a></li>
<li><a href="start.htm">Workaround für den Internet Explor</a></li>
</ul>
</li>

<li><a href="start.htm">CSS-basierende Navigationsleisten</a>

<ul>
<li><a href="start.htm">Navigationsleiste definiern</a></li>
<li><a href="start.htm">Vertikale Formatierung mit Überschriften</a></li>
<li><a href="start.htm">Horizontale Formatierung</a></li>
<li><a href="start.htm">Mehrere Navigationsebenen</a></li>
<li><a href="start.htm">Dynamische CSS-Navigation für moderne Browser</a></li>
</ul>
</li>
</ul>
</li>
</li>
</ul>
</div>
</div>

<!-- Navigationsleist Ende -->

<div id="main-logo-oben-rechts">Logo Oben Rechts in der Main Box</div>

<div id="main-navigation-oben">Obere Navigationsleiste in der Main Box</div>

<div id="inhalt">

Inhalt, Box die sich mittig in der Main Box befindet

<div id="unten">Untere Navigation innerhalb der Main Box</div>

</div>

<div id="navigation-rechts">Rechte Navigation innerhalb der Main Box</div>
</div>

</body>
</html>

heiko_rs 27.06.2010 20:03

Wirf als erstes jegliches pos. abs. raus - nur die sich öffnenden Submenüs bekommen dies und werden dann per left und top an der linken Spalte ausgerichtet, die dafür pos. rel. bekommt.

Faven 28.06.2010 16:06

Ich habs zwar jetzt ein bisschen anders gelöst, da wenn ich jegliche position absolute rausgehaun hätte ich ziemilch viel umschlichten hätte müssen und deswegen hab ich einfach die inhaltsbox rausgehauen :). Aber danke für Ihre Aussage mit dem position absolute für die submenus das hat mir extrem geholfen!! Danke vielmals!


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:07 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023