größe von Navigationsleistenelementen anpassen

[BigDane]

Hallo,

ich habe folgendes Problem:

ich möchte auf meiner Seite eine Navigationsleiste integrieren, die insgesammt von der Breite her Bildschirmfüllend ist. Die habe ich bisher anhand einer Tabelle umgesetzt, um mit a:hover untermenüs aufzurufen, klappt alles. Es soll mittig ein leeres Placeholder Element geben, wo ich ein Logo einfügen möche (100px*100px). Nun sollen aber natürlich nicht alle anderen Elemente auch 100üx breit sein, bzw natürlich alle nicht gleichbreit. Wie mache ich das? kann ihc irgendwie mathematische Terme wie [ width: (window.width-100px)/7 ] umsetzen? Das wäre das circa was ich bräuchte.

Vielen lieben Dank!

[Azra]

1. Navigationen mit Tabellen umzusetzen ist veraltet
2. CSS kann kein Mathe
3. Man muss das Rad nicht neu erfinden

Wenn du von "Bildschirmfüllend" sprichst gehe ich davon aus dass diese Navi horizontal ist. Am besten lassen sich diese heute durch eine Liste umsetzen:

HTML

Code: Alles auswählen

<ul id="navigation">
   <li><img src="http://www.groupway.de/Klima_Natur_Tiere_Pflanzen/Tierfreunde/Nutztiere/Pferde/bilder/ihr_logo.gif" alt="Logo"/><a href="#" title="">Startseite</a></li>
   <li><a href="#" title="">Hauptpunkt1</a>
      <ul>
         <li><a href="#" title="">Unterpunkt</a></li>
         <li><a href="#" title="">Unterpunkt</a></li>
         <li><a href="#" title="">Unterpunkt</a></li>
      </ul>
   </li>
   <li><a href="#" title="">Hauptpunkt2</a>
      <ul>
         <li><a href="#" title="">Unterpunkt</a></li>
         <li><a href="#" title="">Unterpunkt</a></li>
         <li><a href="#" title="">Unterpunkt</a></li>
      </ul>
   </li>
   <li class="margin"><a href="#" title="">Hauptpunkt3</a>
      <ul>
         <li><a href="#" title="">Unterpunkt</a></li>
         <li><a href="#" title="">Unterpunkt</a></li>
         <li><a href="#" title="">Unterpunkt</a></li>
      </ul>
   </li>
   <li><a href="#" title="">Hauptpunkt4</a>
      <ul>
         <li><a href="#" title="">Unterpunkt</a></li>
         <li><a href="#" title="">Unterpunkt</a></li>
         <li><a href="#" title="">Unterpunkt</a></li>
      </ul>
   </li>
   <li><a href="#" title="">Kontakt</a></li>
</ul>


CSS

Code: Alles auswählen

/* Grundeinstellungen */
#navigation{margin:0;padding:0;position:relative;list-style-type:none;}#navigation li{position:relative;float:left;margin-right:40px;}

/* Untermenü verstecken/positionieren */
#navigation li ul{margin:0;padding:0;position:absolute;top:26px;left:0;visibility:hidden;clear:both;list-style-type:none;}#navigation li ul li{margin:0;padding:0;}
/* Untermenü anzeigen */
#navigation li:hover ul, #navigation a:hover ul{visibility:visible;}

/* Link Styles Ebene1 */
#navigation li a{padding:3px 20px;display:block;}
#navigation li a:link, #navigation li a:visited{text-decoration:none;color:white;background:#999;}
#navigation li a:hover, #navigation li a:active{text-decoration:none;color:cyan;background:#555;}
/* Link Styles Ebene2 */
#navigation ul li a{text-align:left;padding:3px 10px;width:auto;}
#navigation ul li a:link, #navigation ul li a:visited{}
#navigation ul li a:hover, #navigation ul li a:active{}

/* Logo */
.margin{margin-left:200px;}#navigation img{position:absolute;left:450px;top:-40px;} /* mit "left" und "top" Positionieren */


Wenn du das nimmst und anpasst könnte das Richtige bei heraus kommen. Viel Spaß