navigationsproblem - wie css dynamisch gestalten

Status
Nicht offen für weitere Antworten.
F

frank_the_tank03

Grünschnabel
hallo,

ich habe einen navigationsbereich welcher mit listenelementen arbeitet.

dabei wird die erste navigationsebene in einer zeile dargestellt.

in der art:

link1_1 : link1_2 : link1_3 : link1_4 : link1_5

bei aktivierung einer dieser links beispielsweise link1_5, soll eine weitere navigationsleiste (2.ebene) mit den unter der rubrik 1_5 enthaltenen links erscheinen. diese sollen auch zeilenweise dargestellt werden, wobei die zeile nicht unter dem link1_5 (wie vom css automatisch dargestellt) stehen soll, sondern unterhalb von link1_1 stehen soll.

also in der art:
link1_1 : link1_2 : link1_3 : link1_4 : link1_5
link2_5_1 : link2_5_2 : link : 2_5_3

nun zu meinem eigentlichen problem:

wenn ich die zweite zeile also das div #navcontainer ul ul an die gewünschte stelle bringen möchte kann ich dies z.b. über position: absolute usw. machen, wobei sich dann mein nachfolgendes design total verschiebt. so wird der content bereich durch die zweite navigationsebene überlagert. irgendwelche abstände zu definieren macht leider auch keinen sinn, da sich das ganze im falle das die 2.navigationsebene nicht sichtbar ist nicht mehr im gleichen abstand nach oben verhält. es ergeben sich dann zu große lücken.

eine andere erste lösung (ohne das dabei mein design zerschossen wird) habe ich dann über die verschiebung mittels margin-left: -486px erreicht. leider passt diese lösung nur in diesem einen fall!? wenn sich die 2. navigationsebene beispielsweise auf link1_4 beziehen würde, so wäre der abstand entsprechend geringer (betragsmäßig ausgedrückt) nämlich margin-left: -351px.

wie kann ich hier den wert in abhängig vom aktivierten link dynamisch eintragen?

oder gibt es auch eine andere lösung die mir meine gewünschte navigation ermöglicht.

von mir aus auch per position: absolute, wobei allerdings der content nicht überlagert werden soll, sondern immer automatisch d.h. bündig an dem ende der 1. oder sofern vorhanden 2. navigationszeile liegen soll?

ich habe leider echt keinen plan, suche verzweifelt eine lösung?

anbei mein code:
PHP: 
<html>
   <head>
   <style>

   body {
      font: 10pt "verdana, arial, sans-serif";
      background-color: #e4e4e4;
      margin: 0 auto 0;
      margin-top: 10px;
      z-index: 0;
   }

   #container {
      width: 800px;
      margin: 0 auto 0;
      background-color: #ffffff;
      z-index: 1;
   }
   
   .clearer {
      clear: both;
   }

   
   #headerNav {
      margin: 0 auto 0;
      padding: 0;
      width: 585px;
      background-color: #000000;
   }
   
   #navcontainer {
      background-color: #999999;
      min-height: 38px;
      height: 38px;
      width: 585px;
      z-index: 3;
   }

   #navcontainer #current {
      background-color: #ffcc23;
      height: 28px;
      color: #fff;
   }

   #navcontainer #current:hover {
   }

   #navcontainer .currentAncestor {
   }

   /* Parent - Level 0 */

   #navcontainer ul{
      list-style: none;
      margin: 0;
      padding: 0px;
      z-index: 5;
   }

   #navcontainer li {
      float: left;   
      width: 117px;
   }

   #navcontainer a {
      float: left;
      text-align: center;
      height: 28px;
      background-color: #D4EEF7;
      width: 117px;
      padding-top: 12px;
      text-decoration: none;
      color: #292929;
      font-size: 12px;
   }

   #navcontainer a:hover {
      background-color: #0af;
      color: #fff;
   }

   #navcontainer a:active {
      background-color: #D18031;
   }

   #navcontainer ul ul {      
      clear: left;
      position: relative;
      margin: 70 -468 0; /*  <------  passt nur für das eine beispiel*/
      width: 580px;
      height: 38px;
   }
   

   #navcontainer ul ul li {
   }
   
   #navcontainer ul ul a {
   }
   
   
   
   #contentContainer {
      margin: 0 auto 0;
      min-height: 200px;
      width: 520px;
      z-index: 9;
      background-color: #ff0043;
      float: left;
   }
   
   #contentContainer #content {
      background-color: #ffcc23;
      width:  500px;
      height: 180px;
      margin: 10px;
   }

   #sidebarContainer {
      margin-top: 0px;      
      width: 280px;
      min-height: 200px;
      background-color: #999999;
      float: right;
   }

   #sidebarContainer #sidebar {
      width: 260px;
      height: 180px;
      margin: 10px;
      background-color: #cccccc;
   }

   </style>
   
   <title></title>
   </head>
   <body>
   <div id="container">
   <div id="headerNav">
   <div id="navcontainer">
      <ul>
        <li><a href="#"
           rel="self">Link1_1</a></li>
        <li><a href="#"
           rel="self">Link1_2</a></li>
        <li><a href="#"
           rel="self">Link1_3</a></li>
        <li><a href="#"
           rel="self">Link1_4</a></li>
        <li>
          <a href="#"
              rel="self" id="current"
           name="current">Link1_5</a>
          <ul>
            <li><a href="#"
               rel="self">Link2_5_1</a></li>
            <li><a href="#"
               rel="self">Link2_5_2</a></li>
            <li><a href="#"
               rel="self">Link2_5_3</a></li>
          </ul>   
        </li>
      </ul>
    </div><!-- end navcontainer -->
 
      </div><!-- end navHeader -->
 
    <div class="clearer"></div>
 
 
    <div id="contentContainer">
      <div id="content">
       content
       </div><!-- end content -->
    </div><!-- end contentContainer -->
   
    <div id="sidebarContainer">
      <div id="sidebar">
      sidebar
      </div> <!-- end sidebar -->
    </div> <!-- end sidebarContainer -->
     
   </div><!-- end container --></body>
</html>
ich habe leider echt keinen plan, suche verzweifelt eine lösung?

für eure hilfe schon im voraus
herzlichen dank

gruß
cssRookie
 
Hi,

du könntest es auf diese Weise regeln, indem du jedem Submenü eine ID gibst, um so seinen entsprechenden linken Außenabstand zu bestimmen:

Code: 
#navcontainer ul ul {
      clear: left;
      position: relative;
      width: 580px;
      height: 38px;
   }

   #navcontainer ul ul#sub_1 {
      margin: 70px 0 0;
    }

   #navcontainer ul ul#sub_2 {
      margin: 70px -117px 0;
    }

   #navcontainer ul ul#sub_3 {
      margin: 70px -234px 0;
    }

   #navcontainer ul ul#sub_4 {
      margin: 70px -351px 0;
    }

   #navcontainer ul ul#sub_5 {
      margin: 70px -468px 0;
   }

Und bitte beachte den Punkt 15 der Netiquette bzgl. deiner durchgängigen Kleinschreibung. Vielen Dank.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück