|
|||
Komplexe Navigation ohne Tabellen?
Hallo Community,
ich wollte mal fragen ob ihr eine Idee habt wie man solch eine Navigation ohne Tabellen umsetzen könnte: Bisher habe ich das so gelöst: Code:
<table cellpadding="0" cellspacing="0" border="0" class="navigation"> <tr> <td style="background-color: #CCCC66; width: 16%; height: 2px;"></td> <td style="background-color: #0099CC; border-left: 1px solid #000000; width: 16%; height: 2px;"></td> <td style="background-color: #FF9933; border-left: 1px solid #000000; width: 16%; height: 2px;"></td> <td style="background-color: #CC3333; border-left: 1px solid #000000; width: 16%; height: 2px;"></td> <td style="background-color: #66CC33; border-left: 1px solid #000000; width: 16%; height: 2px;"></td> <td style="background-color: #9999CC; border-left: 1px solid #000000; width: 16%; height: 2px;"></td> </tr> <tr> <td id="item1" style="background-color: #CCCC66; width: 16%; font-weight: bold; " onmouseover="navigation('item1', '#CCCC66')" onmouseout="navigation('item1', '#CCCC66')" onclick="window.location='index.php'">HOME</td> <td id="item2" style="background-color: #CCCCCC; border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; width: 16%;" onmouseover="navigation('item2', '#0099CC')" onmouseout="navigation('item2', '#CCCCCC')" onclick="window.location='events.php'">EVENTS</td> <td id="item3" style="background-color: #CCCCCC; border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; width: 16%;" onmouseover="navigation('item3', '#FF9933')" onmouseout="navigation('item3', '#CCCCCC')" onclick="window.location='program.php'">PROGRAM</td> <td id="item4" style="background-color: #CCCCCC; border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; width: 16%;" onmouseover="navigation('item4', '#CC3333')" onmouseout="navigation('item4', '#CCCCCC')" onclick="window.location='band.php'">BAND</td> <td id="item5" style="background-color: #CCCCCC; border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; width: 16%;" onmouseover="navigation('item5', '#66CC33')" onmouseout="navigation('item5', '#CCCCCC')" onclick="window.location='press.php'">PRESS</td> <td id="item6" style="background-color: #CCCCCC; border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; width: 16%;" onmouseover="navigation('item6', '#9999CC')" onmouseout="navigation('item6', '#CCCCCC')" onclick="window.location='contact.php'">CONTACT</td> </tr> <tr> <td style="background-color: #CCCC66; height: 2px;" colspan="6"></td> </tr> </table> Hat vielleicht jemand eine Idee, eventuell mit Div’s? |
Sponsored Links |
|
||||
Re: Komplexe Navigation ohne Tabellen?
Zitat:
eventuell auch mal weniger inline-styles verwenden, scheint ja nur das wenigste dynamisch zu sein
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ... |
Sponsored Links |
|
|||
Ich bin auch für die Listengeschichte. Hier ein Link der ein bisschen weiterhilft:http://css.maxdesign.com.au/listamatic/horizontal01.htm.
Gruß, Philippp |
|
|||
Leider bekomme ich das so wie ich mir das hier vorgestellt habe mit den Listen nicht hin:
http://www.hackfleischbrothers.de/test/index.php Das Problem ist nämlich, dass die Navigation bei jedem Seitenaufruf dynamisch aus der Datenbank generiert wird und ich nicht jedem Item eine eigene Farbe geben kann (ausser ich würde für jedes Item ein eigenes Style-Sheet festlegen, was aber aufgrund der Dynamischengenerierung nicht geht). Ich brauche hier echt hilfe: Code:
<style type="text/css"> #navigation ul li { float: left; display: block; text-align: center; list-style-type: none; } #navigation a { color: #000000; text-decoration: none; background-color: #CCCCCC; border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; display: block; width: 100px; } #navigation a:hover { background-color: #F3F3F3; } #navigation #activeitem a { font-weight: bold; background-color: #CCCC66; } </style> <div id="navigation"> <ul id="navigationlist"> <li id="activeitem">Item 1[*]Item 2[*]Item 3[*]Item 4[*]Item 5[/list]</div> |
|
|||
Ich habe es jetzt fast so wie ich es mir vorgestellt habe bis auf ein kleines Problem mit der breite.
Irgendwie bekomme ich die Navigation nicht auf dieselbe breite wie der Header. Aber seht am besten selbst: http://www.hackfleischbrothers.de/test/test.htm Hilfe! |
|
|||
schau hald wo sie her hast
www.mymtw.de tztz.. /e da ist ja die komplette page fast geklaut.. wenigstens baust sie selber zusammen |
|
||||
Also inspirieren lassen durch andere Seiten ist ok, aber 1:1 kopieren? Nee ...
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
Das ist echt bitter. Das ist das erste mal das ich davon höre das eine komplette Seite übernommen wurde. Ich finde das echt arm. Wer zu faul ist sich selber ranzusetzten - oder keine Zeit hat soll eine Firma oder Freunde dran setzen. Ich hoffe doch das wenigstens gefragt wurde?!
Philippp |
|
|||
Wo ist das bitte eine 1:1 Kopie?
Darf man jetzt auf keiner Website von den Text-Boxen etc. einen Schatten werfen lassen nur weil mTw dies auf ihren Seiten auch so macht? Wo würden wir denn hinkommen wenn sich jeder sein HTML-Code patentieren lässt? Ihr habt vielleicht Vorstellungen… |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Navigation ist nicht mittig | Schokokrapfen | CSS | 29 | 20.09.2011 00:19 |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |