CSS-Lösung für dynamische Navigation

CSS-Lösung für dynamische Navigation

Beitragvon falbala » 07.04.2011, 16:27

Hallo liebes Forum,

für ein Projekt möchte ich eine dynamische Navigation erstellen, die von Layout so aussehen soll:
http://img864.imageshack.us/i/grid.gif/

Ich verzweifle mittlerweile daran und befürchte, dass es dafür vielleicht gar keine CSS-Lösung gibt. Vielleicht weiß ja jemand von euch einen Rat?!

Ich habe mir schon überlegt einen Trenner o.ä. für die Navigationspunkte in einer neuen Spalte einzufügen, hat aber leider nicht so geklappt. Weiß jemand was? Hat jemand von euch eine Idee dazu?

Das hier ist der derzeitige, relevante HTML-Code:
Code: Alles auswählen
<ul>
  <li><a href="#">Navipunkt</a>
    <ul>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
    </ul>
  </li>
  <li><a href="#">Navipunkt</a>
    <ul>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
    </ul>
  </li>
  <li><a href="#">Navipunkt</a>
    <ul>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
    </ul>
  </li>
  <li><a href="#">Navipunkt</a>
    <ul>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
    </ul>
  </li>
  <li><a href="#">Navipunkt</a>
     <ul>
      <li><a href="#">Subnavipunkt</a></li>
      <li><a href="#">Subnavipunkt</a></li>
    </ul>
  </li>
</ul>


CSS-Code:
Code: Alles auswählen
ul { font:normal 12px Arial,sans-serif; list-style:none; width:600px;}
ul li { float:left; width:200px; }
ul li ul { width:200px; }
falbala
neu hier
 
Beiträge: 4
Registriert: 07.04.2011, 16:23

Re: CSS-Lösung für dynamische Navigation

Beitragvon sejuma » 08.04.2011, 06:03

Kannst du dein Problem bitte nochmal etwas genauer beschreiben bzw. hilft dir evtl. das weiter?
http://www.ohne-css.gehts-gar.net/0066.php
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: CSS-Lösung für dynamische Navigation

Beitragvon falbala » 08.04.2011, 08:26

Zu meinem Problem:
Die Navigation soll auch den Platz unter kürzeren Navipunkten ausnutzen. Also beispielsweise in der ersten Spalte der 2. Hauptnavipunkt direkt unter dem 1. Punkt dargestellt werden, in der zweiten Spalte nur der 3. Navipunkt, und in der dritten Spalte der 4. und 5. Navipunkt.

Ich habe mir, wie gesagt, überlegt, dass man einen Trenner für 1., 3. und 4. Punkt einbaut. Ich habe es leider nicht geschafft es umzusetzen...

Code: Alles auswählen
1. Punkt     3. Punkt     4. Punkt
  -----        ----         ----
  -----        ----         ----
  -----        ----         ----
2. Punkt       ----         ----
  -----        ----       5. Punkt
  -----        ----         ----
  -----        ----         ----
                            ----
falbala
neu hier
 
Beiträge: 4
Registriert: 07.04.2011, 16:23

Re: CSS-Lösung für dynamische Navigation

Beitragvon Azra » 08.04.2011, 12:27

Aus meiner sicht brauchst du dafür 3 Listen. Ich versuch es aber einmal kurz -
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum

Re: CSS-Lösung für dynamische Navigation

Beitragvon Azra » 08.04.2011, 12:40

Es ist möglich, aber nur durch Schummeln und Quetschen.
Mach dir eine neue leere Seite auf und pack das mal in den <head>
Code: Alles auswählen
<style type="text/css">
@charset "utf-8";*{margin:0;padding:0;border:0;vertical-align:baseline;resize:none;}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}.clearfix{display:inline-block;}html[xmlns] .clearfix{display:block;}* html .clearfix{height:1%;overflow:visible;}
body{text-align:center;}a{outline:none;text-decoration:none;}ul{list-style-type:none;}
#wrapper{text-align:left;margin:100px auto 0;width:770px;padding:15px;background:lightcyan;}
</style>

und das in den <body>
Code: Alles auswählen
   <div id="wrapper" class="clearfix">
      <ul style="width:265px;">
         <li><a href="javascript:void();" title="">Navipunkt 1</a>
            <ul>
               <li><a href="javascript:void();" title="">Sub 1</a></li>
               <li><a href="javascript:void();" title="">Sub 2</a></li>
               <li><a href="javascript:void();" title="">Sub 3</a></li>
            </ul>
         </li>
         <li style="float:left;"><a href="javascript:void();" title="">Navipunkt 2</a>
            <ul>
               <li><a href="javascript:void();" title="">Sub 1</a></li>
               <li><a href="javascript:void();" title="">Sub 2</a></li>
               <li><a href="javascript:void();" title="">Sub 3</a></li>
            </ul>
         </li>
         <li style="position:relative;top:-80px;margin-left:20px;float:left;"><a href="javascript:void();" title="">Navipunkt 3</a>
            <ul>
               <li><a href="javascript:void();" title="">Sub 1</a></li>
               <li><a href="javascript:void();" title="">Sub 2</a></li>
               <li><a href="javascript:void();" title="">Sub 3</a></li>
            </ul>
         </li>
         <li style="position:relative;top:-160px;margin-left:20px;clear:left;float:right;"><a href="javascript:void();" title="">Navipunkt 4</a>
            <ul>
               <li><a href="javascript:void();" title="">Sub 1</a></li>
               <li><a href="javascript:void();" title="">Sub 2</a></li>
               <li><a href="javascript:void();" title="">Sub 3</a></li>
            </ul>
         </li>
         <li style="position:relative;top:-160px;clear:right;float:right;"><a href="javascript:void();" title="">Navipunkt 5</a>
            <ul>
               <li><a href="javascript:void();" title="">Sub 1</a></li>
               <li><a href="javascript:void();" title="">Sub 2</a></li>
               <li><a href="javascript:void();" title="">Sub 3</a></li>
            </ul>
         </li>
      </ul>
   </div>

Die Pixelzahlen wirst du anpassen müssen - vielleicht geht es anders, keine Ahnung :|
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum

Re: CSS-Lösung für dynamische Navigation

Beitragvon falbala » 08.04.2011, 13:50

Danke Azra, für deinen Lösungsansatz.

Leider muss die Navigation dynamisch erweiterbar sein, d.h. es sollte egal sein wie viele Submenü-Punkte ein Hauptmenüpunkt hat.

Kann man vielleicht zwischen 2. und 3., sowie 3. und 4. Menüpunkt einen Trenner einbauen?
Wenn das gar nichts hilft, werde ich wohl leider auf Tabellen zurückgreifen müssen...
falbala
neu hier
 
Beiträge: 4
Registriert: 07.04.2011, 16:23

Re: CSS-Lösung für dynamische Navigation

Beitragvon Azra » 08.04.2011, 15:04

Kein Ding, und nein ich habe nie von etwas wie einem Trenner gehört.
Warum Tabellen?

Benutz Container und float.
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum

Re: CSS-Lösung für dynamische Navigation

Beitragvon falbala » 08.04.2011, 17:29

Ja, oder eben gefloatete DIVs ;-)

Ich dachte mir, dass man einem DIV "trenner" IRGENDWIE MIT CSS sagen kann, dass ab einem bestimmten Menüpunkt "umgebrochen" wird. Ein verkehrtes "clear" im Prinzip... Keine Ahnung, vielleicht geht das ja irgendwie...
falbala
neu hier
 
Beiträge: 4
Registriert: 07.04.2011, 16:23


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "CSS-Lösung für dynamische Navigation"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron