zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dynamische Navigationsleiste horizontal, vertikal

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.06.2010, 13:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.06.2010
Beiträge: 6
Faven befindet sich auf einem aufstrebenden Ast
Standard 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 .

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 */
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.06.2010, 13:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Baue das mal zusammen und lade es hoch.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.06.2010, 14:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.06.2010
Beiträge: 6
Faven befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 27.06.2010, 14:10
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dann poste den kompletten lauffähigen Code, mit CSS im head-Element.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 27.06.2010, 14:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.06.2010
Beiträge: 6
Faven befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #6 (permalink)  
Alt 27.06.2010, 20:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 28.06.2010, 16:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.06.2010
Beiträge: 6
Faven befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Horizontal zentrierte Navigationsleiste erstellen Webnut CSS 4 16.01.2011 13:09
CSS-Seite horizontal und vertikal zentrieren! Boof CSS 20 05.02.2010 13:23
Hintergrundbild vertikal UND horizontal zentrieren? yggdrasil CSS 3 06.07.2008 11:19
dynamische Navigationsleiste und Firefox c.s. CSS 4 04.04.2008 00:49
Bild horizontal und vertikal zentrieren Anonymous CSS 10 18.06.2003 12:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:00 Uhr.